maplibre-gl 3.3.0 → 3.4.0

package/src/style/style.test.ts

@@ -13,7 +13,7 @@ import {
 } from '../source/rtl_text_plugin';
 import {browser} from '../util/browser';
 import {OverscaledTileID} from '../source/tile_id';
-import {fakeXhr, fakeServer} from 'nise';
+import {fakeServer, type FakeServer} from 'nise';
 
 import {EvaluationParameters} from './evaluation_parameters';
 import {LayerSpecification, GeoJSONSourceSpecification, FilterSpecification, SourceSpecification} from '@maplibre/maplibre-gl-style-spec';
@@ -78,21 +78,17 @@ function createStyle(map = getStubMap()) {
     return style;
 }
 
-let sinonFakeXMLServer;
-let sinonFakeServer;
+let server: FakeServer;
 let mockConsoleError;
 
 beforeEach(() => {
     global.fetch = null;
-    sinonFakeServer = fakeServer.create();
-    sinonFakeXMLServer = fakeXhr.useFakeXMLHttpRequest();
-
+    server = fakeServer.create();
     mockConsoleError = jest.spyOn(console, 'error').mockImplementation(() => { });
 });
 
 afterEach(() => {
-    sinonFakeXMLServer.restore();
-    sinonFakeServer.restore();
+    server.restore();
     mockConsoleError.mockRestore();
 });
 
@@ -115,12 +111,12 @@ describe('Style', () => {
 
     test('loads plugin immediately if already registered', done => {
         clearRTLTextPlugin();
-        sinonFakeServer.respondWith('/plugin.js', 'doesn\'t matter');
+        server.respondWith('/plugin.js', 'doesn\'t matter');
         setRTLTextPlugin('/plugin.js', (error) => {
             expect(error).toMatch(/Cannot set the state of the rtl-text-plugin when not in the web-worker context/);
             done();
         });
-        sinonFakeServer.respond();
+        server.respond();
         new Style(getStubMap());
     });
 
@@ -152,7 +148,7 @@ describe('Style', () => {
             jest.spyOn(style.sourceCaches['vector'], 'reload');
 
             clearRTLTextPlugin();
-            sinonFakeServer.respondWith('/plugin.js', 'doesn\'t matter');
+            server.respondWith('/plugin.js', 'doesn\'t matter');
             const _broadcast = style.dispatcher.broadcast;
             style.dispatcher.broadcast = function (type, state, callback) {
                 if (type === 'syncRTLPluginState') {
@@ -171,7 +167,7 @@ describe('Style', () => {
                     done();
                 }, 0);
             });
-            sinonFakeServer.respond();
+            server.respond();
         });
     });
 });
@@ -211,15 +207,15 @@ describe('Style#loadURL', () => {
         });
 
         style.loadURL('style.json');
-        sinonFakeServer.respondWith(JSON.stringify(createStyleJSON({version: 'invalid'})));
-        sinonFakeServer.respond();
+        server.respondWith(JSON.stringify(createStyleJSON({version: 'invalid'})));
+        server.respond();
     });
 
     test('cancels pending requests if removed', () => {
         const style = new Style(getStubMap());
         style.loadURL('style.json');
         style._remove();
-        expect(sinonFakeServer.lastRequest.aborted).toBe(true);
+        expect((server.lastRequest as any).aborted).toBe(true);
     });
 });
 
@@ -266,21 +262,8 @@ describe('Style#loadJSON', () => {
         // stub Image so we can invoke 'onload'
         // https://github.com/jsdom/jsdom/commit/58a7028d0d5b6aacc5b435daee9fd8f9eacbb14c
 
-        // fake the image request (sinon doesn't allow non-string data for
-        // server.respondWith, so we do so manually)
-        const requests = [];
-        sinonFakeXMLServer.onCreate = req => { requests.push(req); };
-        const respond = () => {
-            let req = requests.find(req => req.url === 'http://example.com/sprite.png');
-            req.setStatus(200);
-            req.response = new ArrayBuffer(8);
-            req.onload();
-
-            req = requests.find(req => req.url === 'http://example.com/sprite.json');
-            req.setStatus(200);
-            req.response = '{}';
-            req.onload();
-        };
+        server.respondWith('GET', 'http://example.com/sprite.png', new ArrayBuffer(8));
+        server.respondWith('GET', 'http://example.com/sprite.json', '{}');
 
         const style = new Style(getStubMap());
 
@@ -303,7 +286,7 @@ describe('Style#loadJSON', () => {
                 done();
             });
 
-            respond();
+            server.respond();
         });
     });
 
@@ -315,21 +298,8 @@ describe('Style#loadJSON', () => {
         // stub Image so we can invoke 'onload'
         // https://github.com/jsdom/jsdom/commit/58a7028d0d5b6aacc5b435daee9fd8f9eacbb14c
 
-        // fake the image request (sinon doesn't allow non-string data for
-        // server.respondWith, so we do so manually)
-        const requests = [];
-        sinonFakeXMLServer.onCreate = req => { requests.push(req); };
-        const respond = () => {
-            let req = requests.find(req => req.url === 'http://example.com/sprite.png');
-            req.setStatus(200);
-            req.response = new ArrayBuffer(8);
-            req.onload();
-
-            req = requests.find(req => req.url === 'http://example.com/sprite.json');
-            req.setStatus(200);
-            req.response = '{"image1": {"width": 1, "height": 1, "x": 0, "y": 0, "pixelRatio": 1.0}}';
-            req.onload();
-        };
+        server.respondWith('GET', 'http://example.com/sprite.png', new ArrayBuffer(8));
+        server.respondWith('GET', 'http://example.com/sprite.json', '{"image1": {"width": 1, "height": 1, "x": 0, "y": 0, "pixelRatio": 1.0}}');
 
         const style = new Style(getStubMap());
 
@@ -357,7 +327,7 @@ describe('Style#loadJSON', () => {
                 });
             });
 
-            respond();
+            server.respond();
         });
     });
 
@@ -751,7 +721,7 @@ describe('Style#setState', () => {
     });
 
     test('Issue #3893: compare new source options against originally provided options rather than normalized properties', done => {
-        sinonFakeServer.respondWith('/tilejson.json', JSON.stringify({
+        server.respondWith('/tilejson.json', JSON.stringify({
             tiles: ['http://tiles.server']
         }));
         const initial = createStyleJSON();
@@ -767,7 +737,7 @@ describe('Style#setState', () => {
             style.setState(initial);
             done();
         });
-        sinonFakeServer.respond();
+        server.respond();
     });
 
     test('return true if there is a change', done => {

package/src/style/style.ts

@@ -191,6 +191,12 @@ export type StyleSwapOptions = {
     transformStyle?: TransformStyleFunction;
 }
 
+/**
+ * Specifies a layer to be added to a {@link Style}. In addition to a standard {@link LayerSpecification}
+ * or a {@link CustomLayerInterface}, a {@link LayerSpecification} with an embedded {@link SourceSpecification} can also be provided.
+ */
+export type AddLayerObject = LayerSpecification | (Omit<LayerSpecification, 'source'> & {source: SourceSpecification}) | CustomLayerInterface;
+
 /**
  * The Style base class
  */
@@ -362,7 +368,7 @@ export class Style extends Evented {
 
         this.light = new Light(this.stylesheet.light);
 
-        this.map.setTerrain(this.stylesheet.terrain);
+        this.map.setTerrain(this.stylesheet.terrain ?? null);
 
         this.fire(new Event('data', {dataType: 'style'}));
         this.fire(new Event('style.load'));
@@ -848,7 +854,7 @@ export class Style extends Evented {
      * @param options - Style setter options.
      * @returns `this`.
      */
-    addLayer(layerObject: LayerSpecification | CustomLayerInterface, before?: string, options: StyleSetterOptions = {}): this {
+    addLayer(layerObject: AddLayerObject, before?: string, options: StyleSetterOptions = {}): this {
         this._checkLoaded();
 
         const id = layerObject.id;
@@ -858,7 +864,7 @@ export class Style extends Evented {
             return;
         }
 
-        let layer;
+        let layer: ReturnType<typeof createStyleLayer>;
         if (layerObject.type === 'custom') {
 
             if (emitValidationErrors(this, validateCustomStyleLayer(layerObject))) return;
@@ -866,17 +872,17 @@ export class Style extends Evented {
             layer = createStyleLayer(layerObject);
 
         } else {
-            if (typeof (layerObject as any).source === 'object') {
-                this.addSource(id, (layerObject as any).source);
+            if ('source' in layerObject && typeof layerObject.source === 'object') {
+                this.addSource(id, layerObject.source);
                 layerObject = clone(layerObject);
-                layerObject = (extend(layerObject, {source: id}) as any);
+                layerObject = extend(layerObject, {source: id});
             }
 
             // this layer is not in the style.layers array, so we pass an impossible array index
             if (this._validate(validateStyle.layer,
                 `layers.${id}`, layerObject, {arrayIndex: -1}, options)) return;
 
-            layer = createStyleLayer(layerObject);
+            layer = createStyleLayer(layerObject as LayerSpecification | CustomLayerInterface);
             this._validateLayer(layer);
 
             layer.setEventedParent(this, {layer: {id}});
@@ -994,7 +1000,7 @@ export class Style extends Evented {
      * @param id - id of the desired layer
      * @returns a layer, if one with the given `id` exists
      */
-    getLayer(id: string): StyleLayer {
+    getLayer(id: string): StyleLayer | undefined {
         return this._layers[id];
     }
 

package/src/style/style_layer/line_style_layer.test.ts

@@ -0,0 +1,50 @@
+import {createStyleLayer} from '../create_style_layer';
+import {extend} from '../../util/util';
+import {LineStyleLayer} from './line_style_layer';
+
+describe('LineStyleLayer', () => {
+    function createLineLayer(layer?) {
+        return extend({
+            type: 'line',
+            source: 'line',
+            id: 'line',
+            paint: {
+                'line-color': 'red',
+                'line-width': 14,
+                'line-gradient': [
+                    'interpolate',
+                    ['linear'],
+                    ['line-progress'],
+                    0,
+                    'blue',
+                    1,
+                    'red'
+                ]
+            }
+        }, layer);
+    }
+
+    test('updating with valid line-gradient updates this.gradientVersion', () => {
+        const lineLayer = createStyleLayer(createLineLayer()) as LineStyleLayer;
+        const gradientVersion = lineLayer.gradientVersion;
+
+        lineLayer.setPaintProperty('line-gradient', [
+            'interpolate',
+            ['linear'],
+            ['line-progress'],
+            0,
+            'red',
+            1,
+            'blue'
+        ]);
+        expect(lineLayer.gradientVersion).toBeGreaterThan(gradientVersion);
+    });
+
+    test('updating with invalid line-gradient updates this.gradientVersion', () => {
+        const lineLayer = createStyleLayer(createLineLayer()) as LineStyleLayer;
+        const gradientVersion = lineLayer.gradientVersion;
+
+        lineLayer.setPaintProperty('line-gradient', null);
+        expect(lineLayer.gradientVersion).toBeGreaterThan(gradientVersion);
+    });
+});

package/src/style/style_layer/line_style_layer.ts

@@ -9,8 +9,8 @@ import {extend} from '../../util/util';
 import {EvaluationParameters} from '../evaluation_parameters';
 import {Transitionable, Transitioning, Layout, PossiblyEvaluated, DataDrivenProperty} from '../properties';
 
-import {Step} from '@maplibre/maplibre-gl-style-spec';
-import type {FeatureState, ZoomConstantExpression, LayerSpecification} from '@maplibre/maplibre-gl-style-spec';
+import {isZoomExpression, Step} from '@maplibre/maplibre-gl-style-spec';
+import type {FeatureState, LayerSpecification} from '@maplibre/maplibre-gl-style-spec';
 import type {Bucket, BucketParameters} from '../../data/bucket';
 import type {LineLayoutProps, LinePaintProps} from './line_style_layer_properties.g';
 import type {Transform} from '../../geo/transform';
@@ -60,8 +60,12 @@ export class LineStyleLayer extends StyleLayer {
 
     _handleSpecialPaintPropertyUpdate(name: string) {
         if (name === 'line-gradient') {
-            const expression: ZoomConstantExpression<'source'> = (this._transitionablePaint._values['line-gradient'].value.expression as any);
-            this.stepInterpolant = expression._styleExpression.expression instanceof Step;
+            const expression = this.gradientExpression();
+            if (isZoomExpression(expression)) {
+                this.stepInterpolant = expression._styleExpression.expression instanceof Step;
+            } else {
+                this.stepInterpolant = false;
+            }
             this.gradientVersion = (this.gradientVersion + 1) % Number.MAX_SAFE_INTEGER;
         }
     }

package/src/style/style_layer/variable_text_anchor.ts

@@ -32,7 +32,7 @@ export function evaluateVariableOffset(anchor: TextAnchor, offset: [number, numb
         let x = 0, y = 0;
         if (radialOffset < 0) radialOffset = 0; // Ignore negative offset.
         // solve for r where r^2 + r^2 = radialOffset^2
-        const hypotenuse = radialOffset / Math.sqrt(2);
+        const hypotenuse = radialOffset / Math.SQRT2;
         switch (anchor) {
             case 'top-right':
             case 'top-left':

package/src/ui/control/navigation_control.ts

@@ -43,7 +43,6 @@ const defaultOptions: NavigationOptions = {
  * map.addControl(nav, 'top-left');
  * ```
  * @see [Display map navigation controls](https://maplibre.org/maplibre-gl-js/docs/examples/navigation/)
- * @see [Add a third party vector tile source](https://maplibre.org/maplibre-gl-js/docs/examples/third-party/)
  */
 export class NavigationControl implements IControl {
     _map: Map;

package/src/ui/handler/scroll_zoom.ts

@@ -351,5 +351,11 @@ export class ScrollZoomHandler implements Handler {
 
     reset() {
         this._active = false;
+        this._zooming = false;
+        delete this._targetZoom;
+        if (this._finishTimeout) {
+            clearTimeout(this._finishTimeout);
+            delete this._finishTimeout;
+        }
     }
 }

package/src/ui/handler_manager.ts

@@ -17,6 +17,7 @@ import {DragPanHandler} from './handler/shim/drag_pan';
 import {DragRotateHandler} from './handler/shim/drag_rotate';
 import {TwoFingersTouchZoomRotateHandler} from './handler/shim/two_fingers_touch';
 import {extend} from '../util/util';
+import {browser} from '../util/browser';
 import Point from '@mapbox/point-geometry';
 
 export type InputEvent = MouseEvent | TouchEvent | KeyboardEvent | WheelEvent;
@@ -583,7 +584,7 @@ export class HandlerManager {
 
             const shouldSnapToNorth = bearing => bearing !== 0 && -this._bearingSnap < bearing && bearing < this._bearingSnap;
 
-            if (inertialEase) {
+            if (inertialEase && (inertialEase.essential || !browser.prefersReducedMotion)) {
                 if (shouldSnapToNorth(inertialEase.bearing || this._map.getBearing())) {
                     inertialEase.bearing = 0;
                 }

package/src/ui/map.test.ts

@@ -6,7 +6,7 @@ import {OverscaledTileID} from '../source/tile_id';
 import {Event, ErrorEvent} from '../util/evented';
 import simulate from '../../test/unit/lib/simulate_interaction';
 import {fixedLngLat, fixedNum} from '../../test/unit/lib/fixed';
-import {LayerSpecification, SourceSpecification, StyleSpecification} from '@maplibre/maplibre-gl-style-spec';
+import {GeoJSONSourceSpecification, LayerSpecification, SourceSpecification, StyleSpecification} from '@maplibre/maplibre-gl-style-spec';
 import {RequestTransformFunction} from '../util/request_manager';
 import {extend} from '../util/util';
 import {LngLatBoundsLike} from '../geo/lng_lat_bounds';
@@ -675,6 +675,19 @@ describe('Map', () => {
             map.addSource('fill', source);
         });
 
+        test('a layer can be added with an embedded source specification', () => {
+            const map = createMap({deleteStyle: true});
+            const source: GeoJSONSourceSpecification = {
+                type: 'geojson',
+                data: {type: 'Point', coordinates: [0, 0]}
+            };
+            map.addLayer({
+                id: 'foo',
+                type: 'symbol',
+                source
+            });
+        });
+
         test('returns the style with added source and layer', done => {
             const style = createStyle();
             const map = createMap({style});
@@ -848,21 +861,30 @@ describe('Map', () => {
 
             const map = createMap();
 
-            const spyA = jest.spyOn(map, '_update');
-            const spyB = jest.spyOn(map, 'resize');
+            const updateSpy = jest.spyOn(map, '_update');
+            const resizeSpy = jest.spyOn(map, 'resize');
 
             // The initial "observe" event fired by ResizeObserver should be captured/muted
             // in the map constructor
 
             observerCallback();
-            expect(spyA).not.toHaveBeenCalled();
-            expect(spyB).not.toHaveBeenCalled();
+            expect(updateSpy).not.toHaveBeenCalled();
+            expect(resizeSpy).not.toHaveBeenCalled();
+
+            // The next "observe" event should fire a resize / _update
 
-            // Following "observe" events should fire a resize / _update
+            observerCallback();
+            expect(updateSpy).toHaveBeenCalled();
+            expect(resizeSpy).toHaveBeenCalledTimes(1);
 
+            // Additional "observe" events should be throttled
+            observerCallback();
+            observerCallback();
             observerCallback();
-            expect(spyA).toHaveBeenCalled();
-            expect(spyB).toHaveBeenCalled();
+            observerCallback();
+            expect(resizeSpy).toHaveBeenCalledTimes(1);
+            await new Promise((resolve) => { setTimeout(resolve, 100); });
+            expect(resizeSpy).toHaveBeenCalledTimes(2);
         });
 
         test('width and height correctly rounded', () => {
@@ -2569,6 +2591,13 @@ describe('Map', () => {
         });
     });
 
+    describe('#getTerrain', () => {
+        test('returns null when not set', () => {
+            const map = createMap();
+            expect(map.getTerrain()).toBeNull();
+        });
+    });
+
     describe('#setCooperativeGestures', () => {
         test('returns self', () => {
             const map = createMap();

package/src/ui/map.ts

@@ -25,6 +25,7 @@ import {RGBAImage} from '../util/image';
 import {Event, ErrorEvent, Listener} from '../util/evented';
 import {MapEventType, MapLayerEventType, MapMouseEvent, MapSourceDataEvent, MapStyleDataEvent} from './events';
 import {TaskQueue} from '../util/task_queue';
+import {throttle} from '../util/throttle';
 import {webpSupported} from '../util/webp_supported';
 import {PerformanceMarkers, PerformanceUtils} from '../util/performance';
 import {Source, SourceClass} from '../source/source';
@@ -33,9 +34,8 @@ import {StyleLayer} from '../style/style_layer';
 import type {RequestTransformFunction} from '../util/request_manager';
 import type {LngLatLike} from '../geo/lng_lat';
 import type {LngLatBoundsLike} from '../geo/lng_lat_bounds';
-import type {FeatureIdentifier, StyleOptions, StyleSetterOptions} from '../style/style';
+import type {AddLayerObject, FeatureIdentifier, StyleOptions, StyleSetterOptions} from '../style/style';
 import type {MapDataEvent} from './events';
-import type {CustomLayerInterface} from '../style/style_layer/custom_style_layer';
 import type {StyleImage, StyleImageInterface, StyleImageMetadata} from '../style/style_image';
 import type {PointLike} from './camera';
 import type {ScrollZoomHandler} from './handler/scroll_zoom';
@@ -51,7 +51,6 @@ import {defaultLocale} from './default_locale';
 import type {TaskID} from '../util/task_queue';
 import type {Cancelable} from '../types/cancelable';
 import type {
-    LayerSpecification,
     FilterSpecification,
     StyleSpecification,
     LightSpecification,
@@ -640,15 +639,17 @@ export class Map extends Camera {
         if (typeof window !== 'undefined') {
             addEventListener('online', this._onWindowOnline, false);
             let initialResizeEventCaptured = false;
+            const throttledResizeCallback = throttle((entries: ResizeObserverEntry[]) => {
+                if (this._trackResize && !this._removed) {
+                    this.resize(entries)._update();
+                }
+            }, 50);
             this._resizeObserver = new ResizeObserver((entries) => {
                 if (!initialResizeEventCaptured) {
                     initialResizeEventCaptured = true;
                     return;
                 }
-
-                if (this._trackResize) {
-                    this.resize(entries)._update();
-                }
+                throttledResizeCallback(entries);
             });
             this._resizeObserver.observe(this._container);
         }
@@ -1962,7 +1963,7 @@ export class Map extends Camera {
      * map.setTerrain({ source: 'terrain' });
      * ```
      */
-    setTerrain(options: TerrainSpecification): this {
+    setTerrain(options: TerrainSpecification | null): this {
         this.style._checkLoaded();
 
         // clear event handlers
@@ -2017,8 +2018,8 @@ export class Map extends Camera {
      * map.getTerrain(); // { source: 'terrain' };
      * ```
      */
-    getTerrain(): TerrainSpecification {
-        return this.terrain && this.terrain.options;
+    getTerrain(): TerrainSpecification | null {
+        return this.terrain?.options ?? null;
     }
 
     /**
@@ -2346,7 +2347,7 @@ export class Map extends Camera {
      *
      * @param layer - The layer to add,
      * conforming to either the MapLibre Style Specification's [layer definition](https://maplibre.org/maplibre-style-spec/layers) or,
-     * less commonly, the {@link CustomLayerInterface} specification.
+     * less commonly, the {@link CustomLayerInterface} specification. Can also be a layer definition with an embedded source definition.
      * The MapLibre Style Specification's layer definition is appropriate for most layers.
      *
      * @param beforeId - The ID of an existing layer to insert the new layer before,
@@ -2418,7 +2419,7 @@ export class Map extends Camera {
      * @see [Add a vector tile source](https://maplibre.org/maplibre-gl-js/docs/examples/vector-source/)
      * @see [Add a WMS source](https://maplibre.org/maplibre-gl-js/docs/examples/wms/)
      */
-    addLayer(layer: (LayerSpecification & {source?: string | SourceSpecification}) | CustomLayerInterface, beforeId?: string) {
+    addLayer(layer: AddLayerObject, beforeId?: string) {
         this._lazyInitEmptyStyle();
         this.style.addLayer(layer, beforeId);
         return this._update(true);
@@ -2475,7 +2476,7 @@ export class Map extends Camera {
      * @see [Filter symbols by toggling a list](https://maplibre.org/maplibre-gl-js/docs/examples/filter-markers/)
      * @see [Filter symbols by text input](https://maplibre.org/maplibre-gl-js/docs/examples/filter-markers-by-input/)
      */
-    getLayer(id: string): StyleLayer {
+    getLayer(id: string): StyleLayer | undefined {
         return this.style.getLayer(id);
     }
 
@@ -2561,6 +2562,7 @@ export class Map extends Camera {
      * @param name - The name of the paint property to set.
      * @param value - The value of the paint property to set.
      * Must be of a type appropriate for the property, as defined in the [MapLibre Style Specification](https://maplibre.org/maplibre-style-spec/).
+     * Pass `null` to unset the existing value.
      * @param options - Options object.
      * @returns `this`
      * @example

package/src/ui/marker.test.ts

@@ -811,4 +811,29 @@ describe('marker', () => {
 
         map.remove();
     });
+
+    test('Marker after the terrain event must listen to the render event till is fully loaded', async () => {
+        const map = createMap();
+
+        new Marker()
+            .setLngLat([1, 1])
+            .addTo(map);
+
+        expect(map._oneTimeListeners.render).toBeUndefined();
+
+        map.fire('terrain');
+        expect(map._oneTimeListeners.render).toHaveLength(1);
+
+        map.fire('render');
+        expect(map._oneTimeListeners.render).toHaveLength(1);
+
+        map.fire('render');
+        expect(map._oneTimeListeners.render).toHaveLength(1);
+
+        // await idle to be fully loaded
+        await map.once('idle');
+        map.fire('render');
+        expect(map._oneTimeListeners.render).toHaveLength(0);
+        map.remove();
+    });
 });

package/src/ui/marker.ts

@@ -297,6 +297,8 @@ export class Marker extends Evented {
         map.getCanvasContainer().appendChild(this._element);
         map.on('move', this._update);
         map.on('moveend', this._update);
+        map.on('terrain', this._update);
+
         this.setDraggable(this._draggable);
         this._update();
 
@@ -419,7 +421,7 @@ export class Marker extends Evented {
             if (!('offset' in popup.options)) {
                 const markerHeight = 41 - (5.8 / 2);
                 const markerRadius = 13.5;
-                const linearOffset = Math.sqrt(Math.pow(markerRadius, 2) / 2);
+                const linearOffset = Math.abs(markerRadius) / Math.SQRT2;
                 popup.options.offset = this._defaultMarker ? {
                     'top': [0, 0],
                     'top-left': [0, 0],
@@ -504,9 +506,14 @@ export class Marker extends Evented {
         return this;
     }
 
-    _update = (e?: { type: 'move' | 'moveend' }) => {
+    _update = (e?: { type: 'move' | 'moveend' | 'terrain' | 'render' }) => {
         if (!this._map) return;
 
+        const isFullyLoaded = this._map.loaded() && !this._map.isMoving();
+        if (e?.type === 'terrain' || (e?.type === 'render' && !isFullyLoaded)) {
+            this._map.once('render', this._update);
+        }
+
         if (this._map.transform.renderWorldCopies) {
             this._lngLat = smartWrap(this._lngLat, this._pos, this._map.transform);
         }

package/src/ui/popup.ts

@@ -627,7 +627,7 @@ function normalizeOffset(offset?: Offset | null) {
 
     } else if (typeof offset === 'number') {
         // input specifies a radius from which to calculate offsets at all positions
-        const cornerOffset = Math.round(Math.sqrt(0.5 * Math.pow(offset, 2)));
+        const cornerOffset = Math.round(Math.abs(offset) / Math.SQRT2);
         return {
             'center': new Point(0, 0),
             'top': new Point(0, offset),

package/src/util/ajax.test.ts

@@ -6,7 +6,7 @@ import {
     sameOrigin
 } from './ajax';
 
-import {fakeServer, FakeServer} from 'nise';
+import {fakeServer, type FakeServer} from 'nise';
 import {destroyFetchMock, FetchMock, RequestMock, setupFetchMock} from './test/mock_fetch';
 
 function readAsText(blob) {

package/src/util/image_request.test.ts

@@ -1,7 +1,7 @@
 import {config} from './config';
 import {webpSupported} from './webp_supported';
 import {stubAjaxGetImage} from './test/util';
-import {fakeServer, FakeServer} from 'nise';
+import {fakeServer, type FakeServer} from 'nise';
 import {ImageRequest, ImageRequestQueueItem} from './image_request';
 import * as ajax from './ajax';
 

package/src/util/test/util.ts

@@ -132,3 +132,15 @@ export function stubAjaxGetImage(createImageBitmap) {
         }
     });
 }
+
+/**
+ * This should be used in test that use nise since the internal buffer returned from a file is not an instance of ArrayBuffer for some reason.
+ * @param data - the data read from a file, for example by `fs.readFileSync(...)`
+ * @returns a copy of the data in the file in `ArrayBuffer` format
+ */
+export function bufferToArrayBuffer(data: Buffer): ArrayBuffer {
+    const newBuffer = new ArrayBuffer(data.buffer.byteLength);
+    const view = new Uint8Array(newBuffer);
+    data.copy(view);
+    return view.buffer;
+}