feat: support dynamic anchor and zIndex in Clustering

Author: kikoso

maps-app/src/main/java/com/google/maps/android/compose/markerexamples/MarkerClusteringActivity.kt

@@ -49,6 +49,7 @@ import com.google.maps.android.compose.GoogleMap
 import com.google.maps.android.compose.MapsComposeExperimentalApi
 import com.google.maps.android.compose.MarkerInfoWindow
 import com.google.maps.android.compose.clustering.Clustering
+import com.google.maps.android.compose.clustering.clusteringMarkerProperties
 import com.google.maps.android.compose.clustering.rememberClusterManager
 import com.google.maps.android.compose.clustering.rememberClusterRenderer
 import com.google.maps.android.compose.rememberCameraPositionState
@@ -161,6 +162,7 @@ private fun DefaultClustering(items: List<MyItem>) {
 @OptIn(MapsComposeExperimentalApi::class)
 @Composable
 private fun CustomUiClustering(items: List<MyItem>) {
+    var selectedItem by remember { mutableStateOf<MyItem?>(null) }
     Clustering(
         items = items,
         // Optional: Handle clicks on clusters, cluster items, and cluster item info windows
@@ -170,6 +172,7 @@ private fun CustomUiClustering(items: List<MyItem>) {
         },
         onClusterItemClick = {
             Log.d(TAG, "Cluster item clicked! $it")
+            selectedItem = if (selectedItem == it) null else it
             false
         },
         onClusterItemInfoWindowClick = {
@@ -184,7 +187,20 @@ private fun CustomUiClustering(items: List<MyItem>) {
             )
         },
         // Optional: Custom rendering for non-clustered items
-        clusterItemContent = null,
+        clusterItemContent = { item ->
+            val isSelected = item == selectedItem
+            if (isSelected) {
+                clusteringMarkerProperties(
+                    anchor = Offset(0.5f, 0.5f),
+                    zIndex = 1.0f
+                )
+            }
+            CircleContent(
+                modifier = Modifier.size(if (isSelected) 40.dp else 20.dp),
+                text = "",
+                color = if (isSelected) Color.Red else Color.Green,
+            )
+        },
         clusterContentAnchor = Offset(0.5f, 0.5f),
         // Optional: Customization hook for clusterManager and renderer when they're ready
         onClusterManager = { clusterManager ->

maps-compose-utils/src/main/java/com/google/maps/android/compose/clustering/ClusterRenderer.kt

@@ -144,7 +144,11 @@ internal class ComposeUiClusterRenderer<T : ClusterItem>(
                 when (key) {
                     is ViewKey.Cluster -> getMarker(key.cluster)
                     is ViewKey.Item -> getMarker(key.item)
-                }?.setIcon(renderViewToBitmapDescriptor(view))
+                }?.apply {
+                    setIcon(renderViewToBitmapDescriptor(view))
+                    view.properties.anchor?.let { setAnchor(it.x, it.y) }
+                    view.properties.zIndex?.let { zIndex = it }
+                }
             }
 
     }
@@ -235,10 +239,20 @@ internal class ComposeUiClusterRenderer<T : ClusterItem>(
         private val content: @Composable () -> Unit,
     ) : AbstractComposeView(context) {
 
+        val properties = ClusteringMarkerProperties()
         var onInvalidate: (() -> Unit)? = null
 
         @Composable
-        override fun Content() = content()
+        override fun Content() {
+            androidx.compose.runtime.LaunchedEffect(properties.anchor, properties.zIndex) {
+                invalidate()
+            }
+            androidx.compose.runtime.CompositionLocalProvider(
+                LocalClusteringMarkerProperties provides properties
+            ) {
+                content()
+            }
+        }
 
         override fun onDescendantInvalidated(child: View, target: View) {
             super.onDescendantInvalidated(child, target)

maps-compose-utils/src/main/java/com/google/maps/android/compose/clustering/Clustering.kt

@@ -11,6 +11,12 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberUpdatedState
 import androidx.compose.runtime.snapshotFlow
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.UiComposable
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.platform.LocalContext
@@ -31,6 +37,43 @@ import com.google.maps.android.compose.rememberReattachClickListenersHandle
 import kotlinx.coroutines.awaitCancellation
 import kotlinx.coroutines.launch
 
+/**
+ * Properties for a marker in [Clustering].
+ */
+public class ClusteringMarkerProperties {
+    public var anchor: Offset? by mutableStateOf(null)
+        internal set
+    public var zIndex: Float? by mutableStateOf(null)
+        internal set
+}
+
+/**
+ * [CompositionLocal] used to provide [ClusteringMarkerProperties] to the content of a cluster or
+ * cluster item.
+ */
+public val LocalClusteringMarkerProperties: androidx.compose.runtime.ProvidableCompositionLocal<ClusteringMarkerProperties> =
+    staticCompositionLocalOf { ClusteringMarkerProperties() }
+
+/**
+ * Helper function to specify properties for the marker representing a cluster or cluster item.
+ *
+ * @param anchor the anchor for the marker image. If null, the default anchor specified in
+ * [Clustering] will be used.
+ * @param zIndex the z-index of the marker. If null, the default z-index specified in [Clustering]
+ * will be used.
+ */
+@Composable
+public fun clusteringMarkerProperties(
+    anchor: Offset? = null,
+    zIndex: Float? = null,
+) {
+    val properties = LocalClusteringMarkerProperties.current
+    SideEffect {
+        properties.anchor = anchor
+        properties.zIndex = zIndex
+    }
+}
+
 /**
  * Groups many items on a map based on zoom level.
  *