leaflet-rotate 0.3.0 → 0.5.0

package/test/features/rotation.feature

@@ -21,6 +21,36 @@ Feature: Rotating a Leaflet map
     When I animate the bearing to 90 degrees
     Then the bearing reaches 90 degrees gradually
 
+  @issue-72
+  Scenario: Pitch projects and reverses map coordinates
+    When I set the map pitch to 45 degrees
+    Then map coordinates stay consistent with the pitched view
+
+  @issue-72
+  Scenario: Ctrl-drag changes pitch and bearing without panning
+    When I change pitch and bearing with Ctrl-drag
+    Then pitch and bearing change without moving the map pane
+
+  @issue-72
+  Scenario: Pitched vector layers stay aligned while panning
+    When I drag the pitched map
+    Then vector layers stay aligned with their map coordinates
+
+  @issue-72
+  Scenario: Vector layers stay aligned after off-center zoom and rotation
+    When I zoom off-center then rotate the map
+    Then vector layers stay aligned with their map coordinates
+
+  @issue-72
+  Scenario: Ctrl-drag after panning keeps the map center stable
+    When I pan the map then Ctrl-drag
+    Then the map center stays stable during Ctrl-drag
+
+  @issue-72
+  Scenario: Ctrl-drag cancels a pending wheel zoom
+    When I Ctrl-drag while a wheel zoom is pending
+    Then the pending wheel zoom does not move the map
+
   @issue-25
   Scenario: Fit bounds zoom is stable
     When I fit the same bounds twice

package/test/index.html

@@ -6,18 +6,12 @@
 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 
-		<!-- Leaflet JS / CSS -->
-		<script src="https://unpkg.com/leaflet@1.9/dist/leaflet-src.js"></script>
-		<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9/dist/leaflet.css">
-
-		<!-- Leaflet-Rotate -->
-		<script src="../dist/leaflet-rotate-src.js"></script>
+		<link id="leaflet-css" rel="stylesheet">
 
 		<!-- include some miscellaneous -->
 		<script src="../misc/route.js"></script>
 		<script src="../misc/places.js"></script>
 		<script src="../misc/loremIpsum.js"></script>
-		<script src="../lib/debug.js"></script>
 
 		<style>
 			#map {
@@ -36,6 +30,12 @@
 
 	<body>
 
+		<label for="leaflet-version">Leaflet version:</label>
+		<select id="leaflet-version">
+			<option value="1">1.9.4</option>
+			<option value="2">2.0.0-alpha.1</option>
+		</select>
+
 		<div id="map"></div>
 
 		<hr>
@@ -61,8 +61,38 @@
 			</p>
 		</div>
 
-		<script>
-			var esri = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+		<script type="module">
+			const versionSelect = document.getElementById('leaflet-version');
+			const params = new URLSearchParams(location.search);
+			versionSelect.value = params.get('leaflet') === '2' ? '2' : '1';
+			versionSelect.addEventListener('change', () => {
+				location.search = `?leaflet=${versionSelect.value}`;
+			});
+
+			const loadScript = src => new Promise((resolve, reject) => {
+				const script = document.createElement('script');
+				script.src = src;
+				script.onload = resolve;
+				script.onerror = () => reject(new Error(`Could not load ${src}`));
+				document.head.appendChild(script);
+			});
+
+			const version = versionSelect.value;
+			document.getElementById('leaflet-css').href = version === '2'
+				? 'https://unpkg.com/leaflet@2.0.0-alpha.1/dist/leaflet.css'
+				: 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
+
+			if (version === '2') {
+				await loadScript('https://unpkg.com/leaflet@2.0.0-alpha.1/dist/leaflet-global-src.js');
+				globalThis.L = globalThis.leaflet;
+			} else {
+				await loadScript('https://unpkg.com/leaflet@1.9.4/dist/leaflet-src.js');
+			}
+			await loadScript('../dist/leaflet-rotate-src.js');
+			await loadScript('../lib/debug.js');
+			const L = globalThis.L;
+
+			const esri = new L.TileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
 				id: 'mapbox.streets',
 				maxZoom: 24,
 				maxNativeZoom: 18,
@@ -70,14 +100,14 @@
 				// noWrap: true
 			});
 
-			var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+			const osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 				maxZoom: 24,
 				maxNativeZoom: 19,
 				attribution: '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
 				// noWrap: true
 			});
 
-			var map = L.map('map', {
+			const map = new L.Map('map', {
 				center: [55, 10],
 				zoom: 2,
 				layers: [esri],
@@ -99,6 +129,9 @@
 				touchRotate: true,
 				// touchZoom: true
 			});
+			window.map = map;
+			window.esri = esri;
+			window.osm = osm;
 
 			// map.setBearing(90);
 			// map.touchRotate.enable();
@@ -111,17 +144,18 @@
 			// map.rotateControl.setPosition('bottomleft');
 			// map.setMaxBounds([[-90,-180], [90,180]]);
 
-			var layers = L.control.layers({
-				'Empty': L.tileLayer(''),
+			const layers = new L.Control.Layers({
+				'Empty': new L.TileLayer(''),
 				'Streets': osm,
 				'Satellite': esri,
 			}, null, {
 				collapsed: false
 			}).addTo(map);
+			window.layers = layers;
 
-			var markers = [];
-			for (var i in places) {
-				markers.push(L.marker(places[i], {
+			const markers = [];
+			for (const i in places) {
+				markers.push(new L.Marker(places[i], {
 						draggable: true
 					})
 					.bindPopup('<b>' + i + '</b><br>' + loremIpsum)
@@ -133,30 +167,34 @@
 					)
 					.addTo(map));
 			}
+			window.markers = markers;
 
-			var path = L.polyline(route, {
-				renderer: L.canvas()
+			const path = new L.Polyline(route, {
+				renderer: new L.Canvas()
 			}).addTo(map);
+			window.path = path;
 
-			var circle = L.circle([53, 4], 111111)
+			const circle = new L.Circle([53, 4], 111111)
 				.addTo(map);
+			window.circle = circle;
 
-			var polygon = L.polygon([
+			const polygon = new L.Polygon([
 				[48, -3],
 				[50, -4],
 				[52, 4]
 			]).addTo(map);
+			window.polygon = polygon;
 
-			const rectangle = L.rectangle([
+			const rectangle = new L.Rectangle([
 				[60.81123, 25.71632],
 				[60.81028, 25.73166],
 				[60.7997, 25.72892],
 				[60.80061, 25.71362]
 			]).addTo(map);
+			window.rectangle = rectangle;
 
 			// Display some debug info
 			L.Rotate.debug(map);
-
 		</script>
 
 		<a href="https://github.com/Raruto/leaflet-rotate" class="view-on-github" style="position: fixed;bottom: 10px;left: calc(50% - 60px);z-index: 9999;"> <img alt="View on Github" src="https://raruto.github.io/img/view-on-github.png" title="View on Github"

package/test/steps/bearing.steps.js

@@ -71,10 +71,352 @@ Then('the bearing reaches 90 degrees gradually', function () {
   assert.ok(Math.abs(this.animatedBearings.afterUnavailableHeading - 15) < 1e-6);
 });
 
+When('I set the map pitch to 45 degrees', async function () {
+  this.pitchProjection = await this.page.evaluate(() => {
+    const location = new L.LatLng(54, 12);
+    map.setView(new L.LatLng(55, 10), 5, { animate: false });
+    const flat = map.latLngToContainerPoint(location);
+    map.setPitch(90);
+    const maxPitch = map.getPitch();
+    map.setPitch(45);
+    const layerPoint = map.latLngToLayerPoint(location),
+      pitched = map.layerPointToContainerPoint(layerPoint),
+      roundTripPoint = map.containerPointToLayerPoint(pitched),
+      centerPoint = map.latLngToContainerPoint(map.getCenter()),
+      size = map.getSize();
+
+    return {
+      pitch: map.getPitch(),
+      maxPitch,
+      bearing: map.getBearing(),
+      flat,
+      pitched,
+      layerPoint,
+      roundTripPoint,
+      centerPoint,
+      size,
+      transform: map._rotatePane.style.transform,
+    };
+  });
+});
+
+Then('map coordinates stay consistent with the pitched view', function () {
+  const { pitch, maxPitch, bearing, flat, pitched, layerPoint, roundTripPoint, centerPoint, size, transform } = this.pitchProjection;
+  assert.equal(pitch, 45);
+  assert.equal(maxPitch, 85);
+  assert.ok(Math.abs(bearing - 30) < 1e-9);
+  assert.match(transform, /rotateX\(45deg\)/);
+  assert.ok(Math.abs(Number(transform.match(/perspective\(([\d.]+)px\)/)[1]) - size.y * 1.5) < 1);
+  assert.ok(Math.abs(flat.y - pitched.y) > 0.1);
+  const details = JSON.stringify({ flat, pitched, layerPoint, roundTripPoint, centerPoint, size });
+  assert.ok(Math.abs(roundTripPoint.x - layerPoint.x) < 1e-6, details);
+  assert.ok(Math.abs(roundTripPoint.y - layerPoint.y) < 1e-6, details);
+  assert.ok(Math.abs(centerPoint.x - size.x / 2) < 1, details);
+  assert.ok(Math.abs(centerPoint.y - size.y / 2) < 1, details);
+});
+
+When('I change pitch and bearing with Ctrl-drag', async function () {
+  await this.page.evaluate(() => {
+    map.setPitch(0);
+    map.setBearing(0);
+  });
+  const bounds = await this.page.locator('#map').boundingBox();
+  const start = { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height / 2 },
+    panePos = await this.page.evaluate(() => {
+      const pos = map._getMapPanePos();
+      return [pos.x, pos.y];
+    });
+  await this.page.keyboard.down('Control');
+  await this.page.mouse.move(start.x, start.y);
+  await this.page.mouse.down();
+  await this.page.mouse.move(start.x + 80, start.y - 80, { steps: 4 });
+  await this.page.mouse.up();
+  await this.page.keyboard.up('Control');
+  this.ctrlPitchDrag = await this.page.evaluate(() => {
+    const pane = map._getMapPanePos();
+    return {
+      pitch: map.getPitch(),
+      bearing: map.getBearing(),
+      finalPanePos: [pane.x, pane.y],
+    };
+  });
+  this.ctrlPitchDrag.panePos = panePos;
+});
+
+Then('pitch and bearing change without moving the map pane', function () {
+  assert.equal(this.ctrlPitchDrag.pitch, 40);
+  assert.equal(this.ctrlPitchDrag.bearing, 64);
+  for (let i = 0; i < 2; i++) {
+    assert.ok(Math.abs(this.ctrlPitchDrag.panePos[i] - this.ctrlPitchDrag.finalPanePos[i]) < 0.01);
+  }
+});
+
+When('I drag the pitched map', async function () {
+  const dragStart = await this.page.evaluate(() => {
+    map.setBearing(30);
+    map.setPitch(45);
+    map.setView(new L.LatLng(55, 10), 5, { animate: false });
+    const location = new L.LatLng(55, 10),
+      marker = new L.CircleMarker(location, { radius: 8 }).addTo(map),
+      pin = new L.Marker(location, {
+        icon: new L.DivIcon({ className: '', html: 'x', iconSize: [4, 4], iconAnchor: [2, 2] }),
+      }).addTo(map),
+      element = marker.getElement(),
+      pinElement = pin.getElement(),
+      container = map.getContainer(),
+      rect = container.getBoundingClientRect(),
+      start = [rect.left + rect.width / 2, rect.top + rect.height / 2];
+    const vectorScreenPoint = () => {
+      const bounds = element.getBBox();
+      const point = new DOMPoint(bounds.x + bounds.width / 2, bounds.y + bounds.height / 2)
+        .matrixTransform(element.getScreenCTM());
+      return [point.x, point.y];
+    };
+    const before = vectorScreenPoint(),
+      pinBoundsBefore = pinElement.getBoundingClientRect(),
+      pinBefore = [pinBoundsBefore.left + pinBoundsBefore.width / 2, pinBoundsBefore.top + pinBoundsBefore.height / 2];
+    window.__pitchPanTest = { element, pinElement, vectorScreenPoint, before, pinBefore, rect };
+    return start;
+  });
+  await this.page.mouse.move(dragStart[0], dragStart[1]);
+  await this.page.mouse.down();
+  await this.page.mouse.move(dragStart[0] + 70, dragStart[1] + 35, { steps: 4 });
+  await this.page.mouse.up();
+  this.pitchedDrag = await this.page.evaluate(() => {
+    const { pinElement, vectorScreenPoint, before, pinBefore } = window.__pitchPanTest,
+      after = vectorScreenPoint(),
+      pinBoundsAfter = pinElement.getBoundingClientRect(),
+      pinAfter = [pinBoundsAfter.left + pinBoundsAfter.width / 2, pinBoundsAfter.top + pinBoundsAfter.height / 2];
+    delete window.__pitchPanTest;
+    return {
+      vectorDelta: [after[0] - before[0], after[1] - before[1]],
+      pinDelta: [pinAfter[0] - pinBefore[0], pinAfter[1] - pinBefore[1]],
+      expected: map.latLngToContainerPoint(new L.LatLng(55, 10)),
+      pointerDelta: [70, 35],
+    };
+  });
+});
+
+Then('vector layers stay aligned with their map coordinates', function () {
+  if (this.vectorAlignment) {
+    assert.ok(this.zoomAfterOffCenter > 5, 'Off-center wheel zoom did not run');
+    assert.ok(
+      this.pitchTransformError < 0.1,
+      `Pitch changed the projected map pane by ${this.pitchTransformError}px`
+    );
+    const centerDistance = Math.hypot(
+      this.centerBeforeCtrlDrag[0] - this.centerAfterCtrlDrag[0],
+      this.centerBeforeCtrlDrag[1] - this.centerAfterCtrlDrag[1]
+    );
+    assert.ok(centerDistance < 0.01, `Map center moved ${centerDistance} projected pixels`);
+    for (const layer of this.vectorAlignment) {
+      const error = Math.hypot(layer.actual[0] - layer.expected[0], layer.actual[1] - layer.expected[1]);
+      assert.ok(error < 2, `${layer.name} is ${error}px from its geographic position: ${JSON.stringify(layer)}`);
+    }
+    return;
+  }
+  const { vectorDelta, pinDelta, pointerDelta } = this.pitchedDrag;
+  for (const delta of [vectorDelta, pinDelta]) {
+    assert.ok(Math.abs(delta[0] - pointerDelta[0]) < 2, JSON.stringify(this.pitchedDrag));
+    assert.ok(Math.abs(delta[1] - pointerDelta[1]) < 2, JSON.stringify(this.pitchedDrag));
+  }
+});
+
+When('I zoom off-center then rotate the map', async function () {
+  await this.page.evaluate(() => {
+    map.setView(new L.LatLng(55, 10), 5, { animate: false });
+    map.setBearing(30);
+    map.setPitch(0);
+  });
+  const mapBounds = await this.page.locator('#map').boundingBox(),
+    zoomPoint = { x: mapBounds.x + mapBounds.width * 0.9, y: mapBounds.y + mapBounds.height * 0.1 };
+  await this.page.mouse.move(zoomPoint.x, zoomPoint.y);
+  await this.page.mouse.wheel(0, -480);
+  await this.page.waitForTimeout(500);
+
+  const positions = await this.page.evaluate(() => {
+    const location = map.containerPointToLatLng([600, 170]),
+      marker = new L.Marker(location, {
+        icon: new L.DivIcon({ className: '', html: 'x', iconSize: [8, 8], iconAnchor: [4, 4] }),
+      }).addTo(map),
+      circle = new L.CircleMarker(location, { radius: 5 }).addTo(map),
+      measure = () => {
+        const expected = map.latLngToContainerPoint(location),
+          container = map.getContainer().getBoundingClientRect(),
+          vectorBounds = circle.getElement().getBoundingClientRect(),
+          markerBounds = marker.getElement().getBoundingClientRect();
+        return [
+          {
+            name: 'vector',
+            expected: [expected.x, expected.y],
+            actual: [vectorBounds.left + vectorBounds.width / 2 - container.left, vectorBounds.top + vectorBounds.height / 2 - container.top],
+          },
+          {
+            name: 'marker',
+            expected: [expected.x, expected.y],
+            actual: [markerBounds.left + markerBounds.width / 2 - container.left, markerBounds.top + markerBounds.height / 2 - container.top],
+          },
+        ];
+      };
+
+    const positions = [measure()];
+    const pane = map._rotatePane,
+      pivot = map._getPixelCenter(),
+      size = map.getSize(),
+      beforeTransform = new DOMMatrix(getComputedStyle(pane).transform),
+      testPoints = [[0, 0], [size.x, 0], [0, size.y], [size.x, size.y]]
+        .map(([x, y]) => ({
+          x,
+          y,
+          point: new DOMPoint(x, y).matrixTransform(beforeTransform),
+        }));
+    map.setPitch(1);
+    const afterTransform = new DOMMatrix(getComputedStyle(pane).transform),
+      pitch = Math.PI / 180,
+      perspective = size.y * 1.5;
+    const pitchTransformError = Math.max(...testPoints.map(({ x: pointX, y: pointY, point }) => {
+      const x = point.x / point.w - pivot.x,
+        y = point.y / point.w - pivot.y,
+        factor = perspective / (perspective - y * Math.sin(pitch)),
+        expectedX = pivot.x + x * factor,
+        expectedY = pivot.y + y * Math.cos(pitch) * factor,
+        actual = new DOMPoint(pointX, pointY).matrixTransform(afterTransform);
+      return Math.hypot(actual.x / actual.w - expectedX, actual.y / actual.w - expectedY);
+    }));
+    positions.push(measure());
+    map.setBearing(50);
+    positions.push(measure());
+    map.setPitch(35);
+    positions.push(measure());
+    map.panBy([50, 25], { animate: false });
+    positions.push(measure());
+    window.__rotateAlignment = { marker, circle, measure };
+    const center = map.project(map.getCenter());
+    return {
+      positions: positions.flatMap((position, index) => position.map(layer => ({ ...layer, step: index }))),
+      centerBeforeCtrlDrag: [center.x, center.y],
+      zoomAfterOffCenter: map.getZoom(),
+      pitchTransformError,
+    };
+  });
+  const bounds = await this.page.locator('#map').boundingBox(),
+    start = { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height / 2 };
+  await this.page.keyboard.down('Control');
+  await this.page.mouse.move(start.x, start.y);
+  await this.page.mouse.down();
+  await this.page.mouse.move(start.x + 24, start.y - 18, { steps: 3 });
+  await this.page.mouse.up();
+  await this.page.keyboard.up('Control');
+  const afterCtrlDrag = await this.page.evaluate(() => {
+    const positions = window.__rotateAlignment.measure();
+    const center = map.project(map.getCenter());
+    window.__rotateAlignment.marker.remove();
+    window.__rotateAlignment.circle.remove();
+    delete window.__rotateAlignment;
+    return {
+      positions: positions.map(layer => ({ ...layer, step: 'Ctrl-drag' })),
+      center: [center.x, center.y],
+    };
+  });
+  this.vectorAlignment = [...positions.positions, ...afterCtrlDrag.positions];
+  this.centerBeforeCtrlDrag = positions.centerBeforeCtrlDrag;
+  this.centerAfterCtrlDrag = afterCtrlDrag.center;
+  this.zoomAfterOffCenter = positions.zoomAfterOffCenter;
+  this.pitchTransformError = positions.pitchTransformError;
+});
+
+When('I pan the map then Ctrl-drag', async function () {
+  await this.page.evaluate(() => {
+    map.setView(new L.LatLng(55, 10), 5, { animate: false });
+    map.setBearing(30);
+    map.setPitch(0);
+  });
+  const bounds = await this.page.locator('#map').boundingBox();
+  const x = bounds.x + bounds.width / 2,
+    y = bounds.y + bounds.height / 2;
+  await this.page.mouse.move(x, y);
+  await this.page.mouse.down();
+  await this.page.mouse.move(x + 70, y + 35, { steps: 4 });
+  await this.page.mouse.up();
+  await this.page.waitForTimeout(400);
+  this.centerBeforeCtrlDrag = await this.page.evaluate(() => {
+    const center = map.project(map.getCenter()),
+      pane = map._getMapPanePos();
+    return { point: [center.x, center.y], pane: [pane.x, pane.y] };
+  });
+
+  await this.page.keyboard.down('Control');
+  await this.page.mouse.move(x + 70, y + 35);
+  await this.page.mouse.down();
+  await this.page.mouse.move(x + 90, y + 20, { steps: 3 });
+  await this.page.mouse.up();
+  await this.page.keyboard.up('Control');
+  this.centerAfterCtrlDrag = await this.page.evaluate(() => {
+    const center = map.project(map.getCenter()),
+      pane = map._getMapPanePos();
+    return {
+      point: [center.x, center.y],
+      pane: [pane.x, pane.y],
+      pitch: map.getPitch(),
+      bearing: map.getBearing(),
+    };
+  });
+});
+
+Then('the map center stays stable during Ctrl-drag', function () {
+  const distance = Math.hypot(
+    this.centerBeforeCtrlDrag.point[0] - this.centerAfterCtrlDrag.point[0],
+    this.centerBeforeCtrlDrag.point[1] - this.centerAfterCtrlDrag.point[1]
+  );
+  assert.ok(distance < 0.01, `Map center moved ${distance} projected pixels: ${JSON.stringify({
+    before: this.centerBeforeCtrlDrag,
+    after: this.centerAfterCtrlDrag,
+  })}`);
+});
+
+When('I Ctrl-drag while a wheel zoom is pending', async function () {
+  await this.page.evaluate(() => {
+    map.setView(new L.LatLng(55, 10), 5, { animate: false });
+    map.setBearing(0);
+    map.setPitch(0);
+    map.options.wheelDebounceTime = 500;
+  });
+  const bounds = await this.page.locator('#map').boundingBox();
+  const zoomPoint = { x: bounds.x + bounds.width * 0.9, y: bounds.y + bounds.height * 0.1 },
+    dragPoint = { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height / 2 };
+  await this.page.mouse.move(zoomPoint.x, zoomPoint.y);
+  await this.page.mouse.wheel(0, -120);
+  this.pendingZoomBeforeDrag = await this.page.evaluate(() => ({
+    zoom: map.getZoom(),
+    center: map.project(map.getCenter()),
+  }));
+
+  await this.page.keyboard.down('Control');
+  await this.page.mouse.move(dragPoint.x, dragPoint.y);
+  await this.page.mouse.down();
+  await this.page.mouse.move(dragPoint.x + 20, dragPoint.y - 15);
+  await this.page.waitForTimeout(600);
+  this.pendingZoomAfterDrag = await this.page.evaluate(() => ({
+    zoom: map.getZoom(),
+    center: map.project(map.getCenter()),
+  }));
+  await this.page.mouse.up();
+  await this.page.keyboard.up('Control');
+});
+
+Then('the pending wheel zoom does not move the map', function () {
+  assert.equal(this.pendingZoomAfterDrag.zoom, this.pendingZoomBeforeDrag.zoom);
+  const distance = Math.hypot(
+    this.pendingZoomBeforeDrag.center.x - this.pendingZoomAfterDrag.center.x,
+    this.pendingZoomBeforeDrag.center.y - this.pendingZoomAfterDrag.center.y
+  );
+  assert.ok(distance < 0.01, `Map center moved ${distance} projected pixels`);
+});
+
 When('I fit the same bounds twice', async function () {
   this.zooms = await this.page.evaluate(() => {
     const bounds = [[60.81123, 25.71632], [60.81028, 25.73166], [60.7997, 25.72892], [60.80061, 25.71362]];
-    L.rectangle(bounds).addTo(map);
+    new L.Rectangle(bounds).addTo(map);
     map.setZoom(0, { animate: false });
     map.fitBounds(bounds, { animate: false });
     const first = map.getZoom();
@@ -148,8 +490,8 @@ When('I rotate and zoom two fingers over a vector path', async function () {
   this.gesturePathPositions = await this.page.evaluate(() => {
     map.options.zoomAnimation = true;
     map.setView([55, 10], 6, { animate: false });
-    const location = L.latLng(55.1, 10.1);
-    const path = L.circleMarker(location, { radius: 8 }).addTo(map);
+    const location = new L.LatLng(55.1, 10.1);
+    const path = new L.CircleMarker(location, { radius: 8 }).addTo(map);
     const container = map.getContainer();
     const center = map.getSize().divideBy(2);
     const initial = map.getBearing(),

package/test/steps/example.steps.js

@@ -64,7 +64,7 @@ When('I rotate a map with the default rotate control', async function () {
     const container = document.createElement('div');
     container.style.cssText = 'width: 400px; height: 300px';
     document.body.append(container);
-    const testMap = L.map(container, {
+    const testMap = new L.Map(container, {
       center: [55, 10],
       zoom: 6,
       rotate: true,
@@ -166,7 +166,7 @@ When('I apply compass heading readings', async function () {
     const container = document.createElement('div');
     container.style.cssText = 'width: 400px; height: 300px';
     document.body.append(container);
-    const absoluteMap = L.map(container, {
+    const absoluteMap = new L.Map(container, {
       center: [55, 10],
       zoom: 6,
       rotate: true,
@@ -212,6 +212,50 @@ Then('valid compass readings update bearing and invalid readings are ignored', f
   assert.ok(Math.abs(absoluteEventBearing - 60) < 1e-6);
 });
 
+When('I use shift-wheel rotation with the handler disabled', async function () {
+  this.shiftWheelDisabled = await this.page.evaluate(async () => {
+    const container = document.createElement('div');
+    container.style.cssText = 'width: 400px; height: 300px';
+    document.body.append(container);
+    const testMap = new L.Map(container, {
+      center: [55, 10],
+      zoom: 6,
+      rotate: true,
+      rotateControl: false,
+      shiftKeyRotate: false,
+      zoomControl: false,
+      zoomAnimation: false,
+    });
+    const initialZoom = testMap.getZoom();
+    const initialBearing = testMap.getBearing();
+    container.dispatchEvent(new WheelEvent('wheel', {
+      bubbles: true,
+      cancelable: true,
+      deltaY: -60,
+      shiftKey: true,
+    }));
+    await new Promise(resolve => setTimeout(resolve, 150));
+    const result = {
+      handlerDisabled: !testMap.shiftKeyRotate.enabled(),
+      wheelZoomEnabled: testMap.scrollWheelZoom.enabled(),
+      zoomChanged: testMap.getZoom() > initialZoom,
+      bearingUnchanged: testMap.getBearing() === initialBearing,
+    };
+    testMap.remove();
+    container.remove();
+    return result;
+  });
+});
+
+Then('shift-wheel input zooms without changing the map bearing', function () {
+  assert.deepEqual(this.shiftWheelDisabled, {
+    handlerDisabled: true,
+    wheelZoomEnabled: true,
+    zoomChanged: true,
+    bearingUnchanged: true,
+  });
+});
+
 When('I change the debugger bounds padding from the keyboard', async function () {
   await this.page.evaluate(() => {
     map.setView([55, 10], 6, { animate: false });
@@ -244,13 +288,30 @@ When('I inspect debugger geometry after resizing and moving the map', async func
     map.panBy([20, 15], { animate: false });
     map.setZoom(6, { animate: false });
     window.debugMouseEvent = null;
-    map.once('mousemove', event => {
-      window.debugMouseEvent = {
-        latlng: [event.latlng.lng, event.latlng.lat],
-        layerPoint: [event.layerPoint.x, event.layerPoint.y],
-        containerPoint: [event.containerPoint.x, event.containerPoint.y],
-      };
-    });
+    if (L.version.startsWith('2.')) {
+      map.getContainer().addEventListener('mousemove', event => {
+        const rect = map.getContainer().getBoundingClientRect();
+        const containerPoint = new L.Point(
+          event.clientX - rect.left - map.getContainer().clientLeft,
+          event.clientY - rect.top - map.getContainer().clientTop,
+        );
+        const latlng = map.containerPointToLatLng(containerPoint);
+        const layerPoint = map.containerPointToLayerPoint(containerPoint);
+        window.debugMouseEvent = {
+          latlng: [latlng.lng, latlng.lat],
+          layerPoint: [layerPoint.x, layerPoint.y],
+          containerPoint: [containerPoint.x, containerPoint.y],
+        };
+      }, { once: true });
+    } else {
+      map.once('mousemove', event => {
+        window.debugMouseEvent = {
+          latlng: [event.latlng.lng, event.latlng.lat],
+          layerPoint: [event.layerPoint.x, event.layerPoint.y],
+          containerPoint: [event.containerPoint.x, event.containerPoint.y],
+        };
+      });
+    }
   });
 
   const bounds = await this.page.locator('#map').boundingBox();
@@ -339,9 +400,9 @@ When('I rotate the example markers from the debugger', async function () {
 When('I select {string} from the example page', async function (place) {
   await this.page.getByRole('button', { name: place, exact: true }).click();
   await this.page.waitForFunction(name =>
-    map.getZoom() === 10 && map.getCenter().distanceTo(L.latLng(places[name])) < 1, place);
+    map.getZoom() === 10 && map.getCenter().distanceTo(new L.LatLng(...places[name])) < 1, place);
   this.destination = await this.page.evaluate(name => ({
-    distance: map.getCenter().distanceTo(L.latLng(places[name])),
+    distance: map.getCenter().distanceTo(new L.LatLng(...places[name])),
     zoom: map.getZoom(),
   }), place);
 });