Working towards removing markers from a MarkerClusterGroup. Currently works for markers that are not in a cluster or those that are that are in clusters of size >= 2.

2026-07-26 00:18:03 +02:00 · 2012-07-12 15:20:55 +12:00
parent fbe9df1d3a
commit 4df7bdc9c2
3 changed files with 88 additions and 5 deletions
@@ -58,7 +58,8 @@
 <body>

 	<div id="map"></div>
-	<button id="populate">Populate with 10 markers</button>
+	<button id="populate">Populate 1 marker</button>
+	<button id="remove">Remove 1 marker</button>

 	<script type="text/javascript">

@@ -70,10 +71,13 @@
 		var map = new L.Map('map', {center: latlng, zoom: 15, layers: [cloudmade]});

 		var markers = new L.MarkerClusterGroup();
+		var markersList = [];

 		function populate() {
 			for (var i = 0; i < 100; i++) {
-				markers.addLayer(new L.Marker(getRandomLatLng(map)));
+				var m = new L.Marker(getRandomLatLng(map));
+				markersList.push(m);
+				markers.addLayer(m);
 			}
 			return false;
 		}
@@ -115,11 +119,15 @@
 	northEast = bounds.getNorthEast(),
 	lngSpan = northEast.lng - southWest.lng,
 	latSpan = northEast.lat - southWest.lat;
-
-			markers.addLayer(new L.Marker(new L.LatLng(
+var m = new L.Marker(new L.LatLng(
 					southWest.lat + latSpan * 0.5,
-					southWest.lng + lngSpan * 0.5)));
+					southWest.lng + lngSpan * 0.5));
+markersList.push(m);
+			markers.addLayer(m);
 		};
+		L.DomUtil.get('remove').onclick = function () {
+			markers.removeLayer(markersList.pop());
+		}
 	</script>
 </body>
 </html>
@@ -69,6 +69,45 @@ L.MarkerCluster = L.Marker.extend({
 		L.FeatureGroup.prototype.addLayer.call(this._group, this);
 	},

+	//Removes the given node from this marker cluster (or its child as required)
+	//Returns true if it (or its childCluster) removes the marker
+	_recursivelyRemoveChildMarker: function(layer) {
+		var markers = this._markers,
+			childClusters = this._childClusters,
+			newChildCount = 0,
+			i;
+
+		//Check our children
+		for (i = markers.length - 1; i >= 0; i--) {
+			if (markers[i] == layer) {
+				markers.splice(i, 1);
+				//TODO? Recalculate bounds
+		
+				this._childCount--;
+				if (this._icon) {
+					this.setIcon(this._group.options.iconCreateFunction(this._childCount));
+				}
+				return true;
+			}
+		}
+
+		//Otherwise check our childClusters
+		for (i = childClusters.length - 1; i >= 0; i--) {
+			if (childClusters[i]._recursivelyRemoveChildMarker(layer)) {
+				this._childCount--;
+				//TODO: If child is now 1 then remove it and add a marker
+				//TODO? Recalculate bounds
+
+				if (this._icon) {
+					this.setIcon(this._group.options.iconCreateFunction(this._childCount));
+				}
+				return true;
+			}
+		}
+
+		return false;
+	},
+
 	_recursivelyAnimateChildrenIn: function (center, depth) {
 		var markers = this._markers,
 		    markersLength = markers.length,
@@ -181,6 +181,7 @@ L.MarkerClusterGroup = L.FeatureGroup.extend({
 		    current = this._markersAndClustersAtZoom[zoom],
 		    newClusters = this._cluster(current.clusters, current.unclustered, [layer], zoom);

+		//TODO: At the moment we blow away all other zoom levels, but really we could probably get away with not doing that
 		this._highestZoom = this._zoom = zoom;
 		this._markersAndClustersAtZoom = {};
 		this._markersAndClustersAtZoom[zoom] = newClusters;
@@ -211,6 +212,41 @@ L.MarkerClusterGroup = L.FeatureGroup.extend({
 	},

 	removeLayer: function (layer) {
+		var current = this._markersAndClustersAtZoom[this._map._zoom],
+			i = current.unclustered.indexOf(layer),
+			cluster, result;
+
+		//Remove the marker
+		L.FeatureGroup.prototype.removeLayer.call(this, layer);
+
+		if (i !== -1) //Is unclustered at the current zoom level
+		{
+			current.unclustered.splice(i, 1);
+
+			//blow away all parent levels as they are now wrong
+			for (i in this._markersAndClustersAtZoom)
+			{
+				if (i > this._map._zoom) {
+					delete this._markersAndClustersAtZoom[i];
+				}
+			}
+			//TODO: This could probably use something like below and then remove the marker from the map
+		}
+		else //it is a child of a cluster
+		{
+			//Find the cluster
+			for (i = current.clusters.length - 1; i >= 0; i--) {
+				var c = current.clusters[i];
+				
+				if (c._recursivelyRemoveChildMarker(layer)) {
+					if (c._childCount == 1) {
+						//TODO remove cluster and add individual marker
+					}
+					break;
+				}
+			};
+		}
+

 		//TODO Hrm....
 		//Will need to got through each cluster and find the marker, removing it as required, possibly turning its parent from a cluster into an individual marker.