Formatting the MousePosition control output in OpenLayers 3 - 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?

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)

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: ' '
});
see your modified fiddle

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: ' '
});

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: ' '
})
]),

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);