VladPolskiy/leaflet
1
0
Fork 0
mirror of https://github.com/Leaflet/Leaflet.git synced 2025-07-29 11:53:03 +00:00
Code Issues Packages Projects Releases 1 Wiki Activity

merge master

Browse Source
This commit is contained in:
Vladimir Agafonkin
2012-08-07 12:32:52 +03:00
parent cb115ba8ec 968aece11e
commit 917add095f
18 changed files with 436 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -6,3 +6,4 @@ tmp/**/*
*.iml
_site
*.sublime-*
_site

19
CHANGELOG.md
View File

@ -7,6 +7,25 @@ Leaflet Changelog
An in-progress version being developed on the master branch.
* No changes since the stable version yet.
## 0.4.3 (August 7, 2012)
### Improvements
* Improved `GeoJSON` `setStyle` to also accept function (like the corresponding option).
* Added `GeoJSON` `resetStyle(layer)`, useful for resetting hover state.
* Added `feature` property to layers created with `GeoJSON` (containing the GeoJSON feature data).
* Added `FeatureGroup` `bringToFront` and `bringToBack` methods (so that they would work for multipolys).
* Added optional `animate` argument to `Map` `invalidateSize` (by [@ajbeaven](https://github.com/ajbeaven)). [#857](https://github.com/CloudMade/Leaflet/pull/857)
### Bugfixes
* Fixed a bug where tiles sometimes disappeared on initial map load on Android 2/3 (by [@danzel](https://github.com/danzel)). [#868](https://github.com/CloudMade/Leaflet/pull/868)
* Fixed a bug where map would occasionally flicker near the border on zoom or pan on Chrome.
* Fixed a bug where `Path` `bringToFront` and `bringToBack` didn't return `this`.
* Removed zoom out on Win/Meta key binding (since it interferes with global keyboard shortcuts). [#869](https://github.com/CloudMade/Leaflet/issues/869)
## 0.4.2 (August 1, 2012)
* Fixed a bug where layers control radio buttons would not work correctly in IE7 (by [@danzel](https://github.com/danzel)). [#862](https://github.com/CloudMade/Leaflet/pull/862)

56
debug/tests/opacity.html Normal file
View File

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="../../dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
<link rel="stylesheet" href="../css/mobile.css" />
<style>
.mybox {
background-color: red;
}
</style>
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
latlng = new L.LatLng(50.5, 30.51);
var map = new L.Map('map', {center: latlng, zoom: 15, layers: [cloudmade]});
//Create a marker, clicking it toggles opacity
var marker = new L.Marker(latlng, { icon: new L.DivIcon({ className: 'mybox', iconSize: new L.Point(100,100), html: 'opaque. click to toggle' }) });
map.addLayer(marker);
var visible = true;
marker.on('click', function () {
if (visible) {
marker.setOpacity(0.3);
marker._icon.innerHTML = 'transparent';
} else {
marker.setOpacity(1);
marker._icon.innerHTML = 'opaque';
}
visible = !visible;
});
var marker2 = new L.Marker(new L.LatLng(50.5, 30.52));
map.addLayer(marker2);
marker2.bindPopup('This is an amazing message. I shouldn\'t of deleted the Ipsum text');
</script>
</body>
</html>

156
debug/vector/geojson.html
View File

@ -8,39 +8,161 @@
<link rel="stylesheet" href="../css/screen.css" />
<style>
#map {
width: 800px;
height: 500px;
}
.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255,255,255,0.8);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
}
.info h4 {
margin: 0 0 5px;
color: #777;
}
.legend {
text-align: left;
line-height: 18px;
color: #555;
}
.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
</style>
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 600px; border: 1px solid #ccc"></div>
<button id="populate">Populate with 10 markers</button>
<div id="map"></div>
<script type="text/javascript" src="geojson-sample.js"></script>
<script type="text/javascript" src="us-states.js"></script>
<script type="text/javascript">
var map = L.map('map').setView([0.78, 102.37], 7);
var map = L.map('map').setView([37.8, -96], 4);
L.tileLayer('http://{s}.tile.cloudmade.com/{key}/997/256/{z}/{x}/{y}.png', {
var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
key: 'BC9A493B41014CAABB98F0471D759707'
key: 'BC9A493B41014CAABB98F0471D759707',
styleId: 22677
}).addTo(map);
L.geoJson(geojsonSample, {
style: function (feature) {
return {color: feature.properties.color};
},
// control that shows state info on hover
var info = L.control();
onEachFeature: function (feature, layer) {
var popupText = 'geometry type: ' + feature.geometry.type;
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
};
if (feature.properties.color) {
popupText += '<br/>color: ' + feature.properties.color
}
info.update = function (props) {
this._div.innerHTML = '<h4>US Population Density</h4>' + (props ?
'<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
: 'Hover over a state');
};
layer.bindPopup(popupText);
info.addTo(map);
// get color depending on population density value
function getColor(d) {
return d > 1000 ? '#800026' :
d > 500 ? '#BD0026' :
d > 200 ? '#E31A1C' :
d > 100 ? '#FC4E2A' :
d > 50 ? '#FD8D3C' :
d > 20 ? '#FEB24C' :
d > 10 ? '#FED976' :
'#FFEDA0';
}
function style(feature) {
return {
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7,
fillColor: getColor(feature.properties.density)
};
}
function highlightFeature(e) {
var layer = e.target;
layer.bringToFront().setStyle({
weight: 5,
color: '#666',
dashArray: '',
fillOpacity: 0.7
});
info.update(layer.feature.properties);
}
var geojson;
function resetHighlight(e) {
geojson.resetStyle(e.target);
info.update();
}
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
});
}
geojson = L.geoJson(statesData, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
map.attributionControl.addAttribution('Population data &copy; <a href="http://census.gov/">US Census Bureau</a>');
var legend = L.control({position: 'bottomright'});
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend'),
grades = [0, 10, 20, 50, 100, 200, 500, 1000],
labels = [],
from, to;
for (var i = 0; i < grades.length; i++) {
from = grades[i];
to = grades[i + 1];
labels.push(
'<i style="background:' + getColor(from + 1) + '"></i> ' +
from + (to ? '&ndash;' + to : '+'));
}
}).addTo(map);
div.innerHTML = labels.join('<br>');
return div;
};
legend.addTo(map);
</script>
</body>

54
debug/vector/us-states.js Normal file
View File

File diff suppressed because one or more lines are too long

147
dist/leaflet-src.js vendored
View File

@ -21,7 +21,7 @@ if (typeof exports !== undefined + '') {
window.L = L;
}
L.version = '0.4.1';
L.version = '0.4.3';
/*
@ -756,7 +756,7 @@ L.DomUtil = {
value = Math.round(value * 100);
if (filter) {
filter.Enabled = (value === 100);
filter.Enabled = (value !== 100);
filter.Opacity = value;
} else {
el.style.filter += ' progid:' + filterName + '(opacity=' + value + ')';
@ -1335,7 +1335,7 @@ L.Map = L.Class.extend({
return this._layers.hasOwnProperty(id);
},
invalidateSize: function () {
invalidateSize: function (animate) {
var oldSize = this.getSize();
this._sizeChanged = true;
@ -1347,13 +1347,17 @@ L.Map = L.Class.extend({
if (!this._loaded) { return this; }
var offset = oldSize.subtract(this.getSize()).divideBy(2, true);
this._rawPanBy(offset);
this.fire('move');
if (animate === true) {
this.panBy(offset);
} else {
this._rawPanBy(offset);
clearTimeout(this._sizeTimer);
this._sizeTimer = setTimeout(L.Util.bind(this.fire, this, 'moveend'), 200);
this.fire('move');
clearTimeout(this._sizeTimer);
this._sizeTimer = setTimeout(L.Util.bind(this.fire, this, 'moveend'), 200);
}
return this;
},
@ -2233,10 +2237,12 @@ L.TileLayer = L.Class.extend({
// get unused tile - or create a new tile
var tile = this._getTile();
// Chrome 20 layouts much faster with top/left (Verify with timeline, frames), Safari 5.1.7, iOS 5.1.1,
// android browser (4.0) have display issues with top/left and requires transform instead
// Chrome 20 layouts much faster with top/left (Verify with timeline, frames)
// android 4 browser has display issues with top/left and requires transform instead
// android 3 browser not tested
// android 2 browser requires top/left or tiles disappear on load or first drag (reappear after zoom) https://github.com/CloudMade/Leaflet/issues/866
// (other browsers don't currently care) - see debug/hacks/jitter.html for an example
L.DomUtil.setPosition(tile, tilePos, L.Browser.chrome);
L.DomUtil.setPosition(tile, tilePos, L.Browser.chrome || L.Browser.android23);
this._tiles[tilePoint.x + ':' + tilePoint.y] = tile;
@ -3529,6 +3535,14 @@ L.FeatureGroup = L.LayerGroup.extend({
return this.invoke('setStyle', style);
},
bringToFront: function () {
return this.invoke('bringToFront');
},
bringToBack: function () {
return this.invoke('bringToBack');
},
getBounds: function () {
var bounds = new L.LatLngBounds();
this.eachLayer(function (layer) {
@ -3677,6 +3691,7 @@ L.Path = L.Path.extend({
if (this._container) {
this._map._pathRoot.appendChild(this._container);
}
return this;
},
bringToBack: function () {
@ -3684,6 +3699,7 @@ L.Path = L.Path.extend({
var root = this._map._pathRoot;
root.insertBefore(this._container, root.firstChild);
}
return this;
},
getPathString: function () {
@ -5056,27 +5072,42 @@ L.GeoJSON = L.FeatureGroup.extend({
return this;
}
var options = this.options,
style = options.style;
var options = this.options;
if (options.filter && !options.filter(geojson)) { return; }
var layer = L.GeoJSON.geometryToLayer(geojson, options.pointToLayer);
layer.feature = geojson;
if (style) {
if (typeof style === 'function') {
style = style(geojson);
}
if (layer.setStyle) {
layer.setStyle(style);
}
}
this.resetStyle(layer);
if (options.onEachFeature) {
options.onEachFeature(geojson, layer);
}
return this.addLayer(layer);
},
resetStyle: function (layer) {
var style = this.options.style;
if (style) {
this._setLayerStyle(layer, style);
}
},
setStyle: function (style) {
this.eachLayer(function (layer) {
this._setLayerStyle(layer, style);
}, this);
},
_setLayerStyle: function (layer, style) {
if (typeof style === 'function') {
style = style(layer.feature);
}
if (layer.setStyle) {
layer.setStyle(style);
}
}
});
@ -5156,6 +5187,7 @@ L.geoJson = function (geojson, options) {
return new L.GeoJSON(geojson, options);
};
/*
* L.DomEvent contains functions for working with DOM events.
*/
@ -5398,11 +5430,6 @@ L.Draggable = L.Class.extend({
return;
}
if (!L.Browser.touch) {
L.DomUtil.disableTextSelection();
this._setMovingCursor();
}
this._startPos = this._newPos = L.DomUtil.getPosition(this._element);
this._startPoint = new L.Point(first.clientX, first.clientY);
@ -5424,6 +5451,11 @@ L.Draggable = L.Class.extend({
if (!this._moved) {
this.fire('dragstart');
this._moved = true;
if (!L.Browser.touch) {
L.DomUtil.disableTextSelection();
this._setMovingCursor();
}
}
this._newPos = this._startPos.add(diffVec);
@ -6040,8 +6072,8 @@ L.Map.Keyboard = L.Handler.extend({
right: [39],
down: [40],
up: [38],
zoomIn: [187, 61, 107],
zoomOut: [189, 109, 0]
zoomIn: [187, 107, 61],
zoomOut: [189, 109]
},
initialize: function (map) {
@ -7085,7 +7117,7 @@ L.Transition = L.Transition.extend({
this._el.style[L.Transition.DURATION] = this.options.duration + 's';
this._el.style[L.Transition.EASING] = this.options.easing;
this._el.style[L.Transition.PROPERTY] = propsList.join(', ');
this._el.style[L.Transition.PROPERTY] = 'all';
for (prop in props) {
if (props.hasOwnProperty(prop)) {
@ -7093,9 +7125,10 @@ L.Transition = L.Transition.extend({
}
}
this._inProgress = true;
// Chrome flickers for some reason if you don't do this
L.Util.falseFn(this._el.offsetWidth);
this.fire('start');
this._inProgress = true;
if (L.Browser.mobileWebkit) {
// Set up a slightly delayed call to a backup event if webkitTransitionEnd doesn't fire properly
@ -7351,11 +7384,16 @@ L.Map.mergeOptions({
zoomAnimation: L.DomUtil.TRANSITION && !L.Browser.android23 && !L.Browser.mobileOpera
});
L.Map.addInitHook(function () {
L.DomEvent.on(this._mapPane, L.Transition.END, this._catchTransitionEnd, this);
});
L.Map.include(!L.DomUtil.TRANSITION ? {} : {
_zoomToIfClose: function (center, zoom) {
if (this._animatingZoom) { return true; }
if (!this.options.zoomAnimation) { return false; }
var scale = this.getZoomScale(zoom),
@ -7370,8 +7408,6 @@ L.Map.include(!L.DomUtil.TRANSITION ? {} : {
.fire('movestart')
.fire('zoomstart');
this._prepareTileBg();
this.fire('zoomanim', {
center: center,
zoom: zoom
@ -7379,17 +7415,22 @@ L.Map.include(!L.DomUtil.TRANSITION ? {} : {
var origin = this._getCenterLayerPoint().add(offset);
this._prepareTileBg();
this._runAnimation(center, zoom, scale, origin);
return true;
},
_catchTransitionEnd: function (e) {
if (this._animatingZoom) {
this._onZoomTransitionEnd();
}
},
_runAnimation: function (center, zoom, scale, origin, backwardsTransform) {
this._animatingZoom = true;
this._animateToCenter = center;
this._animateToZoom = zoom;
this._animatingZoom = true;
var transform = L.DomUtil.TRANSFORM,
tileBg = this._tileBg;
@ -7401,29 +7442,14 @@ L.Map.include(!L.DomUtil.TRANSITION ? {} : {
tileBg.style[transform] += ' translate(0,0)';
}
var scaleStr;
// Android 2.* doesn't like translate/scale chains, transformOrigin + scale works better but
// it breaks touch zoom which Anroid doesn't support anyway, so that's a really ugly hack
// TODO work around this prettier
if (L.Browser.android23) {
tileBg.style[transform + 'Origin'] = origin.x + 'px ' + origin.y + 'px';
scaleStr = 'scale(' + scale + ')';
} else {
scaleStr = L.DomUtil.getScaleString(scale, origin);
}
L.Util.falseFn(tileBg.offsetWidth); //hack to make sure transform is updated before running animation
var options = {};
if (backwardsTransform) {
options[transform] = tileBg.style[transform] + ' ' + scaleStr;
} else {
options[transform] = scaleStr + ' ' + tileBg.style[transform];
}
var scaleStr = L.DomUtil.getScaleString(scale, origin),
oldTransform = tileBg.style[transform];
tileBg.transition.run(options);
tileBg.style[transform] = backwardsTransform ?
oldTransform + ' ' + scaleStr :
scaleStr + ' ' + oldTransform;
},
_prepareTileBg: function () {
@ -7431,8 +7457,7 @@ L.Map.include(!L.DomUtil.TRANSITION ? {} : {
tileBg = this._tileBg;
// If foreground layer doesn't have many tiles but bg layer does, keep the existing bg layer and just zoom it some more
// (disable this for Android due to it not supporting double translate)
if (!L.Browser.android23 && tileBg &&
if (tileBg &&
this._getLoadedTilesPercentage(tileBg) > 0.5 &&
this._getLoadedTilesPercentage(tilePane) < 0.5) {
@ -7459,14 +7484,7 @@ L.Map.include(!L.DomUtil.TRANSITION ? {} : {
this._tilePane = this._panes.tilePane = tileBg;
var newTileBg = this._tileBg = tilePane;
if (!newTileBg.transition) {
// TODO move to Map options
newTileBg.transition = new L.Transition(newTileBg, {
duration: 0.25,
easing: 'cubic-bezier(0.25,0.1,0.25,0.75)'
});
newTileBg.transition.on('end', this._onZoomTransitionEnd, this);
}
L.DomUtil.addClass(newTileBg, 'leaflet-zoom-animated');
this._stopLoadingImages(newTileBg);
},
@ -7503,7 +7521,6 @@ L.Map.include(!L.DomUtil.TRANSITION ? {} : {
_onZoomTransitionEnd: function () {
this._restoreTileFront();
L.Util.falseFn(this._tileBg.offsetWidth); // force reflow
this._resetView(this._animateToCenter, this._animateToZoom, true, true);

2
dist/leaflet.js vendored
View File

File diff suppressed because one or more lines are too long

2
src/Leaflet.js
View File

@ -14,4 +14,4 @@ if (typeof exports !== undefined + '') {
window.L = L;
}
L.version = '0.4.1';
L.version = '0.4.3';

2
src/dom/DomUtil.js
View File

@ -121,7 +121,7 @@ L.DomUtil = {
value = Math.round(value * 100);
if (filter) {
filter.Enabled = (value === 100);
filter.Enabled = (value !== 100);
filter.Opacity = value;
} else {
el.style.filter += ' progid:' + filterName + '(opacity=' + value + ')';

10
src/dom/Draggable.js
View File

@ -60,11 +60,6 @@ L.Draggable = L.Class.extend({
return;
}
if (!L.Browser.touch) {
L.DomUtil.disableTextSelection();
this._setMovingCursor();
}
this._startPos = this._newPos = L.DomUtil.getPosition(this._element);
this._startPoint = new L.Point(first.clientX, first.clientY);
@ -86,6 +81,11 @@ L.Draggable = L.Class.extend({
if (!this._moved) {
this.fire('dragstart');
this._moved = true;
if (!L.Browser.touch) {
L.DomUtil.disableTextSelection();
this._setMovingCursor();
}
}
this._newPos = this._startPos.add(diffVec);

7
src/dom/transition/Transition.Native.js
View File

@ -52,7 +52,7 @@ L.Transition = L.Transition.extend({
this._el.style[L.Transition.DURATION] = this.options.duration + 's';
this._el.style[L.Transition.EASING] = this.options.easing;
this._el.style[L.Transition.PROPERTY] = propsList.join(', ');
this._el.style[L.Transition.PROPERTY] = 'all';
for (prop in props) {
if (props.hasOwnProperty(prop)) {
@ -60,9 +60,10 @@ L.Transition = L.Transition.extend({
}
}
this._inProgress = true;
// Chrome flickers for some reason if you don't do this
L.Util.falseFn(this._el.offsetWidth);
this.fire('start');
this._inProgress = true;
if (L.Browser.mobileWebkit) {
// Set up a slightly delayed call to a backup event if webkitTransitionEnd doesn't fire properly

8
src/layer/FeatureGroup.js
View File

@ -42,6 +42,14 @@ L.FeatureGroup = L.LayerGroup.extend({
return this.invoke('setStyle', style);
},
bringToFront: function () {
return this.invoke('bringToFront');
},
bringToBack: function () {
return this.invoke('bringToBack');
},
getBounds: function () {
var bounds = new L.LatLngBounds();
this.eachLayer(function (layer) {

35
src/layer/GeoJSON.js
View File

@ -20,27 +20,42 @@ L.GeoJSON = L.FeatureGroup.extend({
return this;
}
var options = this.options,
style = options.style;
var options = this.options;
if (options.filter && !options.filter(geojson)) { return; }
var layer = L.GeoJSON.geometryToLayer(geojson, options.pointToLayer);
layer.feature = geojson;
if (style) {
if (typeof style === 'function') {
style = style(geojson);
}
if (layer.setStyle) {
layer.setStyle(style);
}
}
this.resetStyle(layer);
if (options.onEachFeature) {
options.onEachFeature(geojson, layer);
}
return this.addLayer(layer);
},
resetStyle: function (layer) {
var style = this.options.style;
if (style) {
this._setLayerStyle(layer, style);
}
},
setStyle: function (style) {
this.eachLayer(function (layer) {
this._setLayerStyle(layer, style);
}, this);
},
_setLayerStyle: function (layer, style) {
if (typeof style === 'function') {
style = style(layer.feature);
}
if (layer.setStyle) {
layer.setStyle(style);
}
}
});

8
src/layer/tile/TileLayer.js
View File

@ -370,10 +370,12 @@ L.TileLayer = L.Class.extend({
// get unused tile - or create a new tile
var tile = this._getTile();
// Chrome 20 layouts much faster with top/left (Verify with timeline, frames), Safari 5.1.7, iOS 5.1.1,
// android browser (4.0) have display issues with top/left and requires transform instead
// Chrome 20 layouts much faster with top/left (Verify with timeline, frames)
// android 4 browser has display issues with top/left and requires transform instead
// android 3 browser not tested
// android 2 browser requires top/left or tiles disappear on load or first drag (reappear after zoom) https://github.com/CloudMade/Leaflet/issues/866
// (other browsers don't currently care) - see debug/hacks/jitter.html for an example
L.DomUtil.setPosition(tile, tilePos, L.Browser.chrome);
L.DomUtil.setPosition(tile, tilePos, L.Browser.chrome || L.Browser.android23);
this._tiles[tilePoint.x + ':' + tilePoint.y] = tile;

2
src/layer/vector/Path.SVG.js
View File

@ -11,6 +11,7 @@ L.Path = L.Path.extend({
if (this._container) {
this._map._pathRoot.appendChild(this._container);
}
return this;
},
bringToBack: function () {
@ -18,6 +19,7 @@ L.Path = L.Path.extend({
var root = this._map._pathRoot;
root.insertBefore(this._container, root.firstChild);
}
return this;
},
getPathString: function () {

14
src/map/Map.js
View File

@ -200,7 +200,7 @@ L.Map = L.Class.extend({
return this._layers.hasOwnProperty(id);
},
invalidateSize: function () {
invalidateSize: function (animate) {
var oldSize = this.getSize();
this._sizeChanged = true;
@ -212,13 +212,17 @@ L.Map = L.Class.extend({
if (!this._loaded) { return this; }
var offset = oldSize.subtract(this.getSize()).divideBy(2, true);
this._rawPanBy(offset);
this.fire('move');
if (animate === true) {
this.panBy(offset);
} else {
this._rawPanBy(offset);
clearTimeout(this._sizeTimer);
this._sizeTimer = setTimeout(L.Util.bind(this.fire, this, 'moveend'), 200);
this.fire('move');
clearTimeout(this._sizeTimer);
this._sizeTimer = setTimeout(L.Util.bind(this.fire, this, 'moveend'), 200);
}
return this;
},

54
src/map/anim/Map.ZoomAnimation.js
View File

@ -2,11 +2,16 @@ L.Map.mergeOptions({
zoomAnimation: L.DomUtil.TRANSITION && !L.Browser.android23 && !L.Browser.mobileOpera
});
L.Map.addInitHook(function () {
L.DomEvent.on(this._mapPane, L.Transition.END, this._catchTransitionEnd, this);
});
L.Map.include(!L.DomUtil.TRANSITION ? {} : {
_zoomToIfClose: function (center, zoom) {
if (this._animatingZoom) { return true; }
if (!this.options.zoomAnimation) { return false; }
var scale = this.getZoomScale(zoom),
@ -21,8 +26,6 @@ L.Map.include(!L.DomUtil.TRANSITION ? {} : {
.fire('movestart')
.fire('zoomstart');
this._prepareTileBg();
this.fire('zoomanim', {
center: center,
zoom: zoom
@ -30,17 +33,22 @@ L.Map.include(!L.DomUtil.TRANSITION ? {} : {
var origin = this._getCenterLayerPoint().add(offset);
this._prepareTileBg();
this._runAnimation(center, zoom, scale, origin);
return true;
},
_catchTransitionEnd: function (e) {
if (this._animatingZoom) {
this._onZoomTransitionEnd();
}
},
_runAnimation: function (center, zoom, scale, origin, backwardsTransform) {
this._animatingZoom = true;
this._animateToCenter = center;
this._animateToZoom = zoom;
this._animatingZoom = true;
var transform = L.DomUtil.TRANSFORM,
tileBg = this._tileBg;
@ -52,29 +60,14 @@ L.Map.include(!L.DomUtil.TRANSITION ? {} : {
tileBg.style[transform] += ' translate(0,0)';
}
var scaleStr;
// Android 2.* doesn't like translate/scale chains, transformOrigin + scale works better but
// it breaks touch zoom which Anroid doesn't support anyway, so that's a really ugly hack
// TODO work around this prettier
if (L.Browser.android23) {
tileBg.style[transform + 'Origin'] = origin.x + 'px ' + origin.y + 'px';
scaleStr = 'scale(' + scale + ')';
} else {
scaleStr = L.DomUtil.getScaleString(scale, origin);
}
L.Util.falseFn(tileBg.offsetWidth); //hack to make sure transform is updated before running animation
var options = {};
if (backwardsTransform) {
options[transform] = tileBg.style[transform] + ' ' + scaleStr;
} else {
options[transform] = scaleStr + ' ' + tileBg.style[transform];
}
var scaleStr = L.DomUtil.getScaleString(scale, origin),
oldTransform = tileBg.style[transform];
tileBg.transition.run(options);
tileBg.style[transform] = backwardsTransform ?
oldTransform + ' ' + scaleStr :
scaleStr + ' ' + oldTransform;
},
_prepareTileBg: function () {
@ -82,8 +75,7 @@ L.Map.include(!L.DomUtil.TRANSITION ? {} : {
tileBg = this._tileBg;
// If foreground layer doesn't have many tiles but bg layer does, keep the existing bg layer and just zoom it some more
// (disable this for Android due to it not supporting double translate)
if (!L.Browser.android23 && tileBg &&
if (tileBg &&
this._getLoadedTilesPercentage(tileBg) > 0.5 &&
this._getLoadedTilesPercentage(tilePane) < 0.5) {
@ -110,14 +102,7 @@ L.Map.include(!L.DomUtil.TRANSITION ? {} : {
this._tilePane = this._panes.tilePane = tileBg;
var newTileBg = this._tileBg = tilePane;
if (!newTileBg.transition) {
// TODO move to Map options
newTileBg.transition = new L.Transition(newTileBg, {
duration: 0.25,
easing: 'cubic-bezier(0.25,0.1,0.25,0.75)'
});
newTileBg.transition.on('end', this._onZoomTransitionEnd, this);
}
L.DomUtil.addClass(newTileBg, 'leaflet-zoom-animated');
this._stopLoadingImages(newTileBg);
},
@ -154,7 +139,6 @@ L.Map.include(!L.DomUtil.TRANSITION ? {} : {
_onZoomTransitionEnd: function () {
this._restoreTileFront();
L.Util.falseFn(this._tileBg.offsetWidth); // force reflow
this._resetView(this._animateToCenter, this._animateToZoom, true, true);

4
src/map/handler/Map.Keyboard.js
View File

@ -12,8 +12,8 @@ L.Map.Keyboard = L.Handler.extend({
right: [39],
down: [40],
up: [38],
zoomIn: [187, 61, 107],
zoomOut: [189, 109, 0]
zoomIn: [187, 107, 61],
zoomOut: [189, 109]
},
initialize: function (map) {