maplibre-compose allow customisation of location dot style (#929)

- And style it according to our designs.

Related to:
- https://github.com/vector-im/element-meta/issues/1682
This commit is contained in:
Marco Romano 2023-07-20 12:09:40 +02:00 committed by GitHub
parent 114f868c1f
commit 584a227920
4 changed files with 42 additions and 17 deletions

View file

@ -20,6 +20,7 @@ import android.Manifest
import android.view.Gravity import android.view.Gravity
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.ReadOnlyComposable import androidx.compose.runtime.ReadOnlyComposable
import androidx.compose.ui.graphics.Color
import com.mapbox.mapboxsdk.camera.CameraPosition import com.mapbox.mapboxsdk.camera.CameraPosition
import com.mapbox.mapboxsdk.geometry.LatLng import com.mapbox.mapboxsdk.geometry.LatLng
import io.element.android.libraries.maplibre.compose.MapLocationSettings import io.element.android.libraries.maplibre.compose.MapLocationSettings
@ -53,6 +54,13 @@ object MapDefaults {
val locationSettings: MapLocationSettings val locationSettings: MapLocationSettings
get() = MapLocationSettings( get() = MapLocationSettings(
locationEnabled = false, locationEnabled = false,
backgroundTintColor = Color.White,
foregroundTintColor = Color.Black,
backgroundStaleTintColor = Color.White,
foregroundStaleTintColor = Color.Black,
accuracyColor = Color.Black,
pulseEnabled = true,
pulseColor = Color.Black,
) )
val centerCameraPosition = CameraPosition.Builder() val centerCameraPosition = CameraPosition.Builder()

View file

@ -18,6 +18,8 @@
package io.element.android.libraries.maplibre.compose package io.element.android.libraries.maplibre.compose
import androidx.compose.ui.graphics.Color
internal val DefaultMapLocationSettings = MapLocationSettings() internal val DefaultMapLocationSettings = MapLocationSettings()
/** /**
@ -28,4 +30,11 @@ internal val DefaultMapLocationSettings = MapLocationSettings()
*/ */
public data class MapLocationSettings( public data class MapLocationSettings(
public val locationEnabled: Boolean = false, public val locationEnabled: Boolean = false,
public val backgroundTintColor: Color = Color.Unspecified,
public val foregroundTintColor: Color = Color.Unspecified,
public val backgroundStaleTintColor: Color = Color.Unspecified,
public val foregroundStaleTintColor: Color = Color.Unspecified,
public val accuracyColor: Color = Color.Unspecified,
public val pulseEnabled: Boolean = false,
public val pulseColor: Color = Color.Unspecified
) )

View file

@ -39,6 +39,7 @@ internal class MapPropertiesNode(
style: Style, style: Style,
context: Context, context: Context,
cameraPositionState: CameraPositionState, cameraPositionState: CameraPositionState,
locationSettings: MapLocationSettings,
) : MapNode { ) : MapNode {
init { init {
@ -46,7 +47,13 @@ internal class MapPropertiesNode(
LocationComponentActivationOptions.Builder(context, style) LocationComponentActivationOptions.Builder(context, style)
.locationComponentOptions( .locationComponentOptions(
LocationComponentOptions.builder(context) LocationComponentOptions.builder(context)
.pulseEnabled(true) .backgroundTintColor(locationSettings.backgroundTintColor.toArgb())
.foregroundTintColor(locationSettings.foregroundTintColor.toArgb())
.backgroundStaleTintColor(locationSettings.backgroundStaleTintColor.toArgb())
.foregroundStaleTintColor(locationSettings.foregroundStaleTintColor.toArgb())
.accuracyColor(locationSettings.accuracyColor.toArgb())
.pulseEnabled(locationSettings.pulseEnabled)
.pulseColor(locationSettings.pulseColor.toArgb())
.build() .build()
) )
.locationEngineRequest( .locationEngineRequest(
@ -116,9 +123,9 @@ internal class MapPropertiesNode(
@Composable @Composable
internal inline fun MapUpdater( internal inline fun MapUpdater(
cameraPositionState: CameraPositionState, cameraPositionState: CameraPositionState,
mapLocationSettings: MapLocationSettings, locationSettings: MapLocationSettings,
mapUiSettings: MapUiSettings, uiSettings: MapUiSettings,
mapSymbolManagerSettings: MapSymbolManagerSettings, symbolManagerSettings: MapSymbolManagerSettings,
) { ) {
val mapApplier = currentComposer.applier as MapApplier val mapApplier = currentComposer.applier as MapApplier
val map = mapApplier.map val map = mapApplier.map
@ -132,21 +139,22 @@ internal inline fun MapUpdater(
style = style, style = style,
context = context, context = context,
cameraPositionState = cameraPositionState, cameraPositionState = cameraPositionState,
locationSettings = locationSettings,
) )
}, },
update = { update = {
set(mapLocationSettings.locationEnabled) { map.locationComponent.isLocationComponentEnabled = it } set(locationSettings.locationEnabled) { map.locationComponent.isLocationComponentEnabled = it }
set(mapUiSettings.compassEnabled) { map.uiSettings.isCompassEnabled = it } set(uiSettings.compassEnabled) { map.uiSettings.isCompassEnabled = it }
set(mapUiSettings.rotationGesturesEnabled) { map.uiSettings.isRotateGesturesEnabled = it } set(uiSettings.rotationGesturesEnabled) { map.uiSettings.isRotateGesturesEnabled = it }
set(mapUiSettings.scrollGesturesEnabled) { map.uiSettings.isScrollGesturesEnabled = it } set(uiSettings.scrollGesturesEnabled) { map.uiSettings.isScrollGesturesEnabled = it }
set(mapUiSettings.tiltGesturesEnabled) { map.uiSettings.isTiltGesturesEnabled = it } set(uiSettings.tiltGesturesEnabled) { map.uiSettings.isTiltGesturesEnabled = it }
set(mapUiSettings.zoomGesturesEnabled) { map.uiSettings.isZoomGesturesEnabled = it } set(uiSettings.zoomGesturesEnabled) { map.uiSettings.isZoomGesturesEnabled = it }
set(mapUiSettings.logoGravity) { map.uiSettings.logoGravity = it } set(uiSettings.logoGravity) { map.uiSettings.logoGravity = it }
set(mapUiSettings.attributionGravity) { map.uiSettings.attributionGravity = it } set(uiSettings.attributionGravity) { map.uiSettings.attributionGravity = it }
set(mapUiSettings.attributionTintColor) { map.uiSettings.setAttributionTintColor(it.toArgb()) } set(uiSettings.attributionTintColor) { map.uiSettings.setAttributionTintColor(it.toArgb()) }
set(mapSymbolManagerSettings.iconAllowOverlap) { symbolManager.iconAllowOverlap = it } set(symbolManagerSettings.iconAllowOverlap) { symbolManager.iconAllowOverlap = it }
update(cameraPositionState) { this.cameraPositionState = it } update(cameraPositionState) { this.cameraPositionState = it }
} }

View file

@ -124,9 +124,9 @@ public fun MapboxMap(
) { ) {
MapUpdater( MapUpdater(
cameraPositionState = currentCameraPositionState, cameraPositionState = currentCameraPositionState,
mapUiSettings = currentUiSettings, uiSettings = currentUiSettings,
mapLocationSettings = currentMapLocationSettings, locationSettings = currentMapLocationSettings,
mapSymbolManagerSettings = currentSymbolManagerSettings, symbolManagerSettings = currentSymbolManagerSettings,
) )
CompositionLocalProvider( CompositionLocalProvider(
LocalCameraPositionState provides cameraPositionState, LocalCameraPositionState provides cameraPositionState,