Wrap GeoJSON objects around Leaflet.js map

Question

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

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?

Answer 1

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.