diff --git a/src/MarkerCluster.Spiderfier.js b/src/MarkerCluster.Spiderfier.js index 5a69f8cfd..28b1f0508 100644 --- a/src/MarkerCluster.Spiderfier.js +++ b/src/MarkerCluster.Spiderfier.js @@ -107,6 +107,7 @@ L.MarkerCluster.include(!L.DomUtil.TRANSITION ? { m._spiderLeg = leg; } this.setOpacity(0.3); + group.fire('spiderfied'); }, _animationUnspiderfy: function () { @@ -223,6 +224,7 @@ L.MarkerCluster.include(!L.DomUtil.TRANSITION ? { setTimeout(function () { group._animationEnd(); + group.fire('spiderfied'); }, 250); }, diff --git a/src/MarkerClusterGroup.js b/src/MarkerClusterGroup.js index e7904d69f..fde1ab3d2 100644 --- a/src/MarkerClusterGroup.js +++ b/src/MarkerClusterGroup.js @@ -149,17 +149,34 @@ L.MarkerClusterGroup = L.FeatureGroup.extend({ }, zoomToShowLayer: function (layer, callback) { - layer.__parent.zoomToBounds(); - setTimeout(function () { - if (layer._icon) { - callback(); - } else { - layer.__parent.spiderfy(); - setTimeout(function () { + + var showMarker = function () { + if ((layer._icon || layer.__parent._icon) && !this._inZoomAnimation) { + this._map.off('moveend', showMarker, this); + this.off('animationend', showMarker, this); + + if (layer._icon) { callback(); - }, L.DomUtil.TRANSITION ? 250 : 0); //TODO: This is hardcoded based on the time to spiderfy + } else if (layer.__parent._icon) { + var afterSpiderfy = function () { + this.off('spiderfied', afterSpiderfy, this); + callback(); + }; + + this.on('spiderfied', afterSpiderfy, this); + layer.__parent.spiderfy(); + } } - }, L.DomUtil.TRANSITION ? 600 : 0); //TODO: This is hardcoded based on the leaflet time to zoom + }; + + if ((layer._icon || layer.__parent._icon) && this._map.getBounds().contains(layer.__parent._latlng)) { + //Layer or cluster is already visible + showMarker.call(this); + } else { + this._map.on('moveend', showMarker, this); + this.on('animationend', showMarker, this); + layer.__parent.zoomToBounds(); + } }, //Overrides FeatureGroup.onAdd @@ -533,6 +550,7 @@ L.MarkerClusterGroup.include(!L.DomUtil.TRANSITION ? { this._map._mapPane.className = this._map._mapPane.className.replace(' leaflet-cluster-anim', ''); } this._inZoomAnimation--; + this.fire('animationend'); }, _animationZoomIn: function (previousZoomLevel, newZoomLevel) { var me = this,