Polyline doesn't recompose when points change

[PeterAttardo]

Environment details

Android API 26 com.google.maps.android:maps-compose:2.1.0

Steps to reproduce

1. Create a map with a MutableStateList of points
2. Use the points to draw markers and a polyline between them
3. Add functionality to add or remove points from the list
4. Observe that the markers update, but the polyline does not

Code example

@Composable
fun MapScreen(){
    val waypoints = remember{ mutableStateListOf<LatLng>()}
    Map(waypoints) {
        waypoints.add(it)
    }
}

@Composable
private fun Map(
    waypoints: List<LatLng>,
    modifier: Modifier = Modifier,
    onMapClicked: (latlng: LatLng) -> Unit
){
    GoogleMap(
        modifier = modifier,
        onMapClick = onMapClicked,
    ){
        waypoints.forEach {
            Marker(state = MarkerState(position = it))
        }
        Polyline(waypoints)
    }
}

[jpoehnelt]

@PeterAttardo Please take a moment to fill out this short survey. Thank you!

This is an automated message, feel free to ignore.

[jpoehnelt]

@PeterAttardo Thank you for opening this issue. 🙏 Please check out these other resources that might be applicable:

• Support Console - If you have a support contract.
• Discord - chat with other developers
• StackOverflow - use the google-maps tag
• Google Maps Platform issue trackers

This is an automated message, feel free to ignore.

[arriolac]

This should be fixed. But a workaround would be to use a mutableStateOf instead. So:

@Composable
fun MapScreen(){
    val waypoints by remember{ mutableStateOf<List<LatLng>>()}
    Map(waypoints) {
        waypoints = waypoints + it
    }
}

[barbeau]

@arriolac Was this a bug in maps-compose or Compose itself? And specifically handling mutableStateListOf()?

I think the other potential catch here is to make sure you're using mutableStateOf<List<LatLng>>() and not mutableStateOf<ArrayList<LatLng>>(), similar to my comment here regarding recomposition and mutable collections - https://github.com/googlemaps/android-maps-compose/issues/91#issuecomment-1105229716.

[arriolac]

I believe the issue might be between the interaction of mutableStateListOf and a ComposeNode's Updater. Because Polyline as currently implemented should work. I've opened an issue in the public issue tracker for Compose here: https://issuetracker.google.com/issues/232271525

[Sergiyss]

Is the question still open? Help me. the last Polyline is not updated, but markers are drawn according to the route.

@Composable
fun MapScreen(){
  val path  = chvm.pathResult.observeAsState()
    var waypoints by remember{ mutableStateOf<List<LatLng>>(value = listOf())}

    if(path.value?.path?.size != null){
        Map(path.value?.path!!) {
            waypoints = waypoints + it
        }
    }
}

@Composable
private fun Map(
    waypoints: List<LatLng>,
    modifier: Modifier = Modifier,
    onMapClicked: (latlng: LatLng) -> Unit
){
    GoogleMap(
        modifier = modifier,
        onMapClick = onMapClicked,
    ){
        waypoints.forEach {
            Marker(state = MarkerState(position = it))
        }
        Polyline(waypoints)
    }
}

[weslleystos]

I found the same issue:

But when I was investigating the problem, I notice that when show the list in logcat.

D/MainActivity:androidx.compose.runtime.snapshots.SnapshotStateList@f1e2953

In this case we don't send the list in the end.

TrackerLocationTheme {
    val cameraPositionState = rememberCameraPositionState()
    val waypoints = remember { mutableStateListOf<LatLng>() }

    LocationService.lastLocation?.let {
        waypoints.add(it)
    }

    Scaffold(
        topBar = {
            TopAppBar(title = {
                Text(text = getString(R.string.app_name))
            })
        },
    ) { paddingValues ->
        GoogleMap(
            modifier = Modifier
                .fillMaxSize()
                .padding(paddingValues),
            cameraPositionState = cameraPositionState,
            properties = MapProperties(
                isMyLocationEnabled = true,
                mapStyleOptions = MapStyleOptions.loadRawResourceStyle(
                    LocalContext.current,
                    R.raw.map_style
                )
            ),
        ) {
            Polyline(points = waypoints.toList())
        }
    }
}

if you transform that toList, it will works fine.

[Ruineie]

I found the same issue:

But when I was investigating the problem, I notice that when show the list in logcat.

D/MainActivity:androidx.compose.runtime.snapshots.SnapshotStateList@f1e2953

In this case we don't send the list in the end.

TrackerLocationTheme {
    val cameraPositionState = rememberCameraPositionState()
    val waypoints = remember { mutableStateListOf<LatLng>() }

    LocationService.lastLocation?.let {
        waypoints.add(it)
    }

    Scaffold(
        topBar = {
            TopAppBar(title = {
                Text(text = getString(R.string.app_name))
            })
        },
    ) { paddingValues ->
        GoogleMap(
            modifier = Modifier
                .fillMaxSize()
                .padding(paddingValues),
            cameraPositionState = cameraPositionState,
            properties = MapProperties(
                isMyLocationEnabled = true,
                mapStyleOptions = MapStyleOptions.loadRawResourceStyle(
                    LocalContext.current,
                    R.raw.map_style
                )
            ),
        ) {
            Polyline(points = waypoints.toList())
        }
    }
}

if you transform that toList, it will works fine.

This works! Thank you.

[marcportabellanavarro]

This still happens at least in 4.2.0. I need to test in the latest. Lucky I found this issue otherwise I would've lost a good time going mad over this