From e71cf6273fddb58359aee95d5a47a8b4dffc31e0 Mon Sep 17 00:00:00 2001 From: danzel Date: Fri, 13 Jul 2012 16:14:42 +1200 Subject: [PATCH] Wow, didn't think I'd figure that out! Get zoom out working correctly by adding new clusters to the map immediately, but only showing them after the animation has played --- src/MarkerClusterGroup.js | 26 +++++++++----------------- 1 file changed, 9 insertions(+), 17 deletions(-) diff --git a/src/MarkerClusterGroup.js b/src/MarkerClusterGroup.js index 75672b0a3..47eb25547 100644 --- a/src/MarkerClusterGroup.js +++ b/src/MarkerClusterGroup.js @@ -264,19 +264,6 @@ L.MarkerClusterGroup = L.FeatureGroup.extend({ L.FeatureGroup.prototype.onAdd.call(this, map); // LayerGroup this._generateInitialClusters(); - this._map.on('zoomstart', function() { - console.log(new Date().getTime() + ' zoomstart ' + this._map._zoom); - if (this._animationZoomOutTimeout) { - console.log(new Date().getTime() + ' clear'); - this._animationZoomOutTimeoutFunction(); - clearTimeout(this._animationZoomOutTimeout); - this._animationZoomOutTimeout = null; - this._animationZoomOutTimeoutFunction = null; - } - }, this); - this._map.on('zoomanim', function() { - console.log(new Date().getTime() + ' zoomanim ' + this._map._zoom); - }, this); this._map.on('zoomend', this._zoomEnd, this); this._map.on('moveend', this._moveEnd, this); }, @@ -486,21 +473,26 @@ L.MarkerClusterGroup.include(!L.DomUtil.TRANSITION ? { var c = newClusters[i]; c._recursivelyAnimateChildrenIn(this._map.latLngToLayerPoint(c.getLatLng()).round(), depth); + + if (bounds.contains(c._latlng)) { //Add the new cluster but have it be hidden (so it gets animated, display=none stops transition) + c._addToMap(); + c._icon.style.visibility='hidden'; + } } this._inZoomAnimation = true; -//return; + var me = this; console.log(new Date().getTime() + ' called at zoom ' + me._map._zoom); - //TODO: Use the transition timing stuff to make this more reliable + //TODO: Maybe use the transition timing stuff to make this more reliable this._animationZoomOutTimeoutFunction = function () { map._mapPane.className = map._mapPane.className.replace(' leaflet-cluster-anim', ''); console.log(new Date().getTime() + ' adding at zoom ' + me._map._zoom); for (i = 0; i < newClusters.length; i++) { var cl = newClusters[i]; - if (bounds.contains(cl._latlng)) { - cl._addToMap(); + if (cl._icon) { //Make those clusters that are now there, visible + cl._icon.style.visibility='visible'; } cl._recursivelyRemoveChildrenFromMap(depth); }