leaflet.markercluster
Version:
Provides Beautiful Animated Marker Clustering functionality for Leaflet
75 lines (64 loc) • 2.38 kB
HTML
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet-src.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="screen.css" />
<link rel="stylesheet" href="../dist/MarkerCluster.css" />
<link rel="stylesheet" href="../dist/MarkerCluster.Default.css" />
<script src="../dist/leaflet.markercluster-src.js"></script>
<style>
#map {
width:400px;
height:400px;
}
body {margin: 0}
</style>
</head>
<body>
<div id='map'></div>
<button id='button'>Toggle marker dragging</button>
<p>In order to reproduce:
<ul>
<li>Enable marker dragging
<li>Click on the cluster to spiderify
<li>Drag one of the spiderified markers
<li>Disable marker dragging
<li>Enable marker dragging again
<li>The <code>forEach</code> loop of the markerclustergroup will iterate through all the markers, including the invisible ones
<li>A <code>.dragging.enable()</code> call will be made on a marker which is not in the map
</ul>
</p>
<script>
var openStreetMap = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
maxZoom: 22,
minZoom: 3
});
var group = L.markerClusterGroup();
var map = L.map('map', {
center: new L.LatLng(48, 10),
zoom: 7,
layers: [openStreetMap, group]
});
L.control.layers({"openStreetMap": openStreetMap}, {"Group": group}, { collapsed: false }).addTo(map);
var i;
var markers = []
for(i = 0; i < 100; i++)
{
markers[i] = L.marker([48 + (Math.random() - 0.5) * 2, 10 + (Math.random() - 0.5) * 2]);
group.addLayer(markers[i]);
}
document.getElementById("button").addEventListener('click', function()
{
for(i = 0; i < 100; i++)
{
markers[i].setLatLng([48 + (Math.random() - 0.5) * 2, 10 +(Math.random() - 0.5) * 2]);
}
});
</script>
</body>
</html>