Leaflet: Longitude Wrapping Revisted

[dfaivre]

I have a situation where I want to show the US and Australia, zoomed out. I have a marker in Australia using lat/lon: [-29.5, 143]. With the default view, the marker is not visible, because I assume leaflet thinks that the Australia in view has a longitude of -215 or so. Panning right brings it into view.

I've set worldCopyJump to true, and yes, if I pan left far enough from the initial view, the marker eventually shows. But then its confusing in that a small pan right/left shows/hides the marker, to the end user it seems confusing.

http://jsfiddle.net/dfaivre/JKFgD/

• The initial state of the fiddle should be an empty map, with the US and Australia in view.
• Pan the map west a few degrees. The map flashes, a marker appears
• Pan the map east a few degrees. The map flashes, the marker disappears.
• Change worldCopyJump to false, re-run the fiddle
• You should get an empty map.
• Pan east until you get to Australia again. The marker should now appear

It seems that the expected behavior would always show the marker.

[mourner]

You set the view to longitude -140, and put your marker in longitude 143, so obviously you can't see it. So this is not a Leaflet problem I suppose.

[dfaivre]

Thanks for the quick reply. Maybe a better example: I want to show two markers -- one in California, one in Melbourne, at the same time, with the center of the map over the Pacific. But only one will ever show, depending on what side of the date line the center of the map is. http://jsfiddle.net/dfaivre/9j57N/

[dfaivre]

I suppose one could use all positive longitudes (though this seems less standard then -180 to 180). The challenge there is that if you still want to use worldCopyJump: true to allow for global panning, both markers appear or disappear depending on the which side of the date line the center is on: http://jsfiddle.net/dfaivre/kKk9R/.

Turning worldCopyJump off in this case gets rid of the disappearing marker issue, but now panning back east all the way around to the US, the marker will be gone.

[yohanboniface]

Related work in (slow ;)) progress: https://github.com/Leaflet/Leaflet/pull/1293

[dfaivre]

@yohanboniface -- I saw your issue and (maybe wrongly) still created a new one because I'm more concerned with wrapping, ie treating the map as a globe (I checkout out your branch, looks like you're doing some cool stuff). From some of the other "wrap" issues I saw, @mourner seems to need to satisfy map projections where a globe is not assumed? But as you pointed out in #1293, it would probably be nice to have a default config setting at the map level for how it should behave. I think Google Maps behaves a little more as expected: if I put a marker in Australia and the US, they always show up in Australia and the US, no matter how far I've panned.

Is there another discussion on enabling wrapping at some global config level? Can we start one? I'm willing to help where it makes sense.

[porkloin]

Just another example case on this issue: I'm rendering a map of monitored volcanoes on Alaska's Aleutian chain, some of which are right at the map boundary. I have no control over the data set that I'm given, and the technically correct longitude for a volcano like Semisopochnoi is 179.5977, whereas the longitude for Gareloi is -178.79368. These volcanoes are only a couple hundred miles apart, but I'm unable to see them side by side. It would be ideal if we could render the wrapped content _before_ passing the map boundary, that way any kind of maps that center on the boundary don't suffer from using technically correct longitudes.

[dfaivre]

I'd still love to see a solution for this. Maybe MapBox is working on it?

[micolous]

If you want an ugly way to work around users crossing the date line in your maps:

var map = L.map('map', {maxBounds: [[-90, -180], [90, 180]]});

This will snap the map back whenever a user attempts to cross it. Sadly, it doesn't address the poster's original issue (showing points on both sides of the date line, centred on the Pacific Ocean).

[linuskamb]

I am having the same problem as porkloin (and many others.) I have features, both point and polygon, that are retrieved as geojson. These are all features around the Pacific. With the map centered at +!3, -165, I see all the features in the Eastern pacific. If I drag the map east a touch, then the eastern Pacific features disappear and the western Pacific features appear. I have worldCopyJump:true, and I've tried (to the limits of my control) to use the work-around of setting longitude values to be outside the +/-180 box, to no avail.

This is a serious flaw and, sadly, will likely prevent me from using leaflet, as I am developing software for the National and Pacific tsunami warning centers. The Pacific is the primary view.

[jpwhitaker]

This is pretty hacky but the only way I could solve the problem in @dfaivre's second comment was by making 4 markers like this: http://jsfiddle.net/u90L0oLq/

var positiveLng = ((180+lng) + 180);
var negativeLng = ((-180+lng) - 180);

Is there a better way to do this? My map has 188 markers, I don't want to render 564 if I don't have to.

[ValentinH]

I'm also looking for a solution to this issue. @jpwhitaker one's is a good workaround but it would indeed be nice to have a option to get such a behavior directly.

[benvogler]

I had a similar issue as @linuskamb where our map is centered on the United States but sometimes includes markers in Guam, which would render on the version of Guam across the globe to the East instead of the one closer to the West. Because of our very narrow use case I am just subtracting 360 from any longitude greater than 0 so that they render West of the United States.

I think a robust solution that would apply to most use cases would be to render any markers within a certain number of degrees of the date line twice so that they're visible on either side of wherever the map is centered

[benjheath0]

Has a solution to this been found by anyone?