CODEWITHSUNDEEP
javascriptleafletmapsword-wrapgeography
jc315
jc315

Reputation: 107

Wrap GeoJSON objects around Leaflet.js map

I have a Leaflet.js map consisting of Marker and GeoJSON objects. Is there a simple way to wrap these so they appear periodically every 360 degrees? Basically, I want the entire map to become periodic.

Here is an illustration of the sort of objects I have (excluding the background TileLayer, which I don't have):

Map with broken great circles

How can I periodically repeat this data so the great circles aren't broken, but appear intact every 360 degrees as the map is scrolled left or right?

Upvotes: 2

Views: 1773

Answers (1)

IvanSanchez
IvanSanchez

Reputation: 19069

One approach is to leverage Leaflet.VectorGrid. As you can see in the Leaflet.VectorGrid GeoJSON example, the data will wrap. (Architecturally, this happens because VectorGrid loads a vector tile with the same coordinates when wrapping around). Be advised that some artifacts might appear.

Another approach is to simply duplicate your data (adding 360 to each longitude). Do it a couple of times per side, and use the WorldCopyJump option to prevent users from scrolling too far.

Upvotes: 5

Related Questions