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

Don't animate movement when zooming by touch. Still doesn't work right for touch.

Browse Source
This commit is contained in:
danzel 2012-06-15 14:19:11 +12:00
parent b33d1f3231
commit da475a9d23
2 changed files with 21 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
dist/leaflet.css vendored
View File

@ -282,11 +282,14 @@ a.leaflet-active {
-o-transition: -o-transform 0.25s cubic-bezier(0.25,0.1,0.25,0.75); -o-transition: -o-transform 0.25s cubic-bezier(0.25,0.1,0.25,0.75);
transition: transform 0.25s cubic-bezier(0.25,0.1,0.25,0.75); transition: transform 0.25s cubic-bezier(0.25,0.1,0.25,0.75);
} }
/*.leaflet-zoom-anim .leaflet-objects-pane {
visibility: hidden; .leaflet-touching .leaflet-overlay-pane svg, .leaflet-touching .leaflet-marker-icon, .leaflet-touching .leaflet-popup, .leaflet-touching .leaflet-marker-shadow {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
} }
*/
/* Popup layout */ /* Popup layout */
.leaflet-popup { .leaflet-popup {

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

@ -25,6 +25,8 @@ L.Map.TouchZoom = L.Handler.extend({
viewCenter = map.containerPointToLayerPoint(map.getSize().divideBy(2)); viewCenter = map.containerPointToLayerPoint(map.getSize().divideBy(2));
this._startCenter = p1.add(p2).divideBy(2, true); this._startCenter = p1.add(p2).divideBy(2, true);
this._startLatLng = this._map.layerPointToLatLng(this._startCenter);
console.log("center: " + this._startLatLng);
this._startDist = p1.distanceTo(p2); this._startDist = p1.distanceTo(p2);
this._moved = false; this._moved = false;
@ -52,28 +54,25 @@ L.Map.TouchZoom = L.Handler.extend({
if (this._scale === 1) { return; } if (this._scale === 1) { return; }
if (!this._moved) { var zoom = this._map._zoom + Math.log(this._scale) / Math.log(2);
map._mapPane.className += ' leaflet-zoom-anim';
//console.log("scale: " + this._scale);
console.log("zoom: " + zoom);
console.log("newTopLeft: " + this._map._getNewTopLeftPoint(this._startLatLng, zoom));
if (!this._moved) {
map._mapPane.className += ' leaflet-zoom-anim leaflet-touching';
var a = map.layerPointToLatLng(p1);
var b = map.layerPointToLatLng(p2);
console.log('a: ' + a + ' b: ' + b);
this._center = new L.LatLng((a.lat + b.lat) / 2, (a.lng + b.lng) / 2);
console.log("center: " + this._center);
map map
//.fire('zoomstart', { center: center, zoom: zoom, newTopLeft: this._map._getNewTopLeftPoint(center, zoom) }) //.fire('zoomstart', { center: center, zoom: zoom, newTopLeft: this._map._getNewTopLeftPoint(center, zoom) })
.fire('movestart') .fire('zoomstart', { center: this._startLatLng, zoom: zoom, newTopLeft: this._map._getNewTopLeftPoint(this._startLatLng, zoom) })
.fire('movestart')
._prepareTileBg(); ._prepareTileBg();
this._moved = true; this._moved = true;
} else {
map.fire('zoomstart', { center: this._startLatLng, zoom: zoom, newTopLeft: this._map._getNewTopLeftPoint(this._startLatLng, zoom) });
} }
console.log("scale: " + this._scale);
var zoom = this._map._zoom + Math.log(this._scale) / Math.log(2);
console.log("zoom: " + zoom);
console.log("newTopLeft: " + this._map._getNewTopLeftPoint(this._center, zoom));
//alert({ center: center, zoom: this._zoom + (Math.log(this._scale) / Math.log(2)), newTopLeft: this._getNewTopLeftPoint(center, this._scale) });
map
.fire('zoomstart', { center: this._center, zoom: zoom, newTopLeft: this._map._getNewTopLeftPoint(this._center, zoom) });
// Used 2 translates instead of transform-origin because of a very strange bug - // Used 2 translates instead of transform-origin because of a very strange bug -
// it didn't count the origin on the first touch-zoom but worked correctly afterwards // it didn't count the origin on the first touch-zoom but worked correctly afterwards
@ -89,6 +88,7 @@ L.Map.TouchZoom = L.Handler.extend({
if (!this._moved || !this._zooming) { return; } if (!this._moved || !this._zooming) { return; }
this._zooming = false; this._zooming = false;
this._map._mapPane.className = this._map._mapPane.className.replace(' leaflet-touching', ''); //TODO toggleClass util
L.DomEvent L.DomEvent
.removeListener(document, 'touchmove', this._onTouchMove) .removeListener(document, 'touchmove', this._onTouchMove)