From 22063a28313dc610864fc079f901de6640cf7664 Mon Sep 17 00:00:00 2001 From: danzel Date: Thu, 6 Sep 2012 16:12:02 +1200 Subject: [PATCH] Add animateAddingMarkers. It set to true (default false) then adding markers after adding the MarkerClusterGroup to the map will animate them in (like previous behaviour). If false they will just be directly added to clusters with no animation which is better for performance especially when bulk adding markers to the map. Refs #51 --- README.md | 1 + src/MarkerClusterGroup.js | 30 +++++++++++++++++++++--------- 2 files changed, 22 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 7fa2f4c4f..096381218 100644 --- a/README.md +++ b/README.md @@ -51,6 +51,7 @@ Check out the [custom example](http://danzel.github.com/Leaflet.markercluster/ex **maxClusterRadius**: The maximum radius that a cluster will cover from the central marker (in pixels). Default 80. Decreasing will make more smaller clusters. **singleMarkerMode**: If set to true, overrides the icon for all added markers to make them appear as a 1 size cluster **skipDuplicateAddTesting**: By default we check if a marker already exists in the cluster when addLayer is called. To disable this behaviour set this to true. You must only do this if you know you will not try add markers that are already in the cluster. Provides a slight performance boost to addLayer when called after the MarkerClusterGroup is on the map. +**animateAddingMarkers**: If set to true then adding individual markers to the MarkerClusterGroup after it has been added to the map will add the marker and animate it in to the cluster. Defaults to false as this gives better performance when bulk adding markers. ### Events If you register for click, mouseover, etc events just related to Markers in the cluster. diff --git a/src/MarkerClusterGroup.js b/src/MarkerClusterGroup.js index 077807727..702abfd38 100644 --- a/src/MarkerClusterGroup.js +++ b/src/MarkerClusterGroup.js @@ -16,7 +16,11 @@ L.MarkerClusterGroup = L.FeatureGroup.extend({ disableClusteringAtZoom: null, - skipDuplicateAddTesting: false + skipDuplicateAddTesting: false, + + //Whether to animate adding markers after adding the MarkerClusterGroup to the map + // If you are adding individual markers set to true, if adding bulk markers leave false for massive performance gains. + animateAddingMarkers: false }, initialize: function (options) { @@ -72,8 +76,11 @@ L.MarkerClusterGroup = L.FeatureGroup.extend({ var newCluster = this._topClusterLevel._recursivelyAddLayer(layer, this._topClusterLevel._zoom - 1); - this._animationAddLayer(layer, newCluster); - + if (this.options.animateAddingMarkers) { + this._animationAddLayer(layer, newCluster); + } else { + this._animationAddLayerNonAnimated(layer, newCluster); + } return this; }, @@ -425,6 +432,16 @@ L.MarkerClusterGroup = L.FeatureGroup.extend({ ne = map.unproject(new L.Point(bounds.max.x + width, bounds.max.y + height)); return new L.LatLngBounds(sw, ne); + }, + + //Shared animation code + _animationAddLayerNonAnimated: function (layer, newCluster) { + if (newCluster === true) { + L.FeatureGroup.prototype.addLayer.call(this, layer); + } else if (newCluster._childCount === 2) { + newCluster._addToMap(); + newCluster._recursivelyRemoveChildrenFromMap(newCluster._bounds, this._map.getMaxZoom()); //getMaxZoom will always get all children + } } }); @@ -443,12 +460,7 @@ L.MarkerClusterGroup.include(!L.DomUtil.TRANSITION ? { this._topClusterLevel._recursivelyAddChildrenToMap(null, newZoomLevel - this._topClusterLevel._zoom + 1, this._getExpandedVisibleBounds()); }, _animationAddLayer: function (layer, newCluster) { - if (newCluster === true) { - L.FeatureGroup.prototype.addLayer.call(this, layer); - } else if (newCluster._childCount === 2) { - newCluster._addToMap(); - newCluster._recursivelyRemoveChildrenFromMap(newCluster._bounds, this._map.getMaxZoom()); //getMaxZoom will always get all children - } + this._animationAddLayerNonAnimated(layer, newCluster); } } : {