Jetpack Compose Clustering sometimes show default markers

Question

I have a screen that contain a list of custom markers with clustering and works fine. The problem is sometime after open de screen my google maps show my customs markers AND the default markers on the same place.

    @Composable
    fun MapScreen(stepResult: HomeState.StepResult) {
    val sheetState = rememberModalBottomSheetState(
        initialValue = ModalBottomSheetValue.Hidden
    )

    stepResult.games.let { games ->
        val items = games.map {
            MapTenant(
                itemPosition = LatLng(it.latLng.latitude, it.latLng.longitude),
                itemTitle = it.name,
                itemSnippet = it.address,
                itemZIndex = 0f,
                item = it
            )
        }

        if (items.isEmpty()) {
            return
        }

        Box {
            TenantMapList(sheetState, items)
        }
    }
}

@Composable
fun GoogleMapClustering(items: List<MapTenant>, onMapSelected: (List<MapTenant>) -> Unit) {
    var cameraState = rememberCameraPositionState {
        position = CameraPosition.fromLatLngZoom(items.first().itemPosition, 10f)
    }

    GoogleMap(
        modifier = Modifier
            .fillMaxSize()
            .padding(top = 32.dp),
        cameraPositionState = cameraState
    ) {
        CustomUiClustering(items = items, onMapSelected = {
            onMapSelected(it)
        }, onItemSelected = {
            onMapSelected(listOf(it))
        })
    }
}

@OptIn(MapsComposeExperimentalApi::class)
@Composable
private fun CustomUiClustering(
    items: List<MapTenant>,
    onMapSelected: (List<MapTenant>) -> Unit,
    onItemSelected: (MapTenant) -> Unit
) {
    Clustering(items = items,
        onClusterClick = {
            onMapSelected(it.items.toList())
            false
        }, onClusterItemClick = {
            onItemSelected(it)
            true
        },
        clusterContent = { cluster ->
            CircleContent(
                modifier = Modifier.size(40.dp),
                text = "%,d".format(cluster.size),
            )
        },
        clusterItemContent = {
            CircleContent(
                modifier = Modifier.size(20.dp),
                text = "",
            )
        })
}

@Composable
private fun CircleContent(
    text: String,
    modifier: Modifier = Modifier,
) {
    Surface(
        modifier,
        shape = CircleShape,
        color = ComplementaryPopUp,
        contentColor = Color.White,
        border = BorderStroke(2.dp, defaultGradient)
    ) {
        Box(contentAlignment = Alignment.Center) {
            Text(
                text, fontSize = 16.sp, fontWeight = FontWeight.Black, textAlign = TextAlign.Center
            )
        }
    }
}

@Composable
fun TenantMapList(
    sheetState: ModalBottomSheetState,
    items: List<MapTenant>,
) {
    var selectedTenants by remember { mutableStateOf<List<MapTenant>>(emptyList()) }

    ModalBottomSheetLayout(sheetState = sheetState,
        sheetShape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp),
        sheetBackgroundColor = ComplementaryPopUp,
        scrimColor = MaterialTheme.colors.onSurface.copy(alpha = 0.50f),
        sheetContent = {
            TenantsList(Modifier.wrapContentHeight(), selectedTenants)
        }) {

        val scope = rememberCoroutineScope()

        GoogleMapClustering(items) {
            selectedTenants = it
            scope.launch {
                sheetState.show()
            }
        }
    }
}

Is just random, sometimes when screen is open first time, sometimes when screen is open after 5 times.

Answer 1

Use ClusterManager instead of defining your cluster item specification directly on the Clustering object.

Then, before showing the Clustering, add if (clusterManager.renderer != null).

Example:

GoogleMap() {
        val clusterManager = rememberClusterManager<ClusterItem>()

        clusterManager?.let {
            val renderer = rememberClusterRenderer(
                clusterManager = clusterManager,
                clusterContent = {
                    // Your cluster content
                },
                clusterItemContent = {
                    // Your cluster item content
                },
            )

            SideEffect {
                if (clusterManager.renderer != renderer) {
                    clusterManager.renderer = renderer ?: return@SideEffect
                }
                clusterManager.algorithm =
                    NonHierarchicalDistanceBasedAlgorithm<AttractionClusterItem>().apply {
                        maxDistanceBetweenClusteredItems = 150
                    }
                clusterManager.setOnClusterClickListener {
                    // Your action when clicking the cluster.
                }
                clusterManager.setOnClusterItemClickListener {
                    // Your action when clicking the cluster item
                }
            }
            
            // The key is HERE! You need to check if the renderer is
            // not null before showing the Clustering.
            if (clusterManager.renderer != null) {
                Clustering(
                    items = yourClusterItems,
                    clusterManager = clusterManager,
                )
            }
        }
    }

Answer 2

You should update the library to version 6.2.1. This specific bug is reported as being fixed in that release.