javascript - How to display Leaflet markers near the 180° meridian?

Question

I am using Leaflet 1.0.0-rc.2+e02b5c9. I know the default is rendering all markers, polylines ... from longitude -180 to 180 as screen shot here:

However, I want to show the map as this longitude I want to show at this point (It is middle sea between Japan and US):

but you see all the markers are not rendered on the right side. Even though, If i set

worldCopyJump: true

when I drag to the right, all markers are appeared on the right but they are disappeared on the left and vice versa. Actually, I want they are appeared at the same time.

Any ideas to fix that??

Answer 1

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.