A LeafletJS.com plugin to display markers when wrapping around the globe, once every 360 degrees of longitude.

Downloads in past


0.1.15 years ago6 years agoMinified + gzip package size for leaflet.repeatedmarkers in KB


A LeafletJS plugin to display markers when wrapping around the globe, once every 360 degrees of longitude.
This leverages Leaflet's GridLayer, so that each marker is shown once for each zoom-level-zero tile.
See a live demo.
Screenshot showing this plugin in action


Include the Leaflet JS and CSS in your HTML page:
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"></script>

Include the Leaflet.RepeatedMarkers javascript file too:
<script src='https://unpkg.com/leaflet.repeatedmarkers@latest/Leaflet.RepeatedMarkers.js'></script>

Then, you can create an instance of L.GridLayer.RepeatedMarkers on your JS code. Note that RepeatedMarkers is a subclass of L.GridLayer, hence according to the Leaflet conventions its class name is L.GridLayer.RepeatedMarkers and its factory method is L.gridLayer.repeatedMarkers:
var myRepeatingMarkers = L.gridLayer.repeatedMarkers().addTo(map);

Then, use the addMarker() method to add some markers:
myRepeatingMarkers.addMarker(   L.marker([0, 0])   );

If you store references to your markers, then you can also use the removeMarker() method later:
var nullIslandMarker = L.marker([0, 0]);
myRepeatingMarkers.addMarker( nullIslandMarker  );
    myRepeatingMarkers.removeMarker( nullIslandMarker );
}, 10000);

Possible FAQ

  • "How do I do this but for lines/polygons?"

This is only for point markers. The code could be adapted to support L.Polylines and L.Polygons and nested L.LayerGroups, but that would require some extra work. If you're willing to do such adaptation, then merge requests are welcome.
Also, Leaflet.VectorGrid.Slicer already provides similar functionality for lines/polygons.


Licensed under LGPL3. Because why not. See the LICENSE file for details.