MapCenterCoord

A Leaflet control to display the coordinates of the map center, especially useful on touch/mobile devices

View project on GitHub

Usually in mobile or touch devices there is no pointer. The alternative is, for example, display the coordinates of the map center.

Usage

  • Download latest release

    • Source code in /src folder
    • Minified versions in /dist
  • Include js and css files located in the /dist folder (production) or /src (development)

<!-- Production--> 
<link rel="stylesheet" href="dist/L.Control.MapCenterCoord.min.css" />
<script src="dist/L.Control.MapCenterCoord.min.js"></script>
<!-- Development / debug --> 
<link rel="stylesheet" href="src/L.Control.MapCenterCoord.css" />
<script src="src/L.Control.MapCenterCoord.js"></script>
  • Then create a MapCenterCoord control and add it to map:
L.control.mapCenterCoord().addTo(map);


Source code...

You can also add configuration parameters.

Configuration options

The MapCenterCoord control inherits options from Leaflet Controls.

Option Type Default Description
position String 'bottomleft' The standard Leaflet.Control position parameter
icon Boolean true Shows crosshair icon on map center
onMove Boolean false Update the coordinates of the map center while dragging
template String '{y} | {x}' Display template
latlngFormat String 'DD' Show lat/lng coordinates in 3 possible formats:
Decimal degrees 'DD' (DDD.DDDDD°)
Degrees and decimal minutes 'DM' (DDD° MM.MMM')
Degrees, minutes and seconds 'DMS' (DDD° MM' SS.S")
latlngDesignators Boolean false Show N-S and E-W
projected Boolean false Show projected coordinates
formatProjected String '#.##0,0' Number format mask for projected coordinates.
JavaScript Number Formatter project: sample/help page


Examples

DM and designators

Degrees and decimal minutes. Show N-S and E-W.

L.control.mapCenterCoord({
  latlngFormat: 'DM',
  latlngDesignators: true
}).addTo(map);


Source code...

DMS

Degrees, minutes and seconds.

L.control.mapCenterCoord({
  latlngFormat: 'DMS'
}).addTo(map);


Source code...

Projected coordinate system and change crosshair icon

Show projected coordinates and change crosshair icon.

  • Link proj4.js library and Proj4Leaflet in your HTML document, define projection and configure map:
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.12/proj4.js">
</script>
<script src="./lib/proj4leaflet.min.js"></script>
var etrs89N31 = new L.Proj.CRS(
  "EPSG:25831", "+proj=utm +zone=31 +ellps=GRS80 +units=m +no_defs", {
  origin: [238379.2278, 4265559.3497],
  resolutions: [
    305.75, 152.87, 76.437, 38.219, 19.109, 9.5546, 4.7773, 2.3887, 1.1943, 0.5972
  ]
});

...

var map = L.map('map', {
  crs: etrs89N31,
  center: [39.588, 2.935],
  zoom: 0,
  layers: [orto],
  continuousWorld: true
});
  • Define new crosshair icon using css:
.leaflet-control-mapcentercoord-icon {
  background: url(../dist/icons/MapCenterCoordIcon2.svg) 50% 50% no-repeat;
}
  • Configure MapCenterCoord control (update map center coordinates while dragging, no decimals and edit template):
L.control.mapCenterCoord({
  iconFile: 'MapCenterCoordIcon2.png',
  template: '<b>ETRS89 UTM31N</b><br>x:{x} y:{y}',
  projected: true,
  onMove: true,
  formatProjected: '#.##0,'
}).addTo(map);


Source code...

Requirements

Leaflet v7.x
Tested ok on Leaflet 1.0 beta2

Some tested platforms

Android 4.4.2: Google Chrome 47 and stock browser
iOS 9.2: Safari

Desktops: Windows 7, Windows 10, Ubuntu 14.04 LTS
Google Chrome 47, Firefox 43, Microsoft Internet Explorer 10, 11 and Edge 25