Khoi Vu Khoi Vu - 20 days ago 5
Javascript Question

How to display Leaflet markers near the 180° meridian?

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:

Default rendering image

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

I want to show at this point

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

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.

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.