@maplibre/maplibre-react-native 11.0.0-alpha.2 → 11.0.0-alpha.21

package/android/src/main/java/org/maplibre/reactnative/components/annotations/MLRNPointAnnotation.java

@@ -0,0 +1,361 @@
+package org.maplibre.reactnative.components.annotations;
+
+import android.content.Context;
+import android.graphics.PointF;
+import android.graphics.Bitmap;
+import android.view.View;
+import androidx.annotation.NonNull;
+
+import org.maplibre.geojson.Point;
+import org.maplibre.android.geometry.LatLng;
+import org.maplibre.android.maps.Style;
+import org.maplibre.android.plugins.annotation.Symbol;
+import org.maplibre.android.plugins.annotation.SymbolManager;
+import org.maplibre.android.plugins.annotation.SymbolOptions;
+import org.maplibre.android.maps.MapLibreMap;
+
+import org.maplibre.reactnative.components.AbstractMapFeature;
+import org.maplibre.reactnative.components.mapview.MLRNMapView;
+import org.maplibre.reactnative.events.PointAnnotationClickEvent;
+import org.maplibre.reactnative.events.PointAnnotationDragEvent;
+import org.maplibre.reactnative.events.constants.EventTypes;
+import org.maplibre.reactnative.utils.GeoJSONUtils;
+import org.maplibre.reactnative.utils.BitmapUtils;
+
+public class MLRNPointAnnotation extends AbstractMapFeature implements View.OnLayoutChangeListener {
+    private Context mContext;
+    private MLRNPointAnnotationManager mManager;
+    private Symbol mAnnotation;
+    private MapLibreMap mMap;
+    private MLRNMapView mMapView;
+
+    private boolean mHasChildren;
+
+    private Point mCoordinate;
+
+    private String mID;
+    private String mTitle;
+    private String mSnippet;
+
+    private Float[] mAnchor;
+    private boolean mIsSelected;
+    private boolean mDraggable;
+
+    private View mChildView;
+    private Bitmap mChildBitmap;
+    private String mChildBitmapId;
+
+    private View mCalloutView;
+    private Symbol mCalloutSymbol;
+    private Bitmap mCalloutBitmap;
+    private String mCalloutBitmapId;
+
+    private static final String MARKER_IMAGE_ID = "MARKER_IMAGE_ID";
+
+    public MLRNPointAnnotation(Context context, MLRNPointAnnotationManager manager) {
+        super(context);
+        mContext = context;
+        mManager = manager;
+    }
+
+    @Override
+    public void addView(View childView, int childPosition) {
+        if (childView instanceof MLRNCallout) {
+            mCalloutView = childView;
+        } else {
+            mChildView = childView;
+        }
+        childView.addOnLayoutChangeListener(this);
+        if (mMapView != null) {
+            mMapView.offscreenAnnotationViewContainer().addView(childView);
+        }
+    }
+
+    @Override
+    public void removeView(View childView) {
+        if (mChildView != null) {
+            mMap.getStyle(new Style.OnStyleLoaded() {
+                @Override
+                public void onStyleLoaded(@NonNull Style style) {
+                    style.removeImage(mChildBitmapId);
+                    mChildView = null;
+                    mCalloutView = null;
+                    mChildBitmap = null;
+                    mChildBitmapId = null;
+                    updateOptions();
+                }
+            });
+        }
+        if (mMapView != null) {
+            mMapView.offscreenAnnotationViewContainer().removeView(childView);
+        }
+    }
+
+    @Override
+    public void addToMap(MLRNMapView mapView) {
+        mMapView = mapView;
+        mMap = mapView.getMapLibreMap();
+        makeMarker();
+
+        if (mChildView != null) {
+            if (!mChildView.isAttachedToWindow()) {
+                mMapView.offscreenAnnotationViewContainer().addView(mChildView);
+            }
+            addBitmapToStyle(mChildBitmap, mChildBitmapId);
+            updateOptions();
+        }
+        if (mCalloutView != null) {
+            if (!mCalloutView.isAttachedToWindow()) {
+                mMapView.offscreenAnnotationViewContainer().addView(mCalloutView);
+            }
+            addBitmapToStyle(mCalloutBitmap, mCalloutBitmapId);
+        }
+    }
+
+    @Override
+    public void removeFromMap(MLRNMapView mapView) {
+        MLRNMapView map = (mMapView != null) ? mMapView : mapView;
+        if (map == null) {
+            return;
+        }
+
+        if (mAnnotation != null) {
+            map.getSymbolManager().delete(mAnnotation);
+        }
+        if (mChildView != null) {
+            map.offscreenAnnotationViewContainer().removeView(mChildView);
+        }
+        if (mCalloutView != null) {
+            map.offscreenAnnotationViewContainer().removeView(mCalloutView);
+        }
+    }
+
+    @Override
+    public void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft, int oldTop,
+            int oldRight, int oldBottom) {
+        if (left == 0 && top == 0 && right == 0 && bottom == 0) {
+            return;
+        }
+        if (left != oldLeft || right != oldRight || top != oldTop || bottom != oldBottom) {
+            refreshBitmap(v, left, top, right, bottom);
+        }
+    }
+
+    private void refreshBitmap(View v, int left, int top, int right, int bottom) {
+        Bitmap bitmap = BitmapUtils.viewToBitmap(v, left, top, right, bottom);
+        String bitmapId = Integer.toString(v.getId());
+        addBitmapToStyle(bitmap, bitmapId);
+        if (v instanceof MLRNCallout) {
+            mCalloutBitmap = bitmap;
+            mCalloutBitmapId = bitmapId;
+        } else {
+            if (bitmap != null) {
+                mChildBitmap = bitmap;
+                mChildBitmapId = bitmapId;
+                updateOptions();
+            }
+        }
+    }
+
+    private void refreshBitmap(View v) {
+        refreshBitmap(v, v.getLeft(), v.getTop(), v.getRight(), v.getBottom());
+    }
+
+    public LatLng getLatLng() {
+        return GeoJSONUtils.toLatLng(mCoordinate);
+    }
+
+    public long getMapboxID() {
+        return mAnnotation == null ? -1 : mAnnotation.getId();
+    }
+
+    public String getID() {
+        return mID;
+    }
+
+    public void setID(String id) {
+        mID = id;
+    }
+
+    public View getCalloutView() {
+        return mCalloutView;
+    }
+
+    public void setCoordinate(Point point) {
+        mCoordinate = point;
+
+        if (mAnnotation != null) {
+            mAnnotation.setLatLng(GeoJSONUtils.toLatLng(point));
+            mMapView.getSymbolManager().update(mAnnotation);
+        }
+        if (mCalloutSymbol != null) {
+            mCalloutSymbol.setLatLng(GeoJSONUtils.toLatLng(point));
+            mMapView.getSymbolManager().update(mCalloutSymbol);
+        }
+    }
+
+    public void setAnchor(float x, float y) {
+        mAnchor = new Float[]{x, y};
+
+        if (mAnnotation != null) {
+            updateAnchor();
+            mMapView.getSymbolManager().update(mAnnotation);
+        }
+    }
+
+    public void setDraggable(Boolean draggable) {
+        mDraggable = draggable;
+        if (mAnnotation != null) {
+            mAnnotation.setDraggable(draggable);
+            mMapView.getSymbolManager().update(mAnnotation);
+        }
+    }
+
+    public Symbol getMarker() {
+        return mAnnotation;
+    }
+
+    public void onSelect(boolean shouldSendEvent) {
+        if (mCalloutView != null) {
+            makeCallout();
+        }
+        if (shouldSendEvent) {
+            mManager.handleEvent(makeEvent(true));
+        }
+    }
+
+    public void onDeselect() {
+        mManager.handleEvent(makeEvent(false));
+        if (mCalloutSymbol != null) {
+            mMapView.getSymbolManager().delete(mCalloutSymbol);
+        }
+    }
+
+    public void onDragStart() {
+        LatLng latLng = mAnnotation.getLatLng();
+        mCoordinate = Point.fromLngLat(latLng.getLongitude(), latLng.getLatitude());
+        mManager.handleEvent(makeDragEvent(EventTypes.ANNOTATION_DRAG_START));
+    }
+
+    public void onDrag() {
+        LatLng latLng = mAnnotation.getLatLng();
+        mCoordinate = Point.fromLngLat(latLng.getLongitude(), latLng.getLatitude());
+        mManager.handleEvent(makeDragEvent(EventTypes.ANNOTATION_DRAG));
+    }
+
+    public void onDragEnd() {
+        LatLng latLng = mAnnotation.getLatLng();
+        mCoordinate = Point.fromLngLat(latLng.getLongitude(), latLng.getLatitude());
+        mManager.handleEvent(makeDragEvent(EventTypes.ANNOTATION_DRAG_END));
+    }
+
+    public void makeMarker() {
+        SymbolOptions options = new SymbolOptions()
+            .withLatLng(GeoJSONUtils.toLatLng(mCoordinate))
+            .withDraggable(mDraggable)
+            .withIconSize(1.0f)
+            .withSymbolSortKey(10.0f);
+        SymbolManager symbolManager = mMapView.getSymbolManager();
+        if (symbolManager != null) {
+            mAnnotation = symbolManager.create(options);
+            updateOptions();
+        }
+    }
+
+    private void updateOptions() {
+        if (mAnnotation != null) {
+            updateIconImage();
+            updateAnchor();
+            mMapView.getSymbolManager().update(mAnnotation);
+        }
+    }
+
+    private void updateIconImage() {
+        if (mChildView != null) {
+            if (mChildBitmapId != null) {
+                mAnnotation.setIconImage(mChildBitmapId);
+            }
+        } else {
+            mAnnotation.setIconImage(MARKER_IMAGE_ID);
+            mAnnotation.setIconAnchor("bottom");
+        }
+    }
+
+    private void updateAnchor() {
+        if (mAnchor != null && mChildView != null && mChildBitmap != null) {
+            int w = mChildBitmap.getWidth();
+            int h = mChildBitmap.getHeight();
+            final float scale = getResources().getDisplayMetrics().density;
+            w = (int) (w / scale);
+            h = (int) (h / scale);
+            mAnnotation.setIconAnchor("top-left");
+            mAnnotation.setIconOffset(new PointF(w * mAnchor[0] * -1, h * mAnchor[1] * -1));
+        }
+    }
+
+    private void makeCallout() {
+        float yOffset = -28f;
+        if (mChildView != null) {
+            if (mChildBitmap != null) {
+                float scale = getResources().getDisplayMetrics().density;
+                int h = (int) mChildBitmap.getHeight() / 2;
+                h = (int) (h / scale);
+                yOffset = (float) h * -1;
+            }
+        }
+        SymbolOptions options = new SymbolOptions()
+            .withLatLng(GeoJSONUtils.toLatLng(mCoordinate))
+            .withIconImage(mCalloutBitmapId)
+            .withIconSize(1.0f)
+            .withIconAnchor("bottom")
+            .withIconOffset(new Float[] {0f, yOffset})
+            .withSymbolSortKey(11.0f)
+            .withDraggable(false);
+        SymbolManager symbolManager = mMapView.getSymbolManager();
+        if (symbolManager != null) {
+            mCalloutSymbol = symbolManager.create(options);
+        }
+    }
+
+    private void addBitmapToStyle(final Bitmap bitmap, final String bitmapId) {
+        if (mMap != null && bitmapId != null && bitmap != null) {
+            mMap.getStyle(new Style.OnStyleLoaded() {
+                @Override
+                public void onStyleLoaded(@NonNull Style style) {
+                    style.addImage(bitmapId, bitmap);
+                }
+            });
+        }
+    }
+
+    private PointAnnotationClickEvent makeEvent(boolean isSelect) {
+        String type = isSelect ? EventTypes.ANNOTATION_SELECTED : EventTypes.ANNOTATION_DESELECTED;
+        LatLng latLng = GeoJSONUtils.toLatLng(mCoordinate);
+        PointF screenPos = getScreenPosition(latLng);
+        return new PointAnnotationClickEvent(this, latLng, screenPos, type);
+    }
+
+    private PointAnnotationDragEvent makeDragEvent(String type) {
+        LatLng latLng = GeoJSONUtils.toLatLng(mCoordinate);
+        PointF screenPos = getScreenPosition(latLng);
+        return new PointAnnotationDragEvent(this, latLng, screenPos, type);
+    }
+
+    private float getDisplayDensity() {
+        return mContext.getResources().getDisplayMetrics().density;
+    }
+
+    private PointF getScreenPosition(LatLng latLng) {
+        PointF screenPos = mMap.getProjection().toScreenLocation(latLng);
+        float density = getDisplayDensity();
+        screenPos.x /= density;
+        screenPos.y /= density;
+        return screenPos;
+    }
+
+    public void refresh() {
+        if (mChildView != null) {
+            refreshBitmap(mChildView);
+        }
+    }
+}

package/android/src/main/java/org/maplibre/reactnative/components/annotations/MLRNPointAnnotationManager.java

@@ -0,0 +1,84 @@
+package org.maplibre.reactnative.components.annotations;
+
+import androidx.annotation.Nullable;
+
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReadableArray;
+import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.common.MapBuilder;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.annotations.ReactProp;
+import org.maplibre.reactnative.components.AbstractEventEmitter;
+import org.maplibre.reactnative.events.constants.EventKeys;
+import org.maplibre.reactnative.utils.GeoJSONUtils;
+
+import java.util.Map;
+
+public class MLRNPointAnnotationManager extends AbstractEventEmitter<MLRNPointAnnotation> {
+    public static final String REACT_CLASS = "MLRNPointAnnotation";
+
+    public MLRNPointAnnotationManager(ReactApplicationContext reactApplicationContext) {
+        super(reactApplicationContext);
+    }
+
+    @Override
+    public Map<String, String> customEvents() {
+        return MapBuilder.<String, String>builder()
+                .put(EventKeys.POINT_ANNOTATION_SELECTED, "onMapboxPointAnnotationSelected")
+                .put(EventKeys.POINT_ANNOTATION_DESELECTED, "onMapboxPointAnnotationDeselected")
+                .put(EventKeys.POINT_ANNOTATION_DRAG_START, "onMapboxPointAnnotationDragStart")
+                .put(EventKeys.POINT_ANNOTATION_DRAG, "onMapboxPointAnnotationDrag")
+                .put(EventKeys.POINT_ANNOTATION_DRAG_END, "onMapboxPointAnnotationDragEnd")
+                .build();
+    }
+
+    //region React Methods
+    public static final int METHOD_REFRESH = 2;
+
+    @Nullable
+    @Override
+    public Map<String, Integer> getCommandsMap() {
+        return MapBuilder.<String, Integer>builder()
+                .put("refresh", METHOD_REFRESH)
+                .build();
+    }
+
+    @Override
+    public String getName() {
+        return REACT_CLASS;
+    }
+
+    @Override
+    protected MLRNPointAnnotation createViewInstance(ThemedReactContext reactContext) {
+        return new MLRNPointAnnotation(reactContext, this);
+    }
+
+    @ReactProp(name="id")
+    public void setId(MLRNPointAnnotation annotation, String id) {
+        annotation.setID(id);
+    }
+
+    @ReactProp(name="coordinate")
+    public void setCoordinate(MLRNPointAnnotation annotation, String geoJSONStr) {
+        annotation.setCoordinate(GeoJSONUtils.toPointGeometry(geoJSONStr));
+    }
+
+    @ReactProp(name="anchor")
+    public void setAnchor(MLRNPointAnnotation annotation, ReadableMap map) {
+        annotation.setAnchor((float) map.getDouble("x"), (float) map.getDouble("y"));
+    }
+
+    @ReactProp(name="draggable")
+    public void setDraggable(MLRNPointAnnotation annotation, Boolean draggable) {
+        annotation.setDraggable(draggable);
+    }
+
+    @Override
+    public void receiveCommand(MLRNPointAnnotation annotation, int commandID, @Nullable ReadableArray args) {
+        switch (commandID) {
+            case METHOD_REFRESH:
+                annotation.refresh();
+                break;
+        }
+    }
+}

package/android/src/main/java/org/maplibre/reactnative/components/annotations/MarkerView.java

@@ -0,0 +1,23 @@
+package org.maplibre.reactnative.components.annotations;
+
+import android.view.View;
+
+import androidx.annotation.NonNull;
+
+import org.maplibre.android.geometry.LatLng;
+
+/**
+ * Subclass of MarkerView so we MarkerViewManager can implement remove/restoreViews
+ */
+public class MarkerView extends org.maplibre.android.plugins.markerview.MarkerView {
+    View view;
+
+    public MarkerView(@NonNull LatLng latLng, @NonNull View view) {
+        super(latLng, view);
+        this.view = view;
+    }
+
+    public View getView() {
+        return this.view;
+    }
+}

package/android/src/main/java/org/maplibre/reactnative/components/annotations/MarkerViewManager.java

@@ -0,0 +1,69 @@
+package org.maplibre.reactnative.components.annotations;
+
+import androidx.annotation.NonNull;
+
+import org.maplibre.android.maps.MapView;
+import org.maplibre.android.maps.MapLibreMap;
+
+import java.util.ArrayList;
+import java.util.List;
+
+import java.lang.reflect.InvocationTargetException;
+
+/**
+ * Subclass of MarkerViewManager implementing removeViews and restoreViews
+ */
+public class MarkerViewManager extends org.maplibre.android.plugins.markerview.MarkerViewManager {
+    private final List<MarkerView> markers = new ArrayList<>();
+    private MapView mapView;
+    private java.lang.reflect.Method markerUpdate;
+
+    public MarkerViewManager(MapView mapView, MapLibreMap map) {
+        super(mapView, map);
+        this.mapView = mapView;
+        // this.map = map;
+
+        try {     
+            markerUpdate = MarkerView.class.getSuperclass().getDeclaredMethod("update");
+            markerUpdate.setAccessible(true);
+        } 
+        catch (NoSuchMethodException e) {System.out.println(e.toString());}
+    }
+
+    public void addMarker(@NonNull MarkerView markerView) {
+        super.addMarker(markerView);
+        markers.add(markerView);
+    }
+
+    public void removeMarker(@NonNull MarkerView markerView) {
+        super.removeMarker(markerView);
+        markers.remove(markerView);
+    }
+
+    public void removeViews() {
+        for (MarkerView marker: markers) {
+            mapView.removeView(marker.getView());
+        }
+    }
+
+    public void restoreViews() {
+        for (MarkerView marker: markers) {
+            mapView.addView(marker.getView());
+        }
+    }
+
+    public void updateMarkers(){
+
+        try {
+            if (markerUpdate != null) {          
+                for( int i = 0; i < markers.size(); i++ ){
+                    markerUpdate.invoke(markers.get(i));
+                }
+            }
+        } 
+        catch (IllegalArgumentException e) { System.out.println(e.toString()); }
+        catch (IllegalAccessException e) { System.out.println(e.toString()); }
+        catch (InvocationTargetException e) { System.out.println(e.toString()); }
+    }
+
+}