How to display Leaflet markers near the 180° meridian?
Just make sure that the longitudes of your markers are in the range 0..360
instead of in the range -180..180
. See a working example.
i.e. instead of
L.marker([0,170]).addTo(map);
L.marker([0,-180]).addTo(map);
L.marker([0,-170]).addTo(map);
Do something like
L.marker([0,170]).addTo(map);
L.marker([0,180]).addTo(map);
L.marker([0,190]).addTo(map);
In other words, if a longitude is smaller than zero, add 360 to it. You might want to use L.Util.wrapNum(lng, [0,360], true)
instead, if you plan to filter all your longitudes at once.
A similar issue has been encountered and reported on the Leaflet Github
The solution is to increase the longitude of your markers if their initial longitude is below 0.
var totalMarkers = markerPositions.length;
for(var i = 0; i<totalMarkers; i++){
var mData = markerPositions[i];
if (mData.lon < 0) {
mData.lon += 360;
}
L.marker([mData.lat, mData.lon]).addTo(map);
}
Another approach is to leverage the Leaflet.RepeatedMarkers plugin, which will display a copy of each marker per 360 degrees of longitude:
Applying this to markers near the antimeridian works as well, e.g.:
var myRepeatingMarkers = L.gridLayer.repeatedMarkers().addTo(map);
L.polyline([[-85,180],[85,180]]).addTo(map);
L.polyline([[-85,-180],[85,-180]]).addTo(map);
myRepeatingMarkers.addMarker(L.marker([0,140]));
myRepeatingMarkers.addMarker(L.marker([0,150]));
myRepeatingMarkers.addMarker(L.marker([0,160]));
myRepeatingMarkers.addMarker(L.marker([0,170]));
myRepeatingMarkers.addMarker(L.marker([0,180]));
myRepeatingMarkers.addMarker(L.marker([0,-170]));
myRepeatingMarkers.addMarker(L.marker([0,-160]));
myRepeatingMarkers.addMarker(L.marker([0,-150]));
myRepeatingMarkers.addMarker(L.marker([0,-140]));
will display something like:
Check out the live example for using Leaflet.repeatedMarkers with markers near the antimeridian.