maplibre-gl 3.3.1 → 3.4.1

package/src/style/load_sprite.test.ts

@@ -2,18 +2,25 @@ import fs from 'fs';
 import path from 'path';
 import {RequestManager} from '../util/request_manager';
 import {loadSprite} from './load_sprite';
-import {fakeXhr} from 'nise';
+import {type FakeServer, fakeServer} from 'nise';
 import * as util from '../util/util';
+import {bufferToArrayBuffer} from '../util/test/util';
 
 describe('loadSprite', () => {
-    jest.spyOn(util, 'arrayBufferToImageBitmap').mockImplementation((data: ArrayBuffer, callback: (err?: Error | null, image?: ImageBitmap | null) => void) => {
-        createImageBitmap(new ImageData(1024, 824)).then((imgBitmap) => {
-            callback(null, imgBitmap);
-        }).catch((e) => {
-            callback(new Error(`Could not load image because of ${e.message}. Please make sure to use a supported image type such as PNG or JPEG. Note that SVGs are not supported.`));
+
+    let server: FakeServer;
+
+    beforeEach(() => {
+        jest.spyOn(util, 'arrayBufferToImageBitmap').mockImplementation((data: ArrayBuffer, callback: (err?: Error | null, image?: ImageBitmap | null) => void) => {
+            createImageBitmap(new ImageData(1024, 824)).then((imgBitmap) => {
+                callback(null, imgBitmap);
+            }).catch((e) => {
+                callback(new Error(`Could not load image because of ${e.message}. Please make sure to use a supported image type such as PNG or JPEG. Note that SVGs are not supported.`));
+            });
         });
+        global.fetch = null;
+        server = fakeServer.create();
     });
-    global.fetch = null;
 
     test('backwards compatibility: single string is treated as a URL for the default sprite', done => {
         const transform = jest.fn().mockImplementation((url, type) => {
@@ -22,8 +29,8 @@ describe('loadSprite', () => {
 
         const manager = new RequestManager(transform);
 
-        const requests = [];
-        fakeXhr.useFakeXMLHttpRequest().onCreate = (req) => { requests.push(req); };
+        server.respondWith('GET', 'http://localhost:9966/test/unit/assets/sprite1.json', fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.json')).toString());
+        server.respondWith('GET', 'http://localhost:9966/test/unit/assets/sprite1.png', bufferToArrayBuffer(fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.png'))));
 
         loadSprite('http://localhost:9966/test/unit/assets/sprite1', manager, 1, (err, result) => {
             expect(err).toBeFalsy();
@@ -43,15 +50,10 @@ describe('loadSprite', () => {
             done();
         });
 
-        expect(requests[0].url).toBe('http://localhost:9966/test/unit/assets/sprite1.json');
-        requests[0].setStatus(200);
-        requests[0].response = fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.json'));
-        requests[0].onload();
+        server.respond();
 
-        expect(requests[1].url).toBe('http://localhost:9966/test/unit/assets/sprite1.png');
-        requests[1].setStatus(200);
-        requests[1].response = fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.png')).buffer;
-        requests[1].onload();
+        expect(server.requests[0].url).toBe('http://localhost:9966/test/unit/assets/sprite1.json');
+        expect(server.requests[1].url).toBe('http://localhost:9966/test/unit/assets/sprite1.png');
     });
 
     test('array of objects support', done => {
@@ -61,8 +63,10 @@ describe('loadSprite', () => {
 
         const manager = new RequestManager(transform);
 
-        const requests = [];
-        fakeXhr.useFakeXMLHttpRequest().onCreate = (req) => { requests.push(req); };
+        server.respondWith('GET', 'http://localhost:9966/test/unit/assets/sprite1.json', fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.json')).toString());
+        server.respondWith('GET', 'http://localhost:9966/test/unit/assets/sprite1.png', bufferToArrayBuffer(fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.png'))));
+        server.respondWith('GET', 'http://localhost:9966/test/unit/assets/sprite2.json', fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite2.json')).toString());
+        server.respondWith('GET', 'http://localhost:9966/test/unit/assets/sprite2.png', bufferToArrayBuffer(fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite2.png'))));
 
         loadSprite([{id: 'sprite1', url: 'http://localhost:9966/test/unit/assets/sprite1'}, {id: 'sprite2', url: 'http://localhost:9966/test/unit/assets/sprite2'}], manager, 1, (err, result) => {
             expect(err).toBeFalsy();
@@ -90,25 +94,11 @@ describe('loadSprite', () => {
             done();
         });
 
-        expect(requests[0].url).toBe('http://localhost:9966/test/unit/assets/sprite1.json');
-        requests[0].setStatus(200);
-        requests[0].response = fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.json'));
-        requests[0].onload();
-
-        expect(requests[1].url).toBe('http://localhost:9966/test/unit/assets/sprite1.png');
-        requests[1].setStatus(200);
-        requests[1].response = fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.png')).buffer;
-        requests[1].onload();
-
-        expect(requests[2].url).toBe('http://localhost:9966/test/unit/assets/sprite2.json');
-        requests[2].setStatus(200);
-        requests[2].response = fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite2.json'));
-        requests[2].onload();
-
-        expect(requests[3].url).toBe('http://localhost:9966/test/unit/assets/sprite2.png');
-        requests[3].setStatus(200);
-        requests[3].response = fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite2.png')).buffer;
-        requests[3].onload();
+        server.respond();
+        expect(server.requests[0].url).toBe('http://localhost:9966/test/unit/assets/sprite1.json');
+        expect(server.requests[1].url).toBe('http://localhost:9966/test/unit/assets/sprite1.png');
+        expect(server.requests[2].url).toBe('http://localhost:9966/test/unit/assets/sprite2.json');
+        expect(server.requests[3].url).toBe('http://localhost:9966/test/unit/assets/sprite2.png');
     });
 
     test('error in callback', done => {
@@ -118,20 +108,19 @@ describe('loadSprite', () => {
 
         const manager = new RequestManager(transform);
 
-        const requests = [];
-        fakeXhr.useFakeXMLHttpRequest().onCreate = (req) => { requests.push(req); };
-
+        server.respondWith((xhr) => xhr.respond(500));
+        let last = false;
         loadSprite([{id: 'sprite1', url: 'http://localhost:9966/test/unit/assets/sprite1'}], manager, 1, (err, result) => {
             expect(err).toBeTruthy();
             expect(result).toBeUndefined();
-
-            done();
+            if (!last) {
+                done();
+                last = true;
+            }
         });
 
-        expect(requests[0].url).toBe('http://localhost:9966/test/unit/assets/sprite1.json');
-        requests[0].setStatus(500);
-        requests[0].response = undefined;
-        requests[0].onload();
+        server.respond();
+        expect(server.requests[0].url).toBe('http://localhost:9966/test/unit/assets/sprite1.json');
     });
 
     test('request canceling', done => {
@@ -141,30 +130,24 @@ describe('loadSprite', () => {
 
         const manager = new RequestManager(transform);
 
-        const requests = [];
-        fakeXhr.useFakeXMLHttpRequest().onCreate = (req) => { requests.push(req); };
+        server.respondWith('GET', 'http://localhost:9966/test/unit/assets/sprite1.json', fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.json')).toString());
+        server.respondWith('GET', 'http://localhost:9966/test/unit/assets/sprite1.png', bufferToArrayBuffer(fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.png'))));
 
         const cancelable = loadSprite([{id: 'sprite1', url: 'http://localhost:9966/test/unit/assets/sprite1'}], manager, 1, () => {});
 
         setTimeout(() => {
             cancelable.cancel();
 
-            expect(requests[0].aborted).toBeTruthy();
-            expect(requests[1].aborted).toBeTruthy();
+            expect((server.requests[0] as any).aborted).toBeTruthy();
+            expect((server.requests[1] as any).aborted).toBeTruthy();
 
             done();
         });
 
         setTimeout(() => {
-            expect(requests[0].url).toBe('http://localhost:9966/test/unit/assets/sprite1.json');
-            requests[0].setStatus(200);
-            requests[0].response = fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.json'));
-            requests[0].onload();
-
-            expect(requests[1].url).toBe('http://localhost:9966/test/unit/assets/sprite1.png');
-            requests[1].setStatus(200);
-            requests[1].response = fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.png')).buffer;
-            requests[1].onload();
+            server.respond();
+            expect(server.requests[0].url).toBe('http://localhost:9966/test/unit/assets/sprite1.json');
+            expect(server.requests[1].url).toBe('http://localhost:9966/test/unit/assets/sprite1.png');
         }, 10);
     });
 
@@ -175,8 +158,8 @@ describe('loadSprite', () => {
 
         const manager = new RequestManager(transform);
 
-        const requests = [];
-        fakeXhr.useFakeXMLHttpRequest().onCreate = (req) => { requests.push(req); };
+        server.respondWith('GET', 'http://localhost:9966/test/unit/assets/sprite1@2x.json', fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.json')).toString());
+        server.respondWith('GET', 'http://localhost:9966/test/unit/assets/sprite1@2x.png', bufferToArrayBuffer(fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.png'))));
 
         loadSprite('http://localhost:9966/test/unit/assets/sprite1', manager, 2, (err, result) => {
             expect(err).toBeFalsy();
@@ -196,14 +179,8 @@ describe('loadSprite', () => {
             done();
         });
 
-        expect(requests[0].url).toBe('http://localhost:9966/test/unit/assets/sprite1@2x.json');
-        requests[0].setStatus(200);
-        requests[0].response = fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.json'));
-        requests[0].onload();
-
-        expect(requests[1].url).toBe('http://localhost:9966/test/unit/assets/sprite1@2x.png');
-        requests[1].setStatus(200);
-        requests[1].response = fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.png')).buffer;
-        requests[1].onload();
+        server.respond();
+        expect(server.requests[0].url).toBe('http://localhost:9966/test/unit/assets/sprite1@2x.json');
+        expect(server.requests[1].url).toBe('http://localhost:9966/test/unit/assets/sprite1@2x.png');
     });
 });

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

@@ -725,6 +725,9 @@ export class Style extends Evented {
 
         this.stylesheet = nextState;
 
+        // reset serialization field, to be populated only when needed
+        this._serializedLayers = null;
+
         return true;
     }
 

package/src/style/style_glyph.ts

@@ -1,14 +1,15 @@
 import type {AlphaImage} from '../util/image';
 
-/**
- * The glyph's metrices
- */
 export type GlyphMetrics = {
     width: number;
     height: number;
     left: number;
     top: number;
     advance: number;
+    /**
+     * isDoubleResolution = true for 48px textures
+     */
+    isDoubleResolution?: boolean;
 };
 
 /**

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/symbol/quads.ts

@@ -274,10 +274,12 @@ export function getGlyphQuads(
                 builtInOffset = [0, 0];
             }
 
+            const textureScale = positionedGlyph.metrics.isDoubleResolution ? 2 : 1;
+
             const x1 = (positionedGlyph.metrics.left - rectBuffer) * positionedGlyph.scale - halfAdvance + builtInOffset[0];
             const y1 = (-positionedGlyph.metrics.top - rectBuffer) * positionedGlyph.scale + builtInOffset[1];
-            const x2 = x1 + textureRect.w * positionedGlyph.scale / pixelRatio;
-            const y2 = y1 + textureRect.h * positionedGlyph.scale / pixelRatio;
+            const x2 = x1 + textureRect.w / textureScale * positionedGlyph.scale / pixelRatio;
+            const y2 = y1 + textureRect.h / textureScale * positionedGlyph.scale / pixelRatio;
 
             const tl = new Point(x1, y1);
             const tr = new Point(x2, y1);

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

@@ -288,6 +288,23 @@ describe('Map', () => {
 
         });
 
+        test('setStyle back to the first style should work', done => {
+            const redStyle = {version: 8 as const, sources: {}, layers: [
+                {id: 'background', type: 'background' as const, paint: {'background-color': 'red'}},
+            ]};
+            const blueStyle = {version: 8 as const, sources: {}, layers: [
+                {id: 'background', type: 'background' as const, paint: {'background-color': 'blue'}},
+            ]};
+            const map = createMap({style: redStyle});
+            map.setStyle(blueStyle);
+            map.once('style.load', () => {
+                map.setStyle(redStyle);
+                const serializedStyle =  map.style.serialize();
+                expect(serializedStyle.layers[0].paint['background-color']).toBe('red');
+                done();
+            });
+        });
+
         test('style transform overrides unmodified map transform', done => {
             const map = new Map({container: window.document.createElement('div')} as any as MapOptions);
             map.transform.lngRange = [-120, 140];

package/src/ui/map.ts

@@ -2562,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();
 
@@ -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/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/offscreen_canvas_distorted.test.ts

@@ -0,0 +1,13 @@
+import {isOffscreenCanvasDistorted} from './offscreen_canvas_distorted';
+import {Canvas} from 'canvas';
+import {offscreenCanvasSupported} from './offscreen_canvas_supported';
+
+test('normal operation does not mangle canvas', () => {
+    const OffscreenCanvas = (window as any).OffscreenCanvas = jest.fn((width:number, height: number) => {
+        return new Canvas(width, height);
+    });
+    expect(offscreenCanvasSupported()).toBeTruthy();
+    OffscreenCanvas.mockClear();
+    expect(isOffscreenCanvasDistorted()).toBeFalsy();
+    expect(OffscreenCanvas).toHaveBeenCalledTimes(1);
+});