zoom animation fix and refactoring, works like a charm on iOS now!
This commit is contained in:
Mourner
parent
a00824579a
commit
9d93998ba2
@ -28,7 +28,6 @@ Controls:
|
||||
Known issues to be fixed:
|
||||
|
||||
- flickering of vector layers on drag end under mobile webkit
|
||||
- show scaled background until tiles are loaded on mobile webkit
|
||||
|
||||
## Browser support
|
||||
|
||||
|
||||
@ -17,14 +17,17 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.leaflet-tile {
|
||||
visibility: visible;
|
||||
visibility: inherit;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.2s linear;
|
||||
}
|
||||
.leaflet-tile-loaded {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
.leaflet-popup {
|
||||
-webkit-transition: opacity 0.2s linear;
|
||||
opacity: 0;
|
||||
|
||||
5
dist/leaflet.css
vendored
5
dist/leaflet.css
vendored
@ -46,10 +46,7 @@
|
||||
.leaflet-marker-pane { z-index: 5; }
|
||||
.leaflet-popup-pane { z-index: 6; }
|
||||
|
||||
.leaflet-animating .leaflet-marker-pane,
|
||||
.leaflet-animating .leaflet-shadow-pane,
|
||||
.leaflet-animating .leaflet-popup-pane,
|
||||
.leaflet-animating .leaflet-overlay-pane {
|
||||
.leaflet-animating .leaflet-objects-pane {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
25
dist/leaflet.js
vendored
25
dist/leaflet.js
vendored
@ -57,9 +57,10 @@ d=a.length,e="",f;c<d;c++)f=a[c],b&&f._round(),e+=(c?"L":"M")+f.x+" "+f.y;return
|
||||
_updatePath:function(){this._clipPoints();this._simplifyPoints();L.Path.prototype._updatePath.call(this)}});L.Polygon=L.Polyline.extend({options:{fill:!0},initialize:function(a,b){L.Polyline.prototype.initialize.call(this,a,b);if(a[0]instanceof Array)this._latlngs=a[0],this._holes=a.slice(1)},projectLatlngs:function(){L.Polyline.prototype.projectLatlngs.call(this);this._holePoints=[];if(this._holes)for(var a=0,b=this._holes.length;a<b;a++){this._holePoints[a]=[];for(var c=0,d=this._holes[a].length;c<d;c++)this._holePoints[a][c]=this._map.latLngToLayerPoint(this._holes[a][c])}},_clipPoints:function(){this._parts=
|
||||
[this._originalPoints].concat(this._holePoints);if(!this.options.noClip)for(var a=0,b=this._parts.length;a<b;a++)this._parts[a]=L.PolyUtil.clipPolygon(this._parts[a],this._map._pathViewport)},_getPathPartStr:function(a){return L.Polyline.prototype._getPathPartStr.call(this,a)+(L.Path.SVG?"z":"x")}});L.Circle=L.Path.extend({initialize:function(a,b,c){L.Path.prototype.initialize.call(this,c);this._latlng=a;this._radius=b},options:{fill:!0},projectLatlngs:function(){this._point=this._map.latLngToLayerPoint(this._latlng)},getPathString:function(){var a=this._point,b=this._radius;return L.Path.SVG?"M"+a.x+","+(a.y-b)+"A"+b+","+b+",0,1,1,"+(a.x-0.1)+","+(a.y-b)+" z":(a._round(),b=Math.round(b),"AL "+a.x+","+a.y+" "+b+","+b+" 0,23592600")}});L.Handler=L.Class.extend({initialize:function(a){this._map=a},enabled:function(){return!!this._enabled}});L.Handler.MapDrag=L.Handler.extend({enable:function(){if(!this._enabled){if(!this._draggable){this._draggable=new L.Draggable(this._map._mapPane,this._map._container);var a=this._map.getSize();if(a.x*a.y>=7E5&&L.Browser.gecko)this._draggable._updatePosition=L.Util.deferExecByInterval(this._draggable._updatePosition,0,this._draggable);this._draggable.on("dragstart",this._onDragStart,this);this._draggable.on("drag",this._onDrag,this);this._draggable.on("dragend",this._onDragEnd,this)}this._draggable.enable();
|
||||
this._enabled=!0}},disable:function(){if(this._enabled)this._draggable.disable(),this._enabled=!1},moved:function(){return this._draggable._moved},_onDragStart:function(){this._map.fire("movestart");this._map.fire("dragstart")},_onDrag:function(){this._map.fire("move");this._map.fire("drag")},_onDragEnd:function(){this._map.fire("moveend");this._map.fire("dragend")}});L.Handler.TouchZoom=L.Handler.extend({enable:function(){if(L.Browser.mobileWebkit&&!this._enabled)L.DomEvent.addListener(this._map._container,"touchstart",this._onTouchStart,this),this._enabled=!0},disable:function(){if(this._enabled)L.DomEvent.removeListener(this._map._container,"touchstart",this._onTouchStart,this),this._enabled=!1},_onTouchStart:function(a){if(a.touches&&a.touches.length==2){var b=this._map.mouseEventToLayerPoint(a.touches[0]),c=this._map.mouseEventToLayerPoint(a.touches[1]),d=
|
||||
this._map.containerPointToLayerPoint(this._map.getSize().divideBy(2));this._startCenter=b.add(c).divideBy(2,!0);this._startDist=b.distanceTo(c);this._startTransform=this._map._mapPane.style.webkitTransform;this._moved=!1;this._centerOffset=d.subtract(this._startCenter);L.DomEvent.addListener(document,"touchmove",this._onTouchMove,this);L.DomEvent.addListener(document,"touchend",this._onTouchEnd,this);L.DomEvent.preventDefault(a)}},_onTouchMove:function(a){if(a.touches&&a.touches.length==2){if(!this._moved)this._map._panes.popupPane.style.display=
|
||||
"none",this._moved=!0;var b=this._map.mouseEventToLayerPoint(a.touches[0]),c=this._map.mouseEventToLayerPoint(a.touches[1]);this._scale=b.distanceTo(c)/this._startDist;this._delta=b.add(c).divideBy(2,!0).subtract(this._startCenter);this._map._mapPane.style.webkitTransform=[this._startTransform,L.DomUtil.getTranslateString(this._delta),L.DomUtil.getScaleString(this._scale,this._startCenter)].join(" ");L.DomEvent.preventDefault(a)}},_onTouchEnd:function(a){if(a.touches&&!(a.touches.length>=2)&&this._scale){a=
|
||||
this._map.getZoom()+Math.round(Math.log(this._scale)/Math.LN2);var b=this._centerOffset.subtract(this._delta).divideBy(this._scale);this._map.setView(this._map.unproject(this._map.getPixelOrigin().add(this._startCenter).add(b)),a,!0);this._map._panes.popupPane.style.display="";this._scale=null;L.DomEvent.removeListener(document,"touchmove",this._onTouchMove);L.DomEvent.removeListener(document,"touchend",this._onTouchEnd)}}});L.Handler.ScrollWheelZoom=L.Handler.extend({enable:function(){if(!this._enabled)L.DomEvent.addListener(this._map._container,"mousewheel",this._onWheelScroll,this),this._delta=0,this._enabled=!0},disable:function(){if(this._enabled)L.DomEvent.removeListener(this._map._container,"mousewheel",this._onWheelScroll),this._enabled=!1},_onWheelScroll:function(a){this._delta+=L.DomEvent.getWheelDelta(a);this._lastMousePos=this._map.mouseEventToContainerPoint(a);clearTimeout(this._timer);this._timer=setTimeout(L.Util.bind(this._performZoom,
|
||||
this._map.containerPointToLayerPoint(this._map.getSize().divideBy(2));this._startCenter=b.add(c).divideBy(2,!0);this._startDist=b.distanceTo(c);this._moved=!1;this._zooming=!0;this._centerOffset=d.subtract(this._startCenter);L.DomEvent.addListener(document,"touchmove",this._onTouchMove,this);L.DomEvent.addListener(document,"touchend",this._onTouchEnd,this);L.DomEvent.preventDefault(a)}},_onTouchMove:function(a){if(a.touches&&a.touches.length==2){if(!this._moved)this._map._mapPane.className+=" leaflet-animating",
|
||||
this._map._prepareTileBg(),this._moved=!0;var b=this._map.mouseEventToLayerPoint(a.touches[0]),c=this._map.mouseEventToLayerPoint(a.touches[1]);this._scale=b.distanceTo(c)/this._startDist;this._delta=b.add(c).divideBy(2,!0).subtract(this._startCenter);this._map._tileBg.style.webkitTransform=[L.DomUtil.getTranslateString(this._delta),L.DomUtil.getScaleString(this._scale,this._startCenter)].join(" ");L.DomEvent.preventDefault(a)}},_onTouchEnd:function(a){if(a.touches&&!(a.touches.length>=2)&&this._moved&&
|
||||
this._zooming){this._zooming=!1;var b=this._map.getZoom();a=this._map._limitZoom(b+Math.round(Math.log(this._scale)/Math.LN2));var c=a-b;b=this._centerOffset.subtract(this._delta).divideBy(this._scale);var d=this._map.unproject(this._map.getPixelOrigin().add(this._startCenter).add(b));L.DomEvent.removeListener(document,"touchmove",this._onTouchMove);L.DomEvent.removeListener(document,"touchend",this._onTouchEnd);c=Math.pow(2,c);var e=L.DomUtil.getPosition(this._map._mapPane);e=L.DomUtil.getTranslateString(e)+
|
||||
" "+this._map._tileBg.style.webkitTransform;this._map._runAnimation(d,a,c/this._scale,e,this._startCenter.add(b))}}});L.Handler.ScrollWheelZoom=L.Handler.extend({enable:function(){if(!this._enabled)L.DomEvent.addListener(this._map._container,"mousewheel",this._onWheelScroll,this),this._delta=0,this._enabled=!0},disable:function(){if(this._enabled)L.DomEvent.removeListener(this._map._container,"mousewheel",this._onWheelScroll),this._enabled=!1},_onWheelScroll:function(a){this._delta+=L.DomEvent.getWheelDelta(a);this._lastMousePos=this._map.mouseEventToContainerPoint(a);clearTimeout(this._timer);this._timer=setTimeout(L.Util.bind(this._performZoom,
|
||||
this),50);L.DomEvent.preventDefault(a)},_performZoom:function(){var a=Math.round(this._delta);this._delta=0;if(a){var b=this._getCenterForScrollWheelZoom(this._lastMousePos,a);a=this._map.getZoom()+a;this._map._limitZoom(a)!=this._map._zoom&&this._map.setView(b,a)}},_getCenterForScrollWheelZoom:function(a,b){var c=this._map.getPixelBounds().getCenter(),d=this._map.getSize().divideBy(2);d=a.subtract(d).multiplyBy(1-Math.pow(2,-b));return this._map.unproject(c.add(d))}});L.Handler.DoubleClickZoom=L.Handler.extend({enable:function(){if(!this._enabled)this._map.on("dblclick",this._onDoubleClick,this._map),this._enabled=!0},disable:function(){if(this._enabled)this._map.off("dblclick",this._onDoubleClick,this._map),this._enabled=!1},_onDoubleClick:function(a){this.setView(a.position,this._zoom+1)}});L.Handler.ShiftDragZoom=L.Handler.extend({initialize:function(a){this._map=a;this._container=a._container;this._pane=a._panes.overlayPane},enable:function(){if(!this._enabled)L.DomEvent.addListener(this._container,"mousedown",this._onMouseDown,this),this._enabled=!0},disable:function(){if(this._enabled)L.DomEvent.removeListener(this._container,"mousedown",this._onMouseDown),this._enabled=!1},_onMouseDown:function(a){if(!a.shiftKey||a.which!=1&&a.button!=1)return!1;L.DomUtil.disableTextSelection();
|
||||
this._startLayerPoint=this._map.mouseEventToLayerPoint(a);this._box=L.DomUtil.create("div","leaflet-zoom-box",this._pane);L.DomUtil.setPosition(this._box,this._startLayerPoint);this._container.style.cursor="crosshair";L.DomEvent.addListener(document,"mousemove",this._onMouseMove,this);L.DomEvent.addListener(document,"mouseup",this._onMouseUp,this);L.DomEvent.preventDefault(a)},_onMouseMove:function(a){var b=this._map.mouseEventToLayerPoint(a);a=b.x-this._startLayerPoint.x;var c=b.y-this._startLayerPoint.y;
|
||||
b=new L.Point(Math.min(b.x,this._startLayerPoint.x),Math.min(b.y,this._startLayerPoint.y));L.DomUtil.setPosition(this._box,b);this._box.style.width=Math.abs(a)-4+"px";this._box.style.height=Math.abs(c)-4+"px"},_onMouseUp:function(a){this._pane.removeChild(this._box);this._container.style.cursor="";L.DomUtil.enableTextSelection();L.DomEvent.removeListener(document,"mousemove",this._onMouseMove);L.DomEvent.removeListener(document,"mouseup",this._onMouseUp);a=this._map.mouseEventToLayerPoint(a);this._map.fitBounds(new L.LatLngBounds(this._map.layerPointToLatLng(this._startLayerPoint),
|
||||
@ -72,13 +73,13 @@ getMaxZoom:function(){return isNaN(this.options.maxZoom)?this._layersMaxZoom||In
|
||||
!1;return this._size},getPixelBounds:function(){var a=this._getTopLeftPoint(),b=this.getSize();return new L.Bounds(a,a.add(b))},getPixelOrigin:function(){return this._initialTopLeftPoint},getPanes:function(){return this._panes},mouseEventToContainerPoint:function(a){return L.DomEvent.getMousePosition(a,this._container)},mouseEventToLayerPoint:function(a){return this.containerPointToLayerPoint(this.mouseEventToContainerPoint(a))},mouseEventToLatLng:function(a){return this.layerPointToLatLng(this.mouseEventToLayerPoint(a))},
|
||||
containerPointToLayerPoint:function(a){return a.subtract(L.DomUtil.getPosition(this._mapPane))},layerPointToContainerPoint:function(a){return a.add(L.DomUtil.getPosition(this._mapPane))},layerPointToLatLng:function(a){return this.unproject(a.add(this._initialTopLeftPoint))},latLngToLayerPoint:function(a){return this.project(a)._subtract(this._initialTopLeftPoint)},project:function(a,b){var c=this.options,d=c.projection.project(a),e=c.scaling(isNaN(b)?this._zoom:b);return c.transformation._transform(d,
|
||||
e)},unproject:function(a,b,c){b=this.options.scaling(isNaN(b)?this._zoom:b);return this.options.projection.unproject(this.options.transformation.untransform(a,b),c)},_initLayout:function(){var a=this._container;a.className+=" leaflet-container";var b=L.DomUtil.getStyle(a,"position");a.style.position=b=="absolute"?"absolute":"relative";this._initPanes();this._initControlPos&&this._initControlPos()},_initPanes:function(){var a=this._panes={};this._mapPane=a.mapPane=this._createPane("leaflet-map-pane",
|
||||
this._container);this._tilePane=a.tilePane=this._createPane("leaflet-tile-pane");a.shadowPane=this._createPane("leaflet-shadow-pane");a.overlayPane=this._createPane("leaflet-overlay-pane");a.markerPane=this._createPane("leaflet-marker-pane");a.popupPane=this._createPane("leaflet-popup-pane")},_createPane:function(a,b){return L.DomUtil.create("div",a,b||this._mapPane)},_resetView:function(a,b){var c=this._zoom!=b;this.fire("movestart");this._zoom=b;this._initialTopLeftPoint=this._getNewTopLeftPoint(a);
|
||||
L.DomUtil.setPosition(this._mapPane,new L.Point(0,0));this.fire("viewreset");this.fire("move");c&&this.fire("zoomend");this.fire("moveend");if(!this._loaded)this._loaded=!0,this.fire("load")},_initLayers:function(a){this._layers={};for(var b=0,c=a.length;b<c;b++)this.addLayer(a[b])},_rawPanBy:function(a){var b=L.DomUtil.getPosition(this._mapPane);L.DomUtil.setPosition(this._mapPane,b.subtract(a))},_initEvents:function(){L.DomEvent.addListener(this._container,"click",this._onMouseClick,this);L.DomEvent.addListener(this._container,
|
||||
"dblclick",this._fireMouseEvent,this);L.DomEvent.addListener(this._container,"mousedown",this._fireMouseEvent,this);this.options.trackResize&&L.DomEvent.addListener(window,"resize",this.invalidateSize,this)},_onMouseClick:function(a){(!this.dragging||!this.dragging.moved())&&this._fireMouseEvent(a)},_fireMouseEvent:function(a){this.hasEventListeners(a.type)&&this.fire(a.type,{position:this.mouseEventToLatLng(a),layerPoint:this.mouseEventToLayerPoint(a)})},_initInteraction:function(){var a={dragging:L.Handler.MapDrag,
|
||||
touchZoom:L.Handler.TouchZoom,doubleClickZoom:L.Handler.DoubleClickZoom,scrollWheelZoom:L.Handler.ScrollWheelZoom,shiftDragZoom:L.Handler.ShiftDragZoom},b;for(b in a)a.hasOwnProperty(b)&&a[b]&&(this[b]=new a[b](this),this.options[b]&&this[b].enable())},_getTopLeftPoint:function(){if(!this._loaded)throw Error("Set map center and zoom first.");return this._initialTopLeftPoint.subtract(L.DomUtil.getPosition(this._mapPane))},_getNewTopLeftPoint:function(a){var b=this.getSize().divideBy(2,!0);return this.project(a).subtract(b).round()},
|
||||
_limitZoom:function(a){var b=this.getMinZoom(),c=this.getMaxZoom();return Math.max(b,Math.min(c,a))}});L.Map.include({locate:function(){navigator.geolocation&&navigator.geolocation.getCurrentPosition(L.Util.bind(this._handleGeolocationResponse,this),L.Util.bind(this._handleGeolocationError,this));return this},_handleGeolocationError:function(a){this.fire("locationerror",{message:a.message})},_handleGeolocationResponse:function(a){var b=180*a.coords.accuracy/4E7,c=b*2,d=a.coords.latitude,e=a.coords.longitude,f=new L.LatLng(d-b,e-c);b=new L.LatLng(d+b,e+c);f=new L.LatLngBounds(f,b);this.fitBounds(f);
|
||||
this._container);this._tilePane=a.tilePane=this._createPane("leaflet-tile-pane",this._mapPane);this._objectsPane=a.objectsPane=this._createPane("leaflet-objects-pane",this._mapPane);a.shadowPane=this._createPane("leaflet-shadow-pane");a.overlayPane=this._createPane("leaflet-overlay-pane");a.markerPane=this._createPane("leaflet-marker-pane");a.popupPane=this._createPane("leaflet-popup-pane")},_createPane:function(a,b){return L.DomUtil.create("div",a,b||this._objectsPane)},_resetView:function(a,b){var c=
|
||||
this._zoom!=b;this.fire("movestart");this._zoom=b;this._initialTopLeftPoint=this._getNewTopLeftPoint(a);L.DomUtil.setPosition(this._mapPane,new L.Point(0,0));this.fire("viewreset");this.fire("move");c&&this.fire("zoomend");this.fire("moveend");if(!this._loaded)this._loaded=!0,this.fire("load")},_initLayers:function(a){this._layers={};for(var b=0,c=a.length;b<c;b++)this.addLayer(a[b])},_rawPanBy:function(a){var b=L.DomUtil.getPosition(this._mapPane);L.DomUtil.setPosition(this._mapPane,b.subtract(a))},
|
||||
_initEvents:function(){L.DomEvent.addListener(this._container,"click",this._onMouseClick,this);L.DomEvent.addListener(this._container,"dblclick",this._fireMouseEvent,this);L.DomEvent.addListener(this._container,"mousedown",this._fireMouseEvent,this);this.options.trackResize&&L.DomEvent.addListener(window,"resize",this.invalidateSize,this)},_onMouseClick:function(a){(!this.dragging||!this.dragging.moved())&&this._fireMouseEvent(a)},_fireMouseEvent:function(a){this.hasEventListeners(a.type)&&this.fire(a.type,
|
||||
{position:this.mouseEventToLatLng(a),layerPoint:this.mouseEventToLayerPoint(a)})},_initInteraction:function(){var a={dragging:L.Handler.MapDrag,touchZoom:L.Handler.TouchZoom,doubleClickZoom:L.Handler.DoubleClickZoom,scrollWheelZoom:L.Handler.ScrollWheelZoom,shiftDragZoom:L.Handler.ShiftDragZoom},b;for(b in a)a.hasOwnProperty(b)&&a[b]&&(this[b]=new a[b](this),this.options[b]&&this[b].enable())},_getTopLeftPoint:function(){if(!this._loaded)throw Error("Set map center and zoom first.");return this._initialTopLeftPoint.subtract(L.DomUtil.getPosition(this._mapPane))},
|
||||
_getNewTopLeftPoint:function(a){var b=this.getSize().divideBy(2,!0);return this.project(a).subtract(b).round()},_limitZoom:function(a){var b=this.getMinZoom(),c=this.getMaxZoom();return Math.max(b,Math.min(c,a))}});L.Map.include({locate:function(){navigator.geolocation&&navigator.geolocation.getCurrentPosition(L.Util.bind(this._handleGeolocationResponse,this),L.Util.bind(this._handleGeolocationError,this));return this},_handleGeolocationError:function(a){this.fire("locationerror",{message:a.message})},_handleGeolocationResponse:function(a){var b=180*a.coords.accuracy/4E7,c=b*2,d=a.coords.latitude,e=a.coords.longitude,f=new L.LatLng(d-b,e-c);b=new L.LatLng(d+b,e+c);f=new L.LatLngBounds(f,b);this.fitBounds(f);
|
||||
this.fire("locationfound",{latlng:new L.LatLng(d,e),bounds:f,accuracy:a.coords.accuracy})}});L.Map.include({openPopup:function(a){this.closePopup();this._popup=a;this.addLayer(a)},closePopup:function(){this._popup&&this.removeLayer(this._popup)}});L.Map.include(!L.Transition||!L.Transition.implemented()?{}:{setView:function(a,b,c){b=this._limitZoom(b);var d=this._zoom!=b;if(this._loaded&&!c&&this._layers&&(c=this._getNewTopLeftPoint(a).subtract(this._getTopLeftPoint()),d&&this._zoomToIfCenterInView?this._zoomToIfCenterInView(a,b,c):this._panByIfClose(c)))return this;this._resetView(a,b);return this},panBy:function(a){if(!this._panTransition)this._panTransition=new L.Transition(this._mapPane,{duration:0.3}),this._panTransition.on("step",this._onPanTransitionStep,
|
||||
this),this._panTransition.on("end",this._onPanTransitionEnd,this);this.fire(this,"movestart");this._panTransition.run({position:L.DomUtil.getPosition(this._mapPane).subtract(a)});return this},_onPanTransitionStep:function(){this.fire("move")},_onPanTransitionEnd:function(){this.fire("moveend")},_panByIfClose:function(a){if(this._offsetIsWithinView(a))return this.panBy(a),!0;return!1},_offsetIsWithinView:function(a,b){var c=b||1,d=this.getSize();return Math.abs(a.x)<=d.x*c&&Math.abs(a.y)<=d.y*c}});L.Map.include(!L.Transition||!L.Transition.implemented()?{}:{_zoomToIfCenterInView:function(a,b,c){if(this._animatingZoom)return!0;if(!L.Transition.NATIVE)return!1;var d=Math.pow(2,b-this._zoom);c=c.divideBy(1-1/d);if(!this._offsetIsWithinView(c,1))return!1;this._initTilePanes();this._runAnimation(a,b,d,c);return!0},_initTilePanes:function(){if(!this._tileBg)this._tileBg=this._createPane("leaflet-tile-pane"),this._tileBg.style.zIndex=1;this._swapFrontAndBg();if(!this._tileBg.transition)this._tileBg.transition=
|
||||
new L.Transition(this._tileBg,{duration:0.25,easing:"cubic-bezier(0.25,0.1,0.25,0.75)"}),this._tileBg.transition.on("end",this._onZoomTransitionEnd,this)},_runAnimation:function(a,b,c,d){var e=L.DomUtil.getPosition(this._mapPane),f=this.containerPointToLayerPoint(this.getSize().divideBy(2)).add(d).subtract(e.divideBy(c-1));this._mapPane.className+=" leaflet-animating";this._animatingZoom=!0;this._resetView(a,b);this._tileBg.style[L.DomUtil.TRANSFORM_PROPERTY]=L.DomUtil.getTranslateString(e);setTimeout(L.Util.bind(function(){var a=
|
||||
{};a[L.DomUtil.TRANSFORM_PROPERTY]=L.DomUtil.getScaleString(c,f);this._tileBg.transition.run(a)},this),20)},_swapFrontAndBg:function(){var a=this._tilePane,b=this._tileBg;b.innerHTML="";b.style[L.DomUtil.TRANSFORM_PROPERTY]="";b.style.visibility="hidden";b.empty=!0;a.empty=!1;this._tilePane=this._panes.tilePane=b;this._tileBg=a},_onZoomTransitionEnd:function(){this._tilePane.style.visibility="";this._tilePane.style.zIndex=2;this._tileBg.style.zIndex=1;this._mapPane.className=this._mapPane.className.replace(" leaflet-animating",
|
||||
"");this._animatingZoom=!1}});
|
||||
this),this._panTransition.on("end",this._onPanTransitionEnd,this);this.fire(this,"movestart");this._panTransition.run({position:L.DomUtil.getPosition(this._mapPane).subtract(a)});return this},_onPanTransitionStep:function(){this.fire("move")},_onPanTransitionEnd:function(){this.fire("moveend")},_panByIfClose:function(a){if(this._offsetIsWithinView(a))return this.panBy(a),!0;return!1},_offsetIsWithinView:function(a,b){var c=b||1,d=this.getSize();return Math.abs(a.x)<=d.x*c&&Math.abs(a.y)<=d.y*c}});L.Map.include(!L.Transition||!L.Transition.implemented()?{}:{_zoomToIfCenterInView:function(a,b,c){if(this._animatingZoom)return!0;if(!L.Transition.NATIVE)return!1;var d=Math.pow(2,b-this._zoom),e=c.divideBy(1-1/d);if(!this._offsetIsWithinView(e,1))return!1;this._prepareTileBg();this._mapPane.className+=" leaflet-animating";c=L.DomUtil.getPosition(this._mapPane);e=this.containerPointToLayerPoint(this.getSize().divideBy(2)).add(e);c=L.DomUtil.getTranslateString(c);this._runAnimation(a,b,d,c,e);return!0},
|
||||
_runAnimation:function(a,b,c,d,e){this._animatingZoom=!0;this._resetView(a,b);this._tileBg.style[L.DomUtil.TRANSFORM_PROPERTY]=d;a={};a[L.DomUtil.TRANSFORM_PROPERTY]=d+" "+L.DomUtil.getScaleString(c,e);this._tileBg.transition.run(a)},_prepareTileBg:function(){if(!this._tileBg)this._tileBg=this._createPane("leaflet-tile-pane",this._mapPane),this._tileBg.style.zIndex=1;var a=this._tilePane,b=this._tileBg;b.innerHTML="";b.style[L.DomUtil.TRANSFORM_PROPERTY]="";b.style.visibility="hidden";b.empty=!0;
|
||||
a.empty=!1;this._tilePane=this._panes.tilePane=b;this._tileBg=a;if(!this._tileBg.transition)this._tileBg.transition=new L.Transition(this._tileBg,{duration:0.25,easing:"cubic-bezier(0.25,0.1,0.25,0.75)"}),this._tileBg.transition.on("end",this._onZoomTransitionEnd,this)},_onZoomTransitionEnd:function(){this._restoreTileFront();this._mapPane.className=this._mapPane.className.replace(" leaflet-animating","");this._animatingZoom=!1},_restoreTileFront:function(){this._tilePane.style.visibility="";this._tilePane.style.zIndex=
|
||||
2;this._tileBg.style.zIndex=1}});
|
||||
|
||||
@ -24,9 +24,10 @@ L.Handler.TouchZoom = L.Handler.extend({
|
||||
|
||||
this._startCenter = p1.add(p2).divideBy(2, true);
|
||||
this._startDist = p1.distanceTo(p2);
|
||||
this._startTransform = this._map._mapPane.style.webkitTransform;
|
||||
//this._startTransform = this._map._mapPane.style.webkitTransform;
|
||||
|
||||
this._moved = false;
|
||||
this._zooming = true;
|
||||
|
||||
this._centerOffset = viewCenter.subtract(this._startCenter);
|
||||
|
||||
@ -40,8 +41,8 @@ L.Handler.TouchZoom = L.Handler.extend({
|
||||
if (!e.touches || e.touches.length != 2) { return; }
|
||||
|
||||
if (!this._moved) {
|
||||
//TODO do this more gracefully
|
||||
this._map._panes.popupPane.style.display = 'none';
|
||||
this._map._mapPane.className += ' leaflet-animating';
|
||||
this._map._prepareTileBg();
|
||||
this._moved = true;
|
||||
}
|
||||
|
||||
@ -56,11 +57,7 @@ L.Handler.TouchZoom = L.Handler.extend({
|
||||
* it didn't count the origin on the first touch-zoom but worked correctly afterwards
|
||||
*/
|
||||
|
||||
/*this._map._mapPane.style.webkitTransformOrigin =
|
||||
this._startCenter.x + 'px ' + this._startCenter.y + 'px';*/
|
||||
|
||||
this._map._mapPane.style.webkitTransform = [
|
||||
this._startTransform,
|
||||
this._map._tileBg.style.webkitTransform = [
|
||||
L.DomUtil.getTranslateString(this._delta),
|
||||
L.DomUtil.getScaleString(this._scale, this._startCenter)
|
||||
].join(" ");
|
||||
@ -69,19 +66,26 @@ L.Handler.TouchZoom = L.Handler.extend({
|
||||
},
|
||||
|
||||
_onTouchEnd: function(e) {
|
||||
if (!e.touches || e.touches.length >= 2 || !this._scale) { return; }
|
||||
if (!e.touches || e.touches.length >= 2 || !this._moved) { return; }
|
||||
|
||||
var zoom = this._map.getZoom() + Math.round(Math.log(this._scale)/Math.LN2),
|
||||
// prevent touchEnd from firing twice
|
||||
if (!this._zooming) { return; }
|
||||
this._zooming = false;
|
||||
|
||||
var oldZoom = this._map.getZoom(),
|
||||
zoom = this._map._limitZoom(oldZoom + Math.round(Math.log(this._scale)/Math.LN2)),
|
||||
zoomDelta = zoom - oldZoom,
|
||||
centerOffset = this._centerOffset.subtract(this._delta).divideBy(this._scale),
|
||||
centerPoint = this._map.getPixelOrigin().add(this._startCenter).add(centerOffset),
|
||||
center = this._map.unproject(centerPoint);
|
||||
|
||||
this._map.setView(center, zoom, true);
|
||||
|
||||
this._map._panes.popupPane.style.display = '';
|
||||
|
||||
this._scale = null;
|
||||
L.DomEvent.removeListener(document, 'touchmove', this._onTouchMove);
|
||||
L.DomEvent.removeListener(document, 'touchend', this._onTouchEnd);
|
||||
|
||||
var finalScale = Math.pow(2, zoomDelta),
|
||||
mapPaneOffset = L.DomUtil.getPosition(this._map._mapPane),
|
||||
startTransform = L.DomUtil.getTranslateString(mapPaneOffset) + ' ' + this._map._tileBg.style.webkitTransform;
|
||||
|
||||
this._map._runAnimation(center, zoom, finalScale / this._scale, startTransform, this._startCenter.add(centerOffset));
|
||||
}
|
||||
});
|
||||
@ -290,7 +290,9 @@ L.Map = L.Class.extend({
|
||||
|
||||
this._mapPane = panes.mapPane = this._createPane('leaflet-map-pane', this._container);
|
||||
|
||||
this._tilePane = panes.tilePane = this._createPane('leaflet-tile-pane');
|
||||
this._tilePane = panes.tilePane = this._createPane('leaflet-tile-pane', this._mapPane);
|
||||
this._objectsPane = panes.objectsPane = this._createPane('leaflet-objects-pane', this._mapPane);
|
||||
|
||||
panes.shadowPane = this._createPane('leaflet-shadow-pane');
|
||||
panes.overlayPane = this._createPane('leaflet-overlay-pane');
|
||||
panes.markerPane = this._createPane('leaflet-marker-pane');
|
||||
@ -298,7 +300,7 @@ L.Map = L.Class.extend({
|
||||
},
|
||||
|
||||
_createPane: function(className, container) {
|
||||
return L.DomUtil.create('div', className, container || this._mapPane);
|
||||
return L.DomUtil.create('div', className, container || this._objectsPane);
|
||||
},
|
||||
|
||||
_resetView: function(center, zoom) {
|
||||
|
||||
@ -14,48 +14,42 @@ L.Map.include(!(L.Transition && L.Transition.implemented()) ? {} : {
|
||||
//if offset does not exceed half of the view
|
||||
if (!this._offsetIsWithinView(offset, 1)) { return false; }
|
||||
|
||||
this._initTilePanes();
|
||||
this._runAnimation(center, zoom, scale, offset);
|
||||
this._prepareTileBg();
|
||||
|
||||
this._mapPane.className += ' leaflet-animating';
|
||||
|
||||
var mapPaneOffset = L.DomUtil.getPosition(this._mapPane),
|
||||
centerPoint = this.containerPointToLayerPoint(this.getSize().divideBy(2)),
|
||||
origin = centerPoint.add(offset),
|
||||
startTransform = L.DomUtil.getTranslateString(mapPaneOffset);
|
||||
|
||||
this._runAnimation(center, zoom, scale, startTransform, origin);
|
||||
|
||||
return true;
|
||||
},
|
||||
|
||||
_initTilePanes: function() {
|
||||
if (!this._tileBg) {
|
||||
this._tileBg = this._createPane('leaflet-tile-pane');
|
||||
this._tileBg.style.zIndex = 1;
|
||||
}
|
||||
|
||||
this._swapFrontAndBg(); //TODO refactor away tile layer swapping to share it with touch zoom
|
||||
|
||||
if (!this._tileBg.transition) {
|
||||
this._tileBg.transition = new L.Transition(this._tileBg, {duration: 0.25, easing: 'cubic-bezier(0.25,0.1,0.25,0.75)'});
|
||||
this._tileBg.transition.on('end', this._onZoomTransitionEnd, this);
|
||||
}
|
||||
},
|
||||
|
||||
_runAnimation: function(center, zoom, scale, offset) {
|
||||
var mapPaneOffset = L.DomUtil.getPosition(this._mapPane),
|
||||
centerPoint = this.containerPointToLayerPoint(this.getSize().divideBy(2)),
|
||||
origin = centerPoint.add(offset).subtract(mapPaneOffset.divideBy(scale - 1));
|
||||
|
||||
this._mapPane.className += ' leaflet-animating';
|
||||
_runAnimation: function(center, zoom, scale, startTransform, origin) {
|
||||
this._animatingZoom = true;
|
||||
|
||||
//load tiles in the main tile pane
|
||||
this._resetView(center, zoom);
|
||||
|
||||
this._tileBg.style[L.DomUtil.TRANSFORM_PROPERTY] = L.DomUtil.getTranslateString(mapPaneOffset);
|
||||
|
||||
//TODO eliminate this ugly setTimeout hack
|
||||
setTimeout(L.Util.bind(function() {
|
||||
var options = {};
|
||||
options[L.DomUtil.TRANSFORM_PROPERTY] = L.DomUtil.getScaleString(scale, origin);
|
||||
this._tileBg.transition.run(options);
|
||||
}, this), 20);
|
||||
this._tileBg.style[L.DomUtil.TRANSFORM_PROPERTY] = startTransform;
|
||||
|
||||
this._tileBg.offsetWidth; //hack to make sure transform is updated before running animation
|
||||
|
||||
var options = {};
|
||||
options[L.DomUtil.TRANSFORM_PROPERTY] = startTransform + ' ' + L.DomUtil.getScaleString(scale, origin);
|
||||
this._tileBg.transition.run(options);
|
||||
},
|
||||
|
||||
_swapFrontAndBg: function() {
|
||||
_prepareTileBg: function() {
|
||||
if (!this._tileBg) {
|
||||
this._tileBg = this._createPane('leaflet-tile-pane', this._mapPane);
|
||||
this._tileBg.style.zIndex = 1;
|
||||
}
|
||||
|
||||
var oldTilePane = this._tilePane,
|
||||
newTilePane = this._tileBg;
|
||||
|
||||
@ -70,13 +64,23 @@ L.Map.include(!(L.Transition && L.Transition.implemented()) ? {} : {
|
||||
|
||||
this._tilePane = this._panes.tilePane = newTilePane;
|
||||
this._tileBg = oldTilePane;
|
||||
|
||||
if (!this._tileBg.transition) {
|
||||
this._tileBg.transition = new L.Transition(this._tileBg, {duration: 0.25, easing: 'cubic-bezier(0.25,0.1,0.25,0.75)'});
|
||||
this._tileBg.transition.on('end', this._onZoomTransitionEnd, this);
|
||||
}
|
||||
},
|
||||
|
||||
_onZoomTransitionEnd: function() {
|
||||
this._restoreTileFront();
|
||||
|
||||
this._mapPane.className = this._mapPane.className.replace(' leaflet-animating', ''); //TODO toggleClass util
|
||||
this._animatingZoom = false;
|
||||
},
|
||||
|
||||
_restoreTileFront: function() {
|
||||
this._tilePane.style.visibility = '';
|
||||
this._tilePane.style.zIndex = 2;
|
||||
this._tileBg.style.zIndex = 1;
|
||||
this._mapPane.className = this._mapPane.className.replace(' leaflet-animating', ''); //TODO toggleClass util
|
||||
this._animatingZoom = false;
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user