fix: addSource/addLayer on android

Author: Chris Vietor

demo/app/main-view-model.ts

@@ -418,65 +418,63 @@ export class HelloWorldModel extends Observable {
             );
     }
 
-    // ===================================================================================
-    /**
-*
-* @todo INTEGRATE THIS
-*
-  public doAddLayerAndSource(): void {
-    this.mapbox.addSource(
-        {
-          id: "terrain-source",
-          type: "vector",
-          url: "mapbox://mapbox.mapbox-terrain-v2"
-        }
-    ).then(
-      () => {
-          this.mapbox.addLayer(
-            {
-              id: "terrain-data",
-              source: "terrain-source",
-              sourceLayer: "contour",
-              type: "line",
-              lineJoin: "round",
-              lineCap: "round",
-              lineColor: "#ff69b4",
-              lineWidth: 1,
-            }
-          ).then(
-            () => {
-              console.log("Mapbox doAddLayerAndSource done");
-            },
-            (error: string) => {
-              console.log("mapbox doAddLayerAndSource error: " + error);
-            }
-          );
-        },
-        (error: string) => {
-          console.log("mapbox doAddLayerAndSource error: " + error);
-        }
-    );
-  }
-
-  public doRemoveLayerAndSource(): void {
-    this.mapbox.removeLayer("terrain-data").then(
-      () => {
-          this.mapbox.removeSource("terrain-source").then(
+    public doAddLayerAndSource(): void {
+        this.mapbox
+            .addLayer({
+                id: 'custom-layer-1',
+                type: 'line',
+                source: {
+                    type: 'geojson',
+                    data: {
+                        type: 'Feature',
+                        properties: {},
+                        geometry: {
+                            type: 'LineString',
+                            coordinates: [
+                                [4.744720458984375, 52.47357958606801],
+                                [5.108642578125, 52.24882376803033],
+                            ],
+                        },
+                    },
+                    url: null,
+                },
+                layout: {
+                    'line-cap': 'round',
+                    'line-join': 'round',
+                },
+                paint: {
+                    'line-color': '#053481',
+                    'line-width': 5,
+                    'line-opacity': 0.8,
+                    'line-dash-array': [1, 1, 1, 1],
+                },
+            })
+            .catch(console.error);
+    }
+
+    public doRemoveLayerAndSource(): void {
+        this.mapbox.removeLayer('custom-layer-1').then(
             () => {
-              console.log("Mapbox doRemoveLayerAndSource done");
+                /* 
+                    layer 'custom-layer-1' implicitly added a source under the hood,
+                    so the source id was generate as <layer-id>_source, i.e.: 'custom-layer-1_source'
+                */
+                const sourceId = 'custom-layer-1_source';
+                this.mapbox.removeSource(sourceId).then(
+                    () => {
+                        console.log('Mapbox doRemoveLayerAndSource done');
+                    },
+                    (error: string) => {
+                        console.log('mapbox doAddSource error: ' + error);
+                    }
+                );
             },
             (error: string) => {
-              console.log("mapbox doAddSource error: " + error);
+                console.log('mapbox doAddSource error: ' + error);
             }
-          );
-        },
-        (error: string) => {
-          console.log("mapbox doAddSource error: " + error);
-        }
-    );
-  }
-
-*/
+        );
+    }
+
     // ===============================================================
 
     // -------------------------------------------------------------------------------
@@ -827,11 +825,11 @@ export class HelloWorldModel extends Observable {
 
     public doGetLayers(): void {
         this.mapbox.getLayers().then((layers) => {
-            layers.map(l => console.log(l.id));
+            layers.map((l) => console.log(l.id));
 
             const alertOptions: AlertOptions = {
                 title: 'All map style layers',
-                message: JSON.stringify(layers.map(l => l.id)),
+                message: JSON.stringify(layers.map((l) => l.id)),
                 okButtonText: 'OK',
             };
             alert(alertOptions);
@@ -841,7 +839,7 @@ export class HelloWorldModel extends Observable {
             if (!!waterwayLayer) {
                 console.log(`getLayer("${waterwayLayer.id}") visible?: ${waterwayLayer.visibility()}`);
             }
-        })
+        });
     }
 
     public doToggleLayers(): void {

src/mapbox.android.ts

@@ -2756,15 +2756,15 @@ export class Mapbox extends MapboxCommon implements MapboxApi {
         return new Promise((resolve, reject) => {
             try {
                 const { url, type } = options;
-                const theMap = nativeMap;
+                const theMap = nativeMap || this._mapboxMapInstance;
                 let source;
 
                 if (!theMap) {
                     reject('No map has been loaded');
                     return;
                 }
 
-                if (theMap.mapboxMap.getSource(id)) {
+                if (theMap.getStyle().getSource(id)) {
                     reject('Source exists: ' + id);
                     return;
                 }
@@ -2787,13 +2787,7 @@ export class Mapbox extends MapboxCommon implements MapboxApi {
                             CLog(CLogTypes.info, 'Mapbox:addSource(): adding feature');
                         }
 
-                        // com.mapbox.mapboxsdk.maps.Style
-
-                        const geoJsonSource = new com.mapbox.mapboxsdk.style.sources.GeoJsonSource(id, feature);
-
-                        this._mapboxMapInstance.getStyle().addSource(geoJsonSource);
-
-                        // this.gcFix('com.mapbox.mapboxsdk.style.sources.GeoJsonSource', geoJsonSource);
+                        source = new com.mapbox.mapboxsdk.style.sources.GeoJsonSource(id, feature);
 
                         // To support handling click events on lines and circles, we keep the underlying
                         // feature.
@@ -2833,7 +2827,7 @@ export class Mapbox extends MapboxCommon implements MapboxApi {
                     return;
                 }
 
-                theMap.mapboxMap.addSource(source);
+                theMap.getStyle().addSource(source);
                 resolve();
             } catch (ex) {
                 if (Trace.isEnabled()) {
@@ -2853,15 +2847,13 @@ export class Mapbox extends MapboxCommon implements MapboxApi {
     removeSource(id: string, nativeMap?): Promise<void> {
         return new Promise((resolve, reject) => {
             try {
-                const theMap = nativeMap;
+                const theMap = nativeMap || this._mapboxMapInstance;
 
                 if (!theMap) {
                     reject('No map has been loaded');
                     return;
                 }
 
-                theMap.mapboxMap.removeSource(id);
-
                 // if we've cached the underlying feature, remove it.
                 //
                 // since we don't know if it's a line or a circle we have to check both lists.
@@ -2909,16 +2901,20 @@ export class Mapbox extends MapboxCommon implements MapboxApi {
      * @link https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers
      */
 
-    public addLayer(style, nativeMapView?): Promise<void> {
+    public addLayer(style, nativeMap?): Promise<void> {
         let retval;
+        const theMap = nativeMap || this._mapboxMapInstance;
+        if (!theMap) {
+            return Promise.reject('No map has been loaded');
+        }
 
         switch (style.type) {
             case 'line':
-                retval = this.addLineLayer(style, nativeMapView);
+                retval = this.addLineLayer(style, theMap);
                 break;
 
             case 'circle':
-                retval = this.addCircleLayer(style, nativeMapView);
+                retval = this.addCircleLayer(style, theMap);
                 break;
 
             default:
@@ -2930,8 +2926,6 @@ export class Mapbox extends MapboxCommon implements MapboxApi {
         return retval;
     }
 
-    // -----------------------------------------------------------------------
-
     /**
      * remove layer by ID
      *
@@ -2940,12 +2934,15 @@ export class Mapbox extends MapboxCommon implements MapboxApi {
      * @param {string} id
      */
 
-    public async removeLayer(id: string, nativeMapViewInstance) {
-        this._mapboxMapInstance.getStyle().removeLayer(id);
+    public async removeLayer(id: string, nativeMap?) {
+        const theMap = nativeMap || this._mapboxMapInstance;
+
+        theMap.getStyle().removeLayer(id);
+
         if (Trace.isEnabled()) {
             CLog(CLogTypes.info, 'Mapbox:removeLayer(): after removing layer');
         }
-    } // end of removeLayer()
+    }
 
     // -------------------------------------------------------------------------------------
 

src/mapbox.ios.ts

@@ -2382,7 +2382,7 @@ export class Mapbox extends MapboxCommon implements MapboxApi {
      * @param {string} id
      */
 
-    public async removeLayer(id: string, nativeMapViewInstance) {
+    public async removeLayer(id: string, nativeMapViewInstance?) {
         const theMap: MGLMapView = nativeMapViewInstance || this._mapboxViewInstance;
 
         if (Trace.isEnabled()) {