feat: custom location provider & native user location styling

android/src/main/java/com/rnmapbox/rnmbx/components/location/LocationComponentManager.kt

@@ -1,20 +1,22 @@
 package com.rnmapbox.rnmbx.components.location
 
 import android.content.Context
+import android.graphics.BitmapFactory
 import android.graphics.Color
-import android.graphics.drawable.Drawable
-import android.graphics.drawable.VectorDrawable
-import androidx.appcompat.content.res.AppCompatResources
+import android.graphics.drawable.BitmapDrawable
 import androidx.lifecycle.Lifecycle
-import com.mapbox.maps.plugin.locationcomponent.location
-import com.rnmapbox.rnmbx.components.mapview.RNMBXMapView
+import com.mapbox.maps.extension.style.expressions.dsl.generated.interpolate
 import com.mapbox.maps.plugin.LocationPuck2D
-import com.mapbox.maps.plugin.lifecycle.lifecycle
+import com.mapbox.maps.plugin.locationcomponent.location
 import com.rnmapbox.rnmbx.R
+import com.rnmapbox.rnmbx.components.mapview.RNMBXMapView
 import com.rnmapbox.rnmbx.location.LocationManager
-
-import com.rnmapbox.rnmbx.v11compat.location.PuckBearingSource;
-import com.rnmapbox.rnmbx.v11compat.image.*;
+import com.rnmapbox.rnmbx.v11compat.image.AppCompatResourcesV11
+import com.rnmapbox.rnmbx.v11compat.image.ImageHolder
+import com.rnmapbox.rnmbx.v11compat.image.toBitmapImageHolder
+import com.rnmapbox.rnmbx.v11compat.image.toByteArray
+import com.rnmapbox.rnmbx.v11compat.image.toImageData
+import com.rnmapbox.rnmbx.v11compat.location.PuckBearingSource
 
 /**
  * The LocationComponent on android implements display of user's current location.
@@ -23,9 +25,20 @@ import com.rnmapbox.rnmbx.v11compat.image.*;
  * And NativeUserLocation can ask for display of user's current location - independent of Camera's user tracking.
  */
 class LocationComponentManager(mapView: RNMBXMapView, context: Context) {
+    private val MAPBOX_BLUE_COLOR = Color.parseColor("#4A90E2")
+
     var mMapView = mapView
     var mContext = context
-    private var mState = State(showUserLocation=false, followUserLocation=false, tintColor= null, bearingImage = null, puckBearingSource =null)
+    private var mState = State(
+        showUserLocation = false,
+        followUserLocation = false,
+        tintColor = null,
+        bearingImage = null,
+        puckBearingSource = null,
+        topImage = null,
+        shadowImage = null,
+        scale = 1.0,
+    )
 
     private var mLocationManager: LocationManager = LocationManager.getInstance(context)
 
@@ -37,8 +50,12 @@ class LocationComponentManager(mapView: RNMBXMapView, context: Context) {
         val showUserLocation: Boolean,
         val followUserLocation: Boolean,
         val tintColor: Int?, // tint of location puck
-        var bearingImage: ImageHolder?, // bearing image (background)
-        var puckBearingSource: PuckBearingSource? // bearing source
+        var bearingImage: ImageHolder?, // The image used as the middle of the location indicator.
+        var topImage: ImageHolder?, // The image to use as the top layer for the location indicator.
+        var shadowImage: ImageHolder?, // The image that acts as a background of the location indicator.
+        var puckBearingSource: PuckBearingSource?, // bearing source
+        var pulsing: Boolean = true,
+        var scale: Double = 1.0,
     ) {
         val enabled: Boolean
             get() = showUserLocation || followUserLocation
@@ -78,42 +95,52 @@ class LocationComponentManager(mapView: RNMBXMapView, context: Context) {
         mapView.location.updateSettings {
             enabled = newState.enabled
 
-            if (fullUpdate || (newState.hidden != oldState.hidden) || (newState.tintColor != oldState.tintColor) || (newState.bearingImage != oldState.bearingImage)) {
+            if (fullUpdate ||
+                newState.hidden != oldState.hidden ||
+                newState.tintColor != oldState.tintColor ||
+                newState.bearingImage != oldState.bearingImage ||
+                newState.topImage != oldState.topImage ||
+                newState.shadowImage != oldState.shadowImage ||
+                newState.scale != oldState.scale
+            ) {
                 if (newState.hidden) {
                     var emptyLocationPuck = LocationPuck2D()
-                    val empty = AppCompatResourcesV11.getDrawableImageHolder(mContext, R.drawable.empty)
+                    val empty =
+                        AppCompatResourcesV11.getDrawableImageHolder(mContext, R.drawable.empty)
                     emptyLocationPuck.bearingImage = empty
                     emptyLocationPuck.shadowImage = empty
                     emptyLocationPuck.topImage = empty
                     //emptyLocationPuck.opacity = 0.0
                     locationPuck = emptyLocationPuck
                     pulsingEnabled = false
                 } else {
-                    val mapboxBlueColor = Color.parseColor("#4A90E2")
                     val tintColor = newState.tintColor
-                    val defaultLocationPuck = LocationPuck2D()
-                    var topImage = AppCompatResourcesV11.getDrawableImageHolder(mContext, R.drawable.mapbox_user_icon)
-                    if (tintColor != null) {
-                        val drawable = AppCompatResources.getDrawable(mContext, R.drawable.mapbox_user_icon) as VectorDrawable?
-                        drawable!!.setTint(tintColor)
+                    var topImage = newState.topImage
+                    if (tintColor != null && topImage != null) {
+                        val imageData = (topImage as ByteArray).toImageData().toByteArray()
+                        val drawable = BitmapDrawable(mContext.resources, BitmapFactory.decodeByteArray(imageData, 0, imageData.size))
+                        drawable.setTint(tintColor)
                         topImage = drawable.toBitmapImageHolder()
                     }
-                    defaultLocationPuck.topImage = topImage
-                    val defaultBearingImage = AppCompatResourcesV11.getDrawableImageHolder(
-                        mContext, R.drawable.mapbox_user_stroke_icon
+                    val scaleExpression = if (newState.scale != 1.0) {
+                        interpolate {
+                            linear()
+                            zoom()
+                            stop {
+                                literal(0)
+                                literal(newState.scale)
+                            }
+                        }.toJson()
+                    } else null
+
+                    locationPuck = LocationPuck2D(
+                        topImage = topImage,
+                        bearingImage = newState.bearingImage,
+                        shadowImage = newState.shadowImage,
+                        scaleExpression = scaleExpression,
                     )
-                    defaultLocationPuck.bearingImage = newState.bearingImage ?: defaultBearingImage
-                    val shadowImage = AppCompatResourcesV11.getDrawableImageHolder(
-                        mContext, R.drawable.mapbox_user_icon_shadow
-                    )
-                    defaultLocationPuck.shadowImage = shadowImage
-                    locationPuck = defaultLocationPuck
-                    pulsingEnabled = true
-                    if (tintColor != null) {
-                        pulsingColor = tintColor
-                    } else {
-                        pulsingColor = mapboxBlueColor
-                    }
+                    pulsingEnabled = newState.pulsing
+                    pulsingColor = tintColor ?: MAPBOX_BLUE_COLOR
                 }
             }
 

android/src/main/java/com/rnmapbox/rnmbx/components/location/RNMBXNativeUserLocation.kt

@@ -2,18 +2,16 @@ package com.rnmapbox.rnmbx.components.location
 
 import android.annotation.SuppressLint
 import android.content.Context
-import androidx.appcompat.content.res.AppCompatResources
-import com.rnmapbox.rnmbx.components.mapview.OnMapReadyCallback
-import com.mapbox.maps.MapboxMap
 import com.mapbox.android.core.permissions.PermissionsManager
+import com.mapbox.maps.MapboxMap
 import com.mapbox.maps.Style
 import com.rnmapbox.rnmbx.R
 import com.rnmapbox.rnmbx.components.AbstractMapFeature
 import com.rnmapbox.rnmbx.components.RemovalReason
+import com.rnmapbox.rnmbx.components.mapview.OnMapReadyCallback
 import com.rnmapbox.rnmbx.components.mapview.RNMBXMapView
-
-import com.rnmapbox.rnmbx.v11compat.location.PuckBearingSource
 import com.rnmapbox.rnmbx.v11compat.image.AppCompatResourcesV11
+import com.rnmapbox.rnmbx.v11compat.location.PuckBearingSource
 
 enum class RenderMode {
     GPS, COMPASS, NORMAL
@@ -24,6 +22,26 @@ class RNMBXNativeUserLocation(context: Context) : AbstractMapFeature(context), O
     private var mMap: MapboxMap? = null
     private var mRenderMode : RenderMode = RenderMode.NORMAL;
     private var mContext : Context = context
+    var mTopImage: String? = null
+        set(value) {
+            field = value
+            applyChanges()
+        }
+    var mBearingImage: String? = null
+        set(value) {
+            field = value
+            applyChanges()
+        }
+    var mShadowImage: String? = null
+        set(value) {
+            field = value
+            applyChanges()
+        }
+    var mScale: Double = 1.0
+        set(value) {
+            field = value
+            applyChanges()
+        }
 
     override fun addToMap(mapView: RNMBXMapView) {
         super.addToMap(mapView)
@@ -64,19 +82,78 @@ class RNMBXNativeUserLocation(context: Context) : AbstractMapFeature(context), O
         mMapView?.locationComponentManager?.showNativeUserLocation(mEnabled)
     }
 
+    @SuppressLint("DiscouragedApi")
     fun applyChanges() {
-        mMapView?.locationComponentManager?.let {
+        val useCustomImages = mTopImage != null || mBearingImage != null || mShadowImage != null
+
+        val bearingImageResourceId = if (mBearingImage != null) {
+            context.resources.getIdentifier(
+                mBearingImage,
+                "drawable",
+                context.packageName
+            )
+        } else if (useCustomImages) {
+            null
+        } else when (mRenderMode) {
+            RenderMode.GPS -> R.drawable.mapbox_user_bearing_icon
+            RenderMode.COMPASS -> R.drawable.mapbox_user_puck_icon
+            RenderMode.NORMAL -> R.drawable.mapbox_user_stroke_icon
+        }
+
+        val topImageResourceId = if (mTopImage != null) {
+            context.resources.getIdentifier(
+                mTopImage,
+                "drawable",
+                context.packageName
+            )
+        } else if (useCustomImages) {
+            null
+        } else R.drawable.mapbox_user_icon
+
+        val shadowImageResourceId = if (mShadowImage != null) {
+            context.resources.getIdentifier(
+                mShadowImage,
+                "drawable",
+                context.packageName
+            )
+        } else if (useCustomImages) {
+            null
+        } else R.drawable.mapbox_user_icon_shadow
+
+        val puckBearingSource = when (mRenderMode) {
+            RenderMode.GPS -> PuckBearingSource.COURSE
+            RenderMode.COMPASS -> PuckBearingSource.HEADING
+            RenderMode.NORMAL -> null
+        }
+        val pulsing = mRenderMode == RenderMode.NORMAL
+
+
+        mMapView?.locationComponentManager?.let { locationComponentManager ->
             // emulate https://docs.mapbox.com/android/legacy/maps/guides/location-component/
-            when (mRenderMode) {
-                RenderMode.NORMAL ->
-                    it.update { it.copy(bearingImage =  null, puckBearingSource = null)}
-                RenderMode.GPS -> it.update {
-                    it.copy(bearingImage =  AppCompatResourcesV11.getDrawableImageHolder(
-                        mContext, R.drawable.mapbox_user_bearing_icon
-                    ), puckBearingSource = PuckBearingSource.COURSE) }
-                RenderMode.COMPASS -> it.update{ it.copy(bearingImage=  AppCompatResourcesV11.getDrawableImageHolder(
-                    mContext, R.drawable.mapbox_user_puck_icon
-                ), puckBearingSource = PuckBearingSource.HEADING) }
+            locationComponentManager.update { state ->
+                state.copy(
+                    bearingImage = bearingImageResourceId?.let { bearingImageResourceId ->
+                        AppCompatResourcesV11.getDrawableImageHolder(
+                            mContext,
+                            bearingImageResourceId
+                        )
+                    },
+                    topImage = topImageResourceId?.let { topImageResourceId ->
+                        AppCompatResourcesV11.getDrawableImageHolder(
+                            mContext,
+                            topImageResourceId
+                        )
+                    },
+                    shadowImage = shadowImageResourceId?.let { shadowImageResourceId ->
+                        AppCompatResourcesV11.getDrawableImageHolder(
+                            mContext,
+                            shadowImageResourceId
+                        )
+                    },
+                    puckBearingSource = puckBearingSource,
+                    pulsing = pulsing,
+                    scale = mScale
+                )
             }
         }
     }

android/src/main/java/com/rnmapbox/rnmbx/components/location/RNMBXNativeUserLocationManager.kt

@@ -3,7 +3,6 @@ package com.rnmapbox.rnmbx.components.location
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewGroupManager
 import com.facebook.react.uimanager.annotations.ReactProp
-import com.rnmapbox.rnmbx.utils.Logger
 import javax.annotation.Nonnull
 
 class RNMBXNativeUserLocationManager : ViewGroupManager<RNMBXNativeUserLocation>() {
@@ -15,12 +14,32 @@ class RNMBXNativeUserLocationManager : ViewGroupManager<RNMBXNativeUserLocation>
     @ReactProp(name = "androidRenderMode")
     fun setAndroidRenderMode(userLocation: RNMBXNativeUserLocation, mode: String) {
         when (mode) {
-            "compass" -> userLocation.setAndroidRenderMode(RenderMode.COMPASS);
-            "gps" -> userLocation.setAndroidRenderMode(RenderMode.GPS);
-            "normal" -> userLocation.setAndroidRenderMode(RenderMode.NORMAL);
+            "compass" -> userLocation.setAndroidRenderMode(RenderMode.COMPASS)
+            "gps" -> userLocation.setAndroidRenderMode(RenderMode.GPS)
+            "normal" -> userLocation.setAndroidRenderMode(RenderMode.NORMAL)
         }
     }
 
+    @ReactProp(name = "topImage")
+    fun setTopImage(userLocation: RNMBXNativeUserLocation, topImage: String?) {
+        userLocation.mTopImage = topImage
+    }
+
+    @ReactProp(name = "bearingImage")
+    fun setBearingImage(userLocation: RNMBXNativeUserLocation, bearingImage: String?) {
+        userLocation.mBearingImage = bearingImage
+    }
+
+    @ReactProp(name = "shadowImage")
+    fun setShadowImage(userLocation: RNMBXNativeUserLocation, shadowImage: String?) {
+        userLocation.mShadowImage = shadowImage
+    }
+
+    @ReactProp(name = "scale", defaultDouble = 1.0)
+    fun setScale(userLocation: RNMBXNativeUserLocation, scale: Double) {
+        userLocation.mScale = scale
+    }
+
     @Nonnull
     override fun createViewInstance(@Nonnull reactContext: ThemedReactContext): RNMBXNativeUserLocation {
         return RNMBXNativeUserLocation(reactContext)

android/src/main/java/com/rnmapbox/rnmbx/components/mapview/NativeMapViewModule.kt

@@ -1,20 +1,13 @@
 package com.rnmapbox.rnmbx.components.mapview
 
-import android.util.Log
 import com.facebook.react.bridge.Promise
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.bridge.ReadableArray
-import com.facebook.react.bridge.UIManager
 import com.facebook.react.bridge.WritableMap
 import com.facebook.react.bridge.WritableNativeMap
-import com.facebook.react.uimanager.IllegalViewOperationException
-import com.facebook.react.uimanager.UIManagerHelper
-import com.facebook.react.uimanager.common.UIManagerType
-import com.rnmapbox.rnmbx.BuildConfig
 import com.rnmapbox.rnmbx.NativeMapViewModuleSpec
 import com.rnmapbox.rnmbx.utils.ConvertUtils
 import com.rnmapbox.rnmbx.utils.ExpressionParser
-import com.rnmapbox.rnmbx.utils.Logger
 import com.rnmapbox.rnmbx.utils.ViewTagResolver
 import com.rnmapbox.rnmbx.utils.extensions.toCoordinate
 import com.rnmapbox.rnmbx.utils.extensions.toScreenCoordinate
@@ -183,6 +176,24 @@ class NativeMapViewModule(context: ReactApplicationContext, val viewTagResolver:
         }
     }
 
+    override fun setCustomLocation(
+        viewRef: Double?,
+        latitude: Double,
+        longitude: Double,
+        heading: Double?,
+        promise: Promise
+    ) {
+        withMapViewOnUIThread(viewRef, promise) {
+            it.setCustomLocation(latitude, longitude, heading, createCommandResponse(promise))
+        }
+    }
+
+    override fun removeCustomLocationProvider(viewRef: Double?, promise: Promise) {
+        withMapViewOnUIThread(viewRef, promise) {
+            it.removeCustomLocationProvider(createCommandResponse(promise))
+        }
+    }
+
     companion object {
         const val NAME = "RNMBXMapViewModule"
     }