Backport annotations to Android

android/src/main/java/com/mapbox/reactnativemapboxgl/ReactNativeMapboxGLAnnotationFactory.java

@@ -0,0 +1,150 @@
+package com.mapbox.reactnativemapboxgl;
+
+import android.graphics.Bitmap;
+import android.graphics.BitmapFactory;
+import android.graphics.Color;
+import android.graphics.drawable.BitmapDrawable;
+import android.graphics.drawable.Drawable;
+import android.support.annotation.RequiresPermission;
+import android.view.View;
+
+import com.facebook.react.bridge.ReadableMap;
+import com.mapbox.mapboxsdk.annotations.Icon;
+import com.mapbox.mapboxsdk.annotations.IconFactory;
+import com.mapbox.mapboxsdk.annotations.Marker;
+import com.mapbox.mapboxsdk.annotations.MarkerOptions;
+import com.mapbox.mapboxsdk.annotations.Polygon;
+import com.mapbox.mapboxsdk.annotations.PolygonOptions;
+import com.mapbox.mapboxsdk.annotations.PolylineOptions;
+import com.mapbox.mapboxsdk.geometry.LatLng;
+import com.mapbox.mapboxsdk.maps.MapView;
+
+import java.io.IOException;
+import java.io.InputStream;
+import java.net.HttpURLConnection;
+import java.net.URL;
+
+public class ReactNativeMapboxGLAnnotationFactory {
+
+    static Drawable drawableFromDrawableName(View view, String drawableName) {
+        Bitmap x;
+        int resID = view.getResources().getIdentifier(drawableName, "drawable", view.getContext().getApplicationContext().getPackageName());
+        x = BitmapFactory.decodeResource(view.getResources(), resID);
+        return new BitmapDrawable(view.getResources(), x);
+    }
+
+    public static Drawable drawableFromUrl(View view, String url) throws IOException {
+        Bitmap x;
+
+        HttpURLConnection connection = (HttpURLConnection) new URL(url).openConnection();
+        connection.connect();
+        InputStream input = connection.getInputStream();
+
+        x = BitmapFactory.decodeStream(input);
+        return new BitmapDrawable(view.getResources(), x);
+    }
+
+    public static MarkerOptions markerFromJS(ReadableMap annotation, View view) {
+        MarkerOptions marker = new MarkerOptions();
+
+        double latitude = annotation.getArray("coordinates").getDouble(0);
+        double longitude = annotation.getArray("coordinates").getDouble(1);
+        LatLng markerCenter = new LatLng(latitude, longitude);
+        marker.position(markerCenter);
+
+        if (annotation.hasKey("title")) {
+            String title = annotation.getString("title");
+            marker.title(title);
+        }
+
+        if (annotation.hasKey("subtitle")) {
+            String subtitle = annotation.getString("subtitle");
+            marker.snippet(subtitle);
+        }
+
+        if (annotation.hasKey("annotationImage")) {
+            ReadableMap annotationImage = annotation.getMap("annotationImage");
+            String annotationURL = annotationImage.getString("url");
+            try {
+                Drawable image;
+                if (annotationURL.startsWith("image!")) {
+                    image = drawableFromDrawableName(view, annotationURL.replace("image!", ""));
+                } else {
+                    image = drawableFromUrl(view, annotationURL);
+                }
+
+                IconFactory iconFactory = IconFactory.getInstance(view.getContext());
+                Icon icon;
+                if (annotationImage.hasKey("height") && annotationImage.hasKey("width")) {
+                    float scale = view.getResources().getDisplayMetrics().density;
+                    int height = Math.round((float)annotationImage.getInt("height") * scale);
+                    int width = Math.round((float)annotationImage.getInt("width") * scale);
+                    icon = iconFactory.fromDrawable(image, width, height);
+                } else {
+                    icon = iconFactory.fromDrawable(image);
+                }
+
+                marker.icon(icon);
+            } catch (Exception e) {
+                e.printStackTrace();
+            }
+        }
+        return marker;
+    }
+
+    static PolylineOptions polylineFromJS(ReadableMap annotation) {
+        PolylineOptions polyline = new PolylineOptions();
+
+        int coordSize = annotation.getArray("coordinates").size();
+        for (int p = 0; p < coordSize; p++) {
+            double latitude = annotation.getArray("coordinates").getArray(p).getDouble(0);
+            double longitude = annotation.getArray("coordinates").getArray(p).getDouble(1);
+            polyline.add(new LatLng(latitude, longitude));
+        }
+
+        if (annotation.hasKey("alpha")) {
+            double strokeAlpha = annotation.getDouble("alpha");
+            polyline.alpha((float) strokeAlpha);
+        }
+
+        if (annotation.hasKey("strokeColor")) {
+            int strokeColor = Color.parseColor(annotation.getString("strokeColor"));
+            polyline.color(strokeColor);
+        }
+
+        if (annotation.hasKey("strokeWidth")) {
+            float strokeWidth = annotation.getInt("strokeWidth");
+            polyline.width(strokeWidth);
+        }
+
+        return polyline;
+    }
+
+    static PolygonOptions polygonFromJS(ReadableMap annotation) {
+        PolygonOptions polygon = new PolygonOptions();
+
+        int coordSize = annotation.getArray("coordinates").size();
+        for (int p = 0; p < coordSize; p++) {
+            double latitude = annotation.getArray("coordinates").getArray(p).getDouble(0);
+            double longitude = annotation.getArray("coordinates").getArray(p).getDouble(1);
+            polygon.add(new LatLng(latitude, longitude));
+        }
+
+        if (annotation.hasKey("alpha")) {
+            double fillAlpha = annotation.getDouble("alpha");
+            polygon.alpha((float) fillAlpha);
+        }
+
+        if (annotation.hasKey("fillColor")) {
+            int fillColor = Color.parseColor(annotation.getString("fillColor"));
+            polygon.fillColor(fillColor);
+        }
+
+        if (annotation.hasKey("strokeColor")) {
+            int strokeColor = Color.parseColor(annotation.getString("strokeColor"));
+            polygon.strokeColor(strokeColor);
+        }
+
+        return polygon;
+    }
+}

android/src/main/java/com/mapbox/reactnativemapboxgl/ReactNativeMapboxGLManager.java

@@ -358,10 +358,32 @@ public class ReactNativeMapboxGLManager extends SimpleViewManager<ReactNativeMap
     // Annotations
 
     public void spliceAnnotations(ReactNativeMapboxGLView view, boolean removeAll, ReadableArray itemsToRemove, ReadableArray itemsToAdd) {
-        // TODO
+        if (removeAll) {
+            view.removeAllAnnotations();
+        } else {
+            int removeCount = itemsToRemove.size();
+            for (int i = 0; i < removeCount; i++) {
+                view.removeAnnotation(itemsToRemove.getString(i));
+            }
+        }
+
+        int addCount = itemsToAdd.size();
+        for (int i = 0; i < addCount; i++) {
+            ReadableMap annotation = itemsToAdd.getMap(i);
+            String type = annotation.getString("type");
+            String name = annotation.getString("id");
+
+            if (type.equals("point")) {
+                view.setMarker(name, ReactNativeMapboxGLAnnotationFactory.markerFromJS(annotation, view));
+            } else if (type.equals("polyline")) {
+                view.setPolyline(name, ReactNativeMapboxGLAnnotationFactory.polylineFromJS(annotation));
+            } else if (type.equals("polygon")) {
+                view.setPolygon(name, ReactNativeMapboxGLAnnotationFactory.polygonFromJS(annotation));
+            }
+        }
     }
 
     public void selectAnnotation(ReactNativeMapboxGLView view, String annotationId, boolean animated) {
-        // TODO
+        view.selectAnnotation(annotationId, animated);
     }
 }

android/src/main/java/com/mapbox/reactnativemapboxgl/ReactNativeMapboxGLView.java

@@ -17,6 +17,11 @@ import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.common.MapBuilder;
 import com.facebook.react.common.ReactConstants;
 import com.facebook.react.uimanager.events.RCTEventEmitter;
+import com.mapbox.mapboxsdk.annotations.Annotation;
+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.camera.CameraPosition;
 import com.mapbox.mapboxsdk.camera.CameraUpdate;
 import com.mapbox.mapboxsdk.camera.CameraUpdateFactory;
@@ -28,6 +33,7 @@ import com.mapbox.mapboxsdk.maps.MapboxMapOptions;
 import com.mapbox.mapboxsdk.maps.OnMapReadyCallback;
 import com.mapbox.mapboxsdk.maps.UiSettings;
 
+import java.util.HashMap;
 import java.util.Map;
 import java.util.logging.Handler;
 
@@ -59,6 +65,11 @@ public class ReactNativeMapboxGLView extends RelativeLayout implements
     private boolean _enableOnRegionDidChange = false;
     private int _paddingTop, _paddingRight, _paddingBottom, _paddingLeft;
 
+    private Map<String, Annotation> _annotations = new HashMap();
+    private Map<String, MarkerOptions> _markerOptions = new HashMap();
+    private Map<String, PolylineOptions> _polylineOptions = new HashMap();
+    private Map<String, PolygonOptions> _polygonOptions = new HashMap();
+
     private android.os.Handler _trackingModeHandler;
 
     @UiThread
@@ -161,6 +172,20 @@ public class ReactNativeMapboxGLView extends RelativeLayout implements
         _map.setOnMyLocationTrackingModeChangeListener(this);
         _map.setOnMyBearingTrackingModeChangeListener(this);
         _map.setOnMyLocationChangeListener(this);
+
+        // Create annotations
+        for (Map.Entry<String, MarkerOptions> entry : _markerOptions.entrySet()) {
+            _annotations.put(entry.getKey(), _map.addMarker(entry.getValue()));
+        }
+        _markerOptions.clear();
+        for (Map.Entry<String, PolylineOptions> entry : _polylineOptions.entrySet()) {
+            _annotations.put(entry.getKey(), _map.addPolyline(entry.getValue()));
+        }
+        _polylineOptions.clear();
+        for (Map.Entry<String, PolygonOptions> entry : _polygonOptions.entrySet()) {
+            _annotations.put(entry.getKey(), _map.addPolygon(entry.getValue()));
+        }
+        _polygonOptions.clear();
     }
 
     private void destroyMapView() {
@@ -490,4 +515,82 @@ public class ReactNativeMapboxGLView extends RelativeLayout implements
             _map.animateCamera(update, duration, new CameraCallback(callback));
         }
     }
+
+    // Annotations
+
+    @Nullable Annotation _removeAnnotation(String name, boolean keep) {
+        if (_map == null) {
+            _markerOptions.remove(name);
+            _polylineOptions.remove(name);
+            _polygonOptions.remove(name);
+            return null;
+        }
+        Annotation annotation = _annotations.remove(name);
+        if (annotation == null) { return null; }
+        if (keep) { return annotation; }
+        _map.removeAnnotation(annotation);
+        return null;
+    }
+
+    public void removeAnnotation(String name) {
+        _removeAnnotation(name, false);
+    }
+
+    public void removeAllAnnotations() {
+        _markerOptions.clear();
+        _polygonOptions.clear();
+        _polygonOptions.clear();
+        _annotations.clear();
+        if (_map != null) {
+            _map.removeAnnotations();
+        }
+    }
+
+    public void setMarker(String name, MarkerOptions options) {
+        Annotation removed = _removeAnnotation(name, true);
+
+        if (_map == null) {
+            _markerOptions.put(name, options);
+        } else {
+            Annotation annotation = _map.addMarker(options);
+            _annotations.put(name, annotation);
+        }
+
+        if (removed != null) { _map.removeAnnotation(removed); }
+    }
+
+    public void setPolyline(String name, PolylineOptions options) {
+        Annotation removed = _removeAnnotation(name, true);
+
+        if (_map == null) {
+            _polylineOptions.put(name, options);
+        } else {
+            Annotation annotation = _map.addPolyline(options);
+            _annotations.put(name, annotation);
+        }
+
+        if (removed != null) { _map.removeAnnotation(removed); }
+    }
+
+    public void setPolygon(String name, PolygonOptions options) {
+        Annotation removed = _removeAnnotation(name, true);
+
+        if (_map == null) {
+            _polygonOptions.put(name, options);
+        } else {
+            Annotation annotation = _map.addPolygon(options);
+            _annotations.put(name, annotation);
+        }
+
+        if (removed != null) { _map.removeAnnotation(removed); }
+    }
+
+    public void selectAnnotation(String name, boolean animated) {
+        if (_map == null) { return; }
+        Annotation annotation = _annotations.get(name);
+        if (annotation == null) { return; }
+        if (!(annotation instanceof Marker)) { return; }
+        Marker marker = (Marker)annotation;
+        _map.selectMarker(marker);
+    }
 }