diff --git a/CHANGELOG.md b/CHANGELOG.md index af51fe6330..88a34a224d 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 643ca0cc48..bdc325c83d 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 1c5fa4364f..a43d0ad4c2 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 d5d90778a5..6ea3ed6af7 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 e4603ef894..493b66b970 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)