Changeset 315 for binary-improvements/webserver/leaflet/markercluster/leaflet.markercluster-src.js

Timestamp:

Jan 31, 2018, 2:52:42 PM (7 years ago)

Author:

alloc

Message:

Fixes

File:

• binary-improvements/webserver/leaflet/markercluster/leaflet.markercluster-src.js (modified) (98 diffs)

binary-improvements/webserver/leaflet/markercluster/leaflet.markercluster-src.js

@@ -2 +2 @@
  Leaflet.markercluster, Provides Beautiful Animated Marker Clustering functionality for Leaflet, a JS library for interactive maps.
  https://github.com/Leaflet/Leaflet.markercluster
- (c) 2012-2013, Dave Leaver, smartrak
+ (c) 2012-2017, Dave Leaver
 */
 (function (window, document, undefined) {/*
@@ -13 +13 @@
                 maxClusterRadius: 80, //A cluster will cover at most this many pixels from its center
                 iconCreateFunction: null,
+                clusterPane: L.Marker.prototype.options.pane,
 
                 spiderfyOnMaxZoom: true,
@@ -25 +26 @@
                 removeOutsideVisibleBounds: true,
 
+                // Set to false to disable all animations (zoom and spiderfy).
+                // If false, option animateAddingMarkers below has no effect.
+                // If L.DomUtil.TRANSITION is falsy, this option has no effect.
+                animate: true,
+
                 //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.
@@ -31 +37 @@
                 //Increase to increase the distance away that spiderfied markers appear from the center
                 spiderfyDistanceMultiplier: 1,
+
+                // Make it possible to specify a polyline options on a spider leg
+                spiderLegPolylineOptions: { weight: 1.5, color: '#222', opacity: 0.5 },
 
                 // When bulk adding layers, adds markers in chunks. Means addLayers may not add all the layers in the call, others will be loaded during setTimeouts
@@ -49 +58 @@
 
                 this._featureGroup = L.featureGroup();
-                this._featureGroup.on(L.FeatureGroup.EVENTS, this._propagateEvent, this);
+                this._featureGroup.addEventParent(this);
 
                 this._nonPointGroup = L.featureGroup();
-                this._nonPointGroup.on(L.FeatureGroup.EVENTS, this._propagateEvent, this);
+                this._nonPointGroup.addEventParent(this);
 
                 this._inZoomAnimation = 0;
@@ -61 +70 @@
 
                 this._queue = [];
+
+                this._childMarkerEventHandlers = {
+                        'dragstart': this._childMarkerDragStart,
+                        'move': this._childMarkerMoved,
+                        'dragend': this._childMarkerDragEnd,
+                };
+
+                // Hook the appropriate animation methods.
+                var animate = L.DomUtil.TRANSITION && this.options.animate;
+                L.extend(this, animate ? this._withAnimation : this._noAnimation);
+                // Remember which MarkerCluster class to instantiate (animated or not).
+                this._markerCluster = animate ? L.MarkerCluster : L.MarkerClusterNonAnimated;
         },
 
@@ -66 +87 @@
 
                 if (layer instanceof L.LayerGroup) {
-                        var array = [];
-                        for (var i in layer._layers) {
-                                array.push(layer._layers[i]);
-                        }
-                        return this.addLayers(array);
+                        return this.addLayers([layer]);
                 }
 
@@ -76 +93 @@
                 if (!layer.getLatLng) {
                         this._nonPointGroup.addLayer(layer);
+                        this.fire('layeradd', { layer: layer });
                         return this;
                 }
@@ -81 +99 @@
                 if (!this._map) {
                         this._needsClustering.push(layer);
+                        this.fire('layeradd', { layer: layer });
                         return this;
                 }
@@ -96 +115 @@
 
                 this._addLayer(layer, this._maxZoom);
+                this.fire('layeradd', { layer: layer });
+
+                // Refresh bounds and weighted positions.
+                this._topClusterLevel._recalculateBounds();
+
+                this._refreshClustersIcons();
 
                 //Work out what is visible
                 var visibleLayer = layer,
-                        currentZoom = this._map.getZoom();
+                    currentZoom = this._zoom;
                 if (layer.__parent) {
                         while (visibleLayer.__parent._zoom >= currentZoom) {
@@ -118 +143 @@
         removeLayer: function (layer) {
 
-                if (layer instanceof L.LayerGroup)
-                {
-                        var array = [];
-                        for (var i in layer._layers) {
-                                array.push(layer._layers[i]);
-                        }
-                        return this.removeLayers(array);
+                if (layer instanceof L.LayerGroup) {
+                        return this.removeLayers([layer]);
                 }
 
@@ -130 +150 @@
                 if (!layer.getLatLng) {
                         this._nonPointGroup.removeLayer(layer);
+                        this.fire('layerremove', { layer: layer });
                         return this;
                 }
@@ -135 +156 @@
                 if (!this._map) {
                         if (!this._arraySplice(this._needsClustering, layer) && this.hasLayer(layer)) {
-                                this._needsRemoving.push(layer);
-                        }
+                                this._needsRemoving.push({ layer: layer, latlng: layer._latlng });
+                        }
+                        this.fire('layerremove', { layer: layer });
                         return this;
                 }
@@ -151 +173 @@
                 //Remove the marker from clusters
                 this._removeLayer(layer, true);
+                this.fire('layerremove', { layer: layer });
+
+                // Refresh bounds and weighted positions.
+                this._topClusterLevel._recalculateBounds();
+
+                this._refreshClustersIcons();
+
+                layer.off(this._childMarkerEventHandlers, this);
 
                 if (this._featureGroup.hasLayer(layer)) {
                         this._featureGroup.removeLayer(layer);
-                        if (layer.setOpacity) {
-                                layer.setOpacity(1);
+                        if (layer.clusterShow) {
+                                layer.clusterShow();
                         }
                 }
@@ -163 +193 @@
 
         //Takes an array of markers and adds them in bulk
-        addLayers: function (layersArray) {
+        addLayers: function (layersArray, skipLayerAddEvent) {
+                if (!L.Util.isArray(layersArray)) {
+                        return this.addLayer(layersArray);
+                }
+
                 var fg = this._featureGroup,
-                        npg = this._nonPointGroup,
-                        chunked = this.options.chunkedLoading,
-                        chunkInterval = this.options.chunkInterval,
-                        chunkProgress = this.options.chunkProgress,
-                        newMarkers, i, l, m;
+                    npg = this._nonPointGroup,
+                    chunked = this.options.chunkedLoading,
+                    chunkInterval = this.options.chunkInterval,
+                    chunkProgress = this.options.chunkProgress,
+                    l = layersArray.length,
+                    offset = 0,
+                    originalArray = true,
+                    m;
 
                 if (this._map) {
-                        var offset = 0,
-                                started = (new Date()).getTime();
+                        var started = (new Date()).getTime();
                         var process = L.bind(function () {
                                 var start = (new Date()).getTime();
-                                for (; offset < layersArray.length; offset++) {
+                                for (; offset < l; offset++) {
                                         if (chunked && offset % 200 === 0) {
                                                 // every couple hundred markers, instrument the time elapsed since processing started:
@@ -187 +223 @@
                                         m = layersArray[offset];
 
+                                        // Group of layers, append children to layersArray and skip.
+                                        // Side effects:
+                                        // - Total increases, so chunkProgress ratio jumps backward.
+                                        // - Groups are not included in this group, only their non-group child layers (hasLayer).
+                                        // Changing array length while looping does not affect performance in current browsers:
+                                        // http://jsperf.com/for-loop-changing-length/6
+                                        if (m instanceof L.LayerGroup) {
+                                                if (originalArray) {
+                                                        layersArray = layersArray.slice();
+                                                        originalArray = false;
+                                                }
+                                                this._extractNonGroupLayers(m, layersArray);
+                                                l = layersArray.length;
+                                                continue;
+                                        }
+
                                         //Not point data, can't be clustered
                                         if (!m.getLatLng) {
                                                 npg.addLayer(m);
+                                                if (!skipLayerAddEvent) {
+                                                        this.fire('layeradd', { layer: m });
+                                                }
                                                 continue;
                                         }
@@ -198 +253 @@
 
                                         this._addLayer(m, this._maxZoom);
+                                        if (!skipLayerAddEvent) {
+                                                this.fire('layeradd', { layer: m });
+                                        }
 
                                         //If we just made a cluster of size 2 then we need to remove the other marker from the map (if it is) or we never will
@@ -203 +261 @@
                                                 if (m.__parent.getChildCount() === 2) {
                                                         var markers = m.__parent.getAllChildMarkers(),
-                                                                otherMarker = markers[0] === m ? markers[1] : markers[0];
+                                                            otherMarker = markers[0] === m ? markers[1] : markers[0];
                                                         fg.removeLayer(otherMarker);
                                                 }
@@ -211 +269 @@
                                 if (chunkProgress) {
                                         // report progress and time elapsed:
-                                        chunkProgress(offset, layersArray.length, (new Date()).getTime() - started);
-                                }
-
-                                if (offset === layersArray.length) {
-                                        //Update the icons of all those visible clusters that were affected
-                                        this._featureGroup.eachLayer(function (c) {
-                                                if (c instanceof L.MarkerCluster && c._iconNeedsUpdate) {
-                                                        c._updateIcon();
-                                                }
-                                        });
+                                        chunkProgress(offset, l, (new Date()).getTime() - started);
+                                }
+
+                                // Completed processing all markers.
+                                if (offset === l) {
+
+                                        // Refresh bounds and weighted positions.
+                                        this._topClusterLevel._recalculateBounds();
+
+                                        this._refreshClustersIcons();
 
                                         this._topClusterLevel._recursivelyAddChildrenToMap(null, this._zoom, this._currentShownBounds);
@@ -230 +288 @@
                         process();
                 } else {
-                        newMarkers = [];
-                        for (i = 0, l = layersArray.length; i < l; i++) {
-                                m = layersArray[i];
+                        var needsClustering = this._needsClustering;
+
+                        for (; offset < l; offset++) {
+                                m = layersArray[offset];
+
+                                // Group of layers, append children to layersArray and skip.
+                                if (m instanceof L.LayerGroup) {
+                                        if (originalArray) {
+                                                layersArray = layersArray.slice();
+                                                originalArray = false;
+                                        }
+                                        this._extractNonGroupLayers(m, layersArray);
+                                        l = layersArray.length;
+                                        continue;
+                                }
 
                                 //Not point data, can't be clustered
@@ -244 +314 @@
                                 }
 
-                                newMarkers.push(m);
-                        }
-                        this._needsClustering = this._needsClustering.concat(newMarkers);
+                                needsClustering.push(m);
+                        }
                 }
                 return this;
@@ -253 +322 @@
         //Takes an array of markers and removes them in bulk
         removeLayers: function (layersArray) {
-                var i, l, m,
-                        fg = this._featureGroup,
-                        npg = this._nonPointGroup;
+                var i, m,
+                    l = layersArray.length,
+                    fg = this._featureGroup,
+                    npg = this._nonPointGroup,
+                    originalArray = true;
 
                 if (!this._map) {
-                        for (i = 0, l = layersArray.length; i < l; i++) {
+                        for (i = 0; i < l; i++) {
                                 m = layersArray[i];
+
+                                // Group of layers, append children to layersArray and skip.
+                                if (m instanceof L.LayerGroup) {
+                                        if (originalArray) {
+                                                layersArray = layersArray.slice();
+                                                originalArray = false;
+                                        }
+                                        this._extractNonGroupLayers(m, layersArray);
+                                        l = layersArray.length;
+                                        continue;
+                                }
+
                                 this._arraySplice(this._needsClustering, m);
                                 npg.removeLayer(m);
+                                if (this.hasLayer(m)) {
+                                        this._needsRemoving.push({ layer: m, latlng: m._latlng });
+                                }
+                                this.fire('layerremove', { layer: m });
                         }
                         return this;
                 }
 
-                for (i = 0, l = layersArray.length; i < l; i++) {
+                if (this._unspiderfy) {
+                        this._unspiderfy();
+
+                        // Work on a copy of the array, so that next loop is not affected.
+                        var layersArray2 = layersArray.slice(),
+                            l2 = l;
+                        for (i = 0; i < l2; i++) {
+                                m = layersArray2[i];
+
+                                // Group of layers, append children to layersArray and skip.
+                                if (m instanceof L.LayerGroup) {
+                                        this._extractNonGroupLayers(m, layersArray2);
+                                        l2 = layersArray2.length;
+                                        continue;
+                                }
+
+                                this._unspiderfyLayer(m);
+                        }
+                }
+
+                for (i = 0; i < l; i++) {
                         m = layersArray[i];
+
+                        // Group of layers, append children to layersArray and skip.
+                        if (m instanceof L.LayerGroup) {
+                                if (originalArray) {
+                                        layersArray = layersArray.slice();
+                                        originalArray = false;
+                                }
+                                this._extractNonGroupLayers(m, layersArray);
+                                l = layersArray.length;
+                                continue;
+                        }
 
                         if (!m.__parent) {
                                 npg.removeLayer(m);
+                                this.fire('layerremove', { layer: m });
                                 continue;
                         }
 
                         this._removeLayer(m, true, true);
+                        this.fire('layerremove', { layer: m });
 
                         if (fg.hasLayer(m)) {
                                 fg.removeLayer(m);
-                                if (m.setOpacity) {
-                                        m.setOpacity(1);
-                                }
-                        }
-                }
+                                if (m.clusterShow) {
+                                        m.clusterShow();
+                                }
+                        }
+                }
+
+                // Refresh bounds and weighted positions.
+                this._topClusterLevel._recalculateBounds();
+
+                this._refreshClustersIcons();
 
                 //Fix up the clusters and markers on the map
                 this._topClusterLevel._recursivelyAddChildrenToMap(null, this._zoom, this._currentShownBounds);
-
-                fg.eachLayer(function (c) {
-                        if (c instanceof L.MarkerCluster) {
-                                c._updateIcon();
-                        }
-                });
 
                 return this;
@@ -316 +435 @@
 
                 this.eachLayer(function (marker) {
+                        marker.off(this._childMarkerEventHandlers, this);
                         delete marker.__parent;
-                });
+                }, this);
 
                 if (this._map) {
@@ -347 +467 @@
         eachLayer: function (method, context) {
                 var markers = this._needsClustering.slice(),
-                        i;
+                        needsRemoving = this._needsRemoving,
+                        thisNeedsRemoving, i, j;
 
                 if (this._topClusterLevel) {
@@ -354 +475 @@
 
                 for (i = markers.length - 1; i >= 0; i--) {
-                        method.call(context, markers[i]);
+                        thisNeedsRemoving = true;
+
+                        for (j = needsRemoving.length - 1; j >= 0; j--) {
+                                if (needsRemoving[j].layer === markers[i]) {
+                                        thisNeedsRemoving = false;
+                                        break;
+                                }
+                        }
+
+                        if (thisNeedsRemoving) {
+                                method.call(context, markers[i]);
+                        }
                 }
 
@@ -372 +504 @@
         getLayer: function (id) {
                 var result = null;
+                
+                id = parseInt(id, 10);
 
                 this.eachLayer(function (l) {
@@ -398 +532 @@
                 anArray = this._needsRemoving;
                 for (i = anArray.length - 1; i >= 0; i--) {
-                        if (anArray[i] === layer) {
+                        if (anArray[i].layer === layer) {
                                 return false;
                         }
@@ -408 +542 @@
         //Zoom down to show the given layer (spiderfying if necessary) then calls the callback
         zoomToShowLayer: function (layer, callback) {
+
+                if (typeof callback !== 'function') {
+                        callback = function () {};
+                }
 
                 var showMarker = function () {
@@ -417 +555 @@
                                         callback();
                                 } else if (layer.__parent._icon) {
-                                        var afterSpiderfy = function () {
-                                                this.off('spiderfied', afterSpiderfy, this);
-                                                callback();
-                                        };
-
-                                        this.on('spiderfied', afterSpiderfy, this);
+                                        this.once('spiderfied', callback, this);
                                         layer.__parent.spiderfy();
                                 }
@@ -431 +564 @@
                         //Layer is visible ond on screen, immediate return
                         callback();
-                } else if (layer.__parent._zoom < this._map.getZoom()) {
+                } else if (layer.__parent._zoom < Math.round(this._map._zoom)) {
                         //Layer should be visible at this zoom level. It must not be on screen so just pan over to it
                         this._map.on('moveend', showMarker, this);
                         this._map.panTo(layer.getLatLng());
                 } else {
-                        var moveStart = function () {
-                                this._map.off('movestart', moveStart, this);
-                                moveStart = null;
-                        };
-
-                        this._map.on('movestart', moveStart, this);
                         this._map.on('moveend', showMarker, this);
                         this.on('animationend', showMarker, this);
                         layer.__parent.zoomToBounds();
-
-                        if (moveStart) {
-                                //Never started moving, must already be there, probably need clustering however
-                                showMarker.call(this);
-                        }
                 }
         },
@@ -462 +584 @@
                 }
 
-                this._featureGroup.onAdd(map);
-                this._nonPointGroup.onAdd(map);
+                this._featureGroup.addTo(map);
+                this._nonPointGroup.addTo(map);
 
                 if (!this._gridClusters) {
@@ -469 +591 @@
                 }
 
+                this._maxLat = map.options.crs.projection.MAX_LATITUDE;
+
+                //Restore all the positions as they are in the MCG before removing them
                 for (i = 0, l = this._needsRemoving.length; i < l; i++) {
                         layer = this._needsRemoving[i];
-                        this._removeLayer(layer, true);
+                        layer.newlatlng = layer.layer._latlng;
+                        layer.layer._latlng = layer.latlng;
+                }
+                //Remove them, then restore their new positions
+                for (i = 0, l = this._needsRemoving.length; i < l; i++) {
+                        layer = this._needsRemoving[i];
+                        this._removeLayer(layer.layer, true);
+                        layer.layer._latlng = layer.newlatlng;
                 }
                 this._needsRemoving = [];
 
                 //Remember the current zoom level and bounds
-                this._zoom = this._map.getZoom();
+                this._zoom = Math.round(this._map._zoom);
                 this._currentShownBounds = this._getExpandedVisibleBounds();
 
@@ -491 +623 @@
                 l = this._needsClustering;
                 this._needsClustering = [];
-                this.addLayers(l);
+                this.addLayers(l, true);
         },
 
@@ -508 +640 @@
                 }
 
-
+                delete this._maxLat;
 
                 //Clean up all the layers we added to the map
                 this._hideCoverage();
-                this._featureGroup.onRemove(map);
-                this._nonPointGroup.onRemove(map);
+                this._featureGroup.remove();
+                this._nonPointGroup.remove();
 
                 this._featureGroup.clearLayers();
@@ -538 +670 @@
         },
 
+        /**
+         * Removes a marker from all _gridUnclustered zoom levels, starting at the supplied zoom.
+         * @param marker to be removed from _gridUnclustered.
+         * @param z integer bottom start zoom level (included)
+         * @private
+         */
+        _removeFromGridUnclustered: function (marker, z) {
+                var map = this._map,
+                    gridUnclustered = this._gridUnclustered,
+                        minZoom = Math.floor(this._map.getMinZoom());
+
+                for (; z >= minZoom; z--) {
+                        if (!gridUnclustered[z].removeObject(marker, map.project(marker.getLatLng(), z))) {
+                                break;
+                        }
+                }
+        },
+
+        _childMarkerDragStart: function (e) {
+                e.target.__dragStart = e.target._latlng;
+        },
+
+        _childMarkerMoved: function (e) {
+                if (!this._ignoreMove && !e.target.__dragStart) {
+                        var isPopupOpen = e.target._popup && e.target._popup.isOpen();
+
+                        this._moveChild(e.target, e.oldLatLng, e.latlng);
+
+                        if (isPopupOpen) {
+                                e.target.openPopup();
+                        }
+                }
+        },
+
+        _moveChild: function (layer, from, to) {
+                layer._latlng = from;
+                this.removeLayer(layer);
+
+                layer._latlng = to;
+                this.addLayer(layer);
+        },
+
+        _childMarkerDragEnd: function (e) {
+                if (e.target.__dragStart) {
+                        this._moveChild(e.target, e.target.__dragStart, e.target._latlng);
+                }
+                delete e.target.__dragStart;
+        },
+        
+
         //Internal function for removing a marker from everything.
         //dontUpdateMap: set to true if you will handle updating the map manually (for bulk functions)
@@ -544 +726 @@
                         gridUnclustered = this._gridUnclustered,
                         fg = this._featureGroup,
-                        map = this._map;
+                        map = this._map,
+                        minZoom = Math.floor(this._map.getMinZoom());
 
                 //Remove the marker from distance clusters it might be in
                 if (removeFromDistanceGrid) {
-                        for (var z = this._maxZoom; z >= 0; z--) {
-                                if (!gridUnclustered[z].removeObject(marker, map.project(marker.getLatLng(), z))) {
-                                        break;
-                                }
-                        }
+                        this._removeFromGridUnclustered(marker, this._maxZoom);
                 }
 
@@ -565 +744 @@
                 while (cluster) {
                         cluster._childCount--;
-
-                        if (cluster._zoom < 0) {
+                        cluster._boundsNeedUpdate = true;
+
+                        if (cluster._zoom < minZoom) {
                                 //Top level, do nothing
                                 break;
@@ -590 +770 @@
                                 }
                         } else {
-                                cluster._recalculateBounds();
-                                if (!dontUpdateMap || !cluster._icon) {
-                                        cluster._updateIcon();
-                                }
+                                cluster._iconNeedsUpdate = true;
                         }
 
@@ -612 +789 @@
         },
 
-        _propagateEvent: function (e) {
-                if (e.layer instanceof L.MarkerCluster) {
+        //Override L.Evented.fire
+        fire: function (type, data, propagate) {
+                if (data && data.layer instanceof L.MarkerCluster) {
                         //Prevent multiple clustermouseover/off events if the icon is made up of stacked divs (Doesn't work in ie <= 8, no relatedTarget)
-                        if (e.originalEvent && this._isOrIsParent(e.layer._icon, e.originalEvent.relatedTarget)) {
+                        if (data.originalEvent && this._isOrIsParent(data.layer._icon, data.originalEvent.relatedTarget)) {
                                 return;
                         }
-                        e.type = 'cluster' + e.type;
-                }
-
-                this.fire(e.type, e);
+                        type = 'cluster' + type;
+                }
+
+                L.FeatureGroup.prototype.fire.call(this, type, data, propagate);
+        },
+
+        //Override L.Evented.listens
+        listens: function (type, propagate) {
+                return L.FeatureGroup.prototype.listens.call(this, type, propagate) || L.FeatureGroup.prototype.listens.call(this, 'cluster' + type, propagate);
         },
 
@@ -660 +843 @@
 
         _zoomOrSpiderfy: function (e) {
-                var map = this._map;
-                if (map.getMaxZoom() === map.getZoom()) {
-                        if (this.options.spiderfyOnMaxZoom) {
-                                e.layer.spiderfy();
-                        }
+                var cluster = e.layer,
+                    bottomCluster = cluster;
+
+                while (bottomCluster._childClusters.length === 1) {
+                        bottomCluster = bottomCluster._childClusters[0];
+                }
+
+                if (bottomCluster._zoom === this._maxZoom &&
+                        bottomCluster._childCount === cluster._childCount &&
+                        this.options.spiderfyOnMaxZoom) {
+
+                        // All child markers are contained in a single cluster from this._maxZoom to this cluster.
+                        cluster.spiderfy();
                 } else if (this.options.zoomToBoundsOnClick) {
-                        e.layer.zoomToBounds();
+                        cluster.zoomToBounds();
                 }
 
                 // Focus the map again for keyboard users.
                 if (e.originalEvent && e.originalEvent.keyCode === 13) {
-                        map._container.focus();
+                        this._map._container.focus();
                 }
         },
@@ -718 +909 @@
                 this._mergeSplitClusters();
 
-                this._zoom = this._map._zoom;
+                this._zoom = Math.round(this._map._zoom);
                 this._currentShownBounds = this._getExpandedVisibleBounds();
         },
@@ -729 +920 @@
                 var newBounds = this._getExpandedVisibleBounds();
 
-                this._topClusterLevel._recursivelyRemoveChildrenFromMap(this._currentShownBounds, this._zoom, newBounds);
-                this._topClusterLevel._recursivelyAddChildrenToMap(null, this._map._zoom, newBounds);
+                this._topClusterLevel._recursivelyRemoveChildrenFromMap(this._currentShownBounds, Math.floor(this._map.getMinZoom()), this._zoom, newBounds);
+                this._topClusterLevel._recursivelyAddChildrenToMap(null, Math.round(this._map._zoom), newBounds);
 
                 this._currentShownBounds = newBounds;
@@ -737 +928 @@
 
         _generateInitialClusters: function () {
-                var maxZoom = this._map.getMaxZoom(),
+                var maxZoom = Math.ceil(this._map.getMaxZoom()),
+                        minZoom = Math.floor(this._map.getMinZoom()),
                         radius = this.options.maxClusterRadius,
                         radiusFn = radius;
@@ -748 +940 @@
                 }
 
-                if (this.options.disableClusteringAtZoom) {
+                if (this.options.disableClusteringAtZoom !== null) {
                         maxZoom = this.options.disableClusteringAtZoom - 1;
                 }
@@ -756 +948 @@
         
                 //Set up DistanceGrids for each zoom
-                for (var zoom = maxZoom; zoom >= 0; zoom--) {
+                for (var zoom = maxZoom; zoom >= minZoom; zoom--) {
                         this._gridClusters[zoom] = new L.DistanceGrid(radiusFn(zoom));
                         this._gridUnclustered[zoom] = new L.DistanceGrid(radiusFn(zoom));
                 }
 
-                this._topClusterLevel = new L.MarkerCluster(this, -1);
+                // Instantiate the appropriate L.MarkerCluster class (animated or not).
+                this._topClusterLevel = new this._markerCluster(this, minZoom - 1);
         },
 
@@ -768 +961 @@
                 var gridClusters = this._gridClusters,
                     gridUnclustered = this._gridUnclustered,
+                        minZoom = Math.floor(this._map.getMinZoom()),
                     markerPoint, z;
 
                 if (this.options.singleMarkerMode) {
-                        layer.options.icon = this.options.iconCreateFunction({
-                                getChildCount: function () {
-                                        return 1;
-                                },
-                                getAllChildMarkers: function () {
-                                        return [layer];
-                                }
-                        });
-                }
+                        this._overrideMarkerIcon(layer);
+                }
+
+                layer.on(this._childMarkerEventHandlers, this);
 
                 //Find the lowest zoom level to slot this one in
-                for (; zoom >= 0; zoom--) {
+                for (; zoom >= minZoom; zoom--) {
                         markerPoint = this._map.project(layer.getLatLng(), zoom); // calculate pixel position
 
@@ -803 +992 @@
                                 //Create new cluster with these 2 in it
 
-                                var newCluster = new L.MarkerCluster(this, zoom, closest, layer);
+                                var newCluster = new this._markerCluster(this, zoom, closest, layer);
                                 gridClusters[zoom].addObject(newCluster, this._map.project(newCluster._cLatLng, zoom));
                                 closest.__parent = newCluster;
@@ -811 +1000 @@
                                 var lastParent = newCluster;
                                 for (z = zoom - 1; z > parent._zoom; z--) {
-                                        lastParent = new L.MarkerCluster(this, z, lastParent);
+                                        lastParent = new this._markerCluster(this, z, lastParent);
                                         gridClusters[z].addObject(lastParent, this._map.project(closest.getLatLng(), z));
                                 }
@@ -817 +1006 @@
 
                                 //Remove closest from this zoom level and any above that it is in, replace with newCluster
-                                for (z = zoom; z >= 0; z--) {
-                                        if (!gridUnclustered[z].removeObject(closest, this._map.project(closest.getLatLng(), z))) {
-                                                break;
-                                        }
-                                }
+                                this._removeFromGridUnclustered(closest, zoom);
 
                                 return;
@@ -834 +1019 @@
                 layer.__parent = this._topClusterLevel;
                 return;
+        },
+
+        /**
+         * Refreshes the icon of all "dirty" visible clusters.
+         * Non-visible "dirty" clusters will be updated when they are added to the map.
+         * @private
+         */
+        _refreshClustersIcons: function () {
+                this._featureGroup.eachLayer(function (c) {
+                        if (c instanceof L.MarkerCluster && c._iconNeedsUpdate) {
+                                c._updateIcon();
+                        }
+                });
         },
 
@@ -854 +1052 @@
         //Merge and split any existing clusters that are too big or small
         _mergeSplitClusters: function () {
-
-                //Incase we are starting to split before the animation finished
+                var mapZoom = Math.round(this._map._zoom);
+
+                //In case we are starting to split before the animation finished
                 this._processQueue();
 
-                if (this._zoom < this._map._zoom && this._currentShownBounds.intersects(this._getExpandedVisibleBounds())) { //Zoom in, split
+                if (this._zoom < mapZoom && this._currentShownBounds.intersects(this._getExpandedVisibleBounds())) { //Zoom in, split
                         this._animationStart();
                         //Remove clusters now off screen
-                        this._topClusterLevel._recursivelyRemoveChildrenFromMap(this._currentShownBounds, this._zoom, this._getExpandedVisibleBounds());
-
-                        this._animationZoomIn(this._zoom, this._map._zoom);
-
-                } else if (this._zoom > this._map._zoom) { //Zoom out, merge
+                        this._topClusterLevel._recursivelyRemoveChildrenFromMap(this._currentShownBounds, Math.floor(this._map.getMinZoom()), this._zoom, this._getExpandedVisibleBounds());
+
+                        this._animationZoomIn(this._zoom, mapZoom);
+
+                } else if (this._zoom > mapZoom) { //Zoom out, merge
                         this._animationStart();
 
-                        this._animationZoomOut(this._zoom, this._map._zoom);
+                        this._animationZoomOut(this._zoom, mapZoom);
                 } else {
                         this._moveEnd();
@@ -877 +1076 @@
         _getExpandedVisibleBounds: function () {
                 if (!this.options.removeOutsideVisibleBounds) {
-                        return this.getBounds();
-                }
-
-                var map = this._map,
-                        bounds = map.getBounds(),
-                        sw = bounds._southWest,
-                        ne = bounds._northEast,
-                        latDiff = L.Browser.mobile ? 0 : Math.abs(sw.lat - ne.lat),
-                        lngDiff = L.Browser.mobile ? 0 : Math.abs(sw.lng - ne.lng);
-
-                return new L.LatLngBounds(
-                        new L.LatLng(sw.lat - latDiff, sw.lng - lngDiff, true),
-                        new L.LatLng(ne.lat + latDiff, ne.lng + lngDiff, true));
+                        return this._mapBoundsInfinite;
+                } else if (L.Browser.mobile) {
+                        return this._checkBoundsMaxLat(this._map.getBounds());
+                }
+
+                return this._checkBoundsMaxLat(this._map.getBounds().pad(1)); // Padding expands the bounds by its own dimensions but scaled with the given factor.
+        },
+
+        /**
+         * Expands the latitude to Infinity (or -Infinity) if the input bounds reach the map projection maximum defined latitude
+         * (in the case of Web/Spherical Mercator, it is 85.0511287798 / see https://en.wikipedia.org/wiki/Web_Mercator#Formulas).
+         * Otherwise, the removeOutsideVisibleBounds option will remove markers beyond that limit, whereas the same markers without
+         * this option (or outside MCG) will have their position floored (ceiled) by the projection and rendered at that limit,
+         * making the user think that MCG "eats" them and never displays them again.
+         * @param bounds L.LatLngBounds
+         * @returns {L.LatLngBounds}
+         * @private
+         */
+        _checkBoundsMaxLat: function (bounds) {
+                var maxLat = this._maxLat;
+
+                if (maxLat !== undefined) {
+                        if (bounds.getNorth() >= maxLat) {
+                                bounds._northEast.lat = Infinity;
+                        }
+                        if (bounds.getSouth() <= -maxLat) {
+                                bounds._southWest.lat = -Infinity;
+                        }
+                }
+
+                return bounds;
         },
 
@@ -905 +1122 @@
                         newCluster._updateIcon();
                 }
+        },
+
+        /**
+         * Extracts individual (i.e. non-group) layers from a Layer Group.
+         * @param group to extract layers from.
+         * @param output {Array} in which to store the extracted layers.
+         * @returns {*|Array}
+         * @private
+         */
+        _extractNonGroupLayers: function (group, output) {
+                var layers = group.getLayers(),
+                    i = 0,
+                    layer;
+
+                output = output || [];
+
+                for (; i < layers.length; i++) {
+                        layer = layers[i];
+
+                        if (layer instanceof L.LayerGroup) {
+                                this._extractNonGroupLayers(layer, output);
+                                continue;
+                        }
+
+                        output.push(layer);
+                }
+
+                return output;
+        },
+
+        /**
+         * Implements the singleMarkerMode option.
+         * @param layer Marker to re-style using the Clusters iconCreateFunction.
+         * @returns {L.Icon} The newly created icon.
+         * @private
+         */
+        _overrideMarkerIcon: function (layer) {
+                var icon = layer.options.icon = this.options.iconCreateFunction({
+                        getChildCount: function () {
+                                return 1;
+                        },
+                        getAllChildMarkers: function () {
+                                return [layer];
+                        }
+                });
+
+                return icon;
         }
 });
 
-L.MarkerClusterGroup.include(!L.DomUtil.TRANSITION ? {
-
-        //Non Animated versions of everything
-        _animationStart: function () {
-                //Do nothing...
-        },
-        _animationZoomIn: function (previousZoomLevel, newZoomLevel) {
-                this._topClusterLevel._recursivelyRemoveChildrenFromMap(this._currentShownBounds, previousZoomLevel);
-                this._topClusterLevel._recursivelyAddChildrenToMap(null, newZoomLevel, this._getExpandedVisibleBounds());
-
-                //We didn't actually animate, but we use this event to mean "clustering animations have finished"
-                this.fire('animationend');
-        },
-        _animationZoomOut: function (previousZoomLevel, newZoomLevel) {
-                this._topClusterLevel._recursivelyRemoveChildrenFromMap(this._currentShownBounds, previousZoomLevel);
-                this._topClusterLevel._recursivelyAddChildrenToMap(null, newZoomLevel, this._getExpandedVisibleBounds());
-
-                //We didn't actually animate, but we use this event to mean "clustering animations have finished"
-                this.fire('animationend');
-        },
-        _animationAddLayer: function (layer, newCluster) {
-                this._animationAddLayerNonAnimated(layer, newCluster);
-        }
-} : {
-
-        //Animated versions here
-        _animationStart: function () {
-                this._map._mapPane.className += ' leaflet-cluster-anim';
-                this._inZoomAnimation++;
-        },
-        _animationEnd: function () {
-                if (this._map) {
-                        this._map._mapPane.className = this._map._mapPane.className.replace(' leaflet-cluster-anim', '');
-                }
-                this._inZoomAnimation--;
-                this.fire('animationend');
-        },
-        _animationZoomIn: function (previousZoomLevel, newZoomLevel) {
+// Constant bounds used in case option "removeOutsideVisibleBounds" is set to false.
+L.MarkerClusterGroup.include({
+        _mapBoundsInfinite: new L.LatLngBounds(new L.LatLng(-Infinity, -Infinity), new L.LatLng(Infinity, Infinity))
+});
+
+L.MarkerClusterGroup.include({
+        _noAnimation: {
+                //Non Animated versions of everything
+                _animationStart: function () {
+                        //Do nothing...
+                },
+                _animationZoomIn: function (previousZoomLevel, newZoomLevel) {
+                        this._topClusterLevel._recursivelyRemoveChildrenFromMap(this._currentShownBounds, Math.floor(this._map.getMinZoom()), previousZoomLevel);
+                        this._topClusterLevel._recursivelyAddChildrenToMap(null, newZoomLevel, this._getExpandedVisibleBounds());
+
+                        //We didn't actually animate, but we use this event to mean "clustering animations have finished"
+                        this.fire('animationend');
+                },
+                _animationZoomOut: function (previousZoomLevel, newZoomLevel) {
+                        this._topClusterLevel._recursivelyRemoveChildrenFromMap(this._currentShownBounds, Math.floor(this._map.getMinZoom()), previousZoomLevel);
+                        this._topClusterLevel._recursivelyAddChildrenToMap(null, newZoomLevel, this._getExpandedVisibleBounds());
+
+                        //We didn't actually animate, but we use this event to mean "clustering animations have finished"
+                        this.fire('animationend');
+                },
+                _animationAddLayer: function (layer, newCluster) {
+                        this._animationAddLayerNonAnimated(layer, newCluster);
+                }
+        },
+
+        _withAnimation: {
+                //Animated versions here
+                _animationStart: function () {
+                        this._map._mapPane.className += ' leaflet-cluster-anim';
+                        this._inZoomAnimation++;
+                },
+
+                _animationZoomIn: function (previousZoomLevel, newZoomLevel) {
+                        var bounds = this._getExpandedVisibleBounds(),
+                            fg = this._featureGroup,
+                                minZoom = Math.floor(this._map.getMinZoom()),
+                            i;
+
+                        this._ignoreMove = true;
+
+                        //Add all children of current clusters to map and remove those clusters from map
+                        this._topClusterLevel._recursively(bounds, previousZoomLevel, minZoom, function (c) {
+                                var startPos = c._latlng,
+                                    markers  = c._markers,
+                                    m;
+
+                                if (!bounds.contains(startPos)) {
+                                        startPos = null;
+                                }
+
+                                if (c._isSingleParent() && previousZoomLevel + 1 === newZoomLevel) { //Immediately add the new child and remove us
+                                        fg.removeLayer(c);
+                                        c._recursivelyAddChildrenToMap(null, newZoomLevel, bounds);
+                                } else {
+                                        //Fade out old cluster
+                                        c.clusterHide();
+                                        c._recursivelyAddChildrenToMap(startPos, newZoomLevel, bounds);
+                                }
+
+                                //Remove all markers that aren't visible any more
+                                //TODO: Do we actually need to do this on the higher levels too?
+                                for (i = markers.length - 1; i >= 0; i--) {
+                                        m = markers[i];
+                                        if (!bounds.contains(m._latlng)) {
+                                                fg.removeLayer(m);
+                                        }
+                                }
+
+                        });
+
+                        this._forceLayout();
+
+                        //Update opacities
+                        this._topClusterLevel._recursivelyBecomeVisible(bounds, newZoomLevel);
+                        //TODO Maybe? Update markers in _recursivelyBecomeVisible
+                        fg.eachLayer(function (n) {
+                                if (!(n instanceof L.MarkerCluster) && n._icon) {
+                                        n.clusterShow();
+                                }
+                        });
+
+                        //update the positions of the just added clusters/markers
+                        this._topClusterLevel._recursively(bounds, previousZoomLevel, newZoomLevel, function (c) {
+                                c._recursivelyRestoreChildPositions(newZoomLevel);
+                        });
+
+                        this._ignoreMove = false;
+
+                        //Remove the old clusters and close the zoom animation
+                        this._enqueue(function () {
+                                //update the positions of the just added clusters/markers
+                                this._topClusterLevel._recursively(bounds, previousZoomLevel, minZoom, function (c) {
+                                        fg.removeLayer(c);
+                                        c.clusterShow();
+                                });
+
+                                this._animationEnd();
+                        });
+                },
+
+                _animationZoomOut: function (previousZoomLevel, newZoomLevel) {
+                        this._animationZoomOutSingle(this._topClusterLevel, previousZoomLevel - 1, newZoomLevel);
+
+                        //Need to add markers for those that weren't on the map before but are now
+                        this._topClusterLevel._recursivelyAddChildrenToMap(null, newZoomLevel, this._getExpandedVisibleBounds());
+                        //Remove markers that were on the map before but won't be now
+                        this._topClusterLevel._recursivelyRemoveChildrenFromMap(this._currentShownBounds, Math.floor(this._map.getMinZoom()), previousZoomLevel, this._getExpandedVisibleBounds());
+                },
+
+                _animationAddLayer: function (layer, newCluster) {
+                        var me = this,
+                            fg = this._featureGroup;
+
+                        fg.addLayer(layer);
+                        if (newCluster !== layer) {
+                                if (newCluster._childCount > 2) { //Was already a cluster
+
+                                        newCluster._updateIcon();
+                                        this._forceLayout();
+                                        this._animationStart();
+
+                                        layer._setPos(this._map.latLngToLayerPoint(newCluster.getLatLng()));
+                                        layer.clusterHide();
+
+                                        this._enqueue(function () {
+                                                fg.removeLayer(layer);
+                                                layer.clusterShow();
+
+                                                me._animationEnd();
+                                        });
+
+                                } else { //Just became a cluster
+                                        this._forceLayout();
+
+                                        me._animationStart();
+                                        me._animationZoomOutSingle(newCluster, this._map.getMaxZoom(), this._zoom);
+                                }
+                        }
+                }
+        },
+
+        // Private methods for animated versions.
+        _animationZoomOutSingle: function (cluster, previousZoomLevel, newZoomLevel) {
                 var bounds = this._getExpandedVisibleBounds(),
-                    fg = this._featureGroup,
-                    i;
-
-                //Add all children of current clusters to map and remove those clusters from map
-                this._topClusterLevel._recursively(bounds, previousZoomLevel, 0, function (c) {
-                        var startPos = c._latlng,
-                                markers = c._markers,
-                                m;
-
-                        if (!bounds.contains(startPos)) {
-                                startPos = null;
-                        }
-
-                        if (c._isSingleParent() && previousZoomLevel + 1 === newZoomLevel) { //Immediately add the new child and remove us
-                                fg.removeLayer(c);
-                                c._recursivelyAddChildrenToMap(null, newZoomLevel, bounds);
-                        } else {
-                                //Fade out old cluster
-                                c.setOpacity(0);
-                                c._recursivelyAddChildrenToMap(startPos, newZoomLevel, bounds);
-                        }
-
-                        //Remove all markers that aren't visible any more
-                        //TODO: Do we actually need to do this on the higher levels too?
-                        for (i = markers.length - 1; i >= 0; i--) {
-                                m = markers[i];
-                                if (!bounds.contains(m._latlng)) {
-                                        fg.removeLayer(m);
-                                }
-                        }
-
-                });
-
-                this._forceLayout();
-
-                //Update opacities
-                this._topClusterLevel._recursivelyBecomeVisible(bounds, newZoomLevel);
-                //TODO Maybe? Update markers in _recursivelyBecomeVisible
-                fg.eachLayer(function (n) {
-                        if (!(n instanceof L.MarkerCluster) && n._icon) {
-                                n.setOpacity(1);
-                        }
-                });
-
-                //update the positions of the just added clusters/markers
-                this._topClusterLevel._recursively(bounds, previousZoomLevel, newZoomLevel, function (c) {
-                        c._recursivelyRestoreChildPositions(newZoomLevel);
-                });
-
-                //Remove the old clusters and close the zoom animation
-                this._enqueue(function () {
-                        //update the positions of the just added clusters/markers
-                        this._topClusterLevel._recursively(bounds, previousZoomLevel, 0, function (c) {
-                                fg.removeLayer(c);
-                                c.setOpacity(1);
-                        });
-
-                        this._animationEnd();
-                });
-        },
-
-        _animationZoomOut: function (previousZoomLevel, newZoomLevel) {
-                this._animationZoomOutSingle(this._topClusterLevel, previousZoomLevel - 1, newZoomLevel);
-
-                //Need to add markers for those that weren't on the map before but are now
-                this._topClusterLevel._recursivelyAddChildrenToMap(null, newZoomLevel, this._getExpandedVisibleBounds());
-                //Remove markers that were on the map before but won't be now
-                this._topClusterLevel._recursivelyRemoveChildrenFromMap(this._currentShownBounds, previousZoomLevel, this._getExpandedVisibleBounds());
-        },
-        _animationZoomOutSingle: function (cluster, previousZoomLevel, newZoomLevel) {
-                var bounds = this._getExpandedVisibleBounds();
+                        minZoom = Math.floor(this._map.getMinZoom());
 
                 //Animate all of the markers in the clusters to move to their cluster center point
-                cluster._recursivelyAnimateChildrenInAndAddSelfToMap(bounds, previousZoomLevel + 1, newZoomLevel);
+                cluster._recursivelyAnimateChildrenInAndAddSelfToMap(bounds, minZoom, previousZoomLevel + 1, newZoomLevel);
 
                 var me = this;
@@ -1036 +1340 @@
                                 var m = cluster._markers[0];
                                 //If we were in a cluster animation at the time then the opacity and position of our child could be wrong now, so fix it
+                                this._ignoreMove = true;
                                 m.setLatLng(m.getLatLng());
-                                if (m.setOpacity) {
-                                        m.setOpacity(1);
+                                this._ignoreMove = false;
+                                if (m.clusterShow) {
+                                        m.clusterShow();
                                 }
                         } else {
-                                cluster._recursively(bounds, newZoomLevel, 0, function (c) {
-                                        c._recursivelyRemoveChildrenFromMap(bounds, previousZoomLevel + 1);
+                                cluster._recursively(bounds, newZoomLevel, minZoom, function (c) {
+                                        c._recursivelyRemoveChildrenFromMap(bounds, minZoom, previousZoomLevel + 1);
                                 });
                         }
@@ -1048 +1354 @@
                 });
         },
-        _animationAddLayer: function (layer, newCluster) {
-                var me = this,
-                        fg = this._featureGroup;
-
-                fg.addLayer(layer);
-                if (newCluster !== layer) {
-                        if (newCluster._childCount > 2) { //Was already a cluster
-
-                                newCluster._updateIcon();
-                                this._forceLayout();
-                                this._animationStart();
-
-                                layer._setPos(this._map.latLngToLayerPoint(newCluster.getLatLng()));
-                                layer.setOpacity(0);
-
-                                this._enqueue(function () {
-                                        fg.removeLayer(layer);
-                                        layer.setOpacity(1);
-
-                                        me._animationEnd();
-                                });
-
-                        } else { //Just became a cluster
-                                this._forceLayout();
-
-                                me._animationStart();
-                                me._animationZoomOutSingle(newCluster, this._map.getMaxZoom(), this._map.getZoom());
-                        }
-                }
+
+        _animationEnd: function () {
+                if (this._map) {
+                        this._map._mapPane.className = this._map._mapPane.className.replace(' leaflet-cluster-anim', '');
+                }
+                this._inZoomAnimation--;
+                this.fire('animationend');
         },
 
@@ -1097 +1381 @@
         initialize: function (group, zoom, a, b) {
 
-                L.Marker.prototype.initialize.call(this, a ? (a._cLatLng || a.getLatLng()) : new L.LatLng(0, 0), { icon: this });
-
+                L.Marker.prototype.initialize.call(this, a ? (a._cLatLng || a.getLatLng()) : new L.LatLng(0, 0),
+            { icon: this, pane: group.options.clusterPane });
 
                 this._group = group;
@@ -1107 +1391 @@
                 this._childCount = 0;
                 this._iconNeedsUpdate = true;
+                this._boundsNeedUpdate = true;
 
                 this._bounds = new L.LatLngBounds();
@@ -1139 +1424 @@
 
         //Zoom to the minimum of showing all of the child markers, or the extents of this cluster
-        zoomToBounds: function () {
+        zoomToBounds: function (fitBoundsOptions) {
                 var childClusters = this._childClusters.slice(),
                         map = this._group._map,
@@ -1162 +1447 @@
                         this._group._map.setView(this._latlng, mapZoom + 1);
                 } else {
-                        this._group._map.fitBounds(this._bounds);
+                        this._group._map.fitBounds(this._bounds, fitBoundsOptions);
                 }
         },
@@ -1195 +1480 @@
 
                 this._iconNeedsUpdate = true;
-                this._expandBounds(new1);
+
+                this._boundsNeedUpdate = true;
+                this._setClusterCenter(new1);
 
                 if (new1 instanceof L.MarkerCluster) {
@@ -1215 +1502 @@
         },
 
-        //Expand our bounds and tell our parent to
-        _expandBounds: function (marker) {
-                var addedCount,
-                    addedLatLng = marker._wLatLng || marker._latlng;
-
-                if (marker instanceof L.MarkerCluster) {
-                        this._bounds.extend(marker._bounds);
-                        addedCount = marker._childCount;
-                } else {
-                        this._bounds.extend(addedLatLng);
-                        addedCount = 1;
-                }
-
+        /**
+         * Makes sure the cluster center is set. If not, uses the child center if it is a cluster, or the marker position.
+         * @param child L.MarkerCluster|L.Marker that will be used as cluster center if not defined yet.
+         * @private
+         */
+        _setClusterCenter: function (child) {
                 if (!this._cLatLng) {
                         // when clustering, take position of the first point as the cluster center
-                        this._cLatLng = marker._cLatLng || addedLatLng;
-                }
-
-                // when showing clusters, take weighted average of all points as cluster center
-                var totalCount = this._childCount + addedCount;
-
-                //Calculate weighted latlng for display
-                if (!this._wLatLng) {
-                        this._latlng = this._wLatLng = new L.LatLng(addedLatLng.lat, addedLatLng.lng);
-                } else {
-                        this._wLatLng.lat = (addedLatLng.lat * addedCount + this._wLatLng.lat * this._childCount) / totalCount;
-                        this._wLatLng.lng = (addedLatLng.lng * addedCount + this._wLatLng.lng * this._childCount) / totalCount;
-                }
+                        this._cLatLng = child._cLatLng || child._latlng;
+                }
+        },
+
+        /**
+         * Assigns impossible bounding values so that the next extend entirely determines the new bounds.
+         * This method avoids having to trash the previous L.LatLngBounds object and to create a new one, which is much slower for this class.
+         * As long as the bounds are not extended, most other methods would probably fail, as they would with bounds initialized but not extended.
+         * @private
+         */
+        _resetBounds: function () {
+                var bounds = this._bounds;
+
+                if (bounds._southWest) {
+                        bounds._southWest.lat = Infinity;
+                        bounds._southWest.lng = Infinity;
+                }
+                if (bounds._northEast) {
+                        bounds._northEast.lat = -Infinity;
+                        bounds._northEast.lng = -Infinity;
+                }
+        },
+
+        _recalculateBounds: function () {
+                var markers = this._markers,
+                    childClusters = this._childClusters,
+                    latSum = 0,
+                    lngSum = 0,
+                    totalCount = this._childCount,
+                    i, child, childLatLng, childCount;
+
+                // Case where all markers are removed from the map and we are left with just an empty _topClusterLevel.
+                if (totalCount === 0) {
+                        return;
+                }
+
+                // Reset rather than creating a new object, for performance.
+                this._resetBounds();
+
+                // Child markers.
+                for (i = 0; i < markers.length; i++) {
+                        childLatLng = markers[i]._latlng;
+
+                        this._bounds.extend(childLatLng);
+
+                        latSum += childLatLng.lat;
+                        lngSum += childLatLng.lng;
+                }
+
+                // Child clusters.
+                for (i = 0; i < childClusters.length; i++) {
+                        child = childClusters[i];
+
+                        // Re-compute child bounds and weighted position first if necessary.
+                        if (child._boundsNeedUpdate) {
+                                child._recalculateBounds();
+                        }
+
+                        this._bounds.extend(child._bounds);
+
+                        childLatLng = child._wLatLng;
+                        childCount = child._childCount;
+
+                        latSum += childLatLng.lat * childCount;
+                        lngSum += childLatLng.lng * childCount;
+                }
+
+                this._latlng = this._wLatLng = new L.LatLng(latSum / totalCount, lngSum / totalCount);
+
+                // Reset dirty flag.
+                this._boundsNeedUpdate = false;
         },
 
@@ -1255 +1593 @@
 
         _recursivelyAnimateChildrenIn: function (bounds, center, maxZoom) {
-                this._recursively(bounds, 0, maxZoom - 1,
+                this._recursively(bounds, this._group._map.getMinZoom(), maxZoom - 1,
                         function (c) {
                                 var markers = c._markers,
@@ -1265 +1603 @@
                                         if (m._icon) {
                                                 m._setPos(center);
-                                                m.setOpacity(0);
+                                                m.clusterHide();
                                         }
                                 }
@@ -1276 +1614 @@
                                         if (cm._icon) {
                                                 cm._setPos(center);
-                                                cm.setOpacity(0);
+                                                cm.clusterHide();
                                         }
                                 }
@@ -1283 +1621 @@
         },
 
-        _recursivelyAnimateChildrenInAndAddSelfToMap: function (bounds, previousZoomLevel, newZoomLevel) {
-                this._recursively(bounds, newZoomLevel, 0,
+        _recursivelyAnimateChildrenInAndAddSelfToMap: function (bounds, mapMinZoom, previousZoomLevel, newZoomLevel) {
+                this._recursively(bounds, newZoomLevel, mapMinZoom,
                         function (c) {
                                 c._recursivelyAnimateChildrenIn(bounds, c._group._map.latLngToLayerPoint(c.getLatLng()).round(), previousZoomLevel);
@@ -1291 +1629 @@
                                 //As a hack we only do a animation free zoom on a single level zoom, if someone does multiple levels then we always animate
                                 if (c._isSingleParent() && previousZoomLevel - 1 === newZoomLevel) {
-                                        c.setOpacity(1);
-                                        c._recursivelyRemoveChildrenFromMap(bounds, previousZoomLevel); //Immediately remove our children as we are replacing them. TODO previousBounds not bounds
+                                        c.clusterShow();
+                                        c._recursivelyRemoveChildrenFromMap(bounds, mapMinZoom, previousZoomLevel); //Immediately remove our children as we are replacing them. TODO previousBounds not bounds
                                 } else {
-                                        c.setOpacity(0);
+                                        c.clusterHide();
                                 }
 
@@ -1303 +1641 @@
 
         _recursivelyBecomeVisible: function (bounds, zoomLevel) {
-                this._recursively(bounds, 0, zoomLevel, null, function (c) {
-                        c.setOpacity(1);
+                this._recursively(bounds, this._group._map.getMinZoom(), zoomLevel, null, function (c) {
+                        c.clusterShow();
                 });
         },
 
         _recursivelyAddChildrenToMap: function (startPos, zoomLevel, bounds) {
-                this._recursively(bounds, -1, zoomLevel,
+                this._recursively(bounds, this._group._map.getMinZoom() - 1, zoomLevel,
                         function (c) {
                                 if (zoomLevel === c._zoom) {
@@ -1327 +1665 @@
 
                                                 nm.setLatLng(startPos);
-                                                if (nm.setOpacity) {
-                                                        nm.setOpacity(0);
+                                                if (nm.clusterHide) {
+                                                        nm.clusterHide();
                                                 }
                                         }
@@ -1371 +1709 @@
 
         //exceptBounds: If set, don't remove any markers/clusters in it
-        _recursivelyRemoveChildrenFromMap: function (previousBounds, zoomLevel, exceptBounds) {
+        _recursivelyRemoveChildrenFromMap: function (previousBounds, mapMinZoom, zoomLevel, exceptBounds) {
                 var m, i;
-                this._recursively(previousBounds, -1, zoomLevel - 1,
+                this._recursively(previousBounds, mapMinZoom - 1, zoomLevel - 1,
                         function (c) {
                                 //Remove markers at every level
@@ -1380 +1718 @@
                                         if (!exceptBounds || !exceptBounds.contains(m._latlng)) {
                                                 c._group._featureGroup.removeLayer(m);
-                                                if (m.setOpacity) {
-                                                        m.setOpacity(1);
+                                                if (m.clusterShow) {
+                                                        m.clusterShow();
                                                 }
                                         }
@@ -1392 +1730 @@
                                         if (!exceptBounds || !exceptBounds.contains(m._latlng)) {
                                                 c._group._featureGroup.removeLayer(m);
-                                                if (m.setOpacity) {
-                                                        m.setOpacity(1);
+                                                if (m.clusterShow) {
+                                                        m.clusterShow();
                                                 }
                                         }
@@ -1410 +1748 @@
                 var childClusters = this._childClusters,
                     zoom = this._zoom,
-                        i, c;
-
-                if (zoomLevelToStart > zoom) { //Still going down to required depth, just recurse to child clusters
+                    i, c;
+
+                if (zoomLevelToStart <= zoom) {
+                        if (runAtEveryLevel) {
+                                runAtEveryLevel(this);
+                        }
+                        if (runAtBottomLevel && zoom === zoomLevelToStop) {
+                                runAtBottomLevel(this);
+                        }
+                }
+
+                if (zoom < zoomLevelToStart || zoom < zoomLevelToStop) {
                         for (i = childClusters.length - 1; i >= 0; i--) {
                                 c = childClusters[i];
@@ -1419 +1766 @@
                                 }
                         }
-                } else { //In required depth
-
-                        if (runAtEveryLevel) {
-                                runAtEveryLevel(this);
-                        }
-                        if (runAtBottomLevel && this._zoom === zoomLevelToStop) {
-                                runAtBottomLevel(this);
-                        }
-
-                        //TODO: This loop is almost the same as above
-                        if (zoomLevelToStop > zoom) {
-                                for (i = childClusters.length - 1; i >= 0; i--) {
-                                        c = childClusters[i];
-                                        if (boundsToApplyTo.intersects(c._bounds)) {
-                                                c._recursively(boundsToApplyTo, zoomLevelToStart, zoomLevelToStop, runAtEveryLevel, runAtBottomLevel);
-                                        }
-                                }
-                        }
-                }
-        },
-
-        _recalculateBounds: function () {
-                var markers = this._markers,
-                        childClusters = this._childClusters,
-                        i;
-
-                this._bounds = new L.LatLngBounds();
-                delete this._wLatLng;
-
-                for (i = markers.length - 1; i >= 0; i--) {
-                        this._expandBounds(markers[i]);
-                }
-                for (i = childClusters.length - 1; i >= 0; i--) {
-                        this._expandBounds(childClusters[i]);
-                }
-        },
-
+                }
+        },
 
         //Returns true if we are the parent of only one cluster and that cluster is the same as us
@@ -1463 +1775 @@
         }
 });
+
+
+
+/*
+* Extends L.Marker to include two extra methods: clusterHide and clusterShow.
+* 
+* They work as setOpacity(0) and setOpacity(1) respectively, but
+* they will remember the marker's opacity when hiding and showing it again.
+* 
+*/
+
+
+L.Marker.include({
+        
+        clusterHide: function () {
+                this.options.opacityWhenUnclustered = this.options.opacity || 1;
+                return this.setOpacity(0);
+        },
+        
+        clusterShow: function () {
+                var ret = this.setOpacity(this.options.opacity || this.options.opacityWhenUnclustered);
+                delete this.options.opacityWhenUnclustered;
+                return ret;
+        }
+        
+});
+
+
 
 
@@ -1559 +1899 @@
                                                         obj = cell[k];
                                                         dist = this._sqDist(objectPoint[L.Util.stamp(obj)], point);
-                                                        if (dist < closestDistSq) {
+                                                        if (dist < closestDistSq ||
+                                                                dist <= closestDistSq && closest === null) {
                                                                 closestDistSq = dist;
                                                                 closest = obj;
@@ -1572 +1913 @@
 
         _getCoord: function (x) {
-                return Math.floor(x / this._cellSize);
+                var coord = Math.floor(x / this._cellSize);
+                return isFinite(coord) ? coord : x;
         },
 
@@ -1693 +2035 @@
                         // find first baseline
                         var maxLat = false, minLat = false,
+                                maxLng = false, minLng = false,
+                                maxLatPt = null, minLatPt = null,
+                                maxLngPt = null, minLngPt = null,
                                 maxPt = null, minPt = null,
                                 i;
@@ -1699 +2044 @@
                                 var pt = latLngs[i];
                                 if (maxLat === false || pt.lat > maxLat) {
-                                        maxPt = pt;
+                                        maxLatPt = pt;
                                         maxLat = pt.lat;
                                 }
                                 if (minLat === false || pt.lat < minLat) {
-                                        minPt = pt;
+                                        minLatPt = pt;
                                         minLat = pt.lat;
                                 }
-                        }
+                                if (maxLng === false || pt.lng > maxLng) {
+                                        maxLngPt = pt;
+                                        maxLng = pt.lng;
+                                }
+                                if (minLng === false || pt.lng < minLng) {
+                                        minLngPt = pt;
+                                        minLng = pt.lng;
+                                }
+                        }
+                        
+                        if (minLat !== maxLat) {
+                                minPt = minLatPt;
+                                maxPt = maxLatPt;
+                        } else {
+                                minPt = minLngPt;
+                                maxPt = maxLngPt;
+                        }
+
                         var ch = [].concat(this.buildConvexHull([minPt, maxPt], latLngs),
                                                                 this.buildConvexHull([maxPt, minPt], latLngs));
@@ -1765 +2127 @@
                         positions = this._generatePointsSpiral(childMarkers.length, center);
                 } else {
-                        center.y += 10; //Otherwise circles look wrong
+                        center.y += 10; // Otherwise circles look wrong => hack for standard blue icon, renders differently for other icons.
                         positions = this._generatePointsCircle(childMarkers.length, center);
                 }
@@ -1800 +2162 @@
 
         _generatePointsSpiral: function (count, centerPt) {
-                var legLength = this._group.options.spiderfyDistanceMultiplier * this._spiralLengthStart,
-                        separation = this._group.options.spiderfyDistanceMultiplier * this._spiralFootSeparation,
-                        lengthFactor = this._group.options.spiderfyDistanceMultiplier * this._spiralLengthFactor,
+                var spiderfyDistanceMultiplier = this._group.options.spiderfyDistanceMultiplier,
+                        legLength = spiderfyDistanceMultiplier * this._spiralLengthStart,
+                        separation = spiderfyDistanceMultiplier * this._spiralFootSeparation,
+                        lengthFactor = spiderfyDistanceMultiplier * this._spiralLengthFactor * this._2PI,
                         angle = 0,
                         res = [],
@@ -1809 +2172 @@
                 res.length = count;
 
+                // Higher index, closer position to cluster center.
                 for (i = count - 1; i >= 0; i--) {
                         angle += separation / legLength + i * 0.0005;
                         res[i] = new L.Point(centerPt.x + legLength * Math.cos(angle), centerPt.y + legLength * Math.sin(angle))._round();
-                        legLength += this._2PI * lengthFactor / angle;
+                        legLength += lengthFactor / angle;
                 }
                 return res;
@@ -1824 +2188 @@
                         m, i;
 
+                group._ignoreMove = true;
+
                 this.setOpacity(1);
                 for (i = childMarkers.length - 1; i >= 0; i--) {
@@ -1844 +2210 @@
                 }
 
+                group.fire('unspiderfied', {
+                        cluster: this,
+                        markers: childMarkers
+                });
+                group._ignoreMove = false;
                 group._spiderfied = null;
         }
 });
 
-L.MarkerCluster.include(!L.DomUtil.TRANSITION ? {
-        //Non Animated versions of everything
+//Non Animated versions of everything
+L.MarkerClusterNonAnimated = L.MarkerCluster.extend({
         _animationSpiderfy: function (childMarkers, positions) {
                 var group = this._group,
                         map = group._map,
                         fg = group._featureGroup,
+                        legOptions = this._group.options.spiderLegPolylineOptions,
                         i, m, leg, newPos;
 
-                for (i = childMarkers.length - 1; i >= 0; i--) {
+                group._ignoreMove = true;
+
+                // Traverse in ascending order to make sure that inner circleMarkers are on top of further legs. Normal markers are re-ordered by newPosition.
+                // The reverse order trick no longer improves performance on modern browsers.
+                for (i = 0; i < childMarkers.length; i++) {
                         newPos = map.layerPointToLatLng(positions[i]);
                         m = childMarkers[i];
 
+                        // Add the leg before the marker, so that in case the latter is a circleMarker, the leg is behind it.
+                        leg = new L.Polyline([this._latlng, newPos], legOptions);
+                        map.addLayer(leg);
+                        m._spiderLeg = leg;
+
+                        // Now add the marker.
                         m._preSpiderfyLatlng = m._latlng;
                         m.setLatLng(newPos);
@@ -1867 +2249 @@
 
                         fg.addLayer(m);
-
-
-                        leg = new L.Polyline([this._latlng, newPos], { weight: 1.5, color: '#222' });
-                        map.addLayer(leg);
-                        m._spiderLeg = leg;
                 }
                 this.setOpacity(0.3);
-                group.fire('spiderfied');
+
+                group._ignoreMove = false;
+                group.fire('spiderfied', {
+                        cluster: this,
+                        markers: childMarkers
+                });
         },
 
@@ -1880 +2262 @@
                 this._noanimationUnspiderfy();
         }
-} : {
-        //Animated versions here
-        SVG_ANIMATION: (function () {
-                return document.createElementNS('http://www.w3.org/2000/svg', 'animate').toString().indexOf('SVGAnimate') > -1;
-        }()),
+});
+
+//Animated versions here
+L.MarkerCluster.include({
 
         _animationSpiderfy: function (childMarkers, positions) {
@@ -1891 +2272 @@
                         map = group._map,
                         fg = group._featureGroup,
-                        thisLayerPos = map.latLngToLayerPoint(this._latlng),
-                        i, m, leg, newPos;
-
-                //Add markers to map hidden at our center point
-                for (i = childMarkers.length - 1; i >= 0; i--) {
+                        thisLayerLatLng = this._latlng,
+                        thisLayerPos = map.latLngToLayerPoint(thisLayerLatLng),
+                        svg = L.Path.SVG,
+                        legOptions = L.extend({}, this._group.options.spiderLegPolylineOptions), // Copy the options so that we can modify them for animation.
+                        finalLegOpacity = legOptions.opacity,
+                        i, m, leg, legPath, legLength, newPos;
+
+                if (finalLegOpacity === undefined) {
+                        finalLegOpacity = L.MarkerClusterGroup.prototype.options.spiderLegPolylineOptions.opacity;
+                }
+
+                if (svg) {
+                        // If the initial opacity of the spider leg is not 0 then it appears before the animation starts.
+                        legOptions.opacity = 0;
+
+                        // Add the class for CSS transitions.
+                        legOptions.className = (legOptions.className || '') + ' leaflet-cluster-spider-leg';
+                } else {
+                        // Make sure we have a defined opacity.
+                        legOptions.opacity = finalLegOpacity;
+                }
+
+                group._ignoreMove = true;
+
+                // Add markers and spider legs to map, hidden at our center point.
+                // Traverse in ascending order to make sure that inner circleMarkers are on top of further legs. Normal markers are re-ordered by newPosition.
+                // The reverse order trick no longer improves performance on modern browsers.
+                for (i = 0; i < childMarkers.length; i++) {
                         m = childMarkers[i];
 
-                        //If it is a marker, add it now and we'll animate it out
-                        if (m.setOpacity) {
-                                m.setZIndexOffset(1000000); //Make these appear on top of EVERYTHING
-                                m.setOpacity(0);
+                        newPos = map.layerPointToLatLng(positions[i]);
+
+                        // Add the leg before the marker, so that in case the latter is a circleMarker, the leg is behind it.
+                        leg = new L.Polyline([thisLayerLatLng, newPos], legOptions);
+                        map.addLayer(leg);
+                        m._spiderLeg = leg;
+
+                        // Explanations: https://jakearchibald.com/2013/animated-line-drawing-svg/
+                        // In our case the transition property is declared in the CSS file.
+                        if (svg) {
+                                legPath = leg._path;
+                                legLength = legPath.getTotalLength() + 0.1; // Need a small extra length to avoid remaining dot in Firefox.
+                                legPath.style.strokeDasharray = legLength; // Just 1 length is enough, it will be duplicated.
+                                legPath.style.strokeDashoffset = legLength;
+                        }
+
+                        // If it is a marker, add it now and we'll animate it out
+                        if (m.setZIndexOffset) {
+                                m.setZIndexOffset(1000000); // Make normal markers appear on top of EVERYTHING
+                        }
+                        if (m.clusterHide) {
+                                m.clusterHide();
+                        }
                         
-                                fg.addLayer(m);
-
+                        // Vectors just get immediately added
+                        fg.addLayer(m);
+
+                        if (m._setPos) {
                                 m._setPos(thisLayerPos);
-                        } else {
-                                //Vectors just get immediately added
-                                fg.addLayer(m);
                         }
                 }
@@ -1915 +2337 @@
                 group._animationStart();
 
-                var initialLegOpacity = L.Path.SVG ? 0 : 0.3,
-                        xmlns = L.Path.SVG_NS;
-
-
+                // Reveal markers and spider legs.
                 for (i = childMarkers.length - 1; i >= 0; i--) {
                         newPos = map.layerPointToLatLng(positions[i]);
@@ -1927 +2346 @@
                         m.setLatLng(newPos);
                         
-                        if (m.setOpacity) {
-                                m.setOpacity(1);
-                        }
-
-
-                        //Add Legs.
-                        leg = new L.Polyline([me._latlng, newPos], { weight: 1.5, color: '#222', opacity: initialLegOpacity });
-                        map.addLayer(leg);
-                        m._spiderLeg = leg;
-
-                        //Following animations don't work for canvas
-                        if (!L.Path.SVG || !this.SVG_ANIMATION) {
-                                continue;
-                        }
-
-                        //How this works:
-                        //http://stackoverflow.com/questions/5924238/how-do-you-animate-an-svg-path-in-ios
-                        //http://dev.opera.com/articles/view/advanced-svg-animation-techniques/
-
-                        //Animate length
-                        var length = leg._path.getTotalLength();
-                        leg._path.setAttribute("stroke-dasharray", length + "," + length);
-
-                        var anim = document.createElementNS(xmlns, "animate");
-                        anim.setAttribute("attributeName", "stroke-dashoffset");
-                        anim.setAttribute("begin", "indefinite");
-                        anim.setAttribute("from", length);
-                        anim.setAttribute("to", 0);
-                        anim.setAttribute("dur", 0.25);
-                        leg._path.appendChild(anim);
-                        anim.beginElement();
-
-                        //Animate opacity
-                        anim = document.createElementNS(xmlns, "animate");
-                        anim.setAttribute("attributeName", "stroke-opacity");
-                        anim.setAttribute("attributeName", "stroke-opacity");
-                        anim.setAttribute("begin", "indefinite");
-                        anim.setAttribute("from", 0);
-                        anim.setAttribute("to", 0.5);
-                        anim.setAttribute("dur", 0.25);
-                        leg._path.appendChild(anim);
-                        anim.beginElement();
-                }
-                me.setOpacity(0.3);
-
-                //Set the opacity of the spiderLegs back to their correct value
-                // The animations above override this until they complete.
-                // If the initial opacity of the spiderlegs isn't 0 then they appear before the animation starts.
-                if (L.Path.SVG) {
-                        this._group._forceLayout();
-
-                        for (i = childMarkers.length - 1; i >= 0; i--) {
-                                m = childMarkers[i]._spiderLeg;
-
-                                m.options.opacity = 0.5;
-                                m._path.setAttribute('stroke-opacity', 0.5);
-                        }
-                }
+                        if (m.clusterShow) {
+                                m.clusterShow();
+                        }
+
+                        // Animate leg (animation is actually delegated to CSS transition).
+                        if (svg) {
+                                leg = m._spiderLeg;
+                                legPath = leg._path;
+                                legPath.style.strokeDashoffset = 0;
+                                //legPath.style.strokeOpacity = finalLegOpacity;
+                                leg.setStyle({opacity: finalLegOpacity});
+                        }
+                }
+                this.setOpacity(0.3);
+
+                group._ignoreMove = false;
 
                 setTimeout(function () {
                         group._animationEnd();
-                        group.fire('spiderfied');
+                        group.fire('spiderfied', {
+                                cluster: me,
+                                markers: childMarkers
+                        });
                 }, 200);
         },
 
         _animationUnspiderfy: function (zoomDetails) {
-                var group = this._group,
+                var me = this,
+                        group = this._group,
                         map = group._map,
                         fg = group._featureGroup,
                         thisLayerPos = zoomDetails ? map._latLngToNewLayerPoint(this._latlng, zoomDetails.zoom, zoomDetails.center) : map.latLngToLayerPoint(this._latlng),
                         childMarkers = this.getAllChildMarkers(),
-                        svg = L.Path.SVG && this.SVG_ANIMATION,
-                        m, i, a;
-
+                        svg = L.Path.SVG,
+                        m, i, leg, legPath, legLength, nonAnimatable;
+
+                group._ignoreMove = true;
                 group._animationStart();
 
@@ -2008 +2390 @@
                         m = childMarkers[i];
 
-                        //Marker was added to us after we were spidified
+                        //Marker was added to us after we were spiderfied
                         if (!m._preSpiderfyLatlng) {
                                 continue;
                         }
+
+                        //Close any popup on the marker first, otherwise setting the location of the marker will make the map scroll
+                        m.closePopup();
 
                         //Fix up the location to the real one
                         m.setLatLng(m._preSpiderfyLatlng);
                         delete m._preSpiderfyLatlng;
+
                         //Hack override the location to be our center
-                        if (m.setOpacity) {
+                        nonAnimatable = true;
+                        if (m._setPos) {
                                 m._setPos(thisLayerPos);
-                                m.setOpacity(0);
-                        } else {
+                                nonAnimatable = false;
+                        }
+                        if (m.clusterHide) {
+                                m.clusterHide();
+                                nonAnimatable = false;
+                        }
+                        if (nonAnimatable) {
                                 fg.removeLayer(m);
                         }
 
-                        //Animate the spider legs back in
+                        // Animate the spider leg back in (animation is actually delegated to CSS transition).
                         if (svg) {
-                                a = m._spiderLeg._path.childNodes[0];
-                                a.setAttribute('to', a.getAttribute('from'));
-                                a.setAttribute('from', 0);
-                                a.beginElement();
-
-                                a = m._spiderLeg._path.childNodes[1];
-                                a.setAttribute('from', 0.5);
-                                a.setAttribute('to', 0);
-                                a.setAttribute('stroke-opacity', 0);
-                                a.beginElement();
-
-                                m._spiderLeg._path.setAttribute('stroke-opacity', 0);
-                        }
-                }
+                                leg = m._spiderLeg;
+                                legPath = leg._path;
+                                legLength = legPath.getTotalLength() + 0.1;
+                                legPath.style.strokeDashoffset = legLength;
+                                leg.setStyle({opacity: 0});
+                        }
+                }
+
+                group._ignoreMove = false;
 
                 setTimeout(function () {
@@ -2059 +2446 @@
                                 }
 
-
-                                if (m.setOpacity) {
-                                        m.setOpacity(1);
+                                if (m.clusterShow) {
+                                        m.clusterShow();
+                                }
+                                if (m.setZIndexOffset) {
                                         m.setZIndexOffset(0);
                                 }
@@ -2073 +2461 @@
                         }
                         group._animationEnd();
+                        group.fire('unspiderfied', {
+                                cluster: me,
+                                markers: childMarkers
+                        });
                 }, 200);
         }
@@ -2082 +2474 @@
         _spiderfied: null,
 
+        unspiderfy: function () {
+                this._unspiderfy.apply(this, arguments);
+        },
+
         _spiderfierOnAdd: function () {
                 this._map.on('click', this._unspiderfyWrapper, this);
@@ -2091 +2487 @@
                 this._map.on('zoomend', this._noanimationUnspiderfy, this);
 
-                if (L.Path.SVG && !L.Browser.touch) {
-                        this._map._initPathRoot();
+                if (!L.Browser.touch) {
+                        this._map.getRenderer(this);
                         //Needs to happen in the pageload, not after, or animations don't work in webkit
                         //  http://stackoverflow.com/questions/8455200/svg-animate-with-dynamically-added-elements
@@ -2103 +2499 @@
                 this._map.off('zoomstart', this._unspiderfyZoomStart, this);
                 this._map.off('zoomanim', this._unspiderfyZoomAnim, this);
-
-                this._unspiderfy(); //Ensure that markers are back where they should be
-        },
-
+                this._map.off('zoomend', this._noanimationUnspiderfy, this);
+
+                //Ensure that markers are back where they should be
+                // Use no animation to avoid a sticky leaflet-cluster-anim class on mapPane
+                this._noanimationUnspiderfy();
+        },
 
         //On zoom start we add a zoomanim handler so that we are guaranteed to be last (after markers are animated)
@@ -2117 +2515 @@
                 this._map.on('zoomanim', this._unspiderfyZoomAnim, this);
         },
+
         _unspiderfyZoomAnim: function (zoomDetails) {
                 //Wait until the first zoomanim after the user has finished touch-zooming before running the animation
@@ -2127 +2526 @@
         },
 
-
         _unspiderfyWrapper: function () {
                 /// <summary>_unspiderfy but passes no arguments</summary>
@@ -2150 +2548 @@
                         this._featureGroup.removeLayer(layer);
 
-                        layer.setOpacity(1);
-                        //Position will be fixed up immediately in _animationUnspiderfy
-                        layer.setZIndexOffset(0);
+                        if (layer.clusterShow) {
+                                layer.clusterShow();
+                        }
+                                //Position will be fixed up immediately in _animationUnspiderfy
+                        if (layer.setZIndexOffset) {
+                                layer.setZIndexOffset(0);
+                        }
 
                         this._map.removeLayer(layer._spiderLeg);
@@ -2161 +2563 @@
 
 
+/**
+ * Adds 1 public method to MCG and 1 to L.Marker to facilitate changing
+ * markers' icon options and refreshing their icon and their parent clusters
+ * accordingly (case where their iconCreateFunction uses data of childMarkers
+ * to make up the cluster icon).
+ */
+
+
+L.MarkerClusterGroup.include({
+        /**
+         * Updates the icon of all clusters which are parents of the given marker(s).
+         * In singleMarkerMode, also updates the given marker(s) icon.
+         * @param layers L.MarkerClusterGroup|L.LayerGroup|Array(L.Marker)|Map(L.Marker)|
+         * L.MarkerCluster|L.Marker (optional) list of markers (or single marker) whose parent
+         * clusters need to be updated. If not provided, retrieves all child markers of this.
+         * @returns {L.MarkerClusterGroup}
+         */
+        refreshClusters: function (layers) {
+                if (!layers) {
+                        layers = this._topClusterLevel.getAllChildMarkers();
+                } else if (layers instanceof L.MarkerClusterGroup) {
+                        layers = layers._topClusterLevel.getAllChildMarkers();
+                } else if (layers instanceof L.LayerGroup) {
+                        layers = layers._layers;
+                } else if (layers instanceof L.MarkerCluster) {
+                        layers = layers.getAllChildMarkers();
+                } else if (layers instanceof L.Marker) {
+                        layers = [layers];
+                } // else: must be an Array(L.Marker)|Map(L.Marker)
+                this._flagParentsIconsNeedUpdate(layers);
+                this._refreshClustersIcons();
+
+                // In case of singleMarkerMode, also re-draw the markers.
+                if (this.options.singleMarkerMode) {
+                        this._refreshSingleMarkerModeMarkers(layers);
+                }
+
+                return this;
+        },
+
+        /**
+         * Simply flags all parent clusters of the given markers as having a "dirty" icon.
+         * @param layers Array(L.Marker)|Map(L.Marker) list of markers.
+         * @private
+         */
+        _flagParentsIconsNeedUpdate: function (layers) {
+                var id, parent;
+
+                // Assumes layers is an Array or an Object whose prototype is non-enumerable.
+                for (id in layers) {
+                        // Flag parent clusters' icon as "dirty", all the way up.
+                        // Dumb process that flags multiple times upper parents, but still
+                        // much more efficient than trying to be smart and make short lists,
+                        // at least in the case of a hierarchy following a power law:
+                        // http://jsperf.com/flag-nodes-in-power-hierarchy/2
+                        parent = layers[id].__parent;
+                        while (parent) {
+                                parent._iconNeedsUpdate = true;
+                                parent = parent.__parent;
+                        }
+                }
+        },
+
+        /**
+         * Re-draws the icon of the supplied markers.
+         * To be used in singleMarkerMode only.
+         * @param layers Array(L.Marker)|Map(L.Marker) list of markers.
+         * @private
+         */
+        _refreshSingleMarkerModeMarkers: function (layers) {
+                var id, layer;
+
+                for (id in layers) {
+                        layer = layers[id];
+
+                        // Make sure we do not override markers that do not belong to THIS group.
+                        if (this.hasLayer(layer)) {
+                                // Need to re-create the icon first, then re-draw the marker.
+                                layer.setIcon(this._overrideMarkerIcon(layer));
+                        }
+                }
+        }
+});
+
+L.Marker.include({
+        /**
+         * Updates the given options in the marker's icon and refreshes the marker.
+         * @param options map object of icon options.
+         * @param directlyRefreshClusters boolean (optional) true to trigger
+         * MCG.refreshClustersOf() right away with this single marker.
+         * @returns {L.Marker}
+         */
+        refreshIconOptions: function (options, directlyRefreshClusters) {
+                var icon = this.options.icon;
+
+                L.setOptions(icon, options);
+
+                this.setIcon(icon);
+
+                // Shortcut to refresh the associated MCG clusters right away.
+                // To be used when refreshing a single marker.
+                // Otherwise, better use MCG.refreshClusters() once at the end with
+                // the list of modified markers.
+                if (directlyRefreshClusters && this.__parent) {
+                        this.__parent._group.refreshClusters(this);
+                }
+
+                return this;
+        }
+});
+
+
 }(window, document));