Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Z-index not working #1424

Open
kikoso opened this issue Nov 26, 2024 · 0 comments
Open

Z-index not working #1424

kikoso opened this issue Nov 26, 2024 · 0 comments
Labels
triage me I really want to be triaged. type: bug Error or flaw in code with unintended results or allowing sub-optimal usage patterns.

Comments

@kikoso
Copy link
Collaborator

kikoso commented Nov 26, 2024

This is a cross-referenced issue from Android Maps Compose, copying the relevant code:

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

image

image image
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 kikoso added type: bug Error or flaw in code with unintended results or allowing sub-optimal usage patterns. triage me I really want to be triaged. labels Nov 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
triage me I really want to be triaged. type: bug Error or flaw in code with unintended results or allowing sub-optimal usage patterns.
Projects
None yet
Development

No branches or pull requests

1 participant