FM / example

/opt/canhelp/node_modules/leaflet.markercluster/example/

/opt/canhelp/node_modules/leaflet.markercluster/example

Name	Size	Mode	Actions
old-bugs/	-	0755	rm
geojson-sample.js	1018	0755	edit dl rm
geojson.html	2442	0755	edit dl rm
map.png	389888	0755	edit dl rm
marker-clustering-convexhull.html	2410	0755	edit dl rm
marker-clustering-custom.html	3087	0755	edit dl rm
marker-clustering-dragging.html	2751	0755	edit dl rm
marker-clustering-everything.html	2676	0755	edit dl rm
marker-clustering-geojson.html	2583	0755	edit dl rm
marker-clustering-pane.html	3048	0755	edit dl rm
marker-clustering-realworld-maxzoom.388.html	1707	0755	edit dl rm
marker-clustering-realworld-mobile.388.html	1604	0755	edit dl rm
marker-clustering-realworld.388.html	1685	0755	edit dl rm
marker-clustering-realworld.10000.html	1709	0755	edit dl rm
marker-clustering-realworld.50000.html	2867	0755	edit dl rm
marker-clustering-singlemarkermode.html	1945	0755	edit dl rm
marker-clustering-spiderfier.html	2046	0755	edit dl rm
marker-clustering-zoomtobounds.html	2002	0755	edit dl rm
marker-clustering-zoomtoshowlayer.html	2008	0755	edit dl rm
marker-clustering.html	2858	0755	edit dl rm
mobile.css	74	0755	edit dl rm
realworld.388.js	15241	0755	edit dl rm
realworld.10000.js	388396	0755	edit dl rm
realworld.50000.1.js	965032	0755	edit dl rm
realworld.50000.2.js	963753	0755	edit dl rm
remove-geoJSON-when-spiderfied.html	3510	0755	edit dl rm
screen.css	485	0755	edit dl rm

Edit: /opt/canhelp/node_modules/leaflet.markercluster/example/marker-clustering-realworld.50000.html (2867B)

<!DOCTYPE html>
<html>
<head>
	<title>Leaflet debug page</title>

</head>
<body>

<div id="progress"><div id="progress-bar"></div></div>
	<div id="map"></div>
	<span>Mouse over a cluster to see the bounds of its children and click a cluster to zoom to those bounds</span>
	<script type="text/javascript">
		var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
				maxZoom: 18,
				attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Points &copy 2012 LINZ'
			}),
			latlng = L.latLng(-37.79, 175.27);

var map = L.map('map', { center: latlng, zoom: 13, layers: [tiles] });

var progress = document.getElementById('progress');
		var progressBar = document.getElementById('progress-bar');

function updateProgressBar(processed, total, elapsed, layersArray) {
			if (elapsed > 1000) {
				// if it takes more than a second to load, display the progress bar:
				progress.style.display = 'block';
				progressBar.style.width = Math.round(processed/total*100) + '%';
			}

if (processed === total) {
				// all markers processed - hide the progress bar:
				progress.style.display = 'none';
			}
		}

var markers = L.markerClusterGroup({ chunkedLoading: true, chunkProgress: updateProgressBar });

var markerList = [];

//console.log('start creating markers: ' + window.performance.now());

for (var i = 0; i < addressPoints.length; i++) {
			var a = addressPoints[i];
			var title = a[2];
			var marker = L.marker(L.latLng(a[0], a[1]), { title: title });
			marker.bindPopup(title);
			markerList.push(marker);
		}
		for (var i = 0; i < addressPoints2.length; i++) {
			var a = addressPoints2[i];
			var title = a[2];
			var marker = L.marker(L.latLng(a[0], a[1]), { title: title });
			marker.bindPopup(title);
			markerList.push(marker);
		}

//console.log('start clustering: ' + window.performance.now());

markers.addLayers(markerList);
		map.addLayer(markers);

//console.log('end clustering: ' + window.performance.now());
	</script>
</body>
</html>

Leaflet debug page

Mouse over a cluster to see the bounds of its children and click a cluster to zoom to those bounds