Has anyone achieved a List-Detail with Maps in the...
# compose
p
Has anyone achieved a List-Detail with Maps in the detail? I'm having issues with maps with the data passed from the selected item of the list. I can see with a log that the maps is effectively being recomposed, but instead of displaying the new data, it's displaying the new data and the previous data. More in the thread.
My list detail scaffold:
Copy code
ListDetailPaneScaffold(
    modifier = Modifier.fillMaxSize(),
    directive = navigator.scaffoldDirective,
    value = navigator.scaffoldValue,
    listPane = {
        AnimatedPane {
            LinesList(
                lines = uiState.lines,
                onItemClick = { index ->
                    navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, index)
                },
            )
        }
    },
    detailPane = {
        AnimatedPane {
            navigator.currentDestination?.content?.let { index ->
                vm.selectLine(uiState.lines[index]) // this set in uiState.mapState the new markers
                MapPanel(mapState = uiState.mapState) 
            }
        }
    },
)
My map composable:
Copy code
@Composable
fun MapPanel(
    mapState: MapState,
    modifier: Modifier = Modifier
) {
    val showMarkers: Boolean by remember { derivedStateOf { cameraPositionState.position.zoom > minZoomForVisibleMarkers } } // default 15
    val boundsBuilder = LatLngBounds.builder()

    GoogleMap(
        modifier = modifier.fillMaxSize(),
        cameraPositionState = cameraPositionState
    ) {
        val bitmapDescriptor: BitmapDescriptor by remember { mutableStateOf(BitmapDescriptorFactory.fromResource(R.drawable.place)) }
        for (busStop in mapState.busStops) {
            val markerState = rememberMarkerState(
                position = LatLng(busStop.lat, busStop.lon)
            )

            Marker(
                state = markerState,
                icon = bitmapDescriptor,
                visible = showMarkers,
                onClick = {
                    selectBusStop(busStop)
                    false
                }
            )

            boundsBuilder.include(markerState.position)
        }

        if (centerInMarkers && mapState.busStops.isNotEmpty()) {
            LaunchedEffect(key1 = true ) {
                cameraPositionState.animate(
                    update = CameraUpdateFactory.newLatLngBounds(bounds, 100)
                )
            }
        }
    }
}
c
Did you file a report about the other issues. Seems that this is connected. Most probably markers are just added and not „overridden“ because the map itself did not get a state change.
p
That's an interesting point of view, but I'm not sure this is a bug. On the other hand I finally got it working
I nested the "for" that adds the markers on the GoogleMap inside a
key(mapState) {}
and suddenly it started working. I don't understand why that makes it recompose correctly
I thought that passing a new mapState whould make the entire goolge maps and their markers to recompose, but seems that not