Updating a ViewAnnotation using Compose

[HalTobin]

Environment

• Android OS version: 9
• Devices affected: Huawei Mate 9
• Maps SDK Version: 11.0.0

implementation("com.mapbox.maps:android:11.0.0")
implementation("com.mapbox.extension:maps-compose:11.0.0")

Observed behavior and steps to reproduce

Hello, I'm using the MapBox SDK with its Compose extensions. I have a PointAnnotationGroup, and I want to display a ViewAnnotation when the user click on a PointAnnotation. Though the ViewAnnotation isn't correctly refreshed when the user click on a second PointAnnotation, the position and the content of the ViewAnnotation aren't correctly updated, or it end up duplicating itself.

Expected behavior

When the user click on PointAnnotation, a ViewAnnotation with details about the location is displayed. If the user click on the same PointAnnotation, the ViewAnnotation is hidden, if the user click on an other PointAnnotation, the ViewAnnotation should be refreshed with the position and the text of the newly selected location.

Notes / preliminary analysis

I've noticed that when the user click on a PointAnnotation to show the ViewAnnotation, then click again on the same PointAnnotation to hide the ViewAnnotation, then when selecting an other PointAnnotation, the ViewAnnotation is correctly displayed at the corresponding position with the corresponding content and doesn't duplicate itself. Though, when clicking on a new PointAnnotation while the ViewAnnotation is displayed, cause an issue with ViewAnnotation duplicating itself or not showing at the expected position. It is one of the reason why I've decided to use the isAnnotationVisible variable and set its state to false, then true, hopping this would force the ViewAnnotation to refresh correctly.

Maybe I've simply misunderstood how to correctly implement or update the ViewAnnotation?

Additional links and references

    var isAnnotationVisible: Boolean by remember { mutableStateOf(true) }
    var currentPoint: PointAnnotation? by remember { mutableStateOf(null) }

        MapboxMap(
            modifier = Modifier.fillMaxSize(),
            mapInitOptionsFactory = { context ->
                MapInitOptions(context = context, styleUri = Style.MAPBOX_STREETS)
            },
            locationComponentSettings = LocationComponentSettings
                .Builder(createDefault2DPuck(withBearing = true))
                .setEnabled(true)
                .setPuckBearingEnabled(true)
                .setPuckBearing(PuckBearing.HEADING)
                .build(),
            mapViewportState = mapViewportState
        ) {
            if (viewedIcon != null && defaultIcon != null) {
                PointAnnotationGroup(
                    annotations = state.targets.getPointsAnnotation(viewedIcon, defaultIcon),
                    onClick = { point ->
                        val oldId = currentPoint?.getData()?.targetId
                        isAnnotationVisible = false
                        currentPoint = null
                        if (oldId != point.getData()?.targetId) {
                            currentPoint = point
                            isAnnotationVisible = true
                        }
                        return@PointAnnotationGroup true
                    }
                )
            }
            if (isAnnotationVisible) {
                currentPoint?.let { point ->
                    point.getData()?.let { data ->
                        data.targetName?.let { text ->
                            ViewAnnotation(
                                options = viewAnnotationOptions {
                                    geometry(point.geometry)
                                    annotationAnchors({
                                        anchor(ViewAnnotationAnchor.BOTTOM)
                                        offsetY(75.0)
                                    })
                                    allowOverlap(false)
                                }
                            ) {
                                if (isAnnotationVisible) Row(
                                    modifier = Modifier
                                        .clip(RoundedCornerShape(8.dp))
                                        .clickable {
                                            data.targetId?.let { onEvent(TargetEvent.TargetSelect(it)) }
                                        }
                                        .background(DarkGray),
                                ) {
                                    Text(
                                        modifier = Modifier
                                            .padding(horizontal = 8.dp)
                                            .widthIn(0.dp, 128.dp),
                                        text = text, color = White,
                                        textAlign = TextAlign.Center
                                    )
                                }

                            }
                        }

                    }
                }
            }
        }