maplibre-gl 6.2.0 → 6.4.0

package/src/symbol/cross_tile_symbol_index.ts

@@ -117,44 +117,74 @@ class TileLayerIndex {
             const scaledSymbolCoord = this.getScaledCoordinates(symbolInstance, newTileID);
 
             if (entry.index) {
-                // Return any symbol with the same keys whose coordinates are within 1
-                // grid unit. (with a 4px grid, this covers a 12px by 12px area)
-                const indexes = entry.index.range(
-                    scaledSymbolCoord.x - tolerance,
-                    scaledSymbolCoord.y - tolerance,
-                    scaledSymbolCoord.x + tolerance,
-                    scaledSymbolCoord.y + tolerance).sort();
-
-                for (const i of indexes) {
-                    const crossTileID = entry.crossTileIDs[i];
-
-                    if (!zoomCrossTileIDs[crossTileID]) {
-                        // Once we've marked ourselves duplicate against this parent symbol,
-                        // don't let any other symbols at the same zoom level duplicate against
-                        // the same parent (see issue #5993)
-                        zoomCrossTileIDs[crossTileID] = true;
-                        symbolInstance.crossTileID = crossTileID;
-                        break;
-                    }
-                }
+                this.findMatchesForIndexedEntry(entry, symbolInstance, scaledSymbolCoord, tolerance, zoomCrossTileIDs);
             } else if (entry.positions) {
-                for (let i = 0; i < entry.positions.length; i++) {
-                    const thisTileSymbol = entry.positions[i];
-                    const crossTileID = entry.crossTileIDs[i];
-
-                    // Return any symbol with the same keys whose coordinates are within 1
-                    // grid unit. (with a 4px grid, this covers a 12px by 12px area)
-                    if (Math.abs(thisTileSymbol.x - scaledSymbolCoord.x) <= tolerance &&
-                        Math.abs(thisTileSymbol.y - scaledSymbolCoord.y) <= tolerance &&
-                        !zoomCrossTileIDs[crossTileID]) {
-                        // Once we've marked ourselves duplicate against this parent symbol,
-                        // don't let any other symbols at the same zoom level duplicate against
-                        // the same parent (see issue #5993)
-                        zoomCrossTileIDs[crossTileID] = true;
-                        symbolInstance.crossTileID = crossTileID;
-                        break;
-                    }
-                }
+                this.findMatchesForNonIndexedEntry(entry, symbolInstance, scaledSymbolCoord, tolerance, zoomCrossTileIDs);
+            }
+        }
+    }
+
+    /**
+     * Matches a symbol instance against an entry backed by a KDBush spatial index
+     * (used for keys with more than {@link KDBUSH_THRESHHOLD} symbols).
+     *
+     * Matches any symbol with the same key whose coordinates are within one grid
+     * unit (with a 4px grid, this covers a 12px by 12px area). The lowest-index
+     * unclaimed candidate is claimed in a single pass rather than sorting the
+     * whole result set on every query: `range()` can return many candidates where
+     * symbols are coincident (e.g. stacked point markers), so a per-query sort
+     * would dominate placement cost on dense layers.
+     *
+     * Once a symbol is marked duplicate against a parent symbol, no other symbol
+     * at the same zoom level may duplicate against the same parent (see issue #5993).
+     */
+    private findMatchesForIndexedEntry(entry: SymbolsByKeyEntry, symbolInstance: SymbolInstance, scaledSymbolCoord: {x: number; y: number}, tolerance: number, zoomCrossTileIDs: {
+        [crossTileID: number]: boolean;
+    }): void {
+        const indexes = entry.index.range(
+            scaledSymbolCoord.x - tolerance,
+            scaledSymbolCoord.y - tolerance,
+            scaledSymbolCoord.x + tolerance,
+            scaledSymbolCoord.y + tolerance);
+
+        let bestIndex = Infinity;
+        for (const candidate of indexes) {
+            if (candidate < bestIndex && !zoomCrossTileIDs[entry.crossTileIDs[candidate]]) {
+                bestIndex = candidate;
+            }
+        }
+        if (bestIndex !== Infinity) {
+            const crossTileID = entry.crossTileIDs[bestIndex];
+            zoomCrossTileIDs[crossTileID] = true;
+            symbolInstance.crossTileID = crossTileID;
+        }
+    }
+
+    /**
+     * Matches a symbol instance against an entry that stores its positions as a
+     * plain array (used for keys with at most {@link KDBUSH_THRESHHOLD} symbols).
+     *
+     * Matches any symbol with the same key whose coordinates are within one grid
+     * unit (with a 4px grid, this covers a 12px by 12px area). Positions are
+     * stored in symbol-instance order, so the first unclaimed match is also the
+     * lowest-index one.
+     *
+     * Once a symbol is marked duplicate against a parent symbol, no other symbol
+     * at the same zoom level may duplicate against the same parent (see issue #5993).
+     */
+    private findMatchesForNonIndexedEntry(entry: SymbolsByKeyEntry, symbolInstance: SymbolInstance, scaledSymbolCoord: {x: number; y: number}, tolerance: number, zoomCrossTileIDs: {
+        [crossTileID: number]: boolean;
+    }): void {
+        for (let i = 0; i < entry.positions.length; i++) {
+            const thisTileSymbol = entry.positions[i];
+            const crossTileID = entry.crossTileIDs[i];
+
+            if (Math.abs(thisTileSymbol.x - scaledSymbolCoord.x) <= tolerance &&
+                Math.abs(thisTileSymbol.y - scaledSymbolCoord.y) <= tolerance &&
+                !zoomCrossTileIDs[crossTileID]) {
+                zoomCrossTileIDs[crossTileID] = true;
+                symbolInstance.crossTileID = crossTileID;
+                break;
             }
         }
     }

package/src/symbol/shaping.test.ts

@@ -120,7 +120,8 @@ describe('shapeIcon', () => {
         stretchY: undefined,
         paddedRect: Object.freeze({x: 0, y: 0, w: 22, h: 22}),
         pixelRatio: 1,
-        version: 1
+        version: 1,
+        needsFirstWebGLRender: false
     });
 
     test('text-anchor: center', () => {

package/src/symbol/symbol_layout.bench.ts

@@ -0,0 +1,30 @@
+import {bench} from 'vitest';
+import {performSymbolLayout} from './symbol_layout.ts';
+import {SymbolBucket} from '../data/bucket/symbol_bucket.ts';
+import {SubdivisionGranularitySetting} from '../render/subdivision_granularity_settings.ts';
+import {fixtureTiles, parseTile} from '../../test/bench/lib/parse_tile.ts';
+
+import type {WorkerTileWithData} from '../source/worker_source.ts';
+
+const parsedTiles = await Promise.all(fixtureTiles.map(async (tile): Promise<WorkerTileWithData> => {
+    return await parseTile(tile, true) as WorkerTileWithData;
+}));
+
+bench('performSymbolLayout', () => {
+    for (const tileResult of parsedTiles) {
+        for (const bucket of tileResult.buckets) {
+            if (bucket instanceof SymbolBucket) {
+                performSymbolLayout({
+                    bucket,
+                    glyphMap: tileResult.glyphMap,
+                    glyphPositions: tileResult.glyphPositions,
+                    imageMap: tileResult.iconMap,
+                    imagePositions: tileResult.imageAtlas.iconPositions,
+                    showCollisionBoxes: false,
+                    canonical: tileResult.featureIndex.tileID.canonical,
+                    subdivisionGranularity: SubdivisionGranularitySetting.noSubdivision
+                });
+            }
+        }
+    }
+});

package/src/tile/tile_id.test.ts

@@ -63,7 +63,7 @@ describe('CanonicalTileID', () => {
 
 describe('OverscaledTileID', () => {
     test('constructor', () => {
-        expect(new OverscaledTileID(0, 0, 0, 0, 0) instanceof OverscaledTileID).toBeTruthy();
+        expect(new OverscaledTileID(0, 0, 0, 0, 0)).toBeInstanceOf(OverscaledTileID);
     });
 
     test('constructor - deeper canonicalZ than overscaledZ disallowed', () => {

package/src/tile/tile_manager.test.ts

@@ -11,7 +11,7 @@ import {extend} from '../util/util.ts';
 import {type Dispatcher} from '../util/dispatcher.ts';
 import {TileBounds} from './tile_bounds.ts';
 import {beforeMapTest, createMap as globalCreateMap, sleep, waitForEvent} from '../util/test/util.ts';
-import {now} from '../util/time_control.ts';
+import {now, restoreNow, setNow} from '../util/time_control.ts';
 
 import {type Map} from '../ui/map.ts';
 import {type TileCache} from './tile_cache.ts';
@@ -118,6 +118,7 @@ beforeEach(() => {
 
 afterEach(() => {
     vi.clearAllMocks();
+    restoreNow();
 });
 
 describe('TileManager.addTile', () => {
@@ -627,6 +628,73 @@ describe('TileManager / Source lifecycle', () => {
 
     });
 
+    test('keeps the self fade timer when reloading a tile that has data', async () => {
+        const transform = new MercatorTransform();
+        transform.resize(511, 511);
+        transform.setZoom(0);
+        const tileID = new OverscaledTileID(0, 0, 0, 0, 0);
+
+        const tileManager = createTileManager();
+        tileManager.setRasterFadeDuration(300);
+        tileManager._source.loadTile = async (tile) => {
+            tile.state = 'loaded';
+        };
+        const metadataPromise = waitForEvent(tileManager, 'data', e => e.sourceDataType === 'metadata');
+        tileManager.onAdd(undefined);
+        await metadataPromise;
+
+        setNow(1000);
+        const loadPromise = waitForEvent(tileManager, 'data', e => e.tile?.tileID.key === tileID.key);
+        tileManager.update(transform);
+        await loadPromise;
+        const tile = tileManager.getTile(tileID);
+        tile.setSelfFadeLogic(now() + 300);
+        setNow(1010);
+        const reloadPromise = waitForEvent(tileManager, 'data', e => e.tile?.tileID.key === tileID.key);
+
+        tileManager.getSource().fire(new Event('data', {dataType: 'source', sourceDataType: 'content'}));
+
+        await reloadPromise;
+        expect(tile.selfFading).toBe(true);
+        expect(tile.timeAdded).toBe(1000);
+        expect(tile.fadeEndTime).toBe(1300);
+    });
+
+    test('bases the self fade timer on when tile data lands, even if a reload was requested prior to arrival', async () => {
+        const transform = new MercatorTransform();
+        transform.resize(511, 511);
+        transform.setZoom(0);
+        const tileID = new OverscaledTileID(0, 0, 0, 0, 0);
+
+        const tileManager = createTileManager();
+        tileManager.setRasterFadeDuration(300);
+        let respond: () => void;
+        const responded = new Promise<void>(resolve => { respond = resolve; });
+        tileManager._source.loadTile = async (tile) => {
+            await responded;
+            tile.state = 'loaded';
+        };
+        const metadataPromise = waitForEvent(tileManager, 'data', e => e.sourceDataType === 'metadata');
+        tileManager.onAdd(undefined);
+        await metadataPromise;
+
+        setNow(1000);
+        tileManager.update(transform);
+        const tile = tileManager.getTile(tileID);
+        tile.setSelfFadeLogic(now() + 300);
+        const loadPromise = waitForEvent(tileManager, 'data', e => e.tile?.tileID.key === tileID.key);
+
+        tileManager.getSource().fire(new Event('data', {dataType: 'source', sourceDataType: 'content'}));
+
+        expect(tile.state).toBe('loading');
+        setNow(1010);
+        respond();
+        await loadPromise;
+        expect(tile.selfFading).toBe(true);
+        expect(tile.timeAdded).toBe(1010);
+        expect(tile.fadeEndTime).toBe(1310);
+    });
+
 });
 
 describe('TileManager.update', () => {

package/src/tile/tile_manager.ts

@@ -16,7 +16,7 @@ import {GEOJSON_TILE_LAYER_NAME} from '../data/feature_index.ts';
 import {hasRasterTransition, isRasterType, updateFadingTiles} from './tile_manager_raster.ts';
 import {backfillDEM} from './tile_manager_raster_dem.ts';
 import {InViewTiles} from './tile_manager_in_view_tiles.ts';
-import {MapSourceDataEvent} from '../ui/events.ts';
+import {MapSourceDataEvent, type SourceEventType} from '../ui/events.ts';
 
 import type Point from '@mapbox/point-geometry';
 import type {Context} from '../webgl/context.ts';
@@ -55,7 +55,7 @@ type TileResult = {
  *  - unloading cached tiles not needed to render a given viewport
  *  - managing tile state and feature state
  */
-export class TileManager extends Evented {
+export class TileManager extends Evented<SourceEventType> {
     id: string;
     dispatcher: Dispatcher;
     map: Map;
@@ -185,10 +185,10 @@ export class TileManager extends Evented {
         if (this.transform) this.update(this.transform, this.terrain);
     }
 
-    async _loadTile(tile: Tile, id: string, state: TileState): Promise<void> {
+    async _loadTile(tile: Tile, id: string, state: TileState, hadData: boolean): Promise<void> {
         try {
             const result = await this._source.loadTile(tile) as LoadTileResult;
-            this._tileLoaded(tile, id, state, result);
+            this._tileLoaded(tile, id, state, hadData, result);
         } catch (err) {
             tile.state = 'errored';
 
@@ -287,6 +287,8 @@ export class TileManager extends Evented {
         // - hard to tell without repro steps
         if (!tile) return;
 
+        const hadData = tile.hasData();
+
         // The difference between "loading" tiles and "reloading" or "expired"
         // tiles is that "reloading"/"expired" tiles are "renderable".
         // Therefore, a "loading" tile cannot become a "reloading" tile without
@@ -294,14 +296,17 @@ export class TileManager extends Evented {
         if (tile.state !== 'loading') {
             tile.state = state;
         }
-        await this._loadTile(tile, id, state);
+        await this._loadTile(tile, id, state, hadData);
     }
 
-    _tileLoaded(tile: Tile, id: string, previousState: TileState, result: LoadTileResult): void {
-        tile.timeAdded = now();
-        // Since self-fading applies to unloaded tiles, fadeEndTime must be updated upon load
-        if (tile.selfFading) {
-            tile.fadeEndTime = tile.timeAdded + this._rasterFadeDuration;
+    _tileLoaded(tile: Tile, id: string, previousState: TileState, hadData: boolean, result: LoadTileResult): void {
+        // If the tile was already showing do not restart its fade-in animation
+        if (!hadData) {
+            tile.timeAdded = now();
+            // Since self-fading applies to unloaded tiles, fadeEndTime must be updated upon load
+            if (tile.selfFading) {
+                tile.fadeEndTime = tile.timeAdded + this._rasterFadeDuration;
+            }
         }
 
         if (previousState === 'expired') tile.refreshedUponExpiration = true;
@@ -708,7 +713,7 @@ export class TileManager extends Evented {
 
         if (!tile) {
             tile = new Tile(tileID, this._source.tileSize * tileID.overscaleFactor());
-            this._loadTile(tile, tileID.key, tile.state);
+            this._loadTile(tile, tileID.key, tile.state, false);
         }
 
         tile.uses++;

package/src/ui/control/fullscreen_control.test.ts

@@ -45,15 +45,15 @@ describe('FullscreenControl', () => {
 
         const click = new window.Event('click');
 
-        expect(mapContainer.classList.contains('maplibregl-pseudo-fullscreen')).toBe(false);
+        expect(mapContainer.classList).not.toContain('maplibregl-pseudo-fullscreen');
 
         fullscreen._fullscreenButton.dispatchEvent(click);
 
-        expect(mapContainer.classList.contains('maplibregl-pseudo-fullscreen')).toBe(true);
+        expect(mapContainer.classList).toContain('maplibregl-pseudo-fullscreen');
 
         fullscreen._fullscreenButton.dispatchEvent(click);
 
-        expect(mapContainer.classList.contains('maplibregl-pseudo-fullscreen')).toBe(false);
+        expect(mapContainer.classList).not.toContain('maplibregl-pseudo-fullscreen');
     });
 
     test('start and end events fire for fullscreen button clicks', () => {
@@ -129,11 +129,11 @@ describe('FullscreenControl', () => {
 
         const click = new window.Event('click');
 
-        expect(mapContainer.classList.contains('maplibregl-pseudo-fullscreen')).toBe(false);
+        expect(mapContainer.classList).not.toContain('maplibregl-pseudo-fullscreen');
         fullscreen._fullscreenButton.dispatchEvent(click);
-        expect(mapContainer.classList.contains('maplibregl-pseudo-fullscreen')).toBe(true);
+        expect(mapContainer.classList).toContain('maplibregl-pseudo-fullscreen');
         fullscreen._fullscreenButton.dispatchEvent(click);
-        expect(mapContainer.classList.contains('maplibregl-pseudo-fullscreen')).toBe(false);
+        expect(mapContainer.classList).not.toContain('maplibregl-pseudo-fullscreen');
     });
 
     test('pseudo option forces pseudo fullscreen even when native fullscreen is available', () => {
@@ -151,7 +151,7 @@ describe('FullscreenControl', () => {
         fullscreen._fullscreenButton.dispatchEvent(click);
 
         expect(requestFullscreenSpy).not.toHaveBeenCalled();
-        expect(mapContainer.classList.contains('maplibregl-pseudo-fullscreen')).toBe(true);
+        expect(mapContainer.classList).toContain('maplibregl-pseudo-fullscreen');
     });
 
     test('pseudo fullscreen can be used on custom container', () => {
@@ -166,11 +166,11 @@ describe('FullscreenControl', () => {
 
         const click = new window.Event('click');
 
-        expect(container.classList.contains('maplibregl-pseudo-fullscreen')).toBe(false);
+        expect(container.classList).not.toContain('maplibregl-pseudo-fullscreen');
         fullscreen._fullscreenButton.dispatchEvent(click);
-        expect(container.classList.contains('maplibregl-pseudo-fullscreen')).toBe(true);
+        expect(container.classList).toContain('maplibregl-pseudo-fullscreen');
         expect(fullscreen._container.tagName).toBe('BODY');
         fullscreen._fullscreenButton.dispatchEvent(click);
-        expect(container.classList.contains('maplibregl-pseudo-fullscreen')).toBe(false);
+        expect(container.classList).not.toContain('maplibregl-pseudo-fullscreen');
     });
 });

package/src/ui/control/geolocate_control.test.ts

@@ -418,7 +418,7 @@ describe('GeolocateControl with no options', () => {
         geolocate.trigger();
         geolocation.sendError({code: 2, message: 'error message'});
         expect(geolocate._watchState).toBe('ACTIVE_ERROR');
-        expect(geolocate._geolocateButton.classList.contains('maplibregl-ctrl-geolocate-active-error')).toBeTruthy();
+        expect(geolocate._geolocateButton.classList).toContain('maplibregl-ctrl-geolocate-active-error');
     });
 
     test('trigger before added to map', () => {
@@ -538,9 +538,7 @@ describe('GeolocateControl with no options', () => {
 
         expect(lngLatAsFixed(map.getCenter(), 4)).toEqual({lat: '10.0000', lng: '20.0000'});
         expect(geolocate._userLocationDotMarker._map).toBeTruthy();
-        expect(
-            geolocate._userLocationDotMarker._element.classList.contains('maplibregl-user-location-dot-stale')
-        ).toBeFalsy();
+        expect(geolocate._userLocationDotMarker._element.classList).not.toContain('maplibregl-user-location-dot-stale');
         const secontMoveEnd = map.once('moveend');
         geolocation.change({latitude: 40, longitude: 50, accuracy: 60});
         await secontMoveEnd;
@@ -549,7 +547,7 @@ describe('GeolocateControl with no options', () => {
         geolocation.changeError({code: 2, message: 'position unavailable'});
         await errorPromise;
         expect(geolocate._userLocationDotMarker._map).toBeTruthy();
-        expect(geolocate._userLocationDotMarker._element.classList.contains('maplibregl-user-location-dot-stale')).toBeTruthy();
+        expect(geolocate._userLocationDotMarker._element.classList).toContain('maplibregl-user-location-dot-stale');
     });
 
     /**

package/src/ui/control/globe_control.test.ts

@@ -73,8 +73,8 @@ describe('GlobeControl', () => {
         test('default without call to setProjection', () => {
             const button = map.getContainer().querySelector('.maplibregl-ctrl-globe');
             expect(map.style.projection.name).toBe('mercator');
-            expect(button.classList.contains('maplibregl-ctrl-globe')).toBeTruthy();
-            expect(button.classList.contains('maplibregl-ctrl-globe-enabled')).toBeFalsy();
+            expect(button.classList).toContain('maplibregl-ctrl-globe');
+            expect(button.classList).not.toContain('maplibregl-ctrl-globe-enabled');
         });
 
         test('setProjection({type: "mercator" -> "globe")', () => {
@@ -85,8 +85,8 @@ describe('GlobeControl', () => {
             const button = map.getContainer().querySelector('.maplibregl-ctrl-globe-enabled');
             expect(map.style.projection.name).toBe('globe');
             expect(button).not.toBeNull();
-            expect(button.classList.contains('maplibregl-ctrl-globe-enabled')).toBeTruthy();
-            expect(button.classList.contains('maplibregl-ctrl-globe')).toBeFalsy();
+            expect(button.classList).toContain('maplibregl-ctrl-globe-enabled');
+            expect(button.classList).not.toContain('maplibregl-ctrl-globe');
         });
 
         test('setProjection({type: "globe" -> "mercator")', () => {
@@ -96,8 +96,8 @@ describe('GlobeControl', () => {
             // mercator = disabled state
             const button = map.getContainer().querySelector('.maplibregl-ctrl-globe');
             expect(map.style.projection.name).toBe('mercator');
-            expect(button.classList.contains('maplibregl-ctrl-globe')).toBeTruthy();
-            expect(button.classList.contains('maplibregl-ctrl-globe-enabled')).toBeFalsy();
+            expect(button.classList).toContain('maplibregl-ctrl-globe');
+            expect(button.classList).not.toContain('maplibregl-ctrl-globe-enabled');
         });
     });
 });

package/src/ui/events.ts

@@ -1,4 +1,4 @@
-import {Event} from '../util/evented.ts';
+import {Event, type ErrorEvent} from '../util/evented.ts';
 
 import {DOM} from '../util/dom.ts';
 import Point from '@mapbox/point-geometry';

package/src/ui/handler/scroll_zoom.test.ts

@@ -1,4 +1,5 @@
 import {describe, beforeEach, test, expect, vi, type MockInstance} from 'vitest';
+import Point from '@mapbox/point-geometry';
 import * as timeControl from '../../util/time_control.ts';
 import {Map, type MapOptions} from '../../ui/map.ts';
 import {DOM} from '../../util/dom.ts';
@@ -656,6 +657,55 @@ describe('ScrollZoomHandler', () => {
         map.remove();
     });
 
+    describe('globe zooms around the pointer', () => {
+        async function zoomInAtOffset(offset: Point) {
+            const timeControlNow = vi.spyOn(timeControl, 'now');
+            timeControlNow.mockReturnValue(1555555555555);
+            const map = createMap();
+            await map.once('load');
+            map.setProjection({type: 'globe'});
+            map.setCenter([0, 0]);
+            map.setZoom(0);
+            map._renderTaskQueue.run();
+
+            const pointer = map._camera.transform.centerPoint.add(offset);
+            const locationBefore = map.unproject(pointer);
+
+            simulate.wheel(map.getCanvas(), {deltaY: -simulate.magicWheelZoomDelta * 4, clientX: pointer.x, clientY: pointer.y});
+            map._renderTaskQueue.run();
+
+            const locationAfter = map.unproject(pointer);
+            const result = {
+                driftLng: locationAfter.lng - locationBefore.lng,
+                driftLat: locationAfter.lat - locationBefore.lat,
+                center: map.getCenter()
+            };
+            map.remove();
+            return result;
+        }
+
+        test('keeps the location under the pointer while the globe is small on screen, and still zooms towards it', async () => {
+            const wellInsideTheGlobe = new Point(0, -40);
+            const {driftLng, driftLat, center} = await zoomInAtOffset(wellInsideTheGlobe);
+            expect(driftLng).toBeCloseTo(0, 6);
+            expect(driftLat).toBeCloseTo(0, 6);
+            expect(center.lat).toBeCloseTo(0.5972, 3);
+        });
+
+        test('eases the anchoring off near the horizon instead of dropping it', async () => {
+            const nearTheHorizon = new Point(0, -67.5);
+            const {driftLat} = await zoomInAtOffset(nearTheHorizon);
+            expect(Math.abs(driftLat)).toBeGreaterThan(0.5);
+            expect(Math.abs(driftLat)).toBeLessThan(1.5);
+        });
+
+        test('leaves zooming with the pointer off the planet unchanged', async () => {
+            const offThePlanet = new Point(0, -85);
+            const {center} = await zoomInAtOffset(offThePlanet);
+            expect(center.lat).toBeCloseTo(0.3545, 3);
+        });
+    });
+
     test('Clamps to min/max zoom when using mercator projection', async () => {
         const timeControlNow = vi.spyOn(timeControl, 'now');
         const map = createMap();

package/src/ui/handler/two_fingers_touch.test.ts

@@ -1,9 +1,10 @@
-import {describe, beforeEach, test, expect, vi} from 'vitest';
+import {describe, beforeEach, test, expect, vi, onTestFinished} from 'vitest';
 import {Map} from '../map.ts';
 import {Marker} from '../marker.ts';
 import {DOM} from '../../util/dom.ts';
 import simulate from '../../../test/unit/lib/simulate_interaction.ts';
 import {beforeMapTest} from '../../util/test/util.ts';
+import {restoreNow, setNow} from '../../util/time_control.ts';
 
 function createMap() {
     return new Map({container: DOM.create('div', '', window.document.body)});
@@ -96,28 +97,38 @@ describe('touch zoom rotate', () => {
         map.on('rotate',      rotate);
         map.on('rotateend',   rotateend);
 
+        // Frozen time, so that the inertia does not depend on how long the test itself takes.
+        setNow(1000);
+        onTestFinished(restoreNow);
         simulate.touchstart(map.getCanvas(), {touches: [{target, identifier: 0, clientX: 0, clientY: -50}, {target, identifier: 1, clientX: 0, clientY: 50}]});
         map._renderTaskQueue.run();
         expect(rotatestart).toHaveBeenCalledTimes(0);
         expect(rotate).toHaveBeenCalledTimes(0);
         expect(rotateend).toHaveBeenCalledTimes(0);
 
+        setNow(1016);
         simulate.touchmove(map.getCanvas(), {touches: [{target, identifier: 0, clientX: -50, clientY: 0}, {target, identifier: 1, clientX: 50, clientY: 0}]});
         map._renderTaskQueue.run();
         expect(rotatestart).toHaveBeenCalledTimes(1);
         expect(rotate).toHaveBeenCalledTimes(1);
         expect(rotateend).toHaveBeenCalledTimes(0);
 
+        setNow(1032);
         simulate.touchmove(map.getCanvas(), {touches: [{target, identifier: 0, clientX: 0, clientY: -50}, {target, identifier: 1, clientX: 0, clientY: 50}]});
         map._renderTaskQueue.run();
         expect(rotatestart).toHaveBeenCalledTimes(1);
         expect(rotate).toHaveBeenCalledTimes(2);
         expect(rotateend).toHaveBeenCalledTimes(0);
 
+        setNow(1048);
         simulate.touchend(map.getCanvas(), {touches: []});
         map._renderTaskQueue.run();
-        expect(rotatestart).toHaveBeenCalledTimes(1);
-        expect(rotate).toHaveBeenCalledTimes(2);
+
+        // incremented because inertia starts a second rotation: the gesture was still
+        // rotating when it ended, even though it ended at the bearing it started from
+        expect(rotatestart).toHaveBeenCalledTimes(2);
+        map._renderTaskQueue.run();
+        expect(rotate).toHaveBeenCalledTimes(3);
         expect(rotateend).toHaveBeenCalledTimes(1);
 
         map.remove();
@@ -312,11 +323,11 @@ describe('touch zoom rotate', () => {
         const map = createMap();
 
         const className = 'maplibregl-touch-zoom-rotate';
-        expect(map.getCanvasContainer().classList.contains(className)).toBeTruthy();
+        expect(map.getCanvasContainer().classList).toContain(className);
         map.touchZoomRotate.disable();
-        expect(map.getCanvasContainer().classList.contains(className)).toBeFalsy();
+        expect(map.getCanvasContainer().classList).not.toContain(className);
         map.touchZoomRotate.enable();
-        expect(map.getCanvasContainer().classList.contains(className)).toBeTruthy();
+        expect(map.getCanvasContainer().classList).toContain(className);
     });
 
     test('TwoFingersTouchZoomRotateHandler zooms when touching two markers on the same map', () => {