Leaflet Mulitple Dataset Clusters

by Alex Azuero

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/example/screen.css">
<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css">
<script src="https://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
<script src="https://leaflet.github.io/Leaflet.markercluster/example/realworld.388.js"></script>
<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>

CSS

.mycluster {
			width: 40px;
			height: 40px;
			background-color: greenyellow;
			text-align: center;
			font-size: 24px;
		}

JavaScript

var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
				maxZoom: 18,
				attribution: '&copy; <a                         href="http://osm.org/copyright">OpenStreetMap</a> contributors, Points &copy 2012 LINZ'
			}),
			latlng = L.latLng(-37.82, 175.24);

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

		var markers_original = L.markerClusterGroup();
		
        var baseballIcon = L.icon({
			iconUrl: 'http://leafletjs.com/examples/baseball-marker.png',
			iconSize: [32, 37],
			iconAnchor: [16, 37],
			popupAnchor: [0, -28]
		});

        var customIcon = L.icon({
			iconUrl: 'http://files.softicons.com/download/web-icons/vista-map-markers-icons-by-icons-land/png/256x256/MapMarker_Marker_Outside_Chartreuse.png',
			iconSize: [32, 37],
			iconAnchor: [16, 37],
			popupAnchor: [0, -28]
		});


		for (var i = 0; i < addressPoints.length; i++) {
			var a = addressPoints[i];
			var title = a[2];
			var marker = L.marker(new L.LatLng(a[0], a[1]), { title: title, icon: baseballIcon });
			marker.bindPopup(title);
			markers_original.addLayer(marker);
		}

		map.addLayer(markers_original);



    //Custom radius and icon create function
		var markers = L.markerClusterGroup({
			maxClusterRadius: 120,
			iconCreateFunction: function (cluster) {
				var markers = cluster.getAllChildMarkers();
				var n = 0;
				for (var i = 0; i < markers.length; i++) {
					n += markers[i].number;
				}
				return L.divIcon({ html: n, className: 'mycluster', iconSize: L.point(40, 40) });
			},
			//Disable all of the defaults:
			spiderfyOnMaxZoom: false, showCoverageOnHover: false, zoomToBoundsOnClick: false
		});


		function populate() {
			for (var i = 0; i < 100; i++) {
				var m = L.marker(getRandomLatLng(map), { title: i,icon: customIcon });
				m.number = i;
				markers.addLayer(m);
			}
			return false;
		}
		function populateRandomVector() {
			for (var i = 0, latlngs = [], len = 20; i < len; i++)...