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

package/android/src/main/java/org/maplibre/reactnative/components/camera/MLRNCamera.kt

@@ -0,0 +1,397 @@
+package org.maplibre.reactnative.components.camera
+
+import android.Manifest
+import android.content.Context
+import android.location.Location
+import android.util.AttributeSet
+import androidx.annotation.RequiresPermission
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.events.Event
+import com.facebook.react.uimanager.events.EventDispatcher
+import org.maplibre.android.camera.CameraPosition
+import org.maplibre.android.camera.CameraUpdateFactory.newCameraPosition
+import org.maplibre.android.geometry.LatLngBounds
+import org.maplibre.android.location.OnCameraTrackingChangedListener
+import org.maplibre.android.location.permissions.PermissionsManager
+import org.maplibre.android.maps.MapLibreMap
+import org.maplibre.android.maps.MapLibreMap.CancelableCallback
+import org.maplibre.android.maps.Style
+import org.maplibre.reactnative.components.AbstractMapFeature
+import org.maplibre.reactnative.components.camera.constants.CameraEasing
+import org.maplibre.reactnative.components.location.LocationComponentManager
+import org.maplibre.reactnative.components.mapview.MLRNMapView
+import org.maplibre.reactnative.location.LocationManager
+import org.maplibre.reactnative.location.LocationManager.OnUserLocationChange
+import org.maplibre.reactnative.location.TrackUserLocationMode
+import org.maplibre.reactnative.location.TrackUserLocationState
+import org.maplibre.reactnative.location.UserLocation
+
+class MLRNCamera(context: Context) : AbstractMapFeature(
+    context
+) {
+    @Suppress("UNUSED_PARAMETER")
+    constructor(context: Context, attrs: AttributeSet?) : this(context)
+
+    @Suppress("UNUSED_PARAMETER")
+    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : this(context)
+
+    private var mapView: MLRNMapView? = null
+    private var hasSentFirstRegion = false
+    private val updateQueue = CameraUpdateQueue()
+
+    private var stop: CameraStop? = null
+
+    private var initialViewState: CameraStop? = null
+
+    private var minZoom: Double? = null
+    private var maxZoom: Double? = null
+
+    private var maxBounds: LatLngBounds? = null
+
+
+    private var trackUserLocation = TrackUserLocationMode.NONE
+    private var userTrackingState = TrackUserLocationState.POSSIBLE
+
+    private var locationComponentManager: LocationComponentManager? = null
+
+    private val locationManager: LocationManager = LocationManager.getInstance(context)
+    private val userLocation = UserLocation()
+
+
+    private val locationChangeListener: OnUserLocationChange = object : OnUserLocationChange {
+        override fun onLocationChange(location: Location) {
+            if (mapView!!.mapLibreMap == null || locationComponentManager == null || !locationComponentManager!!.hasLocationComponent() || trackUserLocation == TrackUserLocationMode.NONE) {
+                return
+            }
+
+            userLocation.setCurrentLocation(location);
+        }
+    }
+
+    val eventDispatcher: EventDispatcher?
+        get() {
+            val reactContext = context as ReactContext
+
+            return UIManagerHelper.getEventDispatcherForReactTag(reactContext, id)
+        }
+
+    val surfaceId: Int
+        get() {
+            val reactContext = context as ReactContext
+
+            return UIManagerHelper.getSurfaceId(reactContext)
+        }
+
+    private val cameraCallback: CancelableCallback = object : CancelableCallback {
+        override fun onCancel() {
+            if (!hasSentFirstRegion) {
+                mapView!!.sendRegionChangeEvent(false)
+                hasSentFirstRegion = true
+            }
+        }
+
+        override fun onFinish() {
+            if (!hasSentFirstRegion) {
+                mapView!!.sendRegionChangeEvent(false)
+                hasSentFirstRegion = true
+            }
+        }
+    }
+
+    @RequiresPermission(allOf = [Manifest.permission.ACCESS_FINE_LOCATION, Manifest.permission.ACCESS_COARSE_LOCATION])
+    override fun addToMap(mapView: MLRNMapView) {
+        this@MLRNCamera.mapView = mapView
+
+        setInitialCamera()
+        updateMaxMinZoom()
+        updateMaxBounds()
+
+        if (stop != null) {
+            updateCamera()
+        }
+
+        if (trackUserLocation != TrackUserLocationMode.NONE) {
+            enableLocation()
+        }
+    }
+
+    override fun removeFromMap(mapView: MLRNMapView) {}
+
+    fun handleImperativeStop(stop: ReadableMap?) {
+        val mapView = this.mapView ?: return
+        val stop =
+            CameraStop.fromReadableMap(context, stop ?: Arguments.createMap(), cameraCallback)
+
+        updateQueue.offer(stop)
+        updateQueue.execute(mapView)
+    }
+
+    fun setStop(stop: ReadableMap?) {
+        this.stop =
+            CameraStop.fromReadableMap(context, stop ?: Arguments.createMap(), cameraCallback)
+
+        if (mapView != null) {
+            updateCamera()
+        }
+    }
+
+    fun setInitialViewState(stop: CameraStop?) {
+        initialViewState = stop
+    }
+
+    fun hasInitialViewState(): Boolean {
+        return initialViewState != null
+    }
+
+    fun setMaxBounds(bounds: LatLngBounds?) {
+        maxBounds = bounds
+        updateMaxBounds()
+    }
+
+    private fun updateMaxMinZoom() {
+        val map = maplibreMap
+        if (map != null) {
+            val minZoom = minZoom
+            if (minZoom != null) {
+                map.setMinZoomPreference(minZoom)
+            }
+
+            val maxZoom = maxZoom
+            if (maxZoom != null) {
+                map.setMaxZoomPreference(maxZoom)
+            }
+        }
+    }
+
+    private fun updateMaxBounds() {
+        val map = maplibreMap
+        if (map != null && maxBounds != null) {
+            map.setLatLngBoundsForCameraTarget(maxBounds)
+        }
+    }
+
+    private fun setInitialCamera() {
+        if (initialViewState != null) {
+            initialViewState!!.duration = 0
+            initialViewState!!.easing = CameraEasing.NONE
+            val item = initialViewState!!.toCameraUpdate(mapView!!)
+
+            item.run()
+        }
+    }
+
+    private fun updateCamera() {
+        updateQueue.offer(stop)
+        updateQueue.execute(mapView!!)
+    }
+
+    private fun updateUserTrackingMode(trackUserLocationMode: Int) {
+        userLocation.trackingMode = trackUserLocationMode
+
+        val event = OnTrackUserLocationChangeEvent(surfaceId, id, trackUserLocationMode)
+        eventDispatcher?.dispatchEvent(event)
+    }
+
+    private fun updateUserLocation() {
+        if (trackUserLocation == TrackUserLocationMode.NONE || userLocation.trackingMode == TrackUserLocationMode.NONE) {
+            return
+        }
+
+        if (userTrackingState == TrackUserLocationState.POSSIBLE) {
+            updateUserLocationSignificantly()
+        } else if (userTrackingState == TrackUserLocationState.CHANGED) {
+            updateUserLocationIncrementally()
+        }
+    }
+
+    private fun getUserLocationUpdateCameraPosition(zoomLevel: Double): CameraPosition {
+        val center = userLocation.coordinate
+
+        return CameraPosition.Builder().target(center).bearing(
+            directionForUserLocationUpdate
+        ).tilt(stop?.pitch ?: 0.0).zoom(zoomLevel).build()
+    }
+
+    private val directionForUserLocationUpdate: Double
+        get() {
+            // NOTE: The direction of this is used for map rotation only, not location layer rotation
+            val currentCamera = mapView!!.cameraPosition
+            var direction = currentCamera.bearing
+
+            val userTrackingMode = userLocation.trackingMode
+            if (userTrackingMode == TrackUserLocationMode.HEADING || userTrackingMode == TrackUserLocationMode.COURSE) {
+                direction = userLocation.bearing
+            } else if (stop?.bearing != null) {
+                direction = stop?.bearing ?: direction
+            }
+
+            return direction
+        }
+
+    private fun updateUserLocationSignificantly() {
+        userTrackingState = TrackUserLocationState.BEGAN
+
+        val cameraUpdate =
+            newCameraPosition(getUserLocationUpdateCameraPosition(mapView!!.mapLibreMap!!.cameraPosition.zoom))
+        val cameraCallback: CancelableCallback = object : CancelableCallback {
+            override fun onCancel() {
+                userTrackingState = TrackUserLocationState.CHANGED
+            }
+
+            override fun onFinish() {
+                userTrackingState = TrackUserLocationState.CHANGED
+            }
+        }
+
+        mapView!!.moveCamera(cameraUpdate, cameraCallback)
+    }
+
+    private fun updateUserLocationIncrementally() {
+        userTrackingState = TrackUserLocationState.BEGAN
+
+        val cameraPosition = mapView!!.cameraPosition
+        val cameraUpdate =
+            newCameraPosition(getUserLocationUpdateCameraPosition(cameraPosition.zoom))
+
+        val callback: CancelableCallback = object : CancelableCallback {
+            override fun onCancel() {
+                userTrackingState = TrackUserLocationState.CHANGED
+            }
+
+            override fun onFinish() {
+                userTrackingState = TrackUserLocationState.CHANGED
+            }
+        }
+
+
+        mapView!!.moveCamera(cameraUpdate, callback)
+    }
+
+    @RequiresPermission(allOf = [Manifest.permission.ACCESS_FINE_LOCATION, Manifest.permission.ACCESS_COARSE_LOCATION])
+    private fun enableLocation() {
+        if (!PermissionsManager.areLocationPermissionsGranted(context)) {
+            return
+        }
+
+        if (!locationManager.isActive()) {
+            locationManager.enable()
+        }
+
+        mapView!!.mapLibreMap!!.getStyle { style ->
+            enableLocationComponent(
+                style
+            )
+        }
+    }
+
+    private fun enableLocationComponent(style: Style) {
+        updateUserLocation()
+        updateLocationLayer(style)
+
+        val lastKnownLocation = locationManager.lastKnownLocation
+        locationManager.addLocationListener(locationChangeListener)
+
+        if (lastKnownLocation != null) {
+            locationChangeListener.onLocationChange(lastKnownLocation)
+
+            postDelayed({ mapView!!.sendRegionDidChangeEvent() }, 200)
+        }
+    }
+
+    private fun updateLocationLayer(style: Style) {
+        if (locationComponentManager == null) {
+            locationComponentManager = mapView!!.locationComponentManager
+        }
+
+        locationComponentManager!!.update(style)
+        locationComponentManager!!.setFollowUserLocation(trackUserLocation != TrackUserLocationMode.NONE)
+
+        if (trackUserLocation != TrackUserLocationMode.NONE) {
+            locationComponentManager!!.setCameraMode(
+                TrackUserLocationMode.getCameraMode(
+                    trackUserLocation
+                )
+            )
+            locationComponentManager!!.addOnCameraTrackingChangedListener(object :
+                OnCameraTrackingChangedListener {
+                override fun onCameraTrackingChanged(currentMode: Int) {
+                    val userTrackingMode = when (currentMode) {
+                        org.maplibre.android.location.modes.CameraMode.NONE -> TrackUserLocationMode.NONE
+                        org.maplibre.android.location.modes.CameraMode.TRACKING -> TrackUserLocationMode.DEFAULT
+                        org.maplibre.android.location.modes.CameraMode.TRACKING_COMPASS -> TrackUserLocationMode.HEADING
+                        org.maplibre.android.location.modes.CameraMode.TRACKING_GPS -> TrackUserLocationMode.COURSE
+                        else -> TrackUserLocationMode.NONE
+                    }
+
+                    updateUserTrackingMode(userTrackingMode)
+                }
+
+                override fun onCameraTrackingDismissed() {
+                }
+            })
+        } else {
+            locationComponentManager!!.setCameraMode(org.maplibre.android.location.modes.CameraMode.NONE)
+        }
+    }
+
+    fun setMinZoomLevel(zoomLevel: Double) {
+        minZoom = zoomLevel
+        updateMaxMinZoom()
+    }
+
+    fun setMaxZoomLevel(zoomLevel: Double) {
+        maxZoom = zoomLevel
+        updateMaxMinZoom()
+    }
+
+    fun setTrackUserLocation(trackUserLocationMode: Int) {
+        val oldTrackingMode = trackUserLocation
+        trackUserLocation = trackUserLocationMode
+        updateUserTrackingMode(trackUserLocationMode)
+
+        when (trackUserLocation) {
+            TrackUserLocationMode.NONE -> userTrackingState = TrackUserLocationState.POSSIBLE
+
+            TrackUserLocationMode.DEFAULT, TrackUserLocationMode.COURSE, TrackUserLocationMode.HEADING -> if (oldTrackingMode == TrackUserLocationMode.NONE) {
+                userTrackingState = TrackUserLocationState.POSSIBLE
+            }
+        }
+
+        if (maplibreMap != null) {
+            updateLocationLayer(maplibreMap!!.style!!)
+        }
+    }
+
+
+    private val maplibreMap: MapLibreMap?
+        get() {
+            if (mapView == null) {
+                return null
+            }
+            return mapView!!.mapLibreMap
+        }
+
+
+    inner class OnTrackUserLocationChangeEvent(
+        surfaceId: Int,
+        viewId: Int,
+        private val trackUserLocationMode: Int
+    ) :
+        Event<OnTrackUserLocationChangeEvent>(surfaceId, viewId) {
+        override fun getEventName() = "onTrackUserLocationChange"
+
+        override fun getEventData(): WritableMap {
+            return Arguments.createMap().apply {
+                putString(
+                    "trackUserLocation",
+                    TrackUserLocationMode.toString(trackUserLocationMode)
+                )
+            }
+        }
+    }
+
+}

package/android/src/main/java/org/maplibre/reactnative/components/camera/MLRNCameraManager.kt

@@ -0,0 +1,67 @@
+package org.maplibre.reactnative.components.camera
+
+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 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.MLRNCameraManagerDelegate
+import com.facebook.react.viewmanagers.MLRNCameraManagerInterface
+import org.maplibre.reactnative.location.TrackUserLocationMode
+import org.maplibre.reactnative.utils.GeoJSONUtils
+
+@ReactModule(name = MLRNCameraManager.REACT_CLASS)
+class MLRNCameraManager(private val context: ReactApplicationContext) :
+    ViewGroupManager<MLRNCamera>(), MLRNCameraManagerInterface<MLRNCamera> {
+    private val delegate: MLRNCameraManagerDelegate<MLRNCamera, MLRNCameraManager> =
+        MLRNCameraManagerDelegate(this)
+
+    override fun getDelegate(): ViewManagerDelegate<MLRNCamera> = delegate
+
+    companion object {
+        const val REACT_CLASS: String = "MLRNCamera"
+    }
+
+    override fun getName(): String = REACT_CLASS
+
+
+    override fun createViewInstance(reactContext: ThemedReactContext): MLRNCamera {
+        return MLRNCamera(reactContext)
+    }
+
+    @ReactProp(name = "stop")
+    override fun setStop(camera: MLRNCamera, value: ReadableMap?) {
+        camera.setStop(value)
+    }
+
+    @ReactProp(name = "initialViewState")
+    override fun setInitialViewState(camera: MLRNCamera, value: ReadableMap?) {
+        if (value != null && !camera.hasInitialViewState()) {
+            val stop = CameraStop.fromReadableMap(context, value, null)
+            camera.setInitialViewState(stop)
+        }
+    }
+
+    @ReactProp(name = "minZoom")
+    override fun setMinZoom(camera: MLRNCamera, value: Double) {
+        camera.setMinZoomLevel(value)
+    }
+
+    @ReactProp(name = "maxZoom")
+    override fun setMaxZoom(camera: MLRNCamera, value: Double) {
+        camera.setMaxZoomLevel(value)
+    }
+
+    @ReactProp(name = "maxBounds")
+    override fun setMaxBounds(camera: MLRNCamera, value: ReadableArray?) {
+        camera.setMaxBounds(GeoJSONUtils.toLatLngBounds(value))
+    }
+
+    @ReactProp(name = "trackUserLocation")
+    override fun setTrackUserLocation(camera: MLRNCamera, value: String?) {
+        camera.setTrackUserLocation(TrackUserLocationMode.fromString(value))
+    }
+}

package/android/src/main/java/org/maplibre/reactnative/components/camera/MLRNCameraModule.kt

@@ -0,0 +1,34 @@
+package org.maplibre.reactnative.components.camera
+
+import com.facebook.react.bridge.Promise
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReadableMap
+import org.maplibre.reactnative.NativeCameraModuleSpec
+import org.maplibre.reactnative.utils.ReactTag
+import org.maplibre.reactnative.utils.ReactTagResolver
+
+
+class MLRNCameraModule(
+    context: ReactApplicationContext,
+    private val reactTagResolver: ReactTagResolver
+) :
+    NativeCameraModuleSpec(context) {
+    companion object {
+        const val NAME = "MLRNCameraModule"
+    }
+
+    private fun withViewportOnUIThread(
+        reactTag: ReactTag,
+        reject: Promise,
+        fn: (MLRNCamera) -> Unit
+    ) {
+        reactTagResolver.withViewResolved(reactTag.toInt(), reject, fn)
+    }
+
+    override fun setStop(reactTag: ReactTag, stop: ReadableMap, promise: Promise) {
+        withViewportOnUIThread(reactTag, promise) {
+            it.handleImperativeStop(stop)
+            promise.resolve(null)
+        }
+    }
+}

package/android/src/main/java/org/maplibre/reactnative/components/camera/constants/CameraEasing.kt

@@ -0,0 +1,24 @@
+package org.maplibre.reactnative.components.camera.constants
+
+import androidx.annotation.IntDef
+
+object CameraEasing {
+    const val NONE: Int = 0
+    const val LINEAR: Int = 1
+    const val EASE: Int = 2
+    const val FLY: Int = 3
+    
+    @IntDef(NONE, LINEAR, EASE, FLY)
+    @Retention(AnnotationRetention.SOURCE)
+    annotation class Easing
+
+    fun fromString(value: String?): Int {
+        return when (value) {
+            "none" -> NONE
+            "linear" -> LINEAR
+            "ease" -> EASE
+            "fly" -> FLY
+            else -> NONE
+        }
+    }
+}

package/android/src/main/java/org/maplibre/reactnative/components/images/MLRNImages.java

@@ -26,7 +26,6 @@ import java.util.HashSet;
 import java.util.List;
 import java.util.Map;
 import java.util.Set;
-import java.util.stream.Collectors;
 
 public class MLRNImages extends AbstractMapFeature {
     private static Bitmap mImagePlaceholder;
@@ -182,7 +181,7 @@ public class MLRNImages extends AbstractMapFeature {
         mapView.getStyle(new Style.OnStyleLoaded() {
             @Override
             public void onStyleLoaded(@NonNull Style style) {
-                MapLibreMap map = mapView.getMapboxMap();
+                MapLibreMap map = mapView.getMapLibreMap();
                 mMap = map;
                 addNativeImagesToStyle(mNativeImages, map);
                 addImagesToStyle(mImages, map);

package/android/src/main/java/org/maplibre/reactnative/components/images/MLRNImagesManager.java

@@ -9,11 +9,8 @@ import com.facebook.react.bridge.ReadableMapKeySetIterator;
 import com.facebook.react.bridge.ReadableType;
 import com.facebook.react.common.MapBuilder;
 import com.facebook.react.uimanager.ThemedReactContext;
-import com.facebook.react.uimanager.ViewGroupManager;
 import com.facebook.react.uimanager.annotations.ReactProp;
 import org.maplibre.reactnative.components.AbstractEventEmitter;
-import org.maplibre.reactnative.components.AbstractMapFeature;
-import org.maplibre.reactnative.components.styles.sources.MLRNShapeSource;
 import org.maplibre.reactnative.events.constants.EventKeys;
 import org.maplibre.reactnative.utils.ImageEntry;
 import org.maplibre.reactnative.utils.ResourceUtils;
@@ -64,6 +61,9 @@ public class MLRNImagesManager extends AbstractEventEmitter<MLRNImages> {
                 boolean hasScale = imageMap.hasKey("scale") && imageMap.getType("scale") == ReadableType.Number;
                 double scale = hasScale ? imageMap.getDouble("scale") : ImageEntry.defaultScale;
                 imageEntry = new ImageEntry(uri, scale);
+
+                boolean hasSdf = imageMap.hasKey("sdf") && imageMap.getType("sdf") == ReadableType.Boolean;
+                imageEntry.sdf = hasSdf && imageMap.getBoolean("sdf");
             } else {
                 imageEntry = new ImageEntry(map.getString(imageName));
             }

package/android/src/main/java/org/maplibre/reactnative/components/layers/MLRNBackgroundLayer.java

@@ -0,0 +1,23 @@
+package org.maplibre.reactnative.components.layers;
+
+import android.content.Context;
+
+import org.maplibre.android.style.layers.BackgroundLayer;
+import org.maplibre.reactnative.components.layers.style.MLRNStyle;
+import org.maplibre.reactnative.components.layers.style.MLRNStyleFactory;
+
+public class MLRNBackgroundLayer extends MLRNLayer<BackgroundLayer> {
+    public MLRNBackgroundLayer(Context context) {
+        super(context);
+    }
+
+    @Override
+    public BackgroundLayer makeLayer() {
+        return new BackgroundLayer(mID);
+    }
+
+    @Override
+    public void addStyles() {
+        MLRNStyleFactory.setBackgroundLayerStyle(mLayer, new MLRNStyle(getContext(), mReactStyle, mMap));
+    }
+}

package/android/src/main/java/org/maplibre/reactnative/components/layers/MLRNBackgroundLayerManager.java

@@ -0,0 +1,60 @@
+package org.maplibre.reactnative.components.layers;
+
+import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.ViewGroupManager;
+import com.facebook.react.uimanager.annotations.ReactProp;
+
+public class MLRNBackgroundLayerManager extends ViewGroupManager<MLRNBackgroundLayer> {
+    public static final String REACT_CLASS = "MLRNBackgroundLayer";
+
+    @Override
+    public String getName() {
+        return REACT_CLASS;
+    }
+
+    @Override
+    protected MLRNBackgroundLayer createViewInstance(ThemedReactContext reactContext) {
+        return new MLRNBackgroundLayer(reactContext);
+    }
+
+    @ReactProp(name="id")
+    public void setId(MLRNBackgroundLayer layer, String id) {
+        layer.setID(id);
+    }
+
+    @ReactProp(name="sourceID")
+    public void setSourceID(MLRNBackgroundLayer layer, String sourceID) {
+        layer.setSourceID(sourceID);
+    }
+
+    @ReactProp(name="aboveLayerID")
+    public void setAboveLayerID(MLRNBackgroundLayer layer, String aboveLayerID) {
+        layer.setAboveLayerID(aboveLayerID);
+    }
+
+    @ReactProp(name="belowLayerID")
+    public void setBelowLayerID(MLRNBackgroundLayer layer, String belowLayerID) {
+        layer.setBelowLayerID(belowLayerID);
+    }
+
+    @ReactProp(name="layerIndex")
+    public void setLayerIndex(MLRNBackgroundLayer layer, int layerIndex){
+        layer.setLayerIndex(layerIndex);
+    }
+
+    @ReactProp(name="minZoomLevel")
+    public void setMinZoomLevel(MLRNBackgroundLayer layer, double minZoomLevel) {
+        layer.setMinZoomLevel(minZoomLevel);
+    }
+
+    @ReactProp(name="maxZoomLevel")
+    public void setMaxZoomLevel(MLRNBackgroundLayer layer, double maxZoomLevel) {
+        layer.setMaxZoomLevel(maxZoomLevel);
+    }
+
+    @ReactProp(name="reactStyle")
+    public void setReactStyle(MLRNBackgroundLayer layer, ReadableMap style) {
+        layer.setReactStyle(style);
+    }
+}

package/android/src/main/java/org/maplibre/reactnative/components/layers/MLRNCircleLayer.java

@@ -0,0 +1,51 @@
+package org.maplibre.reactnative.components.layers;
+
+import android.content.Context;
+
+import org.maplibre.android.style.expressions.Expression;
+import org.maplibre.android.style.layers.CircleLayer;
+import org.maplibre.reactnative.components.mapview.MLRNMapView;
+import org.maplibre.reactnative.components.layers.style.MLRNStyle;
+import org.maplibre.reactnative.components.layers.style.MLRNStyleFactory;
+
+public class MLRNCircleLayer extends MLRNLayer<CircleLayer> {
+    private String mSourceLayerID;
+
+    public MLRNCircleLayer(Context context) {
+        super(context);
+    }
+
+    @Override
+    protected void updateFilter(Expression expression) {
+        mLayer.setFilter(expression);
+    }
+
+    @Override
+    public void addToMap(MLRNMapView mapView) {
+        super.addToMap(mapView);
+    }
+
+    @Override
+    public CircleLayer makeLayer() {
+        CircleLayer layer = new CircleLayer(mID, mSourceID);
+
+        if (mSourceLayerID != null) {
+            layer.setSourceLayer(mSourceLayerID);
+        }
+
+        return layer;
+    }
+
+    @Override
+    public void addStyles() {
+        MLRNStyleFactory.setCircleLayerStyle(mLayer, new MLRNStyle(getContext(), mReactStyle, mMap));
+    }
+
+    public void setSourceLayerID(String sourceLayerID) {
+        mSourceLayerID = sourceLayerID;
+
+        if (mLayer != null) {
+            mLayer.setSourceLayer(sourceLayerID);
+        }
+    }
+}