diff --git a/debug/map/zoom-remain-centered.html b/debug/map/zoom-remain-centered.html
index 87d166ede..2e055f524 100644
--- a/debug/map/zoom-remain-centered.html
+++ b/debug/map/zoom-remain-centered.html
@@ -29,7 +29,7 @@
layers: [osm],
scrollWheelZoom: 'center', // zoom to center regardless where mouse is
doubleClickZoom: 'center',
- touchZoom: 'center'
+ pinchZoom: 'center'
});
new Marker(latlng).addTo(map);
diff --git a/docs/examples/extending/class-diagram.txt b/docs/examples/extending/class-diagram.txt
index 32dcb8147..286689176 100644
--- a/docs/examples/extending/class-diagram.txt
+++ b/docs/examples/extending/class-diagram.txt
@@ -52,7 +52,7 @@
[L.Map] has one -.-> [L.CRS]
[L.Class] ^- [L.Handler|addHooks();removeHooks()]
-[L.Handler] ^- [L.Map.BoxZoom;L.Map.DoubleClickZoom;L.Map.Drag;L.Map.Keyboard;L.Map.ScrollWheelZoom;L.Map.Tap;L.Map.TouchZoom]
+[L.Handler] ^- [L.Map.BoxZoom;L.Map.DoubleClickZoom;L.Map.Drag;L.Map.Keyboard;L.Map.ScrollWheelZoom;L.Map.Tap;L.Map.PinchZoom]
// L.Handler] ^- L.Map.BoxZoom]
// L.Handler] ^- L.Map.DoubleClickZoom]
@@ -60,7 +60,7 @@
// L.Handler] ^- L.Map.Keyboard]
// L.Handler] ^- L.Map.ScrollWheelZoom]
// L.Handler] ^- L.Map.Tap]
-// L.Handler] ^- L.Map.TouchZoom]
+// L.Handler] ^- L.Map.PinchZoom]
[L.Layer] ^- [L.Marker]
[L.Icon] ^- [L.Icon.Default]
diff --git a/spec/suites/map/handler/Map.DragSpec.js b/spec/suites/map/handler/Map.DragSpec.js
index 22998ce22..d90b4c447 100644
--- a/spec/suites/map/handler/Map.DragSpec.js
+++ b/spec/suites/map/handler/Map.DragSpec.js
@@ -377,7 +377,7 @@ describe('Map.Drag', () => {
});
map.setView([0, 0], 1);
- // Change default events order to make the tap comming before the touchzoom.
+ // Change default events order to make the tap comming before the pinchZoom.
// See #4315
map.dragging.disable();
map.dragging.enable();
diff --git a/spec/suites/map/handler/Map.TouchZoomSpec.js b/spec/suites/map/handler/Map.PinchZoomSpec.js
similarity index 73%
rename from spec/suites/map/handler/Map.TouchZoomSpec.js
rename to spec/suites/map/handler/Map.PinchZoomSpec.js
index d9a518ca3..5927fbcf1 100644
--- a/spec/suites/map/handler/Map.TouchZoomSpec.js
+++ b/spec/suites/map/handler/Map.PinchZoomSpec.js
@@ -4,13 +4,13 @@ import Hand from 'prosthetic-hand';
import sinon from 'sinon';
import {createContainer, removeMapContainer, touchEventType} from '../../SpecHelper.js';
-describe('Map.TouchZoom', () => {
+describe('Map.PinchZoom', () => {
let container, map;
beforeEach(() => {
container = createContainer();
map = new Map(container, {
- touchZoom: true,
+ pinchZoom: true,
inertia: false,
zoomAnimation: false // If true, the test has to wait extra 250msec
});
@@ -133,11 +133,11 @@ describe('Map.TouchZoom', () => {
});
- it.skipIfNotTouch('TouchZoom works with disabled map dragging', (done) => {
+ it.skipIfNotTouch('PinchZoom works with disabled map dragging', (done) => {
map.remove();
map = new Map(container, {
- touchZoom: true,
+ pinchZoom: true,
inertia: false,
zoomAnimation: false, // If true, the test has to wait extra 250msec,
dragging: false
@@ -167,7 +167,7 @@ describe('Map.TouchZoom', () => {
map.remove();
map = new Map(container, {
- touchZoom: true,
+ pinchZoom: true,
inertia: false,
zoomAnimation: true
});
@@ -220,16 +220,16 @@ describe('Map.TouchZoom', () => {
hand.sync(5);
f1.wait(100).moveTo(75, 300, 0)
- .down().moveBy(200, 0, 500);
+ .down().moveBy(200, 0, 500).up();
f2.wait(100).moveTo(525, 300, 0)
- .down().moveBy(-200, 0, 500);
+ .down().moveBy(-200, 0, 500).up();
});
it.skipIfNotTouch('Layer is rendered correctly while pinch zoom when zoomAnim is false', (done) => {
map.remove();
map = new Map(container, {
- touchZoom: true,
+ pinchZoom: true,
inertia: false,
zoomAnimation: false
});
@@ -243,47 +243,74 @@ describe('Map.TouchZoom', () => {
[1, 0]
]).addTo(map);
- let alreadyCalled = false;
- const hand = new Hand({
- timing: 'fastframe',
- onStop() {
- setTimeout(() => {
- if (alreadyCalled) {
- return; // Will recursivly call itself otherwise
- }
- alreadyCalled = true;
- const renderedRect = polygon._path.getBoundingClientRect();
-
- const width = renderedRect.width;
- const height = renderedRect.height;
-
- expect(height < 50).to.be.true;
- expect(width < 50).to.be.true;
- expect(height + width > 0).to.be.true;
-
- const x = renderedRect.x;
- const y = renderedRect.y;
-
- expect(x).to.be.within(299, 301);
- expect(y).to.be.within(270, 280);
-
- // Fingers lifted after expects as bug goes away when lifted
- this._fingers[0].up();
- this._fingers[1].up();
-
- done();
- }, 100);
- }
+ map.pinchZoom._onTouchStart({
+ touches: [
+ {clientX: 75, clientY: 300},
+ {clientX: 525, clientY: 300}
+ ],
+ });
+ map.pinchZoom._onTouchMove({
+ touches: [
+ {clientX: 275, clientY: 300},
+ {clientX: 325, clientY: 300}
+ ],
});
- const f1 = hand.growFinger(touchEventType);
- const f2 = hand.growFinger(touchEventType);
+ setTimeout(() => {
+ map.pinchZoom._onTouchEnd();
- hand.sync(5);
- f1.wait(100).moveTo(75, 300, 0)
- .down().moveBy(200, 0, 500);
- f2.wait(100).moveTo(525, 300, 0)
- .down().moveBy(-200, 0, 500);
+ const renderedRect = polygon._path.getBoundingClientRect();
+
+ const width = renderedRect.width;
+ const height = renderedRect.height;
+
+ expect(height < 50).to.be.true;
+ expect(width < 50).to.be.true;
+ expect(height + width > 0).to.be.true;
+
+ const x = renderedRect.x;
+ const y = renderedRect.y;
+
+ expect(x).to.be.within(297, 300);
+ expect(y).to.be.within(270, 280);
+
+ done();
+ }, 100);
});
+
+ it.skipIfNotTouch('disables pinchZoom when touchZoom is false (backward compatibility)', () => {
+ const warnSpy = sinon.spy(console, 'warn');
+
+ const localContainer = createContainer();
+ const localMap = new Map(localContainer, {
+ touchZoom: false
+ });
+
+ expect(localMap.pinchZoom.enabled()).to.be.false;
+ expect(warnSpy.calledOnce).to.be.true;
+ expect(warnSpy.firstCall.args[0]).to.eq('Map: touchZoom option is deprecated and will be removed in future versions. Use pinchZoom instead.');
+
+ warnSpy.restore();
+ removeMapContainer(localMap, localContainer);
+ });
+
+
+ it.skipIfNotTouch('enables pinchZoom when touchZoom is true and pinchZoom is false (touchZoom takes precedence)', () => {
+ const warnSpy = sinon.spy(console, 'warn');
+
+ const localContainer = createContainer();
+ const localMap = new Map(localContainer, {
+ touchZoom: true,
+ pinchZoom: false
+ });
+
+ expect(localMap.pinchZoom.enabled()).to.be.true;
+ expect(warnSpy.calledOnce).to.be.true;
+ expect(warnSpy.firstCall.args[0]).to.eq('Map: touchZoom option is deprecated and will be removed in future versions. Use pinchZoom instead.');
+
+ warnSpy.restore();
+ removeMapContainer(localMap, localContainer);
+ });
+
});
diff --git a/src/dom/Draggable.js b/src/dom/Draggable.js
index 924b515a0..ab521413a 100644
--- a/src/dom/Draggable.js
+++ b/src/dom/Draggable.js
@@ -81,7 +81,7 @@ export const Draggable = Evented.extend({
if (this._element.classList.contains('leaflet-zoom-anim')) { return; }
if (e.touches && e.touches.length !== 1) {
- // Finish dragging to avoid conflict with touchZoom
+ // Finish dragging to avoid conflict with pinchZoom.
if (Draggable._dragging === this) {
this.finishDrag();
}
diff --git a/src/layer/tile/GridLayer.js b/src/layer/tile/GridLayer.js
index 192f8c846..41465234c 100755
--- a/src/layer/tile/GridLayer.js
+++ b/src/layer/tile/GridLayer.js
@@ -93,7 +93,7 @@ export const GridLayer = Layer.extend({
updateWhenIdle: Browser.mobile,
// @option updateWhenZooming: Boolean = true
- // By default, a smooth zoom animation (during a [touch zoom](#map-touchzoom) or a [`flyTo()`](#map-flyto)) will update grid layers every integer zoom level. Setting this option to `false` will update the grid layer only when the smooth animation ends.
+ // By default, a smooth zoom animation (during a [pinch zoom](#map-pinchzoom) or a [`flyTo()`](#map-flyto)) will update grid layers every integer zoom level. Setting this option to `false` will update the grid layer only when the smooth animation ends.
updateWhenZooming: true,
// @option updateInterval: Number = 200
diff --git a/src/map/handler/Map.TouchZoom.js b/src/map/handler/Map.PinchZoom.js
similarity index 81%
rename from src/map/handler/Map.TouchZoom.js
rename to src/map/handler/Map.PinchZoom.js
index 3b5e57670..d9bf0f5fb 100644
--- a/src/map/handler/Map.TouchZoom.js
+++ b/src/map/handler/Map.PinchZoom.js
@@ -4,19 +4,19 @@ import * as DomEvent from '../../dom/DomEvent.js';
import Browser from '../../core/Browser.js';
/*
- * L.Handler.TouchZoom is used by L.Map to add pinch zoom on supported mobile browsers.
+ * L.Handler.PinchZoom is used by L.Map to add pinch zoom on supported mobile browsers.
*/
// @namespace Map
// @section Interaction Options
Map.mergeOptions({
// @section Touch interaction options
- // @option touchZoom: Boolean|String = *
+ // @option pinchZoom: Boolean|String = *
// Whether the map can be zoomed by touch-dragging with two fingers. If
// passed `'center'`, it will zoom to the center of the view regardless of
// where the touch events (fingers) were. Enabled for touch-capable web
// browsers.
- touchZoom: Browser.touch,
+ pinchZoom: Browser.touch,
// @option bounceAtZoomLimits: Boolean = true
// Set it to false if you don't want the map to zoom beyond min/max zoom
@@ -24,7 +24,7 @@ Map.mergeOptions({
bounceAtZoomLimits: true
});
-export const TouchZoom = Handler.extend({
+export const PinchZoom = Handler.extend({
addHooks() {
this._map._container.classList.add('leaflet-touch-zoom');
DomEvent.on(this._map._container, 'touchstart', this._onTouchStart, this);
@@ -44,7 +44,7 @@ export const TouchZoom = Handler.extend({
this._centerPoint = map.getSize()._divideBy(2);
this._startLatLng = map.containerPointToLatLng(this._centerPoint);
- if (map.options.touchZoom !== 'center') {
+ if (map.options.pinchZoom !== 'center') {
this._pinchStartLatLng = map.containerPointToLatLng(p1.add(p2)._divideBy(2));
}
@@ -78,7 +78,7 @@ export const TouchZoom = Handler.extend({
this._zoom = map._limitZoom(this._zoom);
}
- if (map.options.touchZoom === 'center') {
+ if (map.options.pinchZoom === 'center') {
this._center = this._startLatLng;
if (scale === 1) { return; }
} else {
@@ -123,6 +123,22 @@ export const TouchZoom = Handler.extend({
});
// @section Handlers
-// @property touchZoom: Handler
-// Touch zoom handler.
-Map.addInitHook('addHandler', 'touchZoom', TouchZoom);
+// @property pinchZoom: Handler
+// Pinch zoom handler.
+Map.addInitHook('addHandler', 'pinchZoom', PinchZoom);
+
+// Deprecated - Backward compatibility touchZoom
+Map.addInitHook(function () {
+ this.touchZoom = this.pinchZoom;
+
+ if (this.options.touchZoom !== undefined) {
+ console.warn('Map: touchZoom option is deprecated and will be removed in future versions. Use pinchZoom instead.');
+ this.options.pinchZoom = this.options.touchZoom;
+ delete this.options.touchZoom;
+ }
+ if (this.options.pinchZoom) {
+ this.pinchZoom.enable();
+ } else {
+ this.pinchZoom.disable();
+ }
+});
diff --git a/src/map/index.js b/src/map/index.js
index 1ebcc8d20..9fcdbcae8 100644
--- a/src/map/index.js
+++ b/src/map/index.js
@@ -11,7 +11,8 @@ import {ScrollWheelZoom} from './handler/Map.ScrollWheelZoom.js';
Map.ScrollWheelZoom = ScrollWheelZoom;
import {TapHold} from './handler/Map.TapHold.js';
Map.TapHold = TapHold;
-import {TouchZoom} from './handler/Map.TouchZoom.js';
-Map.TouchZoom = TouchZoom;
+import {PinchZoom} from './handler/Map.PinchZoom.js';
+Map.PinchZoom = PinchZoom;
+Map.TouchZoom = PinchZoom; // backward compatibility
export {Map, createMap as map} from './Map.js';