maplibre-gl 6.2.0 → 6.3.0

package/src/ui/handler_manager.ts

@@ -31,6 +31,12 @@ import type {Terrain} from '../render/terrain.ts';
 
 const isMoving = (p: EventsInProgress) => p.zoom || p.drag || p.roll || p.pitch || p.rotate;
 
+/**
+ * A terrain gesture's anchor plane must stay below this fraction of the camera's
+ * altitude over the center-elevation plane, or the ray-plane solve degenerates.
+ */
+const TERRAIN_ANCHOR_MAX_CAMERA_ALTITUDE_FRACTION = 0.9;
+
 class RenderFrameEvent extends Event {
     type: 'renderFrame';
     timeStamp: number;
@@ -162,6 +168,11 @@ export class HandlerManager {
     _updatingCamera: boolean;
     _changes: Array<[HandlerResult, EventsInProgress, {[handlerName: string]: Event}]>;
     _terrainMovement: boolean;
+    /**
+     * Elevation in meters of the terrain point grabbed at gesture start; kept for the
+     * same lifetime as the elevation freeze. Null when that terrain was not available.
+     */
+    _terrainGestureAnchorElevation: number | null = null;
     _zoom: {handlerName: string};
     _previousActiveHandlers: {[x: string]: Handler};
     _listeners: Array<[Window | Document | HTMLElement, string, {
@@ -542,17 +553,10 @@ export class HandlerManager {
         // stop any ongoing camera animations (easeTo, flyTo)
         this._camera.stop(true);
 
-        let {panDelta, zoomDelta, bearingDelta, pitchDelta, rollDelta, around, pinchAround} = combinedResult;
-
-        if (pinchAround !== undefined) {
-            around = pinchAround;
-        }
-
-        around ||= this._camera.transform.centerPoint;
+        const {panDelta, zoomDelta, bearingDelta, pitchDelta, rollDelta} = combinedResult;
 
-        if (terrain && !tr.isPointOnMapSurface(around)) {
-            around = tr.centerPoint;
-        }
+        let {around, aroundOnSurface} = this._resolveAround(combinedResult, terrain, tr);
+        const aroundElevation = terrain ? this._terrainGestureElevation(terrain, around, aroundOnSurface, tr, combinedEventsInProgress) : undefined;
 
         const deltasForHelper: MapControlsDeltas = {
             panDelta,
@@ -561,17 +565,14 @@ export class HandlerManager {
             pitchDelta,
             bearingDelta,
             around,
+            aroundElevation,
         };
 
         // Pre-zoom location under the mouse cursor is required for accurate mercator panning and zooming
         if (this._camera.cameraHelper.useGlobeControls && !tr.isPointOnMapSurface(around)) {
             around = tr.centerPoint;
         }
-        // If we are rotating about the center point, avoid numerical issues near the horizon by using the transform's
-        // center directly, instead of computing it from the screen point
-        const preZoomAroundLoc = around.distSqr(tr.centerPoint) < 1.0e-2 ?
-            tr.center :
-            tr.screenPointToLocation(panDelta ? around.sub(panDelta) : around);
+        const preZoomAroundLoc = this._computePreZoomAroundLoc(tr, around, panDelta, aroundElevation);
 
         this._handleMapControls({
             terrain,
@@ -590,6 +591,65 @@ export class HandlerManager {
 
     }
 
+    /**
+     * The gesture's anchor point: the pinch midpoint when pinching, otherwise the
+     * pan's anchor, clamped to the center point when it does not lie on the map.
+     */
+    _resolveAround(combinedResult: HandlerResult, terrain: Terrain | null, tr: ITransform): {around: Point; aroundOnSurface: boolean} {
+        let around = combinedResult.pinchAround !== undefined ? combinedResult.pinchAround : combinedResult.around;
+        around ||= this._camera.transform.centerPoint;
+        if (terrain && !tr.isPointOnMapSurface(around)) {
+            return {around: tr.centerPoint, aroundOnSurface: false};
+        }
+        return {around, aroundOnSurface: true};
+    }
+
+    /**
+     * The elevation of the plane a terrain gesture is solved on: the elevation of the
+     * terrain point grabbed at gesture start, captured here on the gesture's first
+     * frame. Undefined means the gesture is solved at the center's elevation instead —
+     * when the grabbed terrain is not loaded, the anchor is the center point (a
+     * center-point anchor is skipped by the camera helper and would lose the pan), or
+     * the anchor plane is too close to the camera for a stable ray-plane solve.
+     */
+    _terrainGestureElevation(terrain: Terrain, around: Point, aroundOnSurface: boolean, tr: ITransform, combinedEventsInProgress: EventsInProgress): number | undefined {
+        if (!aroundOnSurface) {
+            return undefined;
+        }
+        if (!this._terrainMovement && (combinedEventsInProgress.drag || combinedEventsInProgress.zoom)) {
+            const anchor = terrain.pointCoordinate(around);
+            this._terrainGestureAnchorElevation = anchor ? anchor.z : null;
+        }
+        if (this._terrainGestureAnchorElevation === null) {
+            return undefined;
+        }
+        const elevation = this._terrainGestureAnchorElevation;
+        if (around.distSqr(tr.centerPoint) < 1.0e-2) {
+            return undefined;
+        }
+        if (elevation - tr.elevation >= TERRAIN_ANCHOR_MAX_CAMERA_ALTITUDE_FRACTION * (tr.getCameraAltitude() - tr.elevation)) {
+            return undefined;
+        }
+        return elevation;
+    }
+
+    /**
+     * The location that was under `around` before this frame's deltas — the point the
+     * camera helper re-anchors after zooming — solved at `aroundElevation` when a
+     * terrain gesture provides one. When rotating about the center point, the
+     * transform's center is used directly to avoid numerical issues near the horizon.
+     */
+    _computePreZoomAroundLoc(tr: ITransform, around: Point, panDelta: Point | undefined, aroundElevation: number | undefined): LngLat {
+        if (around.distSqr(tr.centerPoint) < 1.0e-2) {
+            return tr.center;
+        }
+        const aroundPreviousPoint = panDelta ? around.sub(panDelta) : around;
+        if (aroundElevation !== undefined) {
+            return tr.screenPointToLocationAtElevation(aroundPreviousPoint, aroundElevation);
+        }
+        return tr.screenPointToLocation(aroundPreviousPoint);
+    }
+
     _handleMapControls({
         terrain,
         tr,
@@ -623,7 +683,9 @@ export class HandlerManager {
             return;
         }
 
-        if (combinedEventsInProgress.drag && this._terrainMovement && panDelta) {
+        if (deltasForHelper.aroundElevation === undefined &&
+            combinedEventsInProgress.drag && this._terrainMovement && panDelta) {
+            // no usable anchor: drag by pixel-delta on the center-elevation plane
             tr.setCenter(tr.screenPointToLocation(tr.centerPoint.sub(panDelta)));
             return;
         }
@@ -685,6 +747,7 @@ export class HandlerManager {
         if (finishedMoving && this._terrainMovement) {
             this._camera.elevationFreeze = false;
             this._terrainMovement = false;
+            this._terrainGestureAnchorElevation = null;
             const tr = this._camera.getTransformForUpdate();
             if (this._map.getCenterClampedToGround()) {
                 tr.recalculateZoomAndCenter(this._map.terrain);

package/src/ui/map.ts

@@ -31,6 +31,7 @@ import {defaultLocale} from './default_locale.ts';
 import {isAbortError} from '../util/abort_error.ts';
 import {coveringTiles, type CoveringTilesOptions, createCalculateTileZoomFunction} from '../geo/projection/covering_tiles.ts';
 import {CanonicalTileID, type OverscaledTileID} from '../tile/tile_id.ts';
+import {isStyleImageWebGLData} from '../style/style_image.ts';
 
 import type {PaddingOptions} from '../geo/edge_insets.ts';
 import type {Source} from '../source/source.ts';
@@ -3208,9 +3209,11 @@ export class Map extends Evented<MapEventType> {
         } else {
             const {width, height, data} = image as ImageData;
             const userImage = (image as any as StyleImageInterface);
+            const isWebGLImage = isStyleImageWebGLData(userImage.data);
 
             return {
-                data: new RGBAImage({width, height}, new Uint8Array(data)),
+                // A WebGL image paints its own slot, so its pixels are only ever transparent padding.
+                data: isWebGLImage ? new RGBAImage({width, height}) : new RGBAImage({width, height}, new Uint8Array(data)),
                 pixelRatio,
                 stretchX,
                 stretchY,
@@ -3219,6 +3222,7 @@ export class Map extends Evented<MapEventType> {
                 textFitHeight,
                 sdf,
                 version,
+                isWebGLImage,
                 userImage
             };
         }
@@ -3267,8 +3271,13 @@ export class Map extends Evented<MapEventType> {
                 'The width and height of the updated image must be that same as the previous version of the image')));
         }
 
-        const copy = !(image instanceof HTMLImageElement || isImageBitmap(image));
-        existingImage.data.replace(data, copy);
+        existingImage.isWebGLImage = isStyleImageWebGLData(data);
+        if (existingImage.isWebGLImage) {
+            existingImage.userImage = image as StyleImageInterface;
+        } else {
+            const copy = !(image instanceof HTMLImageElement || isImageBitmap(image));
+            existingImage.data.replace(data as Uint8Array | Uint8ClampedArray, copy);
+        }
 
         this.style.updateImage(id, existingImage);
         return this;
@@ -4146,6 +4155,11 @@ export class Map extends Evented<MapEventType> {
 
         if (this._lostContextStyle.images && this.style) {
             this.style.imageManager.images = this._lostContextStyle.images;
+            // The atlas textures died with the old context, so images that render themselves with WebGL owe every atlas a fresh render.
+            for (const id in this._lostContextStyle.images) {
+                const image = this._lostContextStyle.images[id];
+                if (image.isWebGLImage) this.style.imageManager.updateImage(id, image, false);
+            }
         }
 
         this._lostContextStyle = {style: null, images: null};

package/src/ui/map_tests/map_cross_window.test.ts

@@ -36,8 +36,8 @@ describe('Map cross-window support', () => {
             expect(iframeDocument).not.toBe(window.document);
             expect(iframeWindow).not.toBe(window);
 
-            expect(container instanceof HTMLElement).toBe(false);
-            expect(container instanceof iframeDocument.defaultView.HTMLElement).toBe(true);
+            expect(container).not.toBeInstanceOf( HTMLElement);
+            expect(container).toBeInstanceOf(iframeDocument.defaultView.HTMLElement);
 
             const map = new Map({
                 container,

package/src/ui/map_tests/map_events.test.ts

@@ -3,9 +3,9 @@ import simulate from '../../../test/unit/lib/simulate_interaction.ts';
 import {type StyleLayer} from '../../style/style_layer.ts';
 import {createMap, beforeMapTest, createStyle, sleep, createTerrain} from '../../util/test/util.ts';
 import {type MapGeoJSONFeature} from '../../util/vectortile_to_geojson.ts';
-import {type MapLibreEvent} from '../events.ts';
+import {type MapLibreEvent, MapSourceDataEvent} from '../events.ts';
 import {Map} from '../map.ts';
-import {Event as EventedEvent, ErrorEvent} from '../../util/evented.ts';
+import {ErrorEvent} from '../../util/evented.ts';
 import {type StyleSpecification} from '@maplibre/maplibre-gl-style-spec';
 
 type IsAny<T> = 0 extends T & 1 ? T : never;
@@ -980,7 +980,7 @@ describe('map events', () => {
     test('fires sourcedataabort event on dataabort event', async () => {
         const map = createMap();
         const sourcePromise = map.once('sourcedataabort');
-        map.fire(new EventedEvent('dataabort'));
+        map.fire(new MapSourceDataEvent('dataabort'));
         await expect(sourcePromise).resolves.toBeDefined();
     });
 

package/src/ui/map_tests/map_images.test.ts

@@ -215,6 +215,35 @@ test('map getImage matches addImage, StyleImageInterface SDF', () => {
     expect(gotImage.sdf).toBe(true);
 });
 
+test('map addImage packs a placeholder for a WebGL image, which brings its own pixels', () => {
+    const map = createMap();
+    const id = 'add-get-webgl-style-image';
+    const onAdd = vi.fn();
+    const inputImage: StyleImageInterface = {width: 3, height: 2, data: {renderWithWebGL: vi.fn()}, onAdd};
+
+    map.addImage(id, inputImage);
+
+    const gotImage = map.getImage(id);
+    expect(gotImage.data.width).toBe(3);
+    expect(gotImage.data.height).toBe(2);
+    expect([...gotImage.data.data]).toEqual(new Array(3 * 2 * 4).fill(0));
+    expect(gotImage.isWebGLImage).toBe(true);
+    expect(gotImage.userImage).toBe(inputImage);
+    expect(onAdd).toHaveBeenCalledWith(map, id);
+});
+
+test('map updateImage swaps a WebGL image\'s renderWithWebGL callback instead of copying pixels', () => {
+    const map = createMap();
+    const replacement: StyleImageInterface = {width: 1, height: 1, data: {renderWithWebGL: vi.fn()}};
+
+    map.addImage('webgl', {width: 1, height: 1, data: {renderWithWebGL: vi.fn()}});
+    const version = map.getImage('webgl').version;
+    map.updateImage('webgl', replacement);
+
+    expect(map.getImage('webgl').userImage).toBe(replacement);
+    expect(map.getImage('webgl').version).toBe(version + 1);
+});
+
 test('map does not fire `styleimagemissing` for empty icon values', async () => {
     const map = createMap();
 

package/src/ui/map_tests/map_style.test.ts

@@ -1,7 +1,8 @@
 import {describe, beforeEach, afterEach, test, expect, vi} from 'vitest';
 import {Map, type MapOptions} from '../map.ts';
 import {createMap, beforeMapTest, createStyle, createStyleSource, sleep} from '../../util/test/util.ts';
-import {Event as EventedEvent} from '../../util/evented.ts';
+import {ErrorEvent} from '../../util/evented.ts';
+import {MapSourceDataEvent, MapStyleDataEvent} from '../events.ts';
 import {fixedLngLat, fixedNum} from '../../../test/unit/lib/fixed.ts';
 import {extend} from '../../util/util.ts';
 import {fakeServer, type FakeServer} from 'nise';
@@ -42,9 +43,9 @@ describe('setStyle', () => {
         map.on('data', recordEvent);
         map.on('dataloading', recordEvent);
 
-        map.style.fire(new EventedEvent('error'));
-        map.style.fire(new EventedEvent('data'));
-        map.style.fire(new EventedEvent('dataloading'));
+        map.style.fire(new ErrorEvent(new Error('test')));
+        map.style.fire(new MapSourceDataEvent('data'));
+        map.style.fire(new MapSourceDataEvent('dataloading'));
 
         expect(events).toEqual([
             'error',
@@ -65,10 +66,10 @@ describe('setStyle', () => {
         map.on('sourcedata', recordEvent);
         map.on('sourcedataloading', recordEvent);
 
-        map.style.fire(new EventedEvent('data', {dataType: 'style'}));
-        map.style.fire(new EventedEvent('dataloading', {dataType: 'style'}));
-        map.style.fire(new EventedEvent('data', {dataType: 'source'}));
-        map.style.fire(new EventedEvent('dataloading', {dataType: 'source'}));
+        map.style.fire(new MapStyleDataEvent('data'));
+        map.style.fire(new MapStyleDataEvent('dataloading'));
+        map.style.fire(new MapSourceDataEvent('data'));
+        map.style.fire(new MapSourceDataEvent('dataloading'));
 
         expect(events).toEqual([
             'styledata',

package/src/ui/map_tests/map_webgl.test.ts

@@ -93,6 +93,35 @@ test('does not fire "webglcontextrestored" after remove has been called', async
     expect(spy).not.toHaveBeenCalled();
 });
 
+test('a WebGL style image is told to release its GPU resources on context loss, and survives it', async () => {
+    const map = createMap();
+    const canvas = map.getCanvas();
+    await map.once('load');
+
+    const userImage = {
+        width: 2, height: 2,
+        data: {renderWithWebGL: vi.fn()},
+        onRemove: vi.fn()
+    };
+    map.addImage('gpu-image', userImage);
+
+    const contextLostPromise = map.once('webglcontextlost');
+    canvas.dispatchEvent(new window.Event('webglcontextlost'));
+    await contextLostPromise;
+
+    expect(userImage.onRemove).toHaveBeenCalled();
+
+    const contextRestoredPromise = map.once('webglcontextrestored');
+    canvas.dispatchEvent(new window.Event('webglcontextrestored'));
+    await contextRestoredPromise;
+
+    expect(map.hasImage('gpu-image')).toBe(true);
+    expect(map.getImage('gpu-image').userImage).toBe(userImage);
+    expect(map.style.imageManager.updatedImages['gpu-image']).toBe(true);
+
+    map.remove();
+});
+
 test('WebGL2 context creation error fires ErrorEvent with structured GPUInitializationError', () => {
     HTMLCanvasElement.prototype.getContext = function (type: string) {
         if (type === 'webgl2') {

package/src/ui/marker.test.ts

@@ -96,20 +96,20 @@ describe('marker', () => {
             .addTo(map);
 
         const markerElement = marker.getElement();
-        expect(markerElement.classList.contains('some')).toBeTruthy();
-        expect(markerElement.classList.contains('classes')).toBeTruthy();
+        expect(markerElement.classList).toContain('some');
+        expect(markerElement.classList).toContain('classes');
 
         marker.addClassName('addedClass');
-        expect(markerElement.classList.contains('addedClass')).toBeTruthy();
+        expect(markerElement.classList).toContain('addedClass');
 
         marker.removeClassName('addedClass');
-        expect(!markerElement.classList.contains('addedClass')).toBeTruthy();
+        expect(markerElement.classList).not.toContain('addedClass');
 
         marker.toggleClassName('toggle');
-        expect(markerElement.classList.contains('toggle')).toBeTruthy();
+        expect(markerElement.classList).toContain('toggle');
 
         marker.toggleClassName('toggle');
-        expect(!markerElement.classList.contains('toggle')).toBeTruthy();
+        expect(markerElement.classList).not.toContain('toggle');
 
         expect(() => marker.addClassName('should throw exception')).toThrow(window.DOMException);
         expect(() => marker.removeClassName('should throw exception')).toThrow(window.DOMException);
@@ -123,19 +123,19 @@ describe('marker', () => {
     test('Marker provides LngLat accessors', () => {
         expect(new Marker().getLngLat()).toBeUndefined();
 
-        expect(new Marker().setLngLat([1, 2]).getLngLat() instanceof LngLat).toBeTruthy();
+        expect(new Marker().setLngLat([1, 2]).getLngLat()).toBeInstanceOf(LngLat);
         expect(new Marker().setLngLat([1, 2]).getLngLat()).toEqual(new LngLat(1, 2));
 
-        expect(new Marker().setLngLat(new LngLat(1, 2)).getLngLat() instanceof LngLat).toBeTruthy();
+        expect(new Marker().setLngLat(new LngLat(1, 2)).getLngLat()).toBeInstanceOf(LngLat);
         expect(new Marker().setLngLat(new LngLat(1, 2)).getLngLat()).toEqual(new LngLat(1, 2));
 
     });
 
     test('Marker provides offset accessors', () => {
-        expect(new Marker().setOffset([1, 2]).getOffset() instanceof Point).toBeTruthy();
+        expect(new Marker().setOffset([1, 2]).getOffset()).toBeInstanceOf(Point);
         expect(new Marker().setOffset([1, 2]).getOffset()).toEqual(new Point(1, 2));
 
-        expect(new Marker().setOffset(new Point(1, 2)).getOffset() instanceof Point).toBeTruthy();
+        expect(new Marker().setOffset(new Point(1, 2)).getOffset()).toBeInstanceOf(Point);
         expect(new Marker().setOffset(new Point(1, 2)).getOffset()).toEqual(new Point(1, 2));
 
     });
@@ -343,7 +343,7 @@ describe('marker', () => {
             .setLngLat([0, 0])
             .addTo(map);
 
-        expect(marker.getElement().classList.contains('maplibregl-marker-anchor-center')).toBeTruthy();
+        expect(marker.getElement().classList).toContain('maplibregl-marker-anchor-center');
         expect(marker.getElement().style.transform).toMatch(/translate\(-50%,-50%\)/);
 
         map.remove();
@@ -355,7 +355,7 @@ describe('marker', () => {
             .setLngLat([0, 0])
             .addTo(map);
 
-        expect(marker.getElement().classList.contains('maplibregl-marker-anchor-top')).toBeTruthy();
+        expect(marker.getElement().classList).toContain('maplibregl-marker-anchor-top');
         expect(marker.getElement().style.transform).toMatch(/translate\(-50%,0\)/);
 
         map.remove();
@@ -407,51 +407,35 @@ describe('marker', () => {
         Object.defineProperty(marker.getPopup()._container, 'offsetHeight', {value: 100});
 
         // marker should default to above since it has enough space
-        expect(
-            marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-bottom')
-        ).toBeTruthy();
+        expect(marker.getPopup()._container.classList).toContain('maplibregl-popup-anchor-bottom');
 
         // move marker to the top forcing the popup to below
         marker.setLngLat(map.unproject([mapHeight / 2, markerTop]));
-        expect(
-            marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-top')
-        ).toBeTruthy();
+        expect(marker.getPopup()._container.classList).toContain('maplibregl-popup-anchor-top');
 
         // move marker to the right forcing the popup to the left
         marker.setLngLat(map.unproject([mapHeight - markerRight, mapHeight / 2]));
-        expect(
-            marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-right')
-        ).toBeTruthy();
+        expect(marker.getPopup()._container.classList).toContain('maplibregl-popup-anchor-right');
 
         // move marker to the left forcing the popup to the right
         marker.setLngLat(map.unproject([markerRight, mapHeight / 2]));
-        expect(
-            marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-left')
-        ).toBeTruthy();
+        expect(marker.getPopup()._container.classList).toContain('maplibregl-popup-anchor-left');
 
         // move marker to the top left forcing the popup to the bottom right
         marker.setLngLat(map.unproject([markerRight, markerTop]));
-        expect(
-            marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-top-left')
-        ).toBeTruthy();
+        expect(marker.getPopup()._container.classList).toContain('maplibregl-popup-anchor-top-left');
 
         // move marker to the top right forcing the popup to the bottom left
         marker.setLngLat(map.unproject([mapHeight - markerRight, markerTop]));
-        expect(
-            marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-top-right')
-        ).toBeTruthy();
+        expect(marker.getPopup()._container.classList).toContain('maplibregl-popup-anchor-top-right');
 
         // move marker to the bottom left forcing the popup to the top right
         marker.setLngLat(map.unproject([markerRight, mapHeight]));
-        expect(
-            marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-bottom-left')
-        ).toBeTruthy();
+        expect(marker.getPopup()._container.classList).toContain('maplibregl-popup-anchor-bottom-left');
 
         // move marker to the bottom right forcing the popup to the top left
         marker.setLngLat(map.unproject([mapHeight - markerRight, mapHeight]));
-        expect(
-            marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-bottom-right')
-        ).toBeTruthy();
+        expect(marker.getPopup()._container.classList).toContain('maplibregl-popup-anchor-bottom-right');
 
         map.remove();
     });
@@ -1352,7 +1336,7 @@ describe('marker', () => {
         map.fire('terrain');
         await sleep(100);
 
-        expect(marker.getElement().classList.contains('maplibregl-marker-covered')).toBe(true);
+        expect(marker.getElement().classList).toContain('maplibregl-marker-covered');
         map.remove();
     });
 
@@ -1368,13 +1352,13 @@ describe('marker', () => {
         map.fire('terrain');
         await sleep(100);
 
-        expect(marker.getElement().classList.contains('maplibregl-marker-covered')).toBe(true);
+        expect(marker.getElement().classList).toContain('maplibregl-marker-covered');
 
         map.terrain.depthAtPoint = () => .95; // Terrain no longer blocking marker
         map.fire('moveend');
         await sleep(100);
 
-        expect(marker.getElement().classList.contains('maplibregl-marker-covered')).toBe(false);
+        expect(marker.getElement().classList).not.toContain('maplibregl-marker-covered');
         map.remove();
     });
 
@@ -1389,7 +1373,7 @@ describe('marker', () => {
         map.setProjection({type: 'globe'});
         await sleep(100);
 
-        expect(marker.getElement().classList.contains('maplibregl-marker-covered')).toBe(true);
+        expect(marker.getElement().classList).toContain('maplibregl-marker-covered');
         map.remove();
     });
 
@@ -1404,12 +1388,12 @@ describe('marker', () => {
         map.setProjection({type: 'globe'});
         await sleep(100);
 
-        expect(marker.getElement().classList.contains('maplibregl-marker-covered')).toBe(true);
+        expect(marker.getElement().classList).toContain('maplibregl-marker-covered');
 
         marker.setLngLat([0, 0]);
         await sleep(100);
 
-        expect(marker.getElement().classList.contains('maplibregl-marker-covered')).toBe(false);
+        expect(marker.getElement().classList).not.toContain('maplibregl-marker-covered');
         map.remove();
     });
 });

package/src/ui/popup.test.ts

@@ -32,7 +32,7 @@ describe('popup', () => {
             .addTo(map);
 
         expect(popup.isOpen()).toBeTruthy();
-        expect(popup.getElement().classList.contains('maplibregl-popup')).toBeTruthy();
+        expect(popup.getElement().classList).toContain('maplibregl-popup');
     });
 
     test('Popup.addTo adds a .maplibregl-popup element', () => {
@@ -258,10 +258,10 @@ describe('popup', () => {
     test('Popup provides LngLat accessors', () => {
         expect(new Popup().getLngLat()).toBeUndefined();
 
-        expect(new Popup().setLngLat([1, 2]).getLngLat() instanceof LngLat).toBeTruthy();
+        expect(new Popup().setLngLat([1, 2]).getLngLat()).toBeInstanceOf(LngLat);
         expect(new Popup().setLngLat([1, 2]).getLngLat()).toEqual(new LngLat(1, 2));
 
-        expect(new Popup().setLngLat(new LngLat(1, 2)).getLngLat() instanceof LngLat).toBeTruthy();
+        expect(new Popup().setLngLat(new LngLat(1, 2)).getLngLat()).toBeInstanceOf(LngLat);
         expect(new Popup().setLngLat(new LngLat(1, 2)).getLngLat()).toEqual(new LngLat(1, 2));
 
     });
@@ -382,7 +382,7 @@ describe('popup', () => {
             .setText('Test')
             .addTo(map);
 
-        expect(popup.getElement().classList.contains('maplibregl-popup-anchor-top-left')).toBeTruthy();
+        expect(popup.getElement().classList).toContain('maplibregl-popup-anchor-top-left');
     });
 
     const cases =  [
@@ -413,7 +413,7 @@ describe('popup', () => {
             vi.spyOn(map, 'project').mockReturnValue(point);
             popup.setLngLat([0, 0]);
 
-            expect(popup.getElement().classList.contains(`maplibregl-popup-anchor-${anchor}`)).toBeTruthy();
+            expect(popup.getElement().classList).toContain(`maplibregl-popup-anchor-${anchor}`);
         });
 
     const transformCases = cases.map(([anchor, _point, transform]) => [anchor, transform] as const);
@@ -449,7 +449,7 @@ describe('popup', () => {
         vi.spyOn(map, 'project').mockReturnValue(point);
         popup.setLngLat([0, 0]);
 
-        expect(popup.getElement().classList.contains('maplibregl-popup-anchor-top')).toBeTruthy();
+        expect(popup.getElement().classList).toContain('maplibregl-popup-anchor-top');
     });
 
     test('Popup is offset via a PointLike offset option', () => {
@@ -563,22 +563,22 @@ describe('popup', () => {
             .addTo(map);
 
         const popupContainer = popup.getElement();
-        expect(popupContainer.classList.contains('some')).toBeTruthy();
-        expect(popupContainer.classList.contains('classes')).toBeTruthy();
+        expect(popupContainer.classList).toContain('some');
+        expect(popupContainer.classList).toContain('classes');
 
         const addClassNameMethodPopupInstance = popup.addClassName('addedClass');
-        expect(popupContainer.classList.contains('addedClass')).toBeTruthy();
+        expect(popupContainer.classList).toContain('addedClass');
         expect(addClassNameMethodPopupInstance).toBeInstanceOf(Popup);
 
         const removeClassNameMethodPopupInstance = popup.removeClassName('addedClass');
-        expect(!popupContainer.classList.contains('addedClass')).toBeTruthy();
+        expect(popupContainer.classList).not.toContain('addedClass');
         expect(removeClassNameMethodPopupInstance).toBeInstanceOf(Popup);
 
         popup.toggleClassName('toggle');
-        expect(popupContainer.classList.contains('toggle')).toBeTruthy();
+        expect(popupContainer.classList).toContain('toggle');
 
         popup.toggleClassName('toggle');
-        expect(!popupContainer.classList.contains('toggle')).toBeTruthy();
+        expect(popupContainer.classList).not.toContain('toggle');
 
         expect(() => popup.addClassName('should throw exception')).toThrow(window.DOMException);
         expect(() => popup.removeClassName('should throw exception')).toThrow(window.DOMException);
@@ -1063,8 +1063,8 @@ describe('popup', () => {
                 .trackPointer()
                 .addTo(map);
 
-            expect(popup.getElement().classList.contains('maplibregl-popup-track-pointer')).toBeTruthy();
-            expect(map._canvasContainer.classList.contains('maplibregl-track-pointer')).toBeTruthy();
+            expect(popup.getElement().classList).toContain('maplibregl-popup-track-pointer');
+            expect(map._canvasContainer.classList).toContain('maplibregl-track-pointer');
 
             popup.remove();
         });