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:

Leaflet.repeatedmarkers screenshot

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:

Leaflet.repeatedmarkers screenshot, with markers near the antimeridian Check out the live example for using Leaflet.repeatedMarkers with markers near the antimeridian.