add polyline support

demo/index.html

@@ -24,7 +24,8 @@ <h1>Mapbox test</h1>
     <button onclick="addMarkers()">Markers</button>
     <button onclick="removeAllMarkers()">Remove All Markers</button>
     <!--button onclick="addGeoJSON()">Add GeoJSON</button-->
-    <button onclick="addPolygon()">Poly</button>
+    <button onclick="addPolygon()">Polygon</button>
+    <button onclick="addPolyline()">Polyline</button>
     <button onclick="hideMap()">hide</button><br/><br/>
     <button onclick="getZoomLevel()">getZoom</button>
     <button onclick="zoomIn()">zoom +</button>
@@ -188,6 +189,27 @@ <h1>Mapbox test</h1>
 
   function addPolygon() {
     Mapbox.addPolygon({
+      alpha: 0.25
+      points: [
+        {
+          'lat': 52.3832160,
+          'lng': 4.8991680
+        },
+        {
+          'lat': 52.3632160,
+          'lng': 4.9011680
+        },
+        {
+          'lat': 52.3932160,
+          'lng': 4.8911680
+        }
+      ]
+    });
+  }
+
+  function addPolyline() {
+    Mapbox.addPolyline({
+      alpha: 0.25
       points: [
         {
           'lat': 52.3832160,

src/android/Mapbox.java

@@ -17,6 +17,7 @@
 import com.mapbox.mapboxsdk.annotations.Marker;
 import com.mapbox.mapboxsdk.annotations.MarkerOptions;
 import com.mapbox.mapboxsdk.annotations.PolygonOptions;
+import com.mapbox.mapboxsdk.annotations.PolylineOptions;
 import com.mapbox.mapboxsdk.geometry.LatLng;
 import com.mapbox.mapboxsdk.geometry.LatLngZoom;
 import com.mapbox.mapboxsdk.geometry.CoordinateBounds;
@@ -57,6 +58,7 @@ public class Mapbox extends CordovaPlugin {
   // TODO:
   // private static final String ACTION_REMOVE_MARKER_CALLBACK = "removeMarkerCallback";
   private static final String ACTION_ADD_POLYGON = "addPolygon";
+  private static final String ACTION_ADD_POLYLINE = "addPolyline";
   private static final String ACTION_ADD_GEOJSON = "addGeoJSON";
   private static final String ACTION_GET_CENTER = "getCenter";
   private static final String ACTION_SET_CENTER = "setCenter";
@@ -394,6 +396,30 @@ public void run() {
           });
         }
 
+      } else if (ACTION_ADD_POLYLINE.equals(action)) {
+        cordova.getActivity().runOnUiThread(new Runnable() {
+          @Override
+          public void run() {
+            try {
+              final PolylineOptions polyline = new PolylineOptions();
+              final JSONObject options = args.getJSONObject(0);
+              final JSONArray points = options.getJSONArray("points");
+              for (int i = 0; i < points.length(); i++) {
+                final JSONObject marker = points.getJSONObject(i);
+                final double lat = marker.getDouble("lat");
+                final double lng = marker.getDouble("lng");
+                polyline.add(new LatLng(lat, lng));
+              }
+              polyline.alpha((float)options.getDouble("alpha"));
+              mapView.addPolyline(polyline);
+
+              callbackContext.success();
+            } catch (JSONException e) {
+              callbackContext.error(e.getMessage());
+            }
+          }
+        });
+
       } else if (ACTION_ADD_POLYGON.equals(action)) {
         cordova.getActivity().runOnUiThread(new Runnable() {
           @Override
@@ -408,6 +434,7 @@ public void run() {
                 final double lng = marker.getDouble("lng");
                 polygon.add(new LatLng(lat, lng));
               }
+              polygon.alpha((float)options.getDouble("alpha"));
               mapView.addPolygon(polygon);
 
               callbackContext.success();

src/ios/CDVMapbox.h

@@ -20,6 +20,7 @@
 - (void) animateCamera:(CDVInvokedUrlCommand*)command;
 
 - (void) addPolygon:(CDVInvokedUrlCommand*)command;
+- (void) addPolyline:(CDVInvokedUrlCommand*)command;
 
 - (void) addGeoJSON:(CDVInvokedUrlCommand*)command;
 

src/ios/CDVMapbox.m

@@ -200,6 +200,30 @@ - (void)animateCamera:(CDVInvokedUrlCommand*)command {
   [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
 }
 
+- (void)addPolyline:(CDVInvokedUrlCommand*)command {
+  NSDictionary *args = [command.arguments objectAtIndex:0];
+  NSArray* points = [args objectForKey:@"points"];
+  if (points != nil) {
+    [self.commandDelegate runInBackground:^{
+        CLLocationCoordinate2D *coordinates = malloc(points.count * sizeof(CLLocationCoordinate2D));
+        for (int i=0; i<points.count; i++) {
+          NSDictionary* point = points[i];
+          NSNumber *lat = [point valueForKey:@"lat"];
+          NSNumber *lng = [point valueForKey:@"lng"];
+          coordinates[i] = CLLocationCoordinate2DMake(lat.doubleValue, lng.doubleValue);
+        }
+        NSUInteger numberOfCoordinates = points.count; // sizeof(coordinates) / sizeof(CLLocationCoordinate2D);
+        MGLPolyline *shape = [MGLPolyline polylineWithCoordinates:coordinates count:numberOfCoordinates];
+        [_mapView addAnnotation:shape];
+        CDVPluginResult * pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK];
+        [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
+    }];
+  } else {
+    CDVPluginResult * pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR];
+    [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
+  }
+}
+
 - (void)addPolygon:(CDVInvokedUrlCommand*)command {
   NSDictionary *args = [command.arguments objectAtIndex:0];
   NSArray* points = [args objectForKey:@"points"];

www/Mapbox.js

@@ -65,6 +65,10 @@ module.exports = {
     cordova.exec(successCallback, errorCallback, "Mapbox", "addPolygon", [options]);
   },
 
+  addPolyline: function (options, successCallback, errorCallback) {
+    cordova.exec(successCallback, errorCallback, "Mapbox", "addPolyline", [options]);
+  },
+
   convertCoordinate: function(options, successCallback, errorCallback){
     cordova.exec(successCallback, errorCallback, "Mapbox", "convertCoordinate", [options]);
   },