cartodb/Leaflet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added map zoomstart event, fixed movestart event, closed #377

Browse Source
This commit is contained in:
mourner 2011-12-14 16:09:32 +02:00
parent 36eb9d3cbd
commit 3595c50b33
7 changed files with 62 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -31,6 +31,7 @@ Leaflet Changelog
* Added ability to add a tile layer below all others (`map.addLayer(layer, true)`) (useful for switching base tile layers). * Added ability to add a tile layer below all others (`map.addLayer(layer, true)`) (useful for switching base tile layers).
* Added `hasLayer` method to `Map`. * Added `hasLayer` method to `Map`.
* Added `TileLayer` `continuousWorld` option to disable tile coordinates checking/wrapping. * Added `TileLayer` `continuousWorld` option to disable tile coordinates checking/wrapping.
* Added `Map` `zoomstart` event (thanks to [@Fabiz](https://github.com/Fabiz)). [#377](https://github.com/CloudMade/Leaflet/pull/377)
* Added `ImageOverlay` `load` event. [#213](https://github.com/CloudMade/Leaflet/issues/213) * Added `ImageOverlay` `load` event. [#213](https://github.com/CloudMade/Leaflet/issues/213)
* Added `Polyline` `closestLayerPoint` method that's can be useful for interaction features (by [@anru](https://github.com/anru)). [#186](https://github.com/CloudMade/Leaflet/pull/186) * Added `Polyline` `closestLayerPoint` method that's can be useful for interaction features (by [@anru](https://github.com/anru)). [#186](https://github.com/CloudMade/Leaflet/pull/186)
* Added `setLatLngs` method to `MultiPolyline` and `MultiPolygon` (by [@anru](https://github.com/anru)). [#194](https://github.com/CloudMade/Leaflet/pull/194) * Added `setLatLngs` method to `MultiPolyline` and `MultiPolygon` (by [@anru](https://github.com/anru)). [#194](https://github.com/CloudMade/Leaflet/pull/194)
@ -64,6 +65,7 @@ Leaflet Changelog
* Fixed a typo in `Bounds` `contains` method (by [@anru](https://github.com/anru)). [#180](https://github.com/CloudMade/Leaflet/pull/180) * Fixed a typo in `Bounds` `contains` method (by [@anru](https://github.com/anru)). [#180](https://github.com/CloudMade/Leaflet/pull/180)
* Fixed a bug where drag event fired before the actual movement of layer (by [@anru](https://github.com/anru)). [#197](https://github.com/CloudMade/Leaflet/pull/197) * Fixed a bug where drag event fired before the actual movement of layer (by [@anru](https://github.com/anru)). [#197](https://github.com/CloudMade/Leaflet/pull/197)
* Fixed a bug where map click caused an error if dragging is initially disabled. [#196](https://github.com/CloudMade/Leaflet/issues/196) * Fixed a bug where map click caused an error if dragging is initially disabled. [#196](https://github.com/CloudMade/Leaflet/issues/196)
* Fixed a bug where map `movestart` event would fire after zoom animation.
* Fixed a bug where attribution prefix would not update on `setPrefix`. [#195](https://github.com/CloudMade/Leaflet/issues/195) * Fixed a bug where attribution prefix would not update on `setPrefix`. [#195](https://github.com/CloudMade/Leaflet/issues/195)
* Fixed a bug where `TileLayer` `load` event wouldn't fire in some edge cases (by [@dravnic](https://github.com/dravnic)). * Fixed a bug where `TileLayer` `load` event wouldn't fire in some edge cases (by [@dravnic](https://github.com/dravnic)).
* Fixed a bug related to clearing background tiles after zooming (by [@neno-giscloud](https://github.com/neno-giscloud) & [@dravnic](https://github.com/dravnic)). * Fixed a bug related to clearing background tiles after zooming (by [@neno-giscloud](https://github.com/neno-giscloud) & [@dravnic](https://github.com/dravnic)).

29
debug/map/map.html
View File

@ -5,9 +5,9 @@
<link rel="stylesheet" href="../../dist/leaflet.css" /> <link rel="stylesheet" href="../../dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]--> <!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
<link rel="stylesheet" href="../css/screen.css" /> <link rel="stylesheet" href="../css/screen.css" />
<script src="../leaflet-include.js"></script> <script src="../leaflet-include.js"></script>
</head> </head>
<body> <body>
@ -21,25 +21,34 @@
cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade', cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}), cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
latlng = new L.LatLng(50.5, 30.51); latlng = new L.LatLng(50.5, 30.51);
var map = new L.Map('map', {center: latlng, zoom: 15, layers: [cloudmade]}); var map = new L.Map('map', {center: latlng, zoom: 15, layers: [cloudmade]});
var markers = new L.FeatureGroup(); var markers = new L.FeatureGroup();
function populate() { function populate() {
for (var i = 0; i < 10; i++) { for (var i = 0; i < 10; i++) {
markers.addLayer(new L.Marker(getRandomLatLng(map))); markers.addLayer(new L.Marker(getRandomLatLng(map)));
} }
return false; return false;
}; }
markers.bindPopup("<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p><p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque.</p>"); markers.bindPopup("<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p><p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque.</p>");
map.addLayer(markers); map.addLayer(markers);
populate(); populate();
L.DomUtil.get('populate').onclick = populate; L.DomUtil.get('populate').onclick = populate;
// function logEvent(e) { console.log(e.type); }
//
// map.on('movestart', logEvent);
// map.on('move', logEvent);
// map.on('moveend', logEvent);
//
// map.on('zoomstart', logEvent);
// map.on('zoomend', logEvent);
</script> </script>
</body> </body>
</html> </html>

27
dist/leaflet-src.js vendored
View File

@ -1314,10 +1314,16 @@ L.Map = L.Class.extend({
return L.DomUtil.create('div', className, container || this._objectsPane); return L.DomUtil.create('div', className, container || this._objectsPane);
}, },
_resetView: function (center, zoom, preserveMapOffset) { _resetView: function (center, zoom, preserveMapOffset, afterZoomAnim) {
var zoomChanged = (this._zoom !== zoom); var zoomChanged = (this._zoom !== zoom);
this.fire('movestart'); if (!afterZoomAnim) {
this.fire('movestart');
if (zoomChanged) {
this.fire('zoomstart');
}
}
this._zoom = zoom; this._zoom = zoom;
@ -1334,7 +1340,7 @@ L.Map = L.Class.extend({
this.fire('viewreset', {hard: !preserveMapOffset}); this.fire('viewreset', {hard: !preserveMapOffset});
this.fire('move'); this.fire('move');
if (zoomChanged) { if (zoomChanged || afterZoomAnim) {
this.fire('zoomend'); this.fire('zoomend');
} }
this.fire('moveend'); this.fire('moveend');
@ -4442,7 +4448,12 @@ L.Map.TouchZoom = L.Handler.extend({
if (!this._moved) { if (!this._moved) {
this._map._mapPane.className += ' leaflet-zoom-anim'; this._map._mapPane.className += ' leaflet-zoom-anim';
this._map._prepareTileBg();
this._map
.fire('zoomstart')
.fire('movestart')
._prepareTileBg();
this._moved = true; this._moved = true;
} }
@ -5312,6 +5323,10 @@ L.Map.include(!L.DomUtil.TRANSITION ? {} : {
this._mapPane.className += ' leaflet-zoom-anim'; this._mapPane.className += ' leaflet-zoom-anim';
this
.fire('movestart')
.fire('zoomstart');
var centerPoint = this.containerPointToLayerPoint(this.getSize().divideBy(2)), var centerPoint = this.containerPointToLayerPoint(this.getSize().divideBy(2)),
origin = centerPoint.add(offset); origin = centerPoint.add(offset);
@ -5401,9 +5416,7 @@ L.Map.include(!L.DomUtil.TRANSITION ? {} : {
this._restoreTileFront(); this._restoreTileFront();
L.Util.falseFn(this._tileBg.offsetWidth); L.Util.falseFn(this._tileBg.offsetWidth);
this._resetView(this._animateToCenter, this._animateToZoom, true); this._resetView(this._animateToCenter, this._animateToZoom, true, true);
//TODO clear tileBg on map layersload
this._mapPane.className = this._mapPane.className.replace(' leaflet-zoom-anim', ''); //TODO toggleClass util this._mapPane.className = this._mapPane.className.replace(' leaflet-zoom-anim', ''); //TODO toggleClass util
this._animatingZoom = false; this._animatingZoom = false;

2
dist/leaflet.js vendored
View File

File diff suppressed because one or more lines are too long

12
src/map/Map.js
View File

@ -442,10 +442,16 @@ L.Map = L.Class.extend({
return L.DomUtil.create('div', className, container || this._objectsPane); return L.DomUtil.create('div', className, container || this._objectsPane);
}, },
_resetView: function (center, zoom, preserveMapOffset) { _resetView: function (center, zoom, preserveMapOffset, afterZoomAnim) {
var zoomChanged = (this._zoom !== zoom); var zoomChanged = (this._zoom !== zoom);
this.fire('movestart'); if (!afterZoomAnim) {
this.fire('movestart');
if (zoomChanged) {
this.fire('zoomstart');
}
}
this._zoom = zoom; this._zoom = zoom;
@ -462,7 +468,7 @@ L.Map = L.Class.extend({
this.fire('viewreset', {hard: !preserveMapOffset}); this.fire('viewreset', {hard: !preserveMapOffset});
this.fire('move'); this.fire('move');
if (zoomChanged) { if (zoomChanged || afterZoomAnim) {
this.fire('zoomend'); this.fire('zoomend');
} }
this.fire('moveend'); this.fire('moveend');

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

@ -19,6 +19,10 @@ L.Map.include(!L.DomUtil.TRANSITION ? {} : {
this._mapPane.className += ' leaflet-zoom-anim'; this._mapPane.className += ' leaflet-zoom-anim';
this
.fire('movestart')
.fire('zoomstart');
var centerPoint = this.containerPointToLayerPoint(this.getSize().divideBy(2)), var centerPoint = this.containerPointToLayerPoint(this.getSize().divideBy(2)),
origin = centerPoint.add(offset); origin = centerPoint.add(offset);
@ -108,9 +112,7 @@ L.Map.include(!L.DomUtil.TRANSITION ? {} : {
this._restoreTileFront(); this._restoreTileFront();
L.Util.falseFn(this._tileBg.offsetWidth); L.Util.falseFn(this._tileBg.offsetWidth);
this._resetView(this._animateToCenter, this._animateToZoom, true); this._resetView(this._animateToCenter, this._animateToZoom, true, true);
//TODO clear tileBg on map layersload
this._mapPane.className = this._mapPane.className.replace(' leaflet-zoom-anim', ''); //TODO toggleClass util this._mapPane.className = this._mapPane.className.replace(' leaflet-zoom-anim', ''); //TODO toggleClass util
this._animatingZoom = false; this._animatingZoom = false;

7
src/map/handler/Map.TouchZoom.js
View File

@ -42,7 +42,12 @@ L.Map.TouchZoom = L.Handler.extend({
if (!this._moved) { if (!this._moved) {
this._map._mapPane.className += ' leaflet-zoom-anim'; this._map._mapPane.className += ' leaflet-zoom-anim';
this._map._prepareTileBg();
this._map
.fire('zoomstart')
.fire('movestart')
._prepareTileBg();
this._moved = true; this._moved = true;
} }