Add a method to remove polygons #237

Yermo · Jul 3, 2018 · 2186147 · 2186147
1 parent e0c8042
commit 2186147
Show file tree

Hide file tree

Showing 11 changed files with 200 additions and 27 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,7 +5,14 @@
 [iOS SDK](https://github.com/mapbox/mapbox-gl-native/blob/master/platform/ios/CHANGELOG.md)
 
 
-## [4.1.0](https://github.com/EddyVerbruggen/nativescript-mapbox/tree/4.1.0) (2018-06-28)
+## [4.1.1](https://github.com/EddyVerbruggen/nativescript-mapbox/tree/4.1.1) (2018-07-03)
+[Full Changelog](https://github.com/EddyVerbruggen/nativescript-mapbox/compare/4.1.0...4.1.1)
+
+**Implemented enhancements:**
+
+- Add a method to remove polygons [\#237](https://github.com/EddyVerbruggen/nativescript-mapbox/issues/237)
+
+## [4.1.0](https://github.com/EddyVerbruggen/nativescript-mapbox/tree/4.1.0) (2018-07-02)
 [Full Changelog](https://github.com/EddyVerbruggen/nativescript-mapbox/compare/4.0.0...4.1.0)
 
 **Fixed bugs:**

diff --git a/README.md b/README.md
@@ -185,7 +185,7 @@ exports.onMapReady = onMapReady;
 ```
 
 The methods you can invoke like this from an XML-declared map are:
-`addMarkers`, `setViewport`, `removeMarkers`, `getCenter`, `setCenter`, `getZoomLevel`, `setZoomLevel`, `getViewport`, `getTilt`, `setTilt`, `setMapStyle`, `animateCamera`, `addPolygon`, `addPolyline`, `removePolylines`, `getUserLocation`, `trackUser`, `setOnMapClickListener` and `destroy`.
+`addMarkers`, `setViewport`, `removeMarkers`, `getCenter`, `setCenter`, `getZoomLevel`, `setZoomLevel`, `getViewport`, `getTilt`, `setTilt`, `setMapStyle`, `animateCamera`, `addPolygon`, `removePolygons`, `addPolyline`, `removePolylines`, `getUserLocation`, `trackUser`, `setOnMapClickListener` and `destroy`.
 
 Check out the usage details on the functions below.
 
@@ -458,7 +458,7 @@ The first person to tweet a snowman drawn with this function gets a T-shirt.
   // after adding this, scroll to Amsterdam to see a semi-transparent red square
   mapbox.addPolygon(
       {
-        id: 1,
+        id: 1, // optional, can be used in 'removePolygons'
         fillColor: new Color("red"),
         fillOpacity: 0.7,
 
@@ -494,6 +494,18 @@ The first person to tweet a snowman drawn with this function gets a T-shirt.
       .catch((error: string) => console.log("mapbox addPolygon error: " + error));
 ```
 
+### removePolygons
+You can either remove all polygons by not passing in an argument,
+or remove specific polygon id's (which you specified previously). 
+
+```js
+  // remove all polygons
+  mapbox.removePolygons();
+
+  // remove specific polygons by id
+  mapbox.removePolygons([1, 2]);
+```
+
 ### addPolyline
 Draw a polyline. Connect the points given as parameters.
 

diff --git a/demo/app/main-page.xml b/demo/app/main-page.xml
@@ -108,9 +108,10 @@
               <Button row="6" colSpan="4" text="Clustered GeoJSON" tap="{{ doAddAndClusterGeoJSON }}" class="button" />
             </Android>
 
-            <Button row="7" colSpan="2" text="Add polyline" tap="{{ doAddPolyline }}" class="button" />
-            <Button row="7" col="2" colSpan="2" text="Add polygon" tap="{{ doAddPolygon }}" class="button" />
-            <!--<Button row="7" col="2" colSpan="2" text="Remove polyline" tap="{{ doRemovePolyline }}" class="button" />-->
+            <Button row="7" col="0" text="+polyline" tap="{{ doAddPolyline }}" class="button" />
+            <Button row="7" col="1" text="-polyline" tap="{{ doRemovePolyline }}" class="button" />
+            <Button row="7" col="2" text="+polygon" tap="{{ doAddPolygon }}" class="button" />
+            <Button row="7" col="3" text="-polygon" tap="{{ doRemovePolygon }}" class="button" />
 
             <Button row="8" colSpan="2" text="DL Amsterdam" tap="{{ doDownloadAmsterdam }}" class="button button-offline" />
             <Button row="8" col="2" colSpan="2"  text="DL current view" tap="{{ doDownloadCurrentViewportAsOfflineRegion }}" class="button button-offline" />

diff --git a/demo/app/main-view-model.ts b/demo/app/main-view-model.ts
@@ -596,12 +596,15 @@ export class HelloWorldModel extends Observable {
 
   public doRemovePolyline(): void {
     this.mapbox.removePolylines([1]).then(
-        result => {
-          console.log("Mapbox removePolylines done");
-        },
-        (error: string) => {
-          console.log("mapbox removePolylines error: " + error);
-        }
+        result => console.log("Mapbox removePolylines done"),
+        (error: string) => console.log("mapbox removePolylines error: " + error)
+    );
+  }
+
+  public doRemovePolygon(): void {
+    this.mapbox.removePolygons([1]).then(
+        result => console.log("Mapbox removePolygons done"),
+        (error: string) => console.log("mapbox removePolygons error: " + error)
     );
   }
 

diff --git a/publish/package-lock.json b/publish/package-lock.json
diff --git a/src/mapbox.android.ts b/src/mapbox.android.ts
@@ -41,6 +41,7 @@ let _mapbox: any = {};
 let _accessToken: string;
 let _markers = [];
 let _polylines = [];
+let _polygons = [];
 let _markerIconDownloadCache = [];
 let _locationEngine = null;
 let _locationLayerPlugin = null;
@@ -91,6 +92,7 @@ export class MapboxView extends MapboxViewBase {
                 this.mapView.mapboxMap = mbMap;
 
                 // note that this is not multi-map friendly, but I don't think that's used in real apps anyway
+                _polygons = [];
                 _polylines = [];
                 _markers = [];
 
@@ -491,6 +493,7 @@ export class Mapbox extends MapboxCommon implements MapboxApi {
                   _mapbox.mapView.mapboxMap = mbMap;
 
                   _polylines = [];
+                  _polygons = [];
                   _markers = [];
                   _addMarkers(settings.markers, _mapbox.mapView);
 
@@ -794,8 +797,10 @@ export class Mapbox extends MapboxCommon implements MapboxApi {
         if (options.strokeColor) {
           polygonOptions.strokeColor(Mapbox.getAndroidColor(options.strokeColor));
         }
-
-        theMap.mapboxMap.addPolygon(polygonOptions);
+        _polygons.push({
+          id: options.id || new Date().getTime(),
+          android: theMap.mapboxMap.addPolygon(polygonOptions)
+        });
         resolve();
       } catch (ex) {
         console.log("Error in mapbox.addPolygon: " + ex);
@@ -834,6 +839,24 @@ export class Mapbox extends MapboxCommon implements MapboxApi {
     });
   }
 
+  removePolygons(ids?: Array<any>, nativeMap?): Promise<any> {
+    return new Promise((resolve, reject) => {
+      try {
+        const theMap = nativeMap || _mapbox;
+        for (let p in _polygons) {
+          let polygon = _polygons[p];
+          if (!ids || (polygon.id && ids.indexOf(polygon.id) > -1)) {
+            theMap.mapboxMap.removePolygon(polygon.android);
+          }
+        }
+        resolve();
+      } catch (ex) {
+        console.log("Error in mapbox.removePolygons: " + ex);
+        reject(ex);
+      }
+    });
+  }
+
   removePolylines(ids?: Array<any>, nativeMap?): Promise<any> {
     return new Promise((resolve, reject) => {
       try {

diff --git a/src/mapbox.common.ts b/src/mapbox.common.ts
@@ -346,6 +346,8 @@ export interface MapboxApi {
 
   addPolygon(options: AddPolygonOptions, nativeMap?: any): Promise<any>;
 
+  removePolygons(ids?: Array<any>, nativeMap?: any): Promise<any>;
+
   addPolyline(options: AddPolylineOptions, nativeMap?: any): Promise<any>;
 
   removePolylines(ids?: Array<any>, nativeMap?: any): Promise<any>;
@@ -479,6 +481,8 @@ export interface MapboxViewApi {
 
   addPolygon(options: AddPolygonOptions): Promise<any>;
 
+  removePolygons(ids?: Array<any>): Promise<any>;
+
   addPolyline(options: AddPolylineOptions): Promise<any>;
 
   removePolylines(ids?: Array<any>): Promise<any>;
@@ -573,6 +577,10 @@ export abstract class MapboxViewCommonBase extends ContentView implements Mapbox
     return this.mapbox.addPolygon(options, this.getNativeMapView());
   }
 
+  removePolygons(ids?: Array<any>): Promise<any> {
+    return this.mapbox.removePolygons(ids, this.getNativeMapView());
+  }
+
   addPolyline(options: AddPolylineOptions): Promise<any> {
     return this.mapbox.addPolyline(options, this.getNativeMapView());
   }

diff --git a/src/mapbox.ios.ts b/src/mapbox.ios.ts
@@ -452,10 +452,10 @@ export class Mapbox extends MapboxCommon implements MapboxApi {
         coordinateArray.push([points[p].lng, points[p].lat]);
       }
 
-      const polygonID = "polyline_" + (options.id || new Date().getTime());
+      const polygonID = "polygon_" + (options.id || new Date().getTime());
 
       if (theMap.style.sourceWithIdentifier(polygonID)) {
-        reject("Remove the polyline with this id first with 'removePolylines': " + polygonID);
+        reject("Remove the polygon with this id first with 'removePolygons': " + polygonID);
         return;
       }
 
@@ -527,23 +527,34 @@ export class Mapbox extends MapboxCommon implements MapboxApi {
     });
   }
 
-  private removePolylineById(theMap, id: any): void {
-    const polylineID = "polyline_" + id;
-    const layer = theMap.style.layerWithIdentifier(polylineID);
+  private removePolyById(theMap, id: string): void {
+    let layer = theMap.style.layerWithIdentifier(id);
     if (layer !== null) {
       theMap.style.removeLayer(layer);
     }
-    const source = theMap.style.sourceWithIdentifier(polylineID);
+    // polygons may have a 'stroke' layer
+    layer = theMap.style.layerWithIdentifier(id + "_stroke");
+    if (layer !== null) {
+      theMap.style.removeLayer(layer);
+    }
+    const source = theMap.style.sourceWithIdentifier(id);
     if (source !== null) {
-      console.log(">>> removing source " + polylineID);
       theMap.style.removeSource(source);
     }
   }
 
+  removePolygons(ids?: Array<any>, nativeMap?): Promise<any> {
+    return new Promise((resolve, reject) => {
+      let theMap: MGLMapView = nativeMap || _mapbox.mapView;
+      ids.map(id => this.removePolyById(theMap, "polygon_" + id));
+      resolve();
+    });
+  }
+
   removePolylines(ids?: Array<any>, nativeMap?): Promise<any> {
     return new Promise((resolve, reject) => {
       let theMap: MGLMapView = nativeMap || _mapbox.mapView;
-      ids.map(id => this.removePolylineById(theMap, id));
+      ids.map(id => this.removePolyById(theMap, "polyline_" + id));
       resolve();
     });
   }

diff --git a/src/package-lock.json b/src/package-lock.json
diff --git a/src/package.json b/src/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nativescript-mapbox",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "Native Maps, by Mapbox.",
   "main": "mapbox",
   "typings": "index.d.ts",

diff --git a/src/platforms/ios/Podfile b/src/platforms/ios/Podfile
@@ -1,4 +1 @@
 pod 'Mapbox-iOS-SDK', '~> 4.0.2'
-#pod 'MapboxDirections.swift', :git => 'https://github.com/mapbox/MapboxDirections.swift.git', :tag => 'v0.6.0'
-
-#pod 'MapboxNavigation', '~> 0.18'