Add an element for tracking zoom animations. Use it for trying to stop a map zoom. Still doesn't quite work right. Stopping a zoomPan or PanAnimation does work however. Code is all cludgy :)

refs #2560

debug/map/zoompan.html

@@ -27,6 +27,7 @@
 		<button id="kyiv">Kyiv</button> -->
 		<button id="dc">DC</button>
 		<button id="sf">SF</button>
+		<button id="stop">stop</button>
 	</div>
 
 	<script type="text/javascript">
@@ -48,8 +49,9 @@
 			// marker3 = L.marker(dc).addTo(map),
 			// marker4 = L.marker(sf).addTo(map);
 
-		document.getElementById('dc').onclick = function () { map.zoomPanTo(dc); };
+		document.getElementById('dc').onclick = function () { map.zoomPanTo(dc, 10); };
-		document.getElementById('sf').onclick = function () { map.zoomPanTo(sf); };
+		document.getElementById('sf').onclick = function () { map.zoomPanTo(sf, 10); };
+		document.getElementById('stop').onclick = function () { map.stopAnimation(); };
 		// document.getElementById('london').onclick = function () { map.zoomPanTo(london); };
 		// document.getElementById('kyiv').onclick = function () { map.zoomPanTo(kyiv); };
 

src/map/Map.js

@@ -48,6 +48,8 @@ L.Map = L.Evented.extend({
 		this.callInitHooks();
 
 		this._addLayers(this.options.layers);
+
+		this._createAnimProxy();
 	},
 
 
@@ -194,6 +196,50 @@ L.Map = L.Evented.extend({
 		});
 	},
 
+	stopAnimation: function () {
+		//TODO: Need to know if we are in a anim so we can fire zoomend
+
+		//zoomPan
+		L.Util.cancelAnimFrame(this._zoomPanFrame);
+
+		//PosAnimation
+		if (this._panAnim && this._panAnim._inProgress) {
+			this._panAnim.stop(); //This handles everything
+			return;
+		}
+
+		//zoomAnimation
+		if (this._animatingZoom) {
+			//Calculate _animateToZoom and _animateToCenter
+			var regex = /([-+]?(?:\d*\.)?\d+)\D*, ([-+]?(?:\d*\.)?\d+)\D*, ([-+]?(?:\d*\.)?\d+)\D*\)/;
+			var style = window.getComputedStyle(this._proxy._el);
+			var matches = style[L.DomUtil.TRANSFORM].match(regex);
+			//Assuming this works!
+
+			//debugger;
+			this._animateToZoom = this.getScaleZoom(parseFloat(matches[1]), 1);
+			var px = L.point(matches[2], matches[3]);
+			this._animateToCenter = this.unproject(px, 14);
+
+			console.log('stop', this._animateToCenter);
+			//this._animateToCenter.lat = parseFloat(matches[2]);
+			//this._animateToCenter.lng = parseFloat(matches[3]);
+
+			//L.Util.falseFn(map._panes.mapPane.offsetWidth);
+
+			this._onZoomTransitionEnd();
+			//L.Util.falseFn(map._panes.mapPane.offsetWidth);
+
+			//Something like _onZoomTransitionEnd, but not quite, we don't want the _resetView call
+
+			//Or if we set _animateToCenter and _animateToZoom then we can just call it
+		}
+
+		//TODO do a reset view
+
+
+	},
+
 	// TODO handler.addTo
 	addHandler: function (name, HandlerClass) {
 		if (!HandlerClass) { return this; }
@@ -476,11 +522,38 @@ L.Map = L.Evented.extend({
 		}
 	},
 
+	_createAnimProxy: function () {
+		var proxy = new L.Layer();
+		this._proxy = proxy;
+
+		proxy.onAdd = function () {
+
+			proxy._el = L.DomUtil.create('div', 'leaflet-proxy leaflet-zoom-animated');
+			proxy.getPane().appendChild(proxy._el);
+			this.update();
+		};
+		proxy._animateZoom = function (e) {
+			//TODO: Will probably need to do e.offset in the translate
+			L.DomUtil.setTransform(proxy._el, this._map.project(e.center, 14), this._map.getZoomScale(e.zoom, 1));
+
+			console.log('anim', e.center);
+		};
+		proxy.update = function () {
+			var c = this._map.getCenter();
+			L.DomUtil.setTransform(proxy._el, this._map.project(c, 14), this._map.getZoomScale(this._map.getZoom(), 1));
+			console.log('update', c);
+		};
+		proxy.getEvents = function () {
+			return { zoomanim: proxy._animateZoom, viewreset: proxy.update };
+		};
+
+		this.addLayer(proxy);
+	},
 
 	// private methods that modify map state
 
 	_resetView: function (center, zoom, preserveMapOffset, afterZoomAnim) {
-
+		//console.log('resetView', center, zoom);
 		var zoomChanged = (this._zoom !== zoom);
 
 		if (!afterZoomAnim) {

src/map/anim/Map.ZoomPan.js

@@ -36,11 +36,12 @@ L.Map.include({
 		    duration = 1000 * S * 0.8;
 
 		function frame() {
+			//console.log('frame');
 			var t = (Date.now() - start) / duration,
 			    s = easeOut(t) * S;
 
 			if (t <= 1) {
-				L.Util.requestAnimFrame(frame, this);
+				this._zoomPanFrame = L.Util.requestAnimFrame(frame, this);
 
 				this._resetView(
 					this.unproject(from.add(to.subtract(from).multiplyBy(u(s) / u1)), startZoom),