android-maps-compose
android-maps-compose copied to clipboard
Clustering sometimes show default markers
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.
Is just random, sometimes when screen is open first time, sometimes when screen is open after 5 times.
Please be sure to include as much information as possible:
Environment details
- com.google.maps.android:maps-compose:4.4.2
- com.google.maps.android:maps-compose-utils:4.4.2
- compileSdk 34
- Android 12 (API 31)
Steps to reproduce
- Navigate to the Map screens
- Go back
- Repeat
Code example
@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()
}
}
}
}
Thanks!