xguaita / leaflet.mapcentercoord

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

Leaflet.MapCenterCoord

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

The initial idea was based on the plugin Leaflet.MousePosition.

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

Examples

http://xguaita.github.io/Leaflet.MapCenterCoord/

Sources in /examples folder

Install

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

• If you want to change the code and build minified versions:
  First, install node.js on your system. Then run npm install to build the minified js and css into /dist

Usage

Add the following line to your map initialization:

L.control.mapCenterCoord().addTo(map);

You can also pass a configuration.

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
latLngFormatter	Function	undefined	Function that takes the lattitude and longitude as arguments and returns a single formatted string, e.g. function (lat, lng) { return lat + " north and " + lng + " west"; }

License

This software is released under the MIT license.

leaflet.mapcentercoord's Issues

DM and DMS formated coordinates: "60" instead of "00"

There's an issue when using DM or DMS formated coordinates when being exactly at the edge of a degree (with DM format) or at the edge of a minute (with DMS format).
By mistake "60" is displayed instead of "00". But not for the whole distance of the "00" coordinate, just for about the half distance.

Examples:

• DM: 32° 60.000' and some movement later: 33° 00.000' before turning into 33 °00.001'
• DMS: 53° 45' 60.0" and some movement later: 53° 46' 00.0" before turning into 53° 46' 00.1"

Coords change when center-zooming

I've noticed that coords change while zooming. Note I'm using options that should ensure no such changes...

doubleClickZoom: 'center',
scrollWheelZoom: 'center',
touchZoom: 'center',

To reproduce, simply note the coords, zoom in/out, and note the coords again. Note you can't use the demo website to test, as it doesn't use the aforementioned options.

I found that if I programmatically go to a location while zoomed in, the bug doesn't manifest. For example...

map.setView(coords, 18);

Now I can zoom in/out and the coords don't change.

Admittedly, the bug may be with leaflet itself. I'm using 1.5.1.

Crosshairs jiggle when map 'thrown' with mouse

1. Go to http://xguaita.github.io/Leaflet.MapCenterCoord/
2. Click and drag on one of the maps. Notice that the crosshairs icon stays relatively stable.
3. Click and drag very quickly and release the mouse - the map should keep moving for a bit even after you've released the mouse button. Notice that the crosshairs icon jiggles all over the place. This happens on chrome and firefox, and also chrome on android.

It seems that when the map is 'thrown' like that with the mouse, the map centre isn't being updated quickly enough and this causes the cross hairs to move with the map, and then jump back to the centre. I can't help but wonder if there's an alternative method that will just overlay the icon on the map without actually adding it to a layer?

Doesn't work anywhere that latitude or longitude are negative.

Because _getLatLngCoord modifies the center point object that is passed and replacing lat and lng with abs(lat) and abs(lng) the control doesn't work properly anywhere that latitude or longitude are negative.

Demo in HTTPs?

Hi all :)

I noticed that the demo has some problems in HTTPs:

https://xguaita.github.io/Leaflet.MapCenterCoord/

Are you aware of that? Thank you so much :)

Zoom in or out, change the coordinates of the center of the map

If the map is created on negative latitud or longitude, using the control to zoom in or to zoom out, set the map center at the absolute values of latitud and longitud, so moving the center of the map far away.
I create the map this way:

    var map = L.map('map').setView([-34.91355 , -55.04537], 9);

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    L.control.mapCenterCoord().addTo(map);

I would appreciate if you help me solve this problem.

Maybe this two facts is helpful for solver this bug:

1. If i first pan the map and then zoom in the map, works fine.
2. Zoom in or zoom out with mouse wheel also works fine

How to get the Coord after moving the map?

Hi Guys Maybe it's a simple question

But I would like to capture the coords and put in a hidden field..
Can anyone help me?

Test on Leaflet 1.0.0

Please test on Leaflet 1.0.0-beta2 and write a note in the project's README about compatibility with Leaflet versions.

Remove 'dist' files from repo

Implement the well-known convention of not keeping built/compiled files in a version control system (git repo), automate builds of the code when users pull the project via npm install.

Also make sure that package.json has the right dependencies for automatically building when installing, and the built filepaths match the main section of package.json.

Leaflet coding conventions

Please change the factory name from L.control.MapCenterCoord to L.control.mapCenterCoord (note the lowercase 'm') to follow the conventions used in Leaflet code.

Publish to npm

Hi, the package is not available on npm registry. Is this possible? I am able to assist with this (or even publish it when sharing the proper rights to do so). It would be a shame to fork the repository solely for publishing on npm.

Issue with switching plugin off and solution

Hi,
thank you for making this plugin available.
I created a button to turn it on and off.
When turning it off, not all event listeners were turned off.

I think it was a small typo in onRemove on line 45 of L.Control.MapCenterCoord.js.

Current code of plugin:

38 onRemove: function (map) {
39     // remove icon's DOM elements and listeners
40    if (this.options.icon) {
41      map.getPanes().overlayPane.removeChild(this._iconEl);
42      map.off('viewreset', this._onReset, this);
43    }
44    map.off('move', this._onMapMove, this);
45    map.off('moveend', this._onMapMove, this);  /* _onMapMove should be _onMapMoveEnd */
46  },

Correction:

38 onRemove: function (map) {
39    // remove icon's DOM elements and listeners
40    if (this.options.icon) {
41      map.getPanes().overlayPane.removeChild(this._iconEl);
42      map.off('viewreset', this._onReset, this);
43    }
44    map.off('move', this._onMapMove, this);
45    map.off('moveend', this._onMapMoveEnd, this);  /* corrected */
46  },

With this correction my button turns plugin on and off as expected.

Cross hairs hidden by markers

See example here: https://gist.github.com/tstibbs/c07574f89c0e47b9b3d2ec7df8c7e0c9#file-leafletscreenposition-html

If you have both markers and cross hairs, the markers appear on top of the cross hairs. If you happened to have a cluster of markers around the centre of your map, it would make it impossible to see the cross hairs.