@maplibre/maplibre-react-native 8.6.0-beta.0

package/android/rctmgl/src/main/java/com/mapbox/rctmgl/utils/ExpressionParser.java

@@ -0,0 +1,74 @@
+package com.mapbox.rctmgl.utils;
+
+import com.facebook.react.bridge.Dynamic;
+import com.facebook.react.bridge.ReadableArray;
+import com.facebook.react.bridge.ReadableMap;
+import com.google.gson.JsonArray;
+import com.mapbox.mapboxsdk.style.expressions.Expression;
+import com.mapbox.mapboxsdk.style.expressions.Expression.Converter;
+
+import org.json.JSONArray;
+
+import java.util.Locale;
+
+import javax.annotation.Nullable;
+
+public class ExpressionParser {
+    static final String TYPE_STRING = "string";
+    static final String TYPE_ARRAY = "array";
+    static final String TYPE_NUMBER = "number";
+    static final String TYPE_MAP = "hashmap";
+    static final String TYPE_BOOL = "boolean";
+
+    public static @Nullable Expression from(@Nullable  ReadableArray rawExpressions) {
+        if (rawExpressions == null || rawExpressions.size() == 0) {
+            return null;
+        }
+
+        return Expression.Converter.convert(ConvertUtils.toJsonArray(rawExpressions));
+    }
+
+    public static Expression fromTyped(ReadableMap rawExpressions) {
+        JsonArray array = (JsonArray)ConvertUtils.typedToJsonElement(rawExpressions);
+        return Expression.Converter.convert(array);
+    }
+
+
+
+    public static Expression from(ReadableMap rawExpression) {
+        return Expression.raw("[" + stringExpression(rawExpression) + "]");
+    }
+
+    private static String stringExpression(ReadableMap item) {
+        String expression = "";
+        String type = item.getString("type");
+
+        if (TYPE_STRING.equals(type)) {
+            String value = item.getString("value");
+            expression = String.format(Locale.ENGLISH, "\"%s\"", value);
+        } else if (TYPE_NUMBER.equals(type)) {
+            Double value = item.getDouble("value");
+            expression = String.format(Locale.ENGLISH, "%f", value);
+        } else if (TYPE_BOOL.equals(type)) {
+            Boolean value = item.getBoolean("value");
+            expression = String.format(Locale.ENGLISH, "%b", value);
+        } else if (TYPE_ARRAY.equals(type)) {
+            ReadableArray entries = item.getArray("value");
+
+            expression += "[";
+
+            for (int i = 0; i < entries.size(); i++) {
+                String entryExpression = stringExpression(entries.getMap(i));
+                expression += entryExpression;
+
+                if (i < entries.size() - 1) {
+                    expression += ",";
+                }
+            }
+
+            expression += "]";
+        }
+
+        return expression;
+    }
+}

package/android/rctmgl/src/main/java/com/mapbox/rctmgl/utils/GeoJSONUtils.java

@@ -0,0 +1,209 @@
+package com.mapbox.rctmgl.utils;
+
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.ReadableArray;
+import com.facebook.react.bridge.WritableArray;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.bridge.WritableNativeArray;
+import com.facebook.react.bridge.WritableNativeMap;
+import com.mapbox.geojson.Feature;
+import com.mapbox.geojson.FeatureCollection;
+import com.mapbox.geojson.Geometry;
+import com.mapbox.geojson.GeometryCollection;
+import com.mapbox.geojson.LineString;
+import com.mapbox.geojson.MultiPoint;
+import com.mapbox.geojson.Point;
+import com.mapbox.geojson.Polygon;
+import com.mapbox.mapboxsdk.geometry.LatLng;
+import com.mapbox.mapboxsdk.geometry.LatLngBounds;
+import com.mapbox.mapboxsdk.geometry.LatLngQuad;
+import com.mapbox.mapboxsdk.style.light.Position;
+import com.mapbox.turf.TurfMeasurement;
+
+import java.util.ArrayList;
+import java.util.List;
+
+/**
+ * Created by nickitaliano on 11/7/17.
+ */
+
+public class GeoJSONUtils {
+    public static WritableMap fromFeature(Feature feature) {
+        WritableMap map = Arguments.createMap();
+        map.putString("type", "Feature");
+        map.putString("id", feature.id());
+
+        WritableMap geometry = fromGeometry(feature.geometry());
+        map.putMap("geometry", geometry);
+
+        WritableMap properties = ConvertUtils.toWritableMap(feature.properties());
+        map.putMap("properties", properties);
+
+        return map;
+    }
+
+    public static WritableMap fromGeometry(Geometry geometry) {
+        final String type = geometry.type();
+
+        switch (type) {
+            case "Point":
+                return fromPoint((Point) geometry);
+            case "LineString":
+                return fromLineString((LineString) geometry);
+            case "Polygon":
+                return fromPolygon((Polygon) geometry);
+            default:
+                return null;
+        }
+    }
+
+    public static WritableMap fromPoint(Point point) {
+        WritableMap map = Arguments.createMap();
+        map.putString("type", "Point");
+        map.putArray("coordinates", getCoordinates(point));
+        return map;
+    }
+
+    public static WritableMap fromLineString(LineString lineString) {
+        WritableMap map = Arguments.createMap();
+        map.putString("type", "LineString");
+        map.putArray("coordinates", getCoordinates(lineString));
+        return map;
+    }
+
+    public static WritableMap fromPolygon(Polygon polygon) {
+        WritableMap map = Arguments.createMap();
+        map.putString("type", "Polygon");
+        map.putArray("coordinates", getCoordinates(polygon));
+        return map;
+    }
+
+    public static WritableArray getCoordinates(Point point) {
+        return Arguments.fromArray(pointToDoubleArray(point));
+    }
+
+    public static WritableArray getCoordinates(LineString lineString) {
+        WritableArray array = Arguments.createArray();
+
+        List<Point> points = lineString.coordinates();
+        for (Point point : points) {
+            array.pushArray(Arguments.fromArray(pointToDoubleArray(point)));
+        }
+
+        return array;
+    }
+
+    public static WritableArray getCoordinates(Polygon polygon) {
+        WritableArray array = Arguments.createArray();
+
+        List<List<Point>> points = polygon.coordinates();
+        if (points == null) {
+            return array;
+        }
+
+        for (List<Point> curPoint : points) {
+            WritableArray innerArray = Arguments.createArray();
+
+            for (Point point : curPoint) {
+                innerArray.pushArray(Arguments.fromArray(pointToDoubleArray(point)));
+            }
+
+            array.pushArray(innerArray);
+        }
+
+        return array;
+    }
+
+    public static WritableMap toPointFeature(LatLng latLng, WritableMap properties) {
+        WritableMap map = new WritableNativeMap();
+        map.putString("type", "Feature");
+        map.putMap("geometry", toPointGeometry(latLng));
+        map.putMap("properties", properties);
+        return map;
+    }
+
+    public static WritableMap toPointGeometry(LatLng latLng) {
+        WritableMap geometry = new WritableNativeMap();
+        geometry.putString("type", "Point");
+        geometry.putArray("coordinates", fromLatLng(latLng));
+        return geometry;
+    }
+
+    public static WritableArray fromLatLng(LatLng latLng) {
+        double[] coords = new double[]{ latLng.getLongitude(), latLng.getLatitude() };
+        WritableArray writableCoords = new WritableNativeArray();
+        writableCoords.pushDouble(coords[0]);
+        writableCoords.pushDouble(coords[1]);
+        return writableCoords;
+    }
+
+    public static LatLng toLatLng(Point point) {
+        if (point == null) {
+            return null;
+        }
+        return new LatLng(point.latitude(), point.longitude());
+    }
+
+    public static LatLng toLatLng(ReadableArray coordinates) {
+        if (coordinates == null || coordinates.size() < 2) {
+            return null;
+        }
+        return new LatLng(coordinates.getDouble(1), coordinates.getDouble(0));
+    }
+
+    public static Point toPointGeometry(String featureJSONString) {
+        Feature feature = Feature.fromJson(featureJSONString);
+        if (feature == null) {
+            return null;
+        }
+        return (Point)feature.geometry();
+    }
+
+    public static WritableArray fromLatLngBounds(LatLngBounds latLngBounds) {
+        WritableArray array = Arguments.createArray();
+
+        LatLng[] latLngs = latLngBounds.toLatLngs();
+        for (LatLng latLng : latLngs) {
+            array.pushArray(fromLatLng(latLng));
+        }
+
+        return array;
+    }
+
+    private static GeometryCollection toGeometryCollection(List<Feature> features) {
+        ArrayList<Geometry> geometries = new ArrayList<>();
+        geometries.ensureCapacity(features.size());
+        for (Feature feature : features) {
+            geometries.add(feature.geometry());
+        }
+        return GeometryCollection.fromGeometries(geometries);
+    }
+
+    public static LatLngBounds toLatLngBounds(FeatureCollection featureCollection) {
+        List<Feature> features = featureCollection.features();
+
+        double[] bbox = TurfMeasurement.bbox(toGeometryCollection(features));
+
+        return LatLngBounds.from(bbox[3], bbox[2], bbox[1], bbox[0]);
+    }
+
+    public static LatLngQuad toLatLngQuad(ReadableArray array) {
+        // [top left, top right, bottom right, bottom left]
+        if (array == null || array.size() < 4) {
+            return null;
+        }
+        return new LatLngQuad(
+                toLatLng(array.getArray(0)),
+                toLatLng(array.getArray(1)),
+                toLatLng(array.getArray(2)),
+                toLatLng(array.getArray(3))
+        );
+    }
+
+    public static double[] pointToDoubleArray(Point point) {
+        if (point == null) {
+            return new double[] { 0.0, 0.0 };
+        }
+        return new double[] { point.longitude(), point.latitude() };
+    }
+}

package/android/rctmgl/src/main/java/com/mapbox/rctmgl/utils/GeoViewport.java

@@ -0,0 +1,38 @@
+package com.mapbox.rctmgl.utils;
+
+import android.graphics.PointF;
+
+import com.mapbox.mapboxsdk.geometry.LatLng;
+import com.mapbox.mapboxsdk.geometry.LatLngBounds;
+import com.mapbox.mapboxsdk.geometry.VisibleRegion;
+
+/**
+ * Created by nickitaliano on 1/5/18.
+ * Ported from https://github.com/mapbox/geo-viewport/blob/master/index.js
+ * This port only assumes we will have 512 vector tile sizes
+ */
+
+public class GeoViewport {
+    private static SphericalMercator sphericalMercator = new SphericalMercator();
+
+    public static VisibleRegion getRegion(LatLng centerCoord, int zoomLevel, int viewportWidth, int viewportHeight) {
+        PointF px = sphericalMercator.getPX(centerCoord, zoomLevel);
+
+        LatLng tl = sphericalMercator.getLatLng(new PointF(
+                px.x - (viewportWidth / 2),
+                px.y - (viewportHeight / 2)
+        ), zoomLevel);
+
+        LatLng br = sphericalMercator.getLatLng(new PointF(
+                px.x + (viewportWidth / 2),
+                px.y + (viewportHeight / 2)
+        ), zoomLevel);
+
+        LatLng farLeft = tl;
+        LatLng farRight = new LatLng(tl.getLatitude(), br.getLongitude());
+        LatLng nearLeft = new LatLng(br.getLatitude(), tl.getLongitude());
+        LatLng nearRight = br;
+
+        return new VisibleRegion(farLeft, farRight, nearLeft, nearRight, null);
+    }
+}

package/android/rctmgl/src/main/java/com/mapbox/rctmgl/utils/ImageEntry.java

@@ -0,0 +1,25 @@
+package com.mapbox.rctmgl.utils;
+
+public class ImageEntry {
+    public String uri;
+    public double scale = 1.0;
+    public static final double defaultScale = 0.0;
+
+    public ImageEntry(String _uri, Double _scale) {
+        uri = _uri;
+        scale = _scale;
+    }
+
+    public ImageEntry(String _uri) {
+        uri = _uri;
+        scale = ImageEntry.defaultScale;
+    }
+
+    public double getScaleOr(double v) {
+        if (scale == ImageEntry.defaultScale) {
+            return v;
+        } else {
+            return scale;
+        }
+    }
+}

package/android/rctmgl/src/main/java/com/mapbox/rctmgl/utils/ResourceUtils.java

@@ -0,0 +1,30 @@
+package com.mapbox.rctmgl.utils;
+
+import android.content.Context;
+import android.content.res.Resources;
+import android.graphics.drawable.Drawable;
+import androidx.core.content.ContextCompat;
+
+/**
+ * Created by nickitaliano on 10/19/17.
+ */
+
+public class ResourceUtils {
+    public static Drawable getDrawableByName(Context context, String resourceName) {
+        if (context == null || resourceName == null || resourceName.isEmpty()) {
+            return null;
+        }
+
+        Resources resources = context.getResources();
+        if (resources == null) {
+            return null;
+        }
+
+        final int resID = resources.getIdentifier(resourceName, "drawable", context.getPackageName());
+        if (resID == 0) {
+            return null;
+        }
+        
+        return ContextCompat.getDrawable(context, resID);
+    }
+}

package/android/rctmgl/src/main/java/com/mapbox/rctmgl/utils/SimpleEventCallback.java

@@ -0,0 +1,30 @@
+package com.mapbox.rctmgl.utils;
+
+import com.mapbox.mapboxsdk.maps.MapboxMap;
+
+import com.mapbox.rctmgl.components.AbstractEventEmitter;
+import com.mapbox.rctmgl.events.IEvent;
+
+/**
+ * Created by nickitaliano on 8/31/17.
+ */
+
+public class SimpleEventCallback implements MapboxMap.CancelableCallback {
+    private AbstractEventEmitter mEventEmitter;
+    private IEvent mEvent;
+
+    public SimpleEventCallback(AbstractEventEmitter eventEmitter, IEvent event) {
+        mEventEmitter = eventEmitter;
+        mEvent = event;
+    }
+
+    @Override
+    public void onCancel() {
+        mEventEmitter.handleEvent(mEvent);
+    }
+
+    @Override
+    public void onFinish() {
+        mEventEmitter.handleEvent(mEvent);
+    }
+}

package/android/rctmgl/src/main/java/com/mapbox/rctmgl/utils/SphericalMercator.java

@@ -0,0 +1,69 @@
+package com.mapbox.rctmgl.utils;
+
+import android.graphics.Point;
+import android.graphics.PointF;
+
+import com.mapbox.mapboxsdk.geometry.LatLng;
+
+import java.util.ArrayList;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+/**
+ * Created by nickitaliano on 1/4/18.
+ * Ported from https://github.com/mapbox/sphericalmercator/blob/master/sphericalmercator.js
+ * This port only assumes we will have 512 vector tile sizes
+ */
+
+public class SphericalMercator {
+    public static final double D2R = Math.PI / 180;
+    public static final double R2D = 180 / Math.PI;
+
+    private static Map<String, List<Double>> cache;
+
+    public SphericalMercator() {
+        int tileSize = 512;
+
+        if (cache == null) {
+            cache = new HashMap<>();
+            cache.put("Bc", new ArrayList<Double>());
+            cache.put("Cc", new ArrayList<Double>());
+            cache.put("zc", new ArrayList<Double>());
+            cache.put("Ac", new ArrayList<Double>());
+
+            double size = (double) tileSize;
+            for (int d = 0; d < 30; d++) {
+                cache.get("Bc").add(size / 360);
+                cache.get("Cc").add(size / (2 * Math.PI));
+                cache.get("zc").add(size / 2);
+                cache.get("Ac").add(size);
+                size *= 2;
+            }
+        }
+    }
+
+    public PointF getPX(LatLng latLng, int zoomLevel) {
+        double d = cache.get("zc").get(zoomLevel);
+        double f = Math.min(Math.max(Math.sin(D2R * latLng.getLatitude()), -0.9999), 0.9999);
+        double x = Math.round(d + latLng.getLongitude() * cache.get("Bc").get(zoomLevel));
+        double y = Math.round(d + 0.5 * Math.log((1 + f) / (1 - f)) * (-cache.get("Cc").get(zoomLevel)));
+
+        if (x > cache.get("Ac").get(zoomLevel)) {
+            x = cache.get("Ac").get(zoomLevel);
+        }
+
+        if (y > cache.get("Ac").get(zoomLevel)) {
+            y = cache.get("Ac").get(zoomLevel);
+        }
+
+        return new PointF((float) x, (float) y);
+    }
+
+    public LatLng getLatLng(PointF px, int zoomLevel) {
+        double g = ((double)px.y - cache.get("zc").get(zoomLevel)) / (-cache.get("Cc").get(zoomLevel));
+        double lon = ((double) px.x - cache.get("zc").get(zoomLevel)) / cache.get("Bc").get(zoomLevel);
+        double lat = R2D * (2 * Math.atan(Math.exp(g)) - 0.5 * Math.PI);
+        return new LatLng(lat, lon);
+    }
+}

package/android/rctmgl/src/main/res/drawable/empty.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
+  <size android:height="1dp" android:width="1dp" />
+  <solid android:color="@android:color/transparent" />
+</shape>

package/android/rctmgl/src/main/res/layout/annotation.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:id="@+id/annotation_layout"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content">
+
+    <ImageView
+        android:id="@+id/annotation_img"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent" />
+
+    <LinearLayout
+        android:orientation="vertical"
+        android:id="@+id/annotation_view_container"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content" />
+</RelativeLayout>

package/android/rctmgl/src/main/res/values/strings.xml

@@ -0,0 +1,3 @@
+<resources>
+    <string name="app_name">RCTMGL</string>
+</resources>

package/android/settings.gradle

@@ -0,0 +1 @@
+include ':rctmgl'

package/app.plugin.js

@@ -0,0 +1 @@
+module.exports = require('./plugin/build/withMapbox');

package/babel.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset'],
+  plugins: [['@babel/plugin-proposal-class-properties', {loose: true}]],
+  env: {
+    production: {
+      plugins: ['transform-remove-console'],
+    },
+  },
+};

package/docs/Annotation.md

@@ -0,0 +1,39 @@
+<!-- This file was autogenerated from Annotation.js do not modify -->
+## <MapboxGL.Annotation />
+### 
+
+### props
+| Prop | Type | Default | Required | Description |
+| ---- | :--: | :-----: | :------: | :----------: |
+| id | `string` | `none` | `true` | FIX ME NO DESCRIPTION |
+| animated | `bool` | `false` | `false` | FIX ME NO DESCRIPTION |
+| animationDuration | `number` | `1000` | `false` | FIX ME NO DESCRIPTION |
+| animationEasingFunction | `func` | `Easing.linear` | `false` | FIX ME NO DESCRIPTION |
+| coordinates | `array` | `none` | `false` | FIX ME NO DESCRIPTION |
+| onPress | `func` | `none` | `false` | FIX ME NO DESCRIPTION |
+| children | `any` | `none` | `false` | FIX ME NO DESCRIPTION |
+| style | `any` | `none` | `false` | FIX ME NO DESCRIPTION |
+| icon | `union` | `none` | `false` | FIX ME NO DESCRIPTION |
+
+### methods
+#### onPress()
+
+
+
+##### arguments
+| Name | Type | Required | Description  |
+| ---- | :--: | :------: | :----------: |
+
+
+
+#### symbolStyle()
+
+
+
+##### arguments
+| Name | Type | Required | Description  |
+| ---- | :--: | :------: | :----------: |
+
+
+
+

package/docs/Annotations.md

@@ -0,0 +1,17 @@
+Comparsion of various annotations available in React native mapbox:
+
+|*Feature*              | *SymbolLayer*      |*PointAnnotation*                     |*MarkerView*             |*CircleLayer*        |
+|-----------------------|--------------------|--------------------------------------|-------------------------|---------------------|
+|Can use images         | ✓            |                                      |                         |                     |
+|RN Views as childern   | iOS: static        |iOS: interactive <br/> android: static|interactive              |                     |
+|Interactions           | click              |iOS: full <br/> android: click & drag & callout  | supports full interactivity in the sense that inside MarkerViews one can place any RN View, which can be interacted with. Not to be misunderstood with drag n drop interactivity.                     | click          |
+|Control Z-index        | &check;            |iOS: always on top, android: n/a      |always on top            | &check;             |
+|Clustering             | &check;            |                                      |                         | &check;             |
+|Style with expressions | &check;            |                                      |                         | &check;             |
+|iOS implementation     | [MGLStyleSymbolLayer](https://docs.mapbox.com/ios/api/maps/5.8.0/Classes/MGLSymbolStyleLayer.html)     |[MGLAnnotationView](https://docs.mapbox.com/ios/api/maps/5.8.0/Classes/MGLAnnotationView.html)                     |[MGLAnnotationView](https://docs.mapbox.com/ios/api/maps/5.8.0/Classes/MGLAnnotationView.html)       |[MGLCircleStyleLayer](https://docs.mapbox.com/ios/api/maps/5.8.0/Classes/MGLCircleStyleLayer.html)       |
+|android implementation | [SymbolLayer](https://docs.mapbox.com/android/api/map-sdk/9.0.0/com/mapbox/mapboxsdk/style/layers/SymbolLayer.html)|[annotation.Symbol](https://docs.mapbox.com/android/api/plugins/annotation/0.8.0/com/mapbox/mapboxsdk/plugins/annotation/Symbol.html)|[annotation.Marker](https://docs.mapbox.com/android/api/plugins/markerview/0.4.0/com/mapbox/mapboxsdk/plugins/markerview/MarkerView.html) |[CircleLayer](https://docs.mapbox.com/android/api/map-sdk/9.0.0/com/mapbox/mapboxsdk/style/layers/CircleLayer.html)|
+
+
+Related links:
+* iOS [markers and annotations](https://docs.mapbox.com/ios/maps/overview/markers-and-annotations/)
+* android [annotation plugin](https://docs.mapbox.com/android/plugins/overview/annotation/)