Formatting the MousePosition control output in OpenLayers 3

Question

I'm showing the mouse position in OpenLayers 3 with the following control

var mousePositionControl = new ol.control.MousePosition({
    coordinateFormat: ol.coordinate.createStringXY(2),
    projection: 'EPSG:4326',   
    undefinedHTML: ' '
});

But the result shows the mouse position as Lon,Lat rather than Lat,Lon.

Here's a jsfiddle example.

How can I reverse the order so that it's Lat,Lon?

Megalo

Answer 1

What works for me to add a variety of controls incl Lat, Long is:

var controls = [
  new ol.control.Attribution(),
  new ol.control.MousePosition({
    projection: 'EPSG:4326',
    coordinateFormat: function(coordinate) {
      return ol.coordinate.format(coordinate, '{y}, {x}', 4);
    }
  }),
  new ol.control.ScaleLine(),
  new ol.control.Zoom(),
  new ol.control.ZoomSlider(),
  new ol.control.ZoomToExtent(),
  new ol.control.FullScreen()
];

(modified from the book of openlayers 3)

Warbler

Answer 2

You change your coordinateFormat - "standard function" to a custom function:

var myFormat = function(dgts)
{
  return (
    function(coord1) {
        var coord2 = [coord1[1], coord1[0]]; 
      return ol.coordinate.toStringXY(coord2,dgts);
  });        
}

var mousePositionControl = new ol.control.MousePosition({
    coordinateFormat: myFormat(2), // <--- change here
    projection: 'EPSG:4326',
    className: 'custom-mouse-position',
    target: document.getElementById('mouse-position'),
    undefinedHTML: '&nbsp;'
});

see your modified fiddle

Alloplasm

Answer 3

An alternative:

var template = 'LatLon: {y}, {x}';

var mousePositionControl = new ol.control.MousePosition({
    coordinateFormat: function(coord) {return ol.coordinate.format(coord, template, 2);},
    projection: 'EPSG:4326',   
    undefinedHTML: ' '
    });

Grearson

Answer 4

Also helpful to display in Degrees, Minutes, Seconds:

controls: ol.control.defaults().extend([
      new ol.control.ScaleLine({
          units: 'nautical'
      }),
      new ol.control.MousePosition({
          coordinateFormat: function(coord) {
              return ol.coordinate.toStringHDMS(coord);
          },
          projection: 'EPSG:4326',
          className: 'custom-mouse-position',
          target: document.getElementById('mouse-position'),
          undefinedHTML: ' '
        })
    ]),

Unfruitful

Answer 5

Works in OpenLayers 3.7.0. Using proj4js to reproject coordinates to a different projection due to map view being in 'EGPS:3857':

var proj1 = proj4.defs('EPSG:4326');
var proj2 = proj4.defs('EPSG:3857');

var myFormat = function(digits) {
  return (
    function(originalCoordinates) {
      var reprojectedCoordinates = proj4(proj2, proj1).forward(originalCoordinates);
      var switchedCoordinates = [reprojectedCoordinates[1], reprojectedCoordinates[0]];
      return ol.coordinate.toStringXY(switchedCoordinates, digits);
    }
  );
}

var mousePositionControl = new ol.control.MousePosition({
  coordinateFormat: mojFormat(10),
  projection: 'ESPG:4326',
  undefinedHTML: '&nbsp'
});
// map.addControl(mousePositionControl);  //equivalent to setMap
mousePositionControl.setMap(map);

Zymogenic