Leaflet MapBox Issue of poly line which crosses the antimeridian

Question

I am using mapbox leaflet js in my application "https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js". Previously i was using google map, I am facing an issue when i draw a polyline in map which crosses the international datelines, the Line which is drawn on map using MapBOx is not wrapped in one copy of world as in Google map.

I had done lot of Reaserach and found that the coordinates which are crossing the dateline add/subtract 360 from the longitude, which will draw a contineous line on map.

But as my client is habitual with google map services so he needs the polyline to be displayed as in google map.

I had attached a Zip file which contains three Screenshots

1) Original_functionality_mapBox.png : This image shows when coordinates of polyline which crosses the international date line are not changed.

2) change_360_Degree.PNG : This image shows when coordinates of polyline which crosses the international date line are changed by subtracting 360 from longitude.

3) google.PNG: when the original coordinates are passed to google map, it automatically adjust the polyline which crosses the international date line.

Please help me urjently to do the same as in google map.

                     1(Original_functionality_mapBox.png)

                     2(change_360_Degree.PNG)

                     3(google.PNG)

Answer 1

Ah, antimeridian artifacts. See https://stackoverflow.com/questions/40532496/wrapping-lines-polygons-across-the-antimeridian-in-leaflet-js for some similar problems. Let me quote two relevant bits:

Leaflet can handle longitudes outside the [-180..180] range. In Leaflet, longitudes wrap only the TileLayer's tiles and not markers or polylines.

In other words: a line from [0, 179] to [0, -179] is 358 degrees long, but a line from [0, 179] to [0, 181] is two degrees long.

You already know this, judging by your second screenshot.

Leaflet can not (currently) duplicate geometries in order to display one geometry per copy of the world (per 360-degrees-of-longitude extend). You can fake this by making more than one copy of your geometry, offset by 360 degrees each, and using the worldCopyJump option to prevent the user from panning around too much.