From c698e2ed54839ef96feb7608de5dd11cb2eac1fa Mon Sep 17 00:00:00 2001
From: danzel <danzel@localhost.geek.nz>
Date: Tue, 7 Aug 2012 11:19:39 +1200
Subject: [PATCH] Working on #27. This fixes the animation on desktop but not
 mobile.

---
 src/MarkerCluster.Spiderfier.js | 36 +++++++++++++++++++++++++--------
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/MarkerCluster.Spiderfier.js b/src/MarkerCluster.Spiderfier.js
index c814bcefa6..be6f6af9cc 100644
--- a/src/MarkerCluster.Spiderfier.js
+++ b/src/MarkerCluster.Spiderfier.js
@@ -40,11 +40,12 @@ L.MarkerCluster.include({
 		this._animationSpiderfy(childMarkers, positions);
 	},
 
-	unspiderfy: function () {
+	unspiderfy: function (zoomDetails) {
+		/// <param Name="zoomDetails">Argument from zoomanim if being called in a zoom animation or null otherwise</param>
 		if (this._group._inZoomAnimation) {
 			return;
 		}
-		this._animationUnspiderfy();
+		this._animationUnspiderfy(zoomDetails);
 
 		this._group._spiderfied = null;
 	},
@@ -225,10 +226,10 @@ L.MarkerCluster.include(!L.DomUtil.TRANSITION ? {
 		}, 250);
 	},
 
-	_animationUnspiderfy: function () {
+	_animationUnspiderfy: function (zoomDetails) {
 		var group = this._group,
 			map = group._map,
-			thisLayerPos = map.latLngToLayerPoint(this._latlng),
+			thisLayerPos = zoomDetails ? map._latLngToNewLayerPoint(this._latlng, zoomDetails.zoom, zoomDetails.center) : map.latLngToLayerPoint(this._latlng),
 			childMarkers = this.getAllChildMarkers(),
 			svg = L.Browser.svg,
 			m, i, a;
@@ -305,7 +306,8 @@ L.MarkerClusterGroup.include({
 	_spiderfied: null,
 
 	_spiderfierOnAdd: function () {
-		this._map.on('click zoomstart', this._unspiderfy, this);
+		this._map.on('click', this._unspiderfyWrapper, this);
+		this._map.on('zoomstart', this._unspiderfyZoomStart, this);
 
 		if (L.Browser.svg) {
 			this._map._initPathRoot(); //Needs to happen in the pageload, not after, or animations don't work in chrome
@@ -315,12 +317,30 @@ L.MarkerClusterGroup.include({
 	},
 
 	_spiderfierOnRemove: function () {
-		this._map.off('click zoomstart', this._unspiderfy, this);
+		this._map.off('click', this._unspiderfyWrapper, this);
+		this._map.off('zoomstart', this._unspiderfyZoomStart, this);
 	},
 
-	_unspiderfy: function () {
+
+	//On zoom start we add a zoomanim handler so that we are guaranteed to be last (after markers are animated)
+	//This means we can define the animation they do rather than Markers doing an animation to their actual location
+	_unspiderfyZoomStart: function () {
+		this._map.on('zoomanim', this._unspiderfyZoomAnim, this);
+	},
+	_unspiderfyZoomAnim: function (zoomDetails) {
+		this._map.off('zoomanim', this._unspiderfyZoomAnim, this);
+		this._unspiderfy(zoomDetails);
+	},
+
+
+	_unspiderfyWrapper: function () {
+		/// <summary>_unspiderfy but passes no arguments</summary>
+		this._unspiderfy();
+	},
+
+	_unspiderfy: function (zoomDetails) {
 		if (this._spiderfied) {
-			this._spiderfied.unspiderfy();
+			this._spiderfied.unspiderfy(zoomDetails);
 		}
 	},