From c29d3003649088a11ee461725fe361196049d125 Mon Sep 17 00:00:00 2001 From: Eddy Verbruggen Date: Wed, 26 Oct 2016 17:03:20 +0200 Subject: [PATCH] Question: remove the polyline #47 --- README.md | 14 +++++++++++++- mapbox-common.js | 4 ++++ mapbox.android.js | 29 ++++++++++++++++++++++++----- mapbox.d.ts | 18 ++++++++++++++++++ mapbox.ios.js | 14 ++++++++++++++ 5 files changed, 73 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index ec690b8..ccaad91 100755 --- a/README.md +++ b/README.md @@ -134,7 +134,7 @@ exports.onMapReady = onMapReady; Other methods you can invoke like this from an XML-declared map are: `removeMarkers`, `setCenter`, `setZoomLevel`, `setViewport`, `setTilt`, -`animateCamera`, `addPolygon` and `addPolyline`. +`animateCamera`, `addPolygon`, `addPolyline` and `removePolylines`. Check out the usage details on the functions below. @@ -401,6 +401,18 @@ Draw a polyline. Connect the points given as parameters. }); ``` +### removePolylines (Android) +You can either remove all polylines by not passing in an argument, +or remove specific polyline id's (which you specified previously). + +```js + // remove all polylines + mapbox.removePolylines(); + + // remove specific polylines by id + mapbox.removePolylines([1, 2]); +``` + ## Offline maps For situations where you want the user to pre-load certain regions you can use these methods to create and remove offline regions. diff --git a/mapbox-common.js b/mapbox-common.js index ff86971..51e6513 100755 --- a/mapbox-common.js +++ b/mapbox-common.js @@ -115,6 +115,10 @@ var Mapbox = (function (_super) { mapbox.addPolyline(args, this.native); }; + Mapbox.prototype.removePolylines = function (args) { + mapbox.removePolylines(args, this.native); + }; + // properties that can be set from XML Object.defineProperty(Mapbox.prototype, "accessToken", { set: function (value) { diff --git a/mapbox.android.js b/mapbox.android.js index 2bfc776..6d91e46 100755 --- a/mapbox.android.js +++ b/mapbox.android.js @@ -4,6 +4,7 @@ var frame = require("ui/frame"); var fs = require("file-system"); var mapbox = require("./mapbox-common"); mapbox._markers = []; +mapbox._polylines = []; var ACCESS_FINE_LOCATION_PERMISSION_REQUEST_CODE = 111; mapbox.locationServices = null; @@ -174,6 +175,7 @@ mapbox.show = function(arg) { // mapbox.mapboxMap.setStyleUrl(mapbox._getMapStyle(settings.style)); // mapbox.mapboxMap.setStyleUrl(com.mapbox.mapboxsdk.constants.Style.DARK); + mapbox._polylines = []; mapbox._markers = []; mapbox._addMarkers(settings.markers); @@ -344,7 +346,6 @@ mapbox.removeMarkers = function (ids, nativeMap) { mapbox._removeMarkers = function (ids, nativeMap) { var theMap = nativeMap || mapbox; - var markersToRemove = []; for (var m in mapbox._markers) { var marker = mapbox._markers[m]; if (!ids || (marker.id && ids.indexOf(marker.id) > -1)) { @@ -412,7 +413,6 @@ mapbox._addMarkers = function(markers, nativeMap) { console.log("Marker icon not found, using the default instead. Requested full path: " + iconFullPath); } } - // marker.android = markerOptions; marker.android = theMap.mapboxMap.addMarker(markerOptions); } }; @@ -603,13 +603,14 @@ mapbox.addPolyline = function (arg, nativeMap) { } var polylineOptions = new com.mapbox.mapboxsdk.annotations.PolylineOptions(); - polylineOptions.width(arg.width || 5); //Default width 5 - polylineOptions.color(arg.color || 0xff000000); //Default color black + polylineOptions.width(arg.width || 5); // default 5 + polylineOptions.color(arg.color || 0xff000000); // default black for (var p in points) { var point = points[p]; polylineOptions.add(new com.mapbox.mapboxsdk.geometry.LatLng(point.lat, point.lng)); } - theMap.mapboxMap.addPolyline(polylineOptions); + arg.android = theMap.mapboxMap.addPolyline(polylineOptions); + mapbox._polylines.push(arg); resolve(); } catch (ex) { console.log("Error in mapbox.addPolyline: " + ex); @@ -618,6 +619,24 @@ mapbox.addPolyline = function (arg, nativeMap) { }); }; +mapbox.removePolylines = function (ids, nativeMap) { + return new Promise(function (resolve, reject) { + try { + var theMap = nativeMap || mapbox; + for (var p in mapbox._polylines) { + var polyline = mapbox._polylines[p]; + if (!ids || (polyline.id && ids.indexOf(polyline.id) > -1)) { + theMap.mapboxMap.removePolyline(polyline.android); + } + } + resolve(); + } catch (ex) { + console.log("Error in mapbox.removePolylines: " + ex); + reject(ex); + } + }); +}; + mapbox.getViewport = function (arg) { return new Promise(function (resolve, reject) { try { diff --git a/mapbox.d.ts b/mapbox.d.ts index 70fbdcd..11bc8a3 100644 --- a/mapbox.d.ts +++ b/mapbox.d.ts @@ -22,6 +22,22 @@ declare module "nativescript-mapbox" { points: LatLng[]; } + export interface AddPolylineOptions { + /** + * Set this in case you want to later pass it to 'removePolylines'. + */ + id?: any; + /** + * Width of the line, default 5. + */ + width?: number; + /** + * Color of the lone, default black (0xff000000). + */ + color?: any; + points: LatLng[]; + } + export interface AddMarkersOption extends LatLng { /** * Set this in case you want to later pass it to 'removeMarker'. @@ -217,6 +233,8 @@ declare module "nativescript-mapbox" { export function getTilt(): Promise; export function addPolygon(arg: AddPolygonOptions): Promise; + export function addPolyline(arg: AddPolylineOptions): Promise; + export function removePolylines(arg?: any): Promise; export function animateCamera(arg: AnimateCameraOptions): Promise; diff --git a/mapbox.ios.js b/mapbox.ios.js index a6a3d02..001d30e 100755 --- a/mapbox.ios.js +++ b/mapbox.ios.js @@ -392,6 +392,20 @@ mapbox.addPolyline = function (arg, nativeMap) { }); }; +mapbox.removePolylines = function (arg, nativeMap) { + return new Promise(function (resolve, reject) { + try { + // TODO + // var theMap = nativeMap || mapbox.mapView; + + reject("not implemented for iOS (yet)"); + } catch (ex) { + console.log("Error in mapbox.removePolylines: " + ex); + reject(ex); + } + }); +}; + mapbox.addPolygon = function (arg, nativeMap) { return new Promise(function (resolve, reject) { try {