zIndex doesn't work with clusters

[michal-bogucki]

Android: all, physical + emulator
library version: all

I have a problem with placing my pin (orange point in image) below the clusters. The behavior is not constant. The pin sometimes appears below the clusters and other times it is above the markers. I use zIndex on markers and my point, but it has no effect on the clusters' location on the map

data class MapItemListLiteModel(
    val itemId: Long,
    val latitude: Double,
    val longitude: Double,
    val url: String,
    val point: MapPoint,
): ClusterItem {
    override fun getPosition() = point.toLatLng()
    override fun getTitle() = null
    override fun getSnippet() = null
    override fun getZIndex() = 10f
}

fun CustomRendererClustering(
    items: List<MapItemListLiteModel>,
    onClickPoint: (Long) -> Unit,
    myPosition: MarkerState,
    isLoading: Boolean,
) {
    val configuration = LocalConfiguration.current
    val screenHeight = configuration.screenHeightDp.dp
    val screenWidth = configuration.screenWidthDp.dp
    val clusterManager = rememberClusterManager<MapItemListLiteModel>()

    val (errorImage, borderSize) = remember(chooseChipsType) {
        when (chooseChipsType) {
            MapChipsType.EVENTS -> R.drawable.image_empty_event_rounde to 0.dp
            MapChipsType.CLOUDING -> R.drawable.image_cloud to 4.dp
        }
    }

    LaunchedEffect(clusterManager) {
        clusterManager?.setAlgorithm(
            NonHierarchicalViewBasedAlgorithm(
                screenWidth.value.toInt(),
                screenHeight.value.toInt()
            )
        )
    }

    val renderer = rememberClusterRenderer(
        clusterManager = clusterManager,
        clusterContent = { cluster ->
            CircleContent(
                modifier = Modifier.size(48.dp),
                text = cluster.size.toString(),
                color = Blue500,
            )
        },
        clusterItemContent = {
            Box {
                if (chooseChipsType == MapChipsType.EVENTS)
                    Image(
                        painter = painterResource(R.drawable.icon_map_pin_background),
                        contentDescription = "",
                        modifier = Modifier
                            .width(52.dp)
                            .height(64.dp)
                    )
                AsyncImage(
                    model = ImageRequest.Builder(LocalContext.current).data(it.url)
                        .memoryCacheKey(it.url).diskCacheKey(it.url)
                        .diskCachePolicy(CachePolicy.ENABLED)
                        .memoryCachePolicy(CachePolicy.ENABLED)
                        .placeholder(errorImage)
                        .error(errorImage)
                        .allowHardware(false)
                        .build(),
                    contentScale = if (it.url.isEmpty()) ContentScale.FillWidth else ContentScale.Crop,
                    contentDescription = "",
                    modifier = Modifier
                        .padding(top = 4.dp, start = 4.dp, end = 4.dp)
                        .align(Alignment.TopCenter)
                        .size(44.dp)
                        .border(borderSize, White, CircleShape)
                        .clip(CircleShape)
                        .background(Brown200)
                        .padding(if (it.url.isEmpty() && chooseChipsType == MapChipsType.CLOUDING) 6.dp else 0.dp)
                )
            }
        },
    )
    SideEffect {
        clusterManager ?: return@SideEffect
        clusterManager.setOnClusterItemClickListener {
            onClickPoint(it.itemId)
            true
        }
        clusterManager.setOnClusterClickListener {
            true
        }
    }
    SideEffect {
        if (clusterManager?.renderer != renderer && renderer != null) {
            (renderer as DefaultClusterRenderer).minClusterSize = 3
            clusterManager?.renderer = renderer
        }
    }

    if (clusterManager != null && renderer != null) {
        Clustering(
            items = items,
            clusterManager = clusterManager,
        )
        if (showShowMyLocationInformationBottomSheet != null) {
            MarkerComposable(
                state = myPosition,
                visible = isLoading.not(),
                onClick = {
                    clickPoint()
                    true
                },

                zIndex = 0.0f
            ) {
                Image(
                    modifier = Modifier.size(64.dp),
                    painter = painterResource(id = R.drawable.image_user_pin),
                    contentDescription = ""
                )
            }
        }
    }
}
    
    

[kikoso]

Hi @michal-bogucki . This might rely on the underlying implementation for clusters on android-maps-utils. I have created a ticket to track the issue here.

We are releasing soon a feature where this might be fixed. The new version will be also updated on android-maps-compose, so keep an eye on the android-maps-utils issue.