From 381b1de9cff429be8cb69c769aafb602ce6158f7 Mon Sep 17 00:00:00 2001
From: neodescis <nsteinbaugh@gmail.com>
Date: Tue, 31 Oct 2023 02:54:38 -0600
Subject: [PATCH] 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 <nsteinbaugh@icr-team.com>
---
 CHANGELOG.md            |  3 +++
 src/style/style.test.ts | 30 ++++++++++++++++++++++++++++++
 src/style/style.ts      | 11 ++++++++++-
 src/ui/map.test.ts      | 30 ++++++++++++++++++++++++++++++
 src/ui/map.ts           | 14 ++++++++++++++
 5 files changed, 87 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index af51fe6330b..88a34a224d2 100644
--- 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
index 643ca0cc48d..bdc325c83d6 100644
--- 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
index 1c5fa4364f6..a43d0ad4c21 100644
--- 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
index d5d90778a57..6ea3ed6af72 100755
--- 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
index e4603ef894f..493b66b9707 100644
--- 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)