Updating markers

[Nohus]

I am displaying a marker for the user's current location, which includes the user's bearing. This means I need to update the composable inside the marker (e.g. rotate the navigation arrow showing the bearing), as I get location updates.

I can repeatedly remove and re-add the marker, but that doesn't seem right, and it prevents me from running animations inside the marker. Is there a better way I am not seeing?

[p-lr]

I am doing the same thing in my app. For that you need the moveMarker api. The bearing is backed by a state of yours, and whenever that state changes, the composable provided to addMarker is recomposed.

[Nohus]

Thanks for the example, I was having my state just passed to the method that calls (or not) addMarker and used inside the marker composable, and my marker wasn't getting recomposed. Moving it to an external State object like in your example was the solution.

[Husoid]

Could you show an example of implementation, the link doesn't open. I also need to rotate the direction?

[p-lr]

Here's the code:

@Composable
fun PositionMarker(modifier: Modifier = Modifier) {
    val color = colorResource(id = R.color.colorPositionMarker)
    Canvas(modifier = modifier.size(29.dp)) {
        drawCircle(color, 7.5.dp.toPx())
        drawCircle(color, 14.dp.toPx(), alpha = 0.33f)
    }
}

@Composable
fun PositionOrientationMarker(modifier: Modifier = Modifier, angle: Float? = null) {
    val color = colorResource(id = R.color.colorPositionMarker)
    val innerRadius = with(LocalDensity.current) { 10.75.dp.toPx() }
    val outerRadius = with(LocalDensity.current) { 30.dp.toPx() }

    val arrowPath = remember { makeArrowPath(innerRadius, outerRadius) }

    Box(
        modifier = modifier.size(60.dp),
        contentAlignment = Alignment.Center
    ) {
        PositionMarker()
        if (angle != null) {
            Canvas(modifier.rotate(angle)) {
                drawPath(arrowPath, color)
            }
        }
    }
}

private fun makeArrowPath(innerRadius: Float, outerRadius: Float) = Path().apply {
    moveTo(0f, -innerRadius)
    arcTo(Rect(Offset.Zero, innerRadius), -90f, 33f, false)
    lineTo(0f, -outerRadius)
    arcTo(Rect(Offset.Zero, innerRadius), -90f, -33f, false)
    lineTo(0f, -outerRadius)
}

@Preview
@Composable
private fun PositionMarkerPreview() {
    PositionMarker()
}

@Preview
@Composable
private fun PositionOrientationMarkerPreview() {
    PositionOrientationMarker(angle = 45f)
}

[Husoid]

I didn't understand, please explain it to me. I'm following your example of moveMarker, but how can I update the direction angle when using moveMarker?