@maplibre/maplibre-react-native 11.0.0-alpha.42 → 11.0.0-alpha.43

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

@@ -0,0 +1,407 @@
+package org.maplibre.reactnative.components.annotations.pointannotation
+
+import android.content.Context
+import android.graphics.PointF
+import android.graphics.Bitmap
+import android.view.View
+
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+
+import org.maplibre.geojson.Point
+import org.maplibre.android.geometry.LatLng
+import org.maplibre.android.plugins.annotation.Symbol
+import org.maplibre.android.plugins.annotation.SymbolOptions
+import org.maplibre.android.maps.MapLibreMap
+
+import org.maplibre.reactnative.components.AbstractMapFeature
+import org.maplibre.reactnative.components.annotations.callout.MLRNCallout
+import org.maplibre.reactnative.components.mapview.MLRNMapView
+import org.maplibre.reactnative.events.PointAnnotationEvent
+import org.maplibre.reactnative.utils.GeoJSONUtils
+import org.maplibre.reactnative.utils.BitmapUtils
+
+class MLRNPointAnnotation(private val mContext: Context) : AbstractMapFeature(mContext), View.OnLayoutChangeListener {
+    private var mAnnotation: Symbol? = null
+    private var mMap: MapLibreMap? = null
+    private var mMapView: MLRNMapView? = null
+
+    private val mHasChildren = false
+
+    private var mCoordinate: Point? = null
+
+    public var ID: String? = null
+    public var title: String? = null
+    private var mSnippet: String? = null
+
+    private var mAnchor: FloatArray? = null
+    private var mOffset: FloatArray? = null
+    private val mIsSelected = false
+    private var mDraggable = false
+
+    private var mChildView: View? = null
+    private var mChildBitmap: Bitmap? = null
+    private var mChildBitmapId: String? = null
+
+    private var mCalloutView: View? = null
+    private var mCalloutSymbol: Symbol? = null
+    private var mCalloutBitmap: Bitmap? = null
+    private var mCalloutBitmapId: String? = null
+
+    companion object {
+        const val MARKER_IMAGE_ID: String = "MARKER_IMAGE_ID"
+    }
+
+    private val surfaceId: Int
+        get() {
+            val reactContext = mContext as ReactContext
+            return UIManagerHelper.getSurfaceId(reactContext)
+        }
+
+    override fun addView(childView: View, childPosition: Int) {
+        if (childView is MLRNCallout) {
+            mCalloutView = childView
+        } else {
+            // Only accept position 0 for non-callout children - the wrapper View
+            // with collapsable={false} from JS side. This prevents Fabric from
+            // sending multiple flattened children that would overwrite mChildView.
+            if (childPosition != 0) {
+                return
+            }
+            mChildView = childView
+        }
+        childView.addOnLayoutChangeListener(this)
+        mMapView?.offscreenAnnotationViewContainer()?.addView(childView)
+    }
+
+    override fun removeView(childView: View?) {
+        if (childView == null) return
+
+        childView.removeOnLayoutChangeListener(this)
+        // Remove from offscreen container
+        mMapView?.offscreenAnnotationViewContainer()?.removeView(childView)
+
+        if (childView == mChildView) {
+            mMap?.getStyle { style ->
+                mChildBitmapId?.let { style.removeImage(it) }
+                mChildBitmap = null
+                mChildBitmapId = null
+                updateOptions()
+            }
+            mChildView = null
+        } else if (childView == mCalloutView) {
+            mCalloutView = null
+        }
+    }
+
+    override fun removeViewAt(index: Int) {
+        val child = getChildAt(index)
+        if (child != null) {
+            removeView(child)
+        }
+    }
+
+    override fun getChildCount(): Int {
+        var count = 0
+        if (mChildView != null) count++
+        if (mCalloutView != null) count++
+        return count
+    }
+
+    override fun getChildAt(index: Int): View? {
+        // Return children in consistent order: child view first, then callout
+        return when {
+            index == 0 && mChildView != null -> mChildView
+            index == 0 && mChildView == null && mCalloutView != null -> mCalloutView
+            index == 1 && mChildView != null && mCalloutView != null -> mCalloutView
+            else -> null
+        }
+    }
+
+    override fun addToMap(mapView: MLRNMapView) {
+        mMapView = mapView
+        mMap = mapView.mapLibreMap
+        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 fun removeFromMap(mapView: MLRNMapView) {
+        val map = if (mMapView != null) mMapView else 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 fun onLayoutChange(v: View, left: Int, top: Int, right: Int, bottom: Int, oldLeft: Int,
+                                oldTop: Int, oldRight: Int, oldBottom: Int) {
+        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 fun refreshBitmap(v: View, left: Int, top: Int, right: Int, bottom: Int) {
+        val bitmap: Bitmap = BitmapUtils.viewToBitmap(v, left, top, right, bottom)
+        val bitmapId: String = v.id.toString()
+        addBitmapToStyle(bitmap, bitmapId)
+        if (v is MLRNCallout) {
+            mCalloutBitmap = bitmap
+            mCalloutBitmapId = bitmapId
+        } else {
+            mChildBitmap = bitmap
+            mChildBitmapId = bitmapId
+            updateOptions()
+        }
+    }
+
+    private fun refreshBitmap(v: View) {
+        refreshBitmap(v, v.left, v.top, v.right, v.bottom)
+    }
+
+    fun getLatLng(): LatLng? {
+        return GeoJSONUtils.toLatLng(mCoordinate)
+    }
+
+    val annotationId: Long? get() = mAnnotation?.id
+
+    fun setSnippet(snippet: String?) {
+        mSnippet = snippet
+    }
+
+    fun getCalloutView(): View? {
+        return mCalloutView
+    }
+
+    fun setLngLat(lngLat: DoubleArray?) {
+        if (lngLat == null || lngLat.size < 2) {
+            return
+        }
+        val point = Point.fromLngLat(lngLat[0], lngLat[1])
+        mCoordinate = point
+
+        if (mAnnotation != null) {
+            mAnnotation!!.latLng = GeoJSONUtils.toLatLng(point)!!
+            mMapView?.getSymbolManager()?.update(mAnnotation)
+        }
+        if (mCalloutSymbol != null) {
+            mCalloutSymbol!!.latLng = GeoJSONUtils.toLatLng(point)!!
+            mMapView?.getSymbolManager()?.update(mCalloutSymbol)
+        }
+    }
+
+    fun setAnchor(x: Float, y: Float) {
+        mAnchor = floatArrayOf(x, y)
+
+        if (mAnnotation != null) {
+            updateAnchor()
+            mMapView?.getSymbolManager()?.update(mAnnotation)
+        }
+    }
+
+    fun setOffset(x: Float, y: Float) {
+        mOffset = floatArrayOf(x, y)
+
+        if (mAnnotation != null) {
+            updateAnchor()
+            mMapView?.getSymbolManager()?.update(mAnnotation)
+        }
+    }
+
+    fun setDraggable(draggable: Boolean) {
+        mDraggable = draggable
+        if (mAnnotation != null) {
+            mAnnotation!!.isDraggable = draggable
+            mMapView?.getSymbolManager()?.update(mAnnotation)
+        }
+    }
+
+    fun getMarker(): Symbol? {
+        return mAnnotation
+    }
+
+    fun onSelect(shouldSendEvent: Boolean) {
+        if (mCalloutView != null) {
+            makeCallout()
+        }
+        if (shouldSendEvent) {
+            emitEvent("onSelected")
+        }
+    }
+
+    fun onDeselect() {
+        emitEvent("onDeselected")
+        if (mCalloutSymbol != null) {
+            mMapView?.getSymbolManager()?.delete(mCalloutSymbol)
+        }
+    }
+
+    fun onDragStart() {
+        val latLng = mAnnotation?.latLng
+        if (latLng != null) {
+            mCoordinate = Point.fromLngLat(latLng.longitude, latLng.latitude)
+        }
+        emitEvent("onDragStart")
+    }
+
+    fun onDrag() {
+        val latLng = mAnnotation?.latLng
+        if (latLng != null) {
+            mCoordinate = Point.fromLngLat(latLng.longitude, latLng.latitude)
+        }
+        emitEvent("onDrag")
+    }
+
+    fun onDragEnd() {
+        val latLng = mAnnotation?.latLng
+        if (latLng != null) {
+            mCoordinate = Point.fromLngLat(latLng.longitude, latLng.latitude)
+        }
+        emitEvent("onDragEnd")
+    }
+
+    fun makeMarker() {
+        val options = SymbolOptions()
+            .withLatLng(GeoJSONUtils.toLatLng(mCoordinate))
+            .withDraggable(mDraggable)
+            .withIconSize(1.0f)
+            .withSymbolSortKey(10.0f)
+        val symbolManager = mMapView?.getSymbolManager()
+        if (symbolManager != null) {
+            mAnnotation = symbolManager.create(options)
+            updateOptions()
+        }
+    }
+
+    private fun updateOptions() {
+        if (mAnnotation != null) {
+            updateIconImage()
+            updateAnchor()
+            mMapView?.getSymbolManager()?.update(mAnnotation)
+        }
+    }
+
+    private fun updateIconImage() {
+        if (mChildView != null) {
+            if (mChildBitmapId != null) {
+                mAnnotation?.iconImage = mChildBitmapId
+            }
+        } else {
+            mAnnotation?.iconImage = MARKER_IMAGE_ID
+            mAnnotation?.iconAnchor = "bottom"
+        }
+    }
+
+    private fun updateAnchor() {
+        if (mChildView != null && mChildBitmap != null) {
+            val scale = resources.displayMetrics.density
+            var offsetX = 0f
+            var offsetY = 0f
+
+            // Apply anchor offset (anchor is a percentage of view dimensions)
+            if (mAnchor != null) {
+                val w = (mChildBitmap!!.width / scale).toInt()
+                val h = (mChildBitmap!!.height / scale).toInt()
+                offsetX = w * mAnchor!![0] * -1
+                offsetY = h * mAnchor!![1] * -1
+            }
+
+            // Apply pixel offset
+            if (mOffset != null) {
+                offsetX += mOffset!![0]
+                offsetY += mOffset!![1]
+            }
+
+            mAnnotation?.iconAnchor = "top-left"
+            mAnnotation?.setIconOffset(PointF(offsetX, offsetY))
+        }
+    }
+
+    private fun makeCallout() {
+        var yOffset = -28f
+        if (mChildView != null) {
+            if (mChildBitmap != null) {
+                val scale = resources.displayMetrics.density
+                var h = mChildBitmap!!.height / 2
+                h = (h / scale).toInt()
+                yOffset = (h * -1).toFloat()
+            }
+        }
+        val options = SymbolOptions()
+            .withLatLng(GeoJSONUtils.toLatLng(mCoordinate))
+            .withIconImage(mCalloutBitmapId)
+            .withIconSize(1.0f)
+            .withIconAnchor("bottom")
+            .withIconOffset(floatArrayOf(0f, yOffset).toTypedArray())
+            .withSymbolSortKey(11.0f)
+            .withDraggable(false)
+        val symbolManager = mMapView?.getSymbolManager()
+        if (symbolManager != null) {
+            mCalloutSymbol = symbolManager.create(options)
+        }
+    }
+
+    private fun addBitmapToStyle(bitmap: Bitmap?, bitmapId: String?) {
+        if (mMap != null && bitmapId != null && bitmap != null) {
+            mMap!!.getStyle { style ->
+                style.addImage(bitmapId, bitmap)
+            }
+        }
+    }
+
+    private fun emitEvent(eventName: String) {
+        val latLng = GeoJSONUtils.toLatLng(mCoordinate) ?: return
+        val screenPos = getScreenPosition(latLng) ?: return
+
+        val event = PointAnnotationEvent(
+            surfaceId,
+            id,
+            eventName,
+            ID,
+            latLng,
+            screenPos
+        )
+
+        mMapView?.eventDispatcher?.dispatchEvent(event)
+    }
+
+    private fun getDisplayDensity(): Float {
+        return mContext.resources.displayMetrics.density
+    }
+
+    private fun getScreenPosition(latLng: LatLng): PointF? {
+        val screenPos = mMap?.projection?.toScreenLocation(latLng)
+        val density = getDisplayDensity()
+        screenPos?.x = screenPos?.x?.div(density) ?: 0f
+        screenPos?.y = screenPos?.y?.div(density) ?: 0f
+        return screenPos
+    }
+
+    fun refresh() {
+        mChildView?.let { refreshBitmap(it) }
+    }
+}

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

@@ -0,0 +1,105 @@
+package org.maplibre.reactnative.components.annotations.pointannotation
+
+import android.view.View
+import com.facebook.react.bridge.Dynamic
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.bridge.ReadableType
+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.MLRNPointAnnotationManagerDelegate
+import com.facebook.react.viewmanagers.MLRNPointAnnotationManagerInterface
+
+@ReactModule(name = MLRNPointAnnotationManager.REACT_CLASS)
+class MLRNPointAnnotationManager(private val reactApplicationContext: ReactApplicationContext) :
+    ViewGroupManager<MLRNPointAnnotation>(),
+    MLRNPointAnnotationManagerInterface<MLRNPointAnnotation> {
+
+    private val delegate: MLRNPointAnnotationManagerDelegate<MLRNPointAnnotation, MLRNPointAnnotationManager> =
+        MLRNPointAnnotationManagerDelegate(this)
+
+    override fun getDelegate(): ViewManagerDelegate<MLRNPointAnnotation> = delegate
+
+    companion object {
+        const val REACT_CLASS: String = "MLRNPointAnnotation"
+    }
+
+    override fun getName(): String = REACT_CLASS
+
+    override fun createViewInstance(reactContext: ThemedReactContext): MLRNPointAnnotation {
+        return MLRNPointAnnotation(reactContext)
+    }
+
+    override fun addView(parent: MLRNPointAnnotation, child: View, index: Int) {
+        parent.addView(child, index)
+    }
+
+    override fun removeViewAt(parent: MLRNPointAnnotation, index: Int) {
+        parent.removeViewAt(index)
+    }
+
+    override fun getChildCount(parent: MLRNPointAnnotation): Int {
+        return parent.childCount
+    }
+
+    override fun getChildAt(parent: MLRNPointAnnotation, index: Int): View? {
+        return parent.getChildAt(index)
+    }
+
+    @ReactProp(name = "id")
+    override fun setId(annotation: MLRNPointAnnotation, id: String?) {
+        id?.let { annotation.ID = it }
+    }
+
+    @ReactProp(name = "title")
+    override fun setTitle(annotation: MLRNPointAnnotation, title: String?) {
+        annotation.title = title
+    }
+
+    @ReactProp(name = "snippet")
+    override fun setSnippet(annotation: MLRNPointAnnotation, snippet: String?) {
+        annotation.setSnippet(snippet)
+    }
+
+    @ReactProp(name = "selected")
+    override fun setSelected(annotation: MLRNPointAnnotation, selected: Boolean) {
+        // Selection is handled by the map view
+    }
+
+    @ReactProp(name = "lngLat")
+    override fun setLngLat(annotation: MLRNPointAnnotation, lngLat: Dynamic) {
+        if (lngLat.type == ReadableType.Array) {
+            val arr = lngLat.asArray()
+            if (arr != null && arr.size() >= 2) {
+                annotation.setLngLat(doubleArrayOf(arr.getDouble(0), arr.getDouble(1)))
+            }
+        }
+    }
+
+    @ReactProp(name = "anchor")
+    override fun setAnchor(annotation: MLRNPointAnnotation, map: ReadableMap?) {
+        if (map != null) {
+            annotation.setAnchor(map.getDouble("x").toFloat(), map.getDouble("y").toFloat())
+        }
+    }
+
+    @ReactProp(name = "draggable")
+    override fun setDraggable(annotation: MLRNPointAnnotation, draggable: Boolean) {
+        annotation.setDraggable(draggable)
+    }
+
+    @ReactProp(name = "offset")
+    override fun setOffset(annotation: MLRNPointAnnotation, map: ReadableMap?) {
+        if (map != null) {
+            annotation.setOffset(map.getDouble("x").toFloat(), map.getDouble("y").toFloat())
+        }
+    }
+
+    override fun refresh(annotation: MLRNPointAnnotation) {
+        annotation.refresh()
+    }
+}

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

@@ -22,8 +22,6 @@ import com.facebook.react.bridge.WritableArray
 import com.facebook.react.bridge.WritableMap
 import com.facebook.react.uimanager.UIManagerHelper
 import com.facebook.react.uimanager.events.EventDispatcher
-import org.json.JSONException
-import org.json.JSONObject
 import org.maplibre.android.camera.CameraPosition
 import org.maplibre.android.camera.CameraUpdate
 import org.maplibre.android.geometry.LatLng
@@ -46,9 +44,9 @@ import org.maplibre.android.style.layers.PropertyFactory
 import org.maplibre.geojson.Feature
 import org.maplibre.reactnative.R
 import org.maplibre.reactnative.components.AbstractMapFeature
-import org.maplibre.reactnative.components.annotations.MLRNMarkerView
-import org.maplibre.reactnative.components.annotations.MLRNPointAnnotation
-import org.maplibre.reactnative.components.annotations.MarkerViewManager
+import org.maplibre.reactnative.components.annotations.markerview.MLRNMarkerView
+import org.maplibre.reactnative.components.annotations.markerview.MarkerViewManager
+import org.maplibre.reactnative.components.annotations.pointannotation.MLRNPointAnnotation
 import org.maplibre.reactnative.components.camera.MLRNCamera
 import org.maplibre.reactnative.components.images.MLRNImages
 import org.maplibre.reactnative.components.layers.MLRNLayer
@@ -123,8 +121,8 @@ open class MLRNMapView(
     private var camera: MLRNCamera? = null
     private val children: MutableList<MapChild>
     private var queuedChildren: MutableList<MapChild>?
-    private val pointAnnotations: MutableMap<String?, MLRNPointAnnotation?>
-    private val sources: MutableMap<String?, MLRNSource<*>?>
+    private val pointAnnotations: MutableMap<String, MLRNPointAnnotation>
+    private val sources: MutableMap<String, MLRNSource<*>>
     private val images: MutableList<MLRNImages>
 
     private val cameraChangeTracker = CameraChangeTracker()
@@ -158,12 +156,12 @@ open class MLRNMapView(
 
     private var symbolManager: SymbolManager? = null
 
-    private var activeMarkerID: Long = -1
+    private var activePointAnnotationAnnotationId: Long? = null
+    private var pointAnnotationClicked = false
 
     private var markerViewManager: MarkerViewManager? = null
     private var offscreenAnnotationViewContainer: ViewGroup? = null
 
-    private var annotationClicked = false
 
     val locationComponentManager: LocationComponentManager by lazy {
         LocationComponentManager(this, context)
@@ -215,7 +213,7 @@ open class MLRNMapView(
                 }
 
                 is MLRNPointAnnotation -> {
-                    pointAnnotations[childView.getID()] = childView
+                    pointAnnotations[childView.ID!!] = childView
                     MapChild.FeatureChild(childView)
                 }
 
@@ -267,11 +265,11 @@ open class MLRNMapView(
                     }
 
                     is MLRNPointAnnotation -> {
-                        if (child.feature.mapboxID == activeMarkerID) {
-                            activeMarkerID = -1
+                        if (child.feature.annotationId == activePointAnnotationAnnotationId) {
+                            activePointAnnotationAnnotationId = null
                         }
 
-                        pointAnnotations.remove(child.feature.getID())
+                        child.feature.ID?.let { pointAnnotations.remove(it) }
                     }
 
                     is MLRNImages -> {
@@ -331,7 +329,7 @@ open class MLRNMapView(
         for (key in pointAnnotations.keys) {
             val annotation = pointAnnotations[key]
 
-            if (annotation != null && markerID == annotation.mapboxID) {
+            if (annotation != null && markerID == annotation.annotationId) {
                 return annotation
             }
         }
@@ -434,12 +432,6 @@ open class MLRNMapView(
             handleMapChangedEvent("onRegionWillChange", true)
         }
 
-        mapLibreMap.addOnCameraMoveListener {
-            if (markerViewManager != null) {
-                markerViewManager!!.updateMarkers()
-            }
-        }
-
         mapLibreMap.addOnMoveListener(
             object : MapLibreMap.OnMoveListener {
                 override fun onMoveBegin(detector: MoveGestureDetector) {
@@ -480,7 +472,7 @@ open class MLRNMapView(
         symbolManager!!.addDragListener(
             object : OnSymbolDragListener {
                 override fun onAnnotationDragStarted(symbol: Symbol) {
-                    annotationClicked = true
+                    pointAnnotationClicked = true
                     val selectedMarkerID = symbol.id
                     val annotation = getPointAnnotationByMarkerID(selectedMarkerID)
                     annotation?.onDragStart()
@@ -493,7 +485,7 @@ open class MLRNMapView(
                 }
 
                 override fun onAnnotationDragFinished(symbol: Symbol) {
-                    annotationClicked = false
+                    pointAnnotationClicked = false
                     val selectedMarkerID = symbol.id
                     val annotation = getPointAnnotationByMarkerID(selectedMarkerID)
                     annotation?.onDragEnd()
@@ -556,9 +548,15 @@ open class MLRNMapView(
     }
 
     override fun onMapClick(latLng: LatLng): Boolean {
-        if (annotationClicked) {
-            annotationClicked = false
-            return true
+        if (pointAnnotationClicked) {
+            pointAnnotationClicked = false
+        }
+
+        if (activePointAnnotationAnnotationId != null) {
+            val active = pointAnnotations.values.find { it.annotationId == activePointAnnotationAnnotationId }
+            if (active != null) {
+                deselectAnnotation(active)
+            }
         }
 
         val screenPoint = mapLibreMap!!.projection.toScreenLocation(latLng)
@@ -602,10 +600,10 @@ open class MLRNMapView(
     }
 
     override fun onMapLongClick(latLng: LatLng): Boolean {
-        if (annotationClicked) {
-            annotationClicked = false
-            return true
+        if (pointAnnotationClicked) {
+            pointAnnotationClicked = false
         }
+
         val screenPoint = mapLibreMap!!.projection.toScreenLocation(latLng)
 
         val event = MapPressEvent(surfaceId, id, "onLongPress", latLng, screenPoint)
@@ -615,20 +613,22 @@ open class MLRNMapView(
     }
 
     fun onMarkerClick(symbol: Symbol) {
-        annotationClicked = true
+        pointAnnotationClicked = true
         val selectedMarkerID = symbol.id
 
         var activeAnnotation: MLRNPointAnnotation? = null
         var nextActiveAnnotation: MLRNPointAnnotation? = null
 
         for (key in pointAnnotations.keys) {
-            val annotation = pointAnnotations[key]
-            val curMarkerID = annotation!!.mapboxID
-            if (activeMarkerID == curMarkerID) {
-                activeAnnotation = annotation
+            val pointAnnotation = pointAnnotations[key]
+            val currentAnnotationId = pointAnnotation!!.annotationId
+
+            if (activePointAnnotationAnnotationId == currentAnnotationId) {
+                activeAnnotation = pointAnnotation
             }
-            if (selectedMarkerID == curMarkerID && activeMarkerID != curMarkerID) {
-                nextActiveAnnotation = annotation
+
+            if (selectedMarkerID == currentAnnotationId && activePointAnnotationAnnotationId != currentAnnotationId) {
+                nextActiveAnnotation = pointAnnotation
             }
         }
 
@@ -642,12 +642,12 @@ open class MLRNMapView(
     }
 
     fun selectAnnotation(annotation: MLRNPointAnnotation) {
-        activeMarkerID = annotation.mapboxID
+        activePointAnnotationAnnotationId = annotation.annotationId
         annotation.onSelect(true)
     }
 
     fun deselectAnnotation(annotation: MLRNPointAnnotation) {
-        activeMarkerID = -1
+        activePointAnnotationAnnotationId = null
         annotation.onDeselect()
     }
 
@@ -672,6 +672,7 @@ open class MLRNMapView(
     }
 
     override fun onWillStartRenderingFrame() {
+        markerViewManager?.updateMarkers()
         handleMapChangedEvent("onWillStartRenderingFrame")
     }