leaflet.repeatedmarkers
v0.1.1
Published
A LeafletJS.com plugin to display markers when wrapping around the globe, once every 360 degrees of longitude.
Downloads
704
Readme
Leaflet.RepeatedMarkers
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.
Usage
Include the Leaflet JS and CSS in your HTML page:
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/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 );
setTimeout(function(){
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.Polyline
s and L.Polygon
s and nested L.LayerGroup
s, 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.
Legalese
Licensed under LGPL3. Because why not. See the LICENSE file for details.