maplibre-gl 3.5.2 → 3.6.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "maplibre-gl",
   "description": "BSD licensed community fork of mapbox-gl, a WebGL interactive maps library",
-  "version": "3.5.2",
+  "version": "3.6.1",
   "main": "dist/maplibre-gl.js",
   "style": "dist/maplibre-gl.css",
   "license": "BSD-3-Clause",
@@ -21,11 +21,11 @@
     "@mapbox/vector-tile": "^1.3.1",
     "@mapbox/whoots-js": "^3.1.0",
     "@maplibre/maplibre-gl-style-spec": "^19.3.3",
-    "@types/geojson": "^7946.0.12",
-    "@types/mapbox__point-geometry": "^0.1.3",
+    "@types/geojson": "^7946.0.13",
+    "@types/mapbox__point-geometry": "^0.1.4",
     "@types/mapbox__vector-tile": "^1.3.3",
     "@types/pbf": "^3.0.4",
-    "@types/supercluster": "^7.1.2",
+    "@types/supercluster": "^7.1.3",
     "earcut": "^2.2.4",
     "geojson-vt": "^3.2.1",
     "gl-matrix": "^3.4.3",
@@ -45,49 +45,49 @@
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-json": "^6.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-replace": "^5.0.4",
+    "@rollup/plugin-replace": "^5.0.5",
     "@rollup/plugin-strip": "^3.0.4",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.5",
-    "@types/benchmark": "^2.1.3",
+    "@types/benchmark": "^2.1.5",
     "@types/cssnano": "^5.0.0",
-    "@types/d3": "^7.4.1",
-    "@types/diff": "^5.0.7",
-    "@types/earcut": "^2.1.3",
-    "@types/eslint": "^8.44.6",
-    "@types/geojson-vt": "3.2.3",
+    "@types/d3": "^7.4.2",
+    "@types/diff": "^5.0.8",
+    "@types/earcut": "^2.1.4",
+    "@types/eslint": "^8.44.7",
+    "@types/geojson-vt": "3.2.4",
     "@types/gl": "^6.0.4",
     "@types/glob": "^8.1.0",
     "@types/jest": "^29.5.3",
-    "@types/jsdom": "^21.1.3",
-    "@types/minimist": "^1.2.4",
+    "@types/jsdom": "^21.1.5",
+    "@types/minimist": "^1.2.5",
     "@types/murmurhash-js": "^1.0.5",
-    "@types/nise": "^1.4.2",
+    "@types/nise": "^1.4.4",
     "@types/node": "^20.8.3",
-    "@types/offscreencanvas": "^2019.7.2",
-    "@types/pixelmatch": "^5.2.4",
-    "@types/pngjs": "^6.0.3",
-    "@types/react": "^18.2.31",
-    "@types/react-dom": "^18.2.13",
-    "@types/request": "^2.48.11",
-    "@types/shuffle-seed": "^1.1.1",
-    "@types/window-or-global": "^1.0.4",
-    "@typescript-eslint/eslint-plugin": "^6.8.0",
-    "@typescript-eslint/parser": "^6.8.0",
+    "@types/offscreencanvas": "^2019.7.3",
+    "@types/pixelmatch": "^5.2.5",
+    "@types/pngjs": "^6.0.4",
+    "@types/react": "^18.2.35",
+    "@types/react-dom": "^18.2.14",
+    "@types/request": "^2.48.12",
+    "@types/shuffle-seed": "^1.1.2",
+    "@types/window-or-global": "^1.0.6",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
     "address": "^2.0.1",
     "benchmark": "^2.1.4",
     "canvas": "^2.11.2",
     "cssnano": "^6.0.1",
     "d3": "^7.8.5",
     "d3-queue": "^3.0.7",
-    "devtools-protocol": "^0.0.1212569",
+    "devtools-protocol": "^0.0.1219864",
     "diff": "^5.1.0",
-    "dts-bundle-generator": "^8.0.1",
-    "eslint": "^8.52.0",
+    "dts-bundle-generator": "^8.1.2",
+    "eslint": "^8.53.0",
     "eslint-config-mourner": "^3.0.0",
     "eslint-plugin-html": "^7.1.0",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-jest": "^27.4.3",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-tsdoc": "0.2.17",
     "expect": "^29.7.0",
@@ -111,10 +111,10 @@
     "postcss-cli": "^10.1.0",
     "postcss-inline-svg": "^6.0.0",
     "pretty-bytes": "^6.1.1",
-    "puppeteer": "^21.3.8",
+    "puppeteer": "^21.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^4.1.4",
+    "rollup": "^4.4.0",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rw": "^1.3.3",
     "semver": "^7.5.4",
@@ -126,8 +126,8 @@
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
     "tslib": "^2.6.2",
-    "typedoc": "^0.25.2",
-    "typedoc-plugin-markdown": "^3.16.0",
+    "typedoc": "^0.25.3",
+    "typedoc-plugin-markdown": "^3.17.1",
     "typedoc-plugin-missing-exports": "^2.1.0",
     "typescript": "^5.2.2"
   },

package/src/style/style.test.ts

@@ -2155,6 +2155,36 @@ describe('Style#setLayerZoomRange', () => {
     });
 });
 
+describe('Style#getLayersOrder', () => {
+    test('returns ids of layers in the correct order', done => {
+        const style = new Style(getStubMap());
+        style.loadJSON({
+            'version': 8,
+            'sources': {
+                'raster': {
+                    type: 'raster',
+                    tiles: ['http://tiles.server']
+                }
+            },
+            'layers': [{
+                'id': 'raster',
+                'type': 'raster',
+                'source': 'raster'
+            }]
+        });
+
+        style.on('style.load', () => {
+            style.addLayer({
+                id: 'custom',
+                type: 'custom',
+                render() {}
+            }, 'raster');
+            expect(style.getLayersOrder()).toEqual(['custom', 'raster']);
+            done();
+        });
+    });
+});
+
 describe('Style#queryRenderedFeatures', () => {
 
     let style;

package/src/style/style.ts

@@ -1008,7 +1008,16 @@ export class Style extends Evented {
     }
 
     /**
-     * checks if a specific layer is present within the style.
+     * Return the ids of all layers currently in the style, including custom layers, in order.
+     *
+     * @returns ids of layers, in order
+     */
+    getLayersOrder(): string[] {
+        return [...this._order];
+    }
+
+    /**
+     * Checks if a specific layer is present within the style.
      *
      * @param id - the id of the desired layer
      * @returns a boolean specifying if the given layer is present

package/src/ui/camera.test.ts

@@ -7,6 +7,7 @@ import {setMatchMedia} from '../util/test/util';
 import {mercatorZfromAltitude} from '../geo/mercator_coordinate';
 import {Terrain} from '../render/terrain';
 import {LngLat, LngLatLike} from '../geo/lng_lat';
+import {Event} from '../util/evented';
 
 beforeEach(() => {
     setMatchMedia();
@@ -974,6 +975,86 @@ describe('#easeTo', () => {
         assertTransitionTime(done, camera, 0, 10);
         camera.easeTo({center: [100, 0], zoom: 3.2, bearing: 90, duration: 1000});
     });
+
+    test('jumpTo on("move") during easeTo with zoom, pitch, etc', (done) => {
+        const camera = createCamera();
+
+        camera.on('moveend', (e: Event & {done?: true}) => {
+            if ('done' in e) {
+                setTimeout(() => {
+                    done();
+                }, 50);
+            }
+        });
+
+        camera.easeTo({zoom: 20, bearing: 90, pitch: 60, duration: 500}, {done: true});
+        camera.once('move', () => {
+            camera.jumpTo({pitch: 40});
+        });
+
+        camera.simulateFrame();
+        camera.simulateFrame();
+    });
+
+    test('jumpTo on("zoom") during easeTo', (done) => {
+        const camera = createCamera();
+
+        camera.on('moveend', (e: Event & {done?: true}) => {
+            if ('done' in e) {
+                setTimeout(() => {
+                    done();
+                }, 50);
+            }
+        });
+
+        camera.easeTo({zoom: 20, duration: 500}, {done: true});
+        camera.once('zoom', () => {
+            camera.jumpTo({pitch: 40});
+        });
+
+        camera.simulateFrame();
+        camera.simulateFrame();
+    });
+
+    test('jumpTo on("pitch") during easeTo', (done) => {
+        const camera = createCamera();
+
+        camera.on('moveend', (e: Event & {done?: true}) => {
+            if ('done' in e) {
+                setTimeout(() => {
+                    done();
+                }, 50);
+            }
+        });
+
+        camera.easeTo({pitch: 60, duration: 500}, {done: true});
+        camera.once('pitch', () => {
+            camera.jumpTo({pitch: 40});
+        });
+
+        camera.simulateFrame();
+        camera.simulateFrame();
+    });
+
+    test('jumpTo on("rotate") during easeTo', (done) => {
+        const camera = createCamera();
+
+        camera.on('moveend', (e: Event & {done?: true}) => {
+            if ('done' in e) {
+                setTimeout(() => {
+                    done();
+                }, 50);
+            }
+        });
+
+        camera.easeTo({bearing: 90, duration: 500}, {done: true});
+        camera.once('rotate', () => {
+            camera.jumpTo({pitch: 40});
+        });
+
+        camera.simulateFrame();
+        camera.simulateFrame();
+    });
 });
 
 describe('#flyTo', () => {

package/src/ui/camera.ts

@@ -1427,7 +1427,9 @@ export abstract class Camera extends Evented {
     _renderFrameCallback = () => {
         const t = Math.min((browser.now() - this._easeStart) / this._easeOptions.duration, 1);
         this._onEaseFrame(this._easeOptions.easing(t));
-        if (t < 1) {
+
+        // if _stop is called during _onEaseFrame from _fireMoveEvents we should avoid a new _requestRenderFrame, checking it by ensuring _easeFrameId was not deleted
+        if (t < 1 && this._easeFrameId) {
             this._easeFrameId = this._requestRenderFrame(this._renderFrameCallback);
         } else {
             this.stop();

package/src/ui/map.test.ts

@@ -811,6 +811,36 @@ describe('Map', () => {
         expect(mapLayer.source).toBe(layer.source);
     });
 
+    describe('#getLayersOrder', () => {
+        test('returns ids of layers in the correct order', done => {
+            const map = createMap({
+                style: extend(createStyle(), {
+                    'sources': {
+                        'raster': {
+                            type: 'raster',
+                            tiles: ['http://tiles.server']
+                        }
+                    },
+                    'layers': [{
+                        'id': 'raster',
+                        'type': 'raster',
+                        'source': 'raster'
+                    }]
+                })
+            });
+
+            map.on('style.load', () => {
+                map.addLayer({
+                    id: 'custom',
+                    type: 'custom',
+                    render() {}
+                }, 'raster');
+                expect(map.getLayersOrder()).toEqual(['custom', 'raster']);
+                done();
+            });
+        });
+    });
+
     describe('#resize', () => {
         test('sets width and height from container clients', () => {
             const map = createMap(),

package/src/ui/map.ts

@@ -2480,6 +2480,20 @@ export class Map extends Camera {
         return this.style.getLayer(id);
     }
 
+    /**
+     * Return the ids of all layers currently in the style, including custom layers, in order.
+     *
+     * @returns ids of layers, in order
+     *
+     * @example
+     * ```ts
+     * const orderedLayerIds = map.getLayersOrder();
+     * ```
+     */
+    getLayersOrder(): string[] {
+        return this.style.getLayersOrder();
+    }
+
     /**
      * Sets the zoom extent for the specified style layer. The zoom extent includes the
      * [minimum zoom level](https://maplibre.org/maplibre-style-spec/layers/#minzoom)

package/src/util/resolve_tokens.test.ts

@@ -10,6 +10,10 @@ test('resolveToken', () => {
     expect(resolveTokens({name: 'Test'}, '{name}')).toBe('Test');
     expect(resolveTokens({name: 'Test'}, '{name}-suffix')).toBe('Test-suffix');
 
+    // No properties.
+    expect(resolveTokens(null, '{name}')).toBe('');
+    expect(resolveTokens(null, '{name}-suffix')).toBe('-suffix');
+
     // Undefined property.
     expect(resolveTokens({}, '{name}')).toBe('');
     expect(resolveTokens({}, '{name}-suffix')).toBe('-suffix');

package/src/util/resolve_tokens.ts

@@ -8,10 +8,10 @@
 export function resolveTokens(
     properties: {
         readonly [x: string]: unknown;
-    },
+    } | null,
     text: string
 ): string {
     return text.replace(/{([^{}]+)}/g, (match, key: string) => {
-        return key in properties ? String(properties[key]) : '';
+        return properties && key in properties ? String(properties[key]) : '';
     });
 }