Add getLayersOrder() to Map and Style (#3279)

* Add getLayersOrder() to Map and Style * Add changelog entry * Add example to Map * Better name for variable in example --------- Co-authored-by: neodescis <[email protected]>
maplibre · Oct 31, 2023 · 381b1de · 381b1de
1 parent 21c0607
commit 381b1de
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,8 @@
 ## main
 
+### ✨ Features and improvements
+
+- Add getLayersOrder() to Map and Style ([#3279](https://github.com/maplibre/maplibre-gl-js/pull/3279))
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes

diff --git a/src/style/style.test.ts b/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;

diff --git a/src/style/style.ts b/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

diff --git a/src/ui/map.test.ts b/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(),

diff --git a/src/ui/map.ts b/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)