feat: belowLayerId support for addLayer

Author: farfromrefug

src/mapbox.android.ts

@@ -2440,12 +2440,11 @@ export class Mapbox extends MapboxCommon implements MapboxApi {
      * @link https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers
      */
 
-    public async addLayer(style, nativeMap?): Promise<void> {
+    public async addLayer(style, belowLayerId?: string, nativeMap?): Promise<void> {
         const theMap = nativeMap || this._mapboxMapInstance;
         if (!theMap) {
             return Promise.reject('No map has been loaded');
         }
-
         let source = null;
         if (typeof style.source != 'string') {
             await this.addSource(style.id + '_source', style.source);
@@ -2455,6 +2454,10 @@ export class Mapbox extends MapboxCommon implements MapboxApi {
         }
 
         const layer = await LayerFactory.createLayer(style, source);
+        if (belowLayerId) {
+            this._mapboxMapInstance.getStyle().addLayerBelow(layer.getNativeInstance(), belowLayerId);
+            return;
+        }
         this._mapboxMapInstance.getStyle().addLayer(layer.getNativeInstance());
     }
 

src/mapbox.common.ts

@@ -612,9 +612,9 @@ export interface MapboxApi {
 
     removeSource(id: string, nativeMap?: any): Promise<any>;
 
-    addLayer(style, nativeMapView?: any): Promise<any>;
+    addLayer(style, belowLayerId?: string, nativeMapView?: any): Promise<any>;
 
-    addLayer(options: AddLayerOptions): Promise<any>;
+    addLayer(options: AddLayerOptions, belowLayerId?: string): Promise<any>;
 
     removeLayer(id: string, nativeMapView?: any): Promise<any>;
 
@@ -750,9 +750,9 @@ export interface MapboxViewApi {
     removeMarkers(options?: any): Promise<any>;
 
     queryRenderedFeatures(options: QueryRenderedFeaturesOptions): Promise<Feature[]>;
-    
+
     querySourceFeatures(sourceId: string, options?: QuerySourceFeaturesOptions): Promise<Feature[]>;
-    
+
     setOnMapClickListener(listener: (data: LatLng) => boolean): Promise<any>;
 
     setOnMapLongClickListener(listener: (data: LatLng) => boolean): Promise<any>;
@@ -803,7 +803,7 @@ export interface MapboxViewApi {
 
     removeSource(id: string, nativeMap?: any): Promise<any>;
 
-    addLayer(style): Promise<any>;
+    addLayer(style, belowLayerId?: string): Promise<any>;
 
     removeLayer(id: string): Promise<any>;
 
@@ -961,8 +961,8 @@ export abstract class MapboxViewCommonBase extends ContentView implements Mapbox
     removeSource(id: string): Promise<any> {
         return this.mapbox.removeSource(id, this.getNativeMapView());
     }
-    addLayer(style): Promise<any> {
-        return this.mapbox.addLayer(style, this.getNativeMapView());
+    addLayer(style, belowLayerId?: string): Promise<any> {
+        return this.mapbox.addLayer(style, belowLayerId, this.getNativeMapView());
     }
     removeLayer(id: string): Promise<any> {
         return this.mapbox.removeLayer(id, this.getNativeMapView());

src/mapbox.ios.ts

@@ -2253,7 +2253,7 @@ export class Mapbox extends MapboxCommon implements MapboxApi {
      *
      * @link https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers
      */
-    public async addLayer(style, nativeMapView?): Promise<void> {
+    public async addLayer(style, belowLayerId?: string, nativeMapView?): Promise<void> {
         const theMap: MGLMapView = nativeMapView || this._mapboxViewInstance;
 
         let source = null;
@@ -2265,6 +2265,13 @@ export class Mapbox extends MapboxCommon implements MapboxApi {
         }
 
         const layer = await LayerFactory.createLayer(style, source);
+        if (belowLayerId) {
+            const belowlayer = theMap.style.layerWithIdentifier(belowLayerId);
+            if (belowlayer) {
+                theMap.style.insertLayerBelowLayer(layer.getNativeInstance(), belowlayer);
+                return;
+            }
+        }
         theMap.style.addLayer(layer.getNativeInstance());
     }