Fix overlay positions when panning to a copy of a world, close #273
This commit is contained in:
Mourner
parent
d9f9cbfd2e
commit
e4c08caf47
@ -17,6 +17,7 @@ Leaflet Changelog
|
||||
* Map now preserves its center after resize.
|
||||
* Limited maximum zoom change on a single mouse wheel movement (so you won't zoom across the whole zoom range in one scroll). [#149](https://github.com/CloudMade/Leaflet/issues/149)
|
||||
* Improved circles performance by not drawing them if they're off the clip region.
|
||||
* When panning to another copy of the world (that's infinite horizontally), map overlays now jump to corresponding positions. [#273](https://github.com/CloudMade/Leaflet/issues/273)
|
||||
|
||||
#### API improvements
|
||||
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
<script>
|
||||
|
||||
var map = new L.Map('map');
|
||||
var map = new L.Map('map', {fadeAnimation: false});
|
||||
|
||||
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
|
||||
cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
|
||||
|
||||
39
dist/leaflet.css
vendored
39
dist/leaflet.css
vendored
@ -2,16 +2,17 @@
|
||||
|
||||
.leaflet-map-pane,
|
||||
.leaflet-tile,
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow,
|
||||
.leaflet-tile-pane,
|
||||
.leaflet-tile-pane,
|
||||
.leaflet-objects-pane,
|
||||
.leaflet-overlay-pane,
|
||||
.leaflet-shadow-pane,
|
||||
.leaflet-marker-pane,
|
||||
.leaflet-popup-pane,
|
||||
.leaflet-overlay-pane svg,
|
||||
.leaflet-zoom-box,
|
||||
.leaflet-image-layer { /* TODO optimize classes */
|
||||
.leaflet-image-layer { /* TODO optimize classes */
|
||||
position: absolute;
|
||||
}
|
||||
.leaflet-container {
|
||||
@ -20,14 +21,14 @@
|
||||
.leaflet-tile-pane {
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
}
|
||||
.leaflet-tile,
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-tile,
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow {
|
||||
display: block;
|
||||
}
|
||||
@ -79,7 +80,7 @@ a.leaflet-active {
|
||||
}
|
||||
.leaflet-bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
.leaflet-left {
|
||||
left: 0;
|
||||
}
|
||||
@ -141,12 +142,12 @@ a.leaflet-active {
|
||||
.leaflet-control-zoom-out {
|
||||
background-image: url(images/zoom-out.png);
|
||||
}
|
||||
|
||||
|
||||
.leaflet-control-layers {
|
||||
-moz-box-shadow: 0 0 7px #999;
|
||||
-webkit-box-shadow: 0 0 7px #999;
|
||||
box-shadow: 0 0 7px #999;
|
||||
|
||||
|
||||
background: #f8f8f9;
|
||||
}
|
||||
.leaflet-control-layers a {
|
||||
@ -189,12 +190,12 @@ a.leaflet-active {
|
||||
.leaflet-container .leaflet-control-attribution {
|
||||
margin: 0;
|
||||
padding: 0 5px;
|
||||
|
||||
|
||||
font: 11px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
color: #333;
|
||||
|
||||
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
|
||||
|
||||
-moz-box-shadow: 0 0 7px #ccc;
|
||||
-webkit-box-shadow: 0 0 7px #ccc;
|
||||
box-shadow: 0 0 7px #ccc;
|
||||
@ -205,7 +206,7 @@ a.leaflet-active {
|
||||
|
||||
.leaflet-fade-anim .leaflet-tile {
|
||||
opacity: 0;
|
||||
|
||||
|
||||
-webkit-transition: opacity 0.2s linear;
|
||||
-moz-transition: opacity 0.2s linear;
|
||||
-o-transition: opacity 0.2s linear;
|
||||
@ -264,9 +265,9 @@ a.leaflet-active {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
padding: 1px;
|
||||
|
||||
|
||||
margin: -8px auto 0;
|
||||
|
||||
|
||||
-moz-transform: rotate(45deg);
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
@ -277,10 +278,10 @@ a.leaflet-active {
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
right: 9px;
|
||||
|
||||
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
.leaflet-popup-content p {
|
||||
@ -303,13 +304,13 @@ a.leaflet-active {
|
||||
}
|
||||
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
|
||||
background: white;
|
||||
|
||||
|
||||
box-shadow: 0 1px 10px #888;
|
||||
-moz-box-shadow: 0 1px 10px #888;
|
||||
-webkit-box-shadow: 0 1px 14px #999;
|
||||
}
|
||||
.leaflet-popup-content-wrapper {
|
||||
-moz-border-radius: 20px;
|
||||
-moz-border-radius: 20px;
|
||||
-webkit-border-radius: 20px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
2
dist/leaflet.js
vendored
2
dist/leaflet.js
vendored
@ -85,7 +85,7 @@ return L.Browser.svg?"M"+a.x+","+(a.y-b)+"A"+b+","+b+",0,1,1,"+(a.x-0.1)+","+(a.
|
||||
L.Util.extend(L.GeoJSON,{geometryToLayer:function(a,b){var c=a.coordinates,d,e,f,g=[];switch(a.type){case "Point":return d=this.coordsToLatLng(c),b?b(d):new L.Marker(d);case "MultiPoint":e=0;for(f=c.length;e<f;e++)d=this.coordsToLatLng(c[e]),d=b?b(d):new L.Marker(d),g.push(d);return new L.FeatureGroup(g);case "LineString":return c=this.coordsToLatLngs(c),new L.Polyline(c);case "Polygon":return c=this.coordsToLatLngs(c,1),new L.Polygon(c);case "MultiLineString":return c=this.coordsToLatLngs(c,1),new L.MultiPolyline(c);
|
||||
case "MultiPolygon":return c=this.coordsToLatLngs(c,2),new L.MultiPolygon(c);case "GeometryCollection":e=0;for(f=a.geometries.length;e<f;e++)d=this.geometryToLayer(a.geometries[e]),g.push(d);return new L.FeatureGroup(g);default:throw Error("Invalid GeoJSON object.");}},coordsToLatLng:function(a,b){var c=parseFloat(a[b?0:1]),d=parseFloat(a[b?1:0]);return new L.LatLng(c,d)},coordsToLatLngs:function(a,b,c){var d,e=[],f,g=a.length;for(f=0;f<g;f++)d=b?this.coordsToLatLngs(a[f],b-1,c):this.coordsToLatLng(a[f],
|
||||
c),e.push(d);return e}});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),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&&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.touch&&!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||this._map._animatingZoom)){var b=this._map.mouseEventToLayerPoint(a.touches[0]),c=this._map.mouseEventToLayerPoint(a.touches[1]),
|
||||
_onDragStart:function(){this._map.fire("movestart");this._map.fire("dragstart")},_onDrag:function(){this._map.fire("move");this._map.fire("drag")},_onDragEnd:function(){var a=this._map,b=a._panes.objectsPane,c=a._getTopLeftPoint().x,d=a.options.scale(this._map.getZoom());b.style.left=c-(c%d+d)%d+"px";a.fire("moveend");a.fire("dragend")}});L.Handler.TouchZoom=L.Handler.extend({enable:function(){if(L.Browser.touch&&!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||this._map._animatingZoom)){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._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-zoom-anim",
|
||||
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(){if(this._moved&&this._zooming){this._zooming=
|
||||
!1;var a=this._map.getZoom(),b=Math.log(this._scale)/Math.LN2,b=this._map._limitZoom(a+(b>0?Math.ceil(b):Math.floor(b))),a=b-a,c=this._centerOffset.subtract(this._delta).divideBy(this._scale),d=this._map.unproject(this._map.getPixelOrigin().add(this._startCenter).add(c));L.DomEvent.removeListener(document,"touchmove",this._onTouchMove);L.DomEvent.removeListener(document,"touchend",this._onTouchEnd);this._map._runAnimation(d,b,Math.pow(2,a)/this._scale,this._startCenter.add(c))}}});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,
|
||||
|
||||
@ -8,7 +8,7 @@ L.Handler.MapDrag = L.Handler.extend({
|
||||
if (this._enabled) { return; }
|
||||
if (!this._draggable) {
|
||||
this._draggable = new L.Draggable(this._map._mapPane, this._map._container);
|
||||
|
||||
|
||||
this._draggable.on('dragstart', this._onDragStart, this);
|
||||
this._draggable.on('drag', this._onDrag, this);
|
||||
this._draggable.on('dragend', this._onDragEnd, this);
|
||||
@ -16,29 +16,37 @@ L.Handler.MapDrag = L.Handler.extend({
|
||||
this._draggable.enable();
|
||||
this._enabled = true;
|
||||
},
|
||||
|
||||
|
||||
disable: function() {
|
||||
if (!this._enabled) { return; }
|
||||
this._draggable.disable();
|
||||
this._enabled = false;
|
||||
},
|
||||
|
||||
|
||||
moved: function() {
|
||||
return this._draggable && 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');
|
||||
var map = this._map,
|
||||
pane = map._panes.objectsPane,
|
||||
left = map._getTopLeftPoint().x,
|
||||
worldWidth = map.options.scale(this._map.getZoom()),
|
||||
rest = ((left % worldWidth) + worldWidth) % worldWidth;
|
||||
|
||||
pane.style.left = (left - rest) + 'px';
|
||||
|
||||
map.fire('moveend');
|
||||
map.fire('dragend');
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user