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

package/android/src/main/java/org/maplibre/reactnative/components/mapview/MLRNMapViewManager.kt

@@ -0,0 +1,193 @@
+package org.maplibre.reactnative.components.mapview
+
+import android.util.Log
+import android.view.View
+import com.facebook.react.bridge.Dynamic
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.bridge.UiThreadUtil
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.LayoutShadowNode
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.viewmanagers.MLRNMapViewManagerDelegate
+import com.facebook.react.viewmanagers.MLRNMapViewManagerInterface
+
+@ReactModule(name = MLRNMapViewManager.REACT_CLASS)
+open class MLRNMapViewManager(context: ReactApplicationContext) :
+    ViewGroupManager<MLRNMapView>(context), MLRNMapViewManagerInterface<MLRNMapView> {
+    private val delegate: MLRNMapViewManagerDelegate<MLRNMapView, MLRNMapViewManager> =
+        MLRNMapViewManagerDelegate(this)
+
+    override fun getDelegate(): ViewManagerDelegate<MLRNMapView> = delegate
+
+    companion object {
+        const val REACT_CLASS: String = "MLRNMapView"
+        const val LOG_TAG: String = "MLRNMapViewManager"
+    }
+
+    override fun getName(): String = REACT_CLASS
+
+
+    private val mViews: MutableMap<Int?, MLRNMapView?> = HashMap()
+
+    override fun createShadowNodeInstance(): LayoutShadowNode {
+        return MapShadowNode(this)
+    }
+
+    override fun getShadowNodeClass(): Class<out LayoutShadowNode?> {
+        return MapShadowNode::class.java
+    }
+
+    override fun onAfterUpdateTransaction(mapView: MLRNMapView) {
+        super.onAfterUpdateTransaction(mapView)
+
+        if (mapView.mapLibreMap == null) {
+            mViews.put(mapView.id, mapView)
+            mapView.init()
+        }
+    }
+
+    override fun addView(parent: MLRNMapView, child: View, index: Int) {
+        parent.addFeature(child, index)
+    }
+
+    override fun getChildCount(parent: MLRNMapView): Int {
+        return parent.featureCount
+    }
+
+    override fun getChildAt(parent: MLRNMapView, index: Int): View? {
+        return parent.getFeatureAt(index).toView();
+    }
+
+    override fun removeViewAt(parent: MLRNMapView, index: Int) {
+        parent.removeFeature(index)
+    }
+
+    override fun createViewInstance(themedReactContext: ThemedReactContext): MLRNMapView {
+        return MLRNMapView(themedReactContext, options = null)
+    }
+
+    override fun onDropViewInstance(mapView: MLRNMapView) {
+        val reactTag = mapView.id
+
+        if (mViews.containsKey(reactTag)) {
+            mViews.remove(reactTag)
+        }
+
+        super.onDropViewInstance(mapView)
+    }
+
+    fun getByReactTag(reactTag: Int): MLRNMapView? {
+        return mViews[reactTag]
+    }
+
+    //region React Props
+
+    @ReactProp(name = "mapStyle")
+    override fun setMapStyle(mapView: MLRNMapView, value: String?) {
+        mapView.setReactMapStyle(value)
+    }
+
+    @ReactProp(name = "light")
+    override fun setLight(mapView: MLRNMapView, value: Dynamic?) {
+        mapView.setReactLight(value?.asMap())
+    }
+
+    @ReactProp(name = "contentInset")
+    override fun setContentInset(mapView: MLRNMapView, value: ReadableMap?) {
+        mapView.setReactContentInset(value)
+    }
+
+    @ReactProp(name = "preferredFramesPerSecond")
+    override fun setPreferredFramesPerSecond(mapView: MLRNMapView, value: Int) {
+        mapView.setReactPreferredFramesPerSecond(value)
+    }
+
+    @ReactProp(name = "dragPan")
+    override fun setDragPan(mapView: MLRNMapView, value: Boolean) {
+        mapView.setReactScrollEnabled(value)
+    }
+
+    @ReactProp(name = "touchAndDoubleTapZoom")
+    override fun setTouchAndDoubleTapZoom(mapView: MLRNMapView, value: Boolean) {
+        mapView.setReactZoomEnabled(value)
+    }
+
+    @ReactProp(name = "touchRotate")
+    override fun setTouchRotate(mapView: MLRNMapView, value: Boolean) {
+        mapView.setReactRotateEnabled(value)
+    }
+
+    @ReactProp(name = "touchPitch")
+    override fun setTouchPitch(mapView: MLRNMapView, value: Boolean) {
+        mapView.setReactPitchEnabled(value)
+    }
+
+    @ReactProp(name = "tintColor")
+    override fun setTintColor(mapView: MLRNMapView, value: Int?) {
+        mapView.setReactTintColor(value)
+    }
+
+    @ReactProp(name = "attribution")
+    override fun setAttribution(mapView: MLRNMapView, value: Boolean) {
+        mapView.setReactAttribution(value)
+    }
+
+    @ReactProp(name = "attributionPosition")
+    override fun setAttributionPosition(mapView: MLRNMapView, value: ReadableMap?) {
+        mapView.setReactAttributionPosition(value)
+    }
+
+    @ReactProp(name = "logo")
+    override fun setLogo(mapView: MLRNMapView, value: Boolean) {
+        mapView.setReactLogo(value)
+    }
+
+    @ReactProp(name = "logoPosition")
+    override fun setLogoPosition(mapView: MLRNMapView, value: ReadableMap?) {
+        mapView.setReactLogoPosition(value)
+    }
+
+    @ReactProp(name = "compass")
+    override fun setCompass(mapView: MLRNMapView, value: Boolean) {
+        mapView.setReactCompass(value)
+    }
+
+    @ReactProp(name = "compassPosition")
+    override fun setCompassPosition(mapView: MLRNMapView, value: ReadableMap?) {
+        mapView.setReactCompassPosition(value)
+    }
+
+    //endregion
+
+    private class MapShadowNode(private val mViewManager: MLRNMapViewManager) : LayoutShadowNode() {
+        override fun dispose() {
+            super.dispose()
+            disposeNativeMapView()
+        }
+
+        /**
+         * We need this mapview to dispose (calls into nativeMap.destroy) before ReactNative starts
+         * tearing down the views in onDropViewInstance.
+         */
+        fun disposeNativeMapView() {
+            val mapView = mViewManager.getByReactTag(reactTag)
+
+            if (mapView != null) {
+                UiThreadUtil.runOnUiThread {
+                    try {
+                        mapView.dispose()
+                    } catch (ex: Exception) {
+                        Log.e(
+                            LOG_TAG, " disposeNativeMapView() exception destroying map view", ex
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+

package/android/src/main/java/org/maplibre/reactnative/components/mapview/MLRNMapViewModule.kt

@@ -0,0 +1,159 @@
+package org.maplibre.reactnative.components.mapview
+
+import com.facebook.react.bridge.Promise
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.module.annotations.ReactModule
+import org.maplibre.android.camera.CameraUpdateFactory.newLatLngBounds
+import org.maplibre.android.geometry.LatLng
+import org.maplibre.android.geometry.LatLngBounds
+import org.maplibre.reactnative.NativeMapViewModuleSpec
+import org.maplibre.reactnative.utils.ConvertUtils
+import org.maplibre.reactnative.utils.ExpressionParser
+import org.maplibre.reactnative.utils.ReactTag
+import org.maplibre.reactnative.utils.ReactTagResolver
+
+@ReactModule(name = NativeMapViewModuleSpec.NAME)
+class MLRNMapViewModule(
+    reactContext: ReactApplicationContext, private val reactTagResolver: ReactTagResolver
+) : NativeMapViewModuleSpec(reactContext) {
+    companion object {
+        const val NAME = "MLRNMapViewModule"
+    }
+
+    private fun withViewportOnUIThread(
+        reactTag: ReactTag, promise: Promise, fn: (MLRNMapView) -> Unit
+    ) {
+        reactTagResolver.withViewResolved(reactTag.toInt(), promise, fn)
+    }
+
+    override fun getCenter(reactTag: Double, promise: Promise) {
+        withViewportOnUIThread(reactTag, promise) {
+            promise.resolve(it.getCenter())
+        }
+    }
+
+    override fun getZoom(reactTag: Double, promise: Promise) {
+        withViewportOnUIThread(reactTag, promise) {
+            promise.resolve(it.getZoom())
+        }
+    }
+
+    override fun getBearing(reactTag: Double, promise: Promise) {
+        withViewportOnUIThread(reactTag, promise) {
+            promise.resolve(it.getBearing())
+        }
+    }
+
+    override fun getPitch(reactTag: Double, promise: Promise) {
+        withViewportOnUIThread(reactTag, promise) {
+            promise.resolve(it.getPitch())
+        }
+    }
+
+    override fun getBounds(reactTag: Double, promise: Promise) {
+        withViewportOnUIThread(reactTag, promise) {
+            promise.resolve(it.getBounds())
+        }
+    }
+
+    override fun getViewState(reactTag: Double, promise: Promise) {
+        withViewportOnUIThread(reactTag, promise) {
+            promise.resolve(it.getViewState())
+        }
+    }
+
+    override fun project(
+        reactTag: Double, coordinate: ReadableMap, promise: Promise
+    ) {
+        withViewportOnUIThread(reactTag, promise) { mapView ->
+            promise.resolve(
+                mapView.project(
+                    LatLng(coordinate.getDouble("latitude"), coordinate.getDouble("longitude"))
+                )
+            )
+        }
+    }
+
+    override fun unproject(
+        reactTag: Double, point: ReadableMap, promise: Promise
+    ) {
+        withViewportOnUIThread(reactTag, promise) { mapView ->
+            promise.resolve(mapView.unproject(ConvertUtils.toPointF(point)))
+        }
+    }
+
+    override fun queryRenderedFeaturesWithCoordinate(
+        reactTag: Double,
+        coordinate: ReadableMap,
+        layers: ReadableArray?,
+        filter: ReadableArray?,
+        promise: Promise
+    ) {
+        withViewportOnUIThread(reactTag, promise) { mapView ->
+            promise.resolve(
+                mapView.queryRenderedFeaturesWithCoordinate(
+                    LatLng(coordinate.getDouble("latitude"), coordinate.getDouble("longitude")),
+                    layers,
+                    ExpressionParser.from(filter),
+                )
+            )
+        }
+    }
+
+    override fun queryRenderedFeaturesWithBounds(
+        reactTag: Double,
+        bounds: ReadableArray?,
+        layers: ReadableArray?,
+        filter: ReadableArray?,
+        promise: Promise
+    ) {
+        withViewportOnUIThread(reactTag, promise) { mapView ->
+            promise.resolve(
+                mapView.queryRenderedFeaturesWithBounds(
+                    if (bounds != null && bounds.size() == 4)
+                        LatLngBounds.from(
+                            bounds.getDouble(3),
+                            bounds.getDouble(2),
+                            bounds.getDouble(1),
+                            bounds.getDouble(0)
+                        )
+                    else
+                        LatLngBounds.world(),
+                    layers, ExpressionParser.from(filter),
+                )
+            )
+        }
+    }
+
+    override fun setSourceVisibility(
+        reactTag: Double,
+        visible: Boolean,
+        sourceId: String,
+        sourceLayerId: String?,
+        promise: Promise
+    ) {
+        withViewportOnUIThread(reactTag, promise) {
+            promise.resolve(it.setSourceVisibility(visible, sourceId, sourceLayerId))
+        }
+    }
+
+    override fun takeSnap(
+        reactTag: Double, writeToDisk: Boolean, promise: Promise
+    ) {
+        withViewportOnUIThread(reactTag, promise) {
+            it.takeSnap(writeToDisk) { payload ->
+                promise.resolve(payload)
+            }
+        }
+    }
+
+    override fun showAttribution(
+        reactTag: Double, promise: Promise
+    ) {
+        withViewportOnUIThread(reactTag, promise) {
+            promise.resolve(it.showAttribution())
+        }
+    }
+}

package/android/src/main/java/org/maplibre/reactnative/components/mapview/helpers/CameraChangeTracker.kt

@@ -0,0 +1,26 @@
+package org.maplibre.reactnative.components.mapview.helpers
+
+class CameraChangeTracker {
+    private var reason: Int = EMPTY
+    var isAnimating: Boolean = false
+
+    fun setReason(reason: Int) {
+        this.reason = reason
+    }
+
+    val isUserInteraction: Boolean
+        get() = reason == USER_GESTURE || reason == DEVELOPER_ANIMATION
+
+    val isAnimated: Boolean
+        get() = reason == DEVELOPER_ANIMATION || reason == SDK_ANIMATION
+    
+    val isEmpty: Boolean
+        get() = reason == EMPTY
+
+    companion object {
+        const val EMPTY: Int = -1
+        const val USER_GESTURE: Int = 1
+        const val DEVELOPER_ANIMATION: Int = 2
+        const val SDK_ANIMATION: Int = 3
+    }
+}

package/android/src/main/java/org/maplibre/reactnative/components/mapview/helpers/LayerSourceInfo.kt

@@ -0,0 +1,74 @@
+package org.maplibre.reactnative.components.mapview.helpers
+
+import org.maplibre.android.style.layers.CircleLayer
+import org.maplibre.android.style.layers.FillExtrusionLayer
+import org.maplibre.android.style.layers.FillLayer
+import org.maplibre.android.style.layers.HeatmapLayer
+import org.maplibre.android.style.layers.HillshadeLayer
+import org.maplibre.android.style.layers.Layer
+import org.maplibre.android.style.layers.LineLayer
+import org.maplibre.android.style.layers.RasterLayer
+import org.maplibre.android.style.layers.SymbolLayer
+
+internal class LayerSourceInfo(layer: Layer?) {
+    val sourceId: String
+
+    val sourceLayerId: String?
+
+    init {
+        when (layer) {
+            is CircleLayer -> {
+                val symbolLayer = layer
+                sourceId = symbolLayer.getSourceId()
+                sourceLayerId = symbolLayer.getSourceLayer()
+            }
+
+            is FillExtrusionLayer -> {
+                val fillExtrusionLayer = layer
+                sourceId = fillExtrusionLayer.getSourceId()
+                sourceLayerId = fillExtrusionLayer.getSourceLayer()
+            }
+
+            is FillLayer -> {
+                val fillLayer = layer
+                sourceId = fillLayer.getSourceId()
+                sourceLayerId = fillLayer.getSourceLayer()
+            }
+
+            is HeatmapLayer -> {
+                val heatmapLayer = layer
+                sourceId = heatmapLayer.getSourceId()
+                sourceLayerId = heatmapLayer.getSourceLayer()
+            }
+
+            is HillshadeLayer -> {
+                val hillshadeLayer = layer
+                sourceId = hillshadeLayer.getSourceId()
+                sourceLayerId = null
+            }
+
+            is LineLayer -> {
+                val lineLayer = layer
+                sourceId = lineLayer.getSourceId()
+                sourceLayerId = lineLayer.getSourceLayer()
+            }
+
+            is RasterLayer -> {
+                val rasterLayer = layer
+                sourceId = rasterLayer.getSourceId()
+                sourceLayerId = null
+            }
+
+            is SymbolLayer -> {
+                val symbolLayer = layer
+                sourceId = symbolLayer.getSourceId()
+                sourceLayerId = symbolLayer.getSourceLayer()
+            }
+
+            else -> {
+                sourceId = ""
+                sourceLayerId = null
+            }
+        }
+    }
+}

package/android/src/main/java/org/maplibre/reactnative/components/sources/MLRNImageSource.java

@@ -0,0 +1,75 @@
+package org.maplibre.reactnative.components.sources;
+
+import android.content.Context;
+import android.util.Log;
+
+import com.facebook.react.views.imagehelper.ResourceDrawableIdHelper;
+
+import org.maplibre.android.geometry.LatLngQuad;
+import org.maplibre.android.style.sources.ImageSource;
+
+import java.net.URL;
+
+import android.net.Uri;
+
+public class MLRNImageSource extends MLRNSource<ImageSource> {
+    public static final String LOG_TAG = "MLRNImageSource";
+
+    private URL mURL;
+    private int mResourceId;
+    private LatLngQuad mCoordQuad;
+
+    public MLRNImageSource(Context context) {
+        super(context);
+    }
+
+    @Override
+    public ImageSource makeSource() {
+        if (this.mURL == null) {
+            return new ImageSource(mID, mCoordQuad, this.mResourceId);
+        }
+        return new ImageSource(mID, mCoordQuad, mURL);
+    }
+
+    @Override
+    public void onPress(OnPressEvent feature) {
+        // ignore, we cannot query raster layers
+    }
+
+    public void setURL(String url) {
+        try {
+            Uri uri = Uri.parse(url);
+
+            if (uri.getScheme() == null) {
+                this.mResourceId = ResourceDrawableIdHelper.getInstance().getResourceDrawableId(this.getContext(), url);
+
+                if (mSource != null) {
+                    mSource.setImage(this.mResourceId);
+                }
+
+            } else {
+
+                mURL = new URL(url);
+
+                if (mSource != null) {
+                    mSource.setUri(mURL.toURI());
+                }
+            }
+
+        } catch (Exception e) {
+            Log.w(LOG_TAG, e.getLocalizedMessage());
+        }
+    }
+
+
+    public void setCoordinates(LatLngQuad coordQuad) {
+        mCoordQuad = coordQuad;
+        try {
+            if (mSource != null) {
+                mSource.setCoordinates(this.mCoordQuad);
+            }
+        } catch (Exception e) {
+            Log.w(LOG_TAG, e.getLocalizedMessage());
+        }
+    }
+}

package/android/src/main/java/org/maplibre/reactnative/components/sources/MLRNImageSourceManager.java

@@ -0,0 +1,66 @@
+package org.maplibre.reactnative.components.sources;
+
+import android.view.View;
+
+import com.facebook.react.bridge.ReadableArray;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.ViewGroupManager;
+import com.facebook.react.uimanager.annotations.ReactProp;
+
+import org.maplibre.android.geometry.LatLngQuad;
+import org.maplibre.reactnative.utils.GeoJSONUtils;
+
+public class MLRNImageSourceManager extends ViewGroupManager<MLRNImageSource> {
+    public static final String REACT_CLASS = "MLRNImageSource";
+
+    @Override
+    public String getName() {
+        return REACT_CLASS;
+    }
+
+    @Override
+    protected MLRNImageSource createViewInstance(ThemedReactContext reactContext) {
+        return new MLRNImageSource(reactContext);
+    }
+
+    @Override
+    public View getChildAt(MLRNImageSource source, int childPosition) {
+        return source.getLayerAt(childPosition);
+    }
+
+    @Override
+    public int getChildCount(MLRNImageSource source) {
+        return source.getLayerCount();
+    }
+
+    @Override
+    public void addView(MLRNImageSource source, View childView, int childPosition) {
+        source.addLayer(childView, childPosition);
+    }
+
+    @Override
+    public void removeViewAt(MLRNImageSource source, int childPosition) {
+        source.removeLayer(childPosition);
+    }
+
+    @ReactProp(name = "id")
+    public void setId(MLRNImageSource source, String id) {
+        source.setID(id);
+    }
+
+    @ReactProp(name = "url")
+    public void setUrl(MLRNImageSource source, String url) {
+        source.setURL(url);
+    }
+
+    @ReactProp(name = "coordinates")
+    public void setCoordinates(MLRNImageSource source, ReadableArray arr) {
+        LatLngQuad quad = GeoJSONUtils.toLatLngQuad(arr);
+
+        if (quad == null) {
+            return;
+        }
+
+        source.setCoordinates(quad);
+    }
+}

package/android/src/main/java/org/maplibre/reactnative/components/sources/MLRNRasterSource.java

@@ -0,0 +1,40 @@
+package org.maplibre.reactnative.components.sources;
+
+import android.content.Context;
+
+import org.maplibre.android.style.sources.RasterSource;
+
+import static org.maplibre.android.style.sources.RasterSource.DEFAULT_TILE_SIZE;
+
+public class MLRNRasterSource extends MLRNTileSource<RasterSource> {
+    private Integer mTileSize;
+
+    public MLRNRasterSource(Context context) {
+        super(context);
+    }
+
+    @Override
+    public RasterSource makeSource() {
+        String configurationUrl = getURL();
+        int tileSize = mTileSize == null ? DEFAULT_TILE_SIZE : mTileSize;
+        if (configurationUrl != null) {
+            return new RasterSource(mID, configurationUrl, tileSize);
+        }
+        return new RasterSource(mID, buildTileset(), tileSize);
+    }
+
+
+    public void setTileSize(int tileSize) {
+        mTileSize = tileSize;
+    }
+
+    @Override
+    public boolean hasPressListener() {
+        return false;
+    }
+
+    @Override
+    public void onPress(OnPressEvent feature) {
+        // ignore, cannot query raster layers
+    }
+}

package/android/src/main/java/org/maplibre/reactnative/components/sources/MLRNRasterSourceManager.java

@@ -0,0 +1,39 @@
+package org.maplibre.reactnative.components.sources;
+
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.annotations.ReactProp;
+
+import java.util.Map;
+
+import javax.annotation.Nonnull;
+
+public class MLRNRasterSourceManager extends MLRNTileSourceManager<MLRNRasterSource> {
+    public static final String REACT_CLASS = "MLRNRasterSource";
+
+    public MLRNRasterSourceManager(ReactApplicationContext reactApplicationContext) {
+        super(reactApplicationContext);
+    }
+
+    @Nonnull
+    @Override
+    public String getName() {
+        return REACT_CLASS;
+    }
+
+    @Nonnull
+    @Override
+    protected MLRNRasterSource createViewInstance(@Nonnull ThemedReactContext reactContext) {
+        return new MLRNRasterSource(reactContext);
+    }
+
+    @ReactProp(name="tileSize")
+    public void setTileSize(MLRNRasterSource source, int tileSize) {
+        source.setTileSize(tileSize);
+    }
+
+    @Override
+    public Map<String, String> customEvents() {
+        return null;
+    }
+}