Add tap gesture support to Marker components (#6786)

Adds tap (click) gesture support to Marker components across both iOS
and Android platforms, providing API parity and consistent user
interaction patterns. To keep the Markers feature simple I've only added
support for Tap (Click) )gestures, but it would be trivial to add other gesture
types if needed.

iOS Implementation:
- Add `onTapGesture` modifier to Marker component with callback support
- Update SwiftUI MarkersExample to demonstrate interactive markers with
color changes

Android Implementation:
- Add `onClick` parameter to Marker composable with optional callback
function
- Update MarkersActivity to showcase tap functionality with random color
transitions

GitOrigin-RevId: eadd595cdec6c886a7ceca08a688bfd48afb8768

Author: pjleonard37

CHANGELOG.md

@@ -7,6 +7,9 @@ Mapbox welcomes participation and contributions from everyone.
 # main
 ## Features ✨ and improvements 🏁
 * Added experimental `MapOptions.Builder.scaleFactor()` for scaling icons and texts.
+* Add click gesture support to `Marker` composable with `onClick` parameter
+
+## Bug fixes 🐞
 * Introduced `ScaleBarSettings.distanceUnits` property supporting metric, imperial, and nautical units, replacing the boolean `isMetricUnits` property.
 
 # 11.16.0-rc.2 October 14, 2025

compose-app/src/main/java/com/mapbox/maps/compose/testapp/examples/annotation/MarkersActivity.kt

@@ -47,7 +47,7 @@ public class MarkersActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
     super.onCreate(savedInstanceState)
     setContent {
-      val tappedPoints = remember { mutableStateListOf<Point>() }
+      val clickedPoints = remember { mutableStateListOf<Point>() }
       var markerColor by remember { mutableStateOf(Color(0xffcfdaf7)) }
       var strokeColor by remember { mutableStateOf(Color(0xff3a59fa)) }
       var showStroke by remember { mutableStateOf(true) }
@@ -81,11 +81,11 @@ public class MarkersActivity : ComponentActivity() {
               MapboxStandardStyle(
                 standardStyleState = rememberStandardStyleState {
                   interactionsState.onMapClicked { context ->
-                    tappedPoints.add(context.coordinateInfo.coordinate)
+                    clickedPoints.add(context.coordinateInfo.coordinate)
                     return@onMapClicked true
                   }
                   interactionsState.onMapLongClicked { _ ->
-                    tappedPoints.clear()
+                    clickedPoints.clear()
                     return@onMapLongClicked true
                   }
                 }
@@ -96,14 +96,20 @@ public class MarkersActivity : ComponentActivity() {
               point = HELSINKI,
               color = markerColor,
               stroke = if (showStroke) strokeColor else null,
-              text = if (showText) "Central Helsinki" else null
+              text = if (showText) "Central Helsinki" else null,
+              onClick = {
+                markerColor = getRandomColor()
+              }
             )
-            tappedPoints.forEach { it ->
+            clickedPoints.forEach { it ->
               Marker(
                 point = it,
                 color = markerColor,
                 stroke = if (showStroke) strokeColor else null,
-                text = if (showText) String.format("%.3f, %.3f", it.latitude(), it.longitude()) else null
+                text = if (showText) String.format("%.3f, %.3f", it.latitude(), it.longitude()) else null,
+                onClick = {
+                  markerColor = getRandomColor()
+                }
               )
             }
           }
@@ -144,7 +150,7 @@ private fun SelectionBox(
       horizontalAlignment = Alignment.CenterHorizontally
     ) {
       Text(
-        text = "Tap map to add a Marker",
+        text = "Click to add a marker or change marker color",
         color = Color.White,
         modifier = Modifier.padding(bottom = 4.dp)
       )
@@ -238,4 +244,11 @@ private fun SelectionBox(
 private val colorOptions = listOf(
   Color.Red, Color.Green, Color(0xff4264fb), Color.Yellow, Color.Magenta, Color.Cyan,
   Color.Black, Color.White, Color.Gray, Color(0xff0f38bf)
-)
+)
+
+/**
+ * Get a random color from the available color options
+ */
+private fun getRandomColor(): Color {
+  return colorOptions.random()
+}

extension-compose/api/Release/metalava.txt

@@ -173,7 +173,7 @@ package com.mapbox.maps.extension.compose.annotation {
   }
 
   public final class MarkerKt {
-    method @androidx.compose.runtime.Composable @com.mapbox.maps.MapboxExperimental @com.mapbox.maps.extension.compose.MapboxMapComposable public static void Marker(com.mapbox.geojson.Point point, long color = Color(4291812087), long innerColor = Color(4294967295), androidx.compose.ui.graphics.Color? stroke = Color(4282014202), String? text = null);
+    method @androidx.compose.runtime.Composable @com.mapbox.maps.MapboxExperimental @com.mapbox.maps.extension.compose.MapboxMapComposable public static void Marker(com.mapbox.geojson.Point point, long color = Color(4291812087), long innerColor = Color(4294967295), androidx.compose.ui.graphics.Color? stroke = Color(4282014202), String? text = null, kotlin.jvm.functions.Function0<kotlin.Unit>? onClick = null);
   }
 
   public final class ViewAnnotationKt {

extension-compose/api/extension-compose.api

@@ -197,7 +197,7 @@ public final class com/mapbox/maps/extension/compose/annotation/IconImageKt {
 }
 
 public final class com/mapbox/maps/extension/compose/annotation/MarkerKt {
-	public static final fun Marker-YiRMAXg (Lcom/mapbox/geojson/Point;JJLandroidx/compose/ui/graphics/Color;Ljava/lang/String;Landroidx/compose/runtime/Composer;II)V
+	public static final fun Marker-_2sGejQ (Lcom/mapbox/geojson/Point;JJLandroidx/compose/ui/graphics/Color;Ljava/lang/String;Lkotlin/jvm/functions/Function0;Landroidx/compose/runtime/Composer;II)V
 }
 
 public final class com/mapbox/maps/extension/compose/annotation/ViewAnnotationKt {

extension-compose/src/androidTest/java/com/mapbox/maps/extension/compose/annotation/ViewAnnotationTest.kt

@@ -138,6 +138,59 @@ public class ViewAnnotationTest {
     composeTestRule.onNodeWithTag(MAP_TEST_TAG).assertExists()
   }
 
+  @OptIn(MapboxExperimental::class)
+  @Test
+  public fun testMarkerClickGesture() {
+    var clicked = false
+    val onClickCallback = { clicked = true }
+    var viewAnnotationCount = 0
+
+    composeTestRule.setContent {
+      MapboxMap(
+        Modifier
+          .fillMaxSize()
+          .testTag(MAP_TEST_TAG),
+        mapViewportState = rememberMapViewportState {
+          setCameraOptions {
+            zoom(ZOOM)
+            center(HELSINKI)
+          }
+        },
+        mapState = rememberMapState(),
+      ) {
+        // Create a marker with click functionality
+        Marker(
+          point = HELSINKI,
+          text = VIEW_ANNOTATION_TEXT,
+          onClick = onClickCallback
+        )
+
+        // Use MapEffect to count annotations
+        MapEffect(Unit) { mapView ->
+          viewAnnotationCount = mapView.viewAnnotationManager.annotations.size
+        }
+      }
+    }
+    composeTestRule.waitForIdle()
+
+    // Wait for marker to be added
+    composeTestRule.waitUntil(timeoutMillis = VIEW_APPEAR_TIMEOUT_MS, condition = {
+      viewAnnotationCount > 0
+    })
+
+    // Verify marker was created
+    assert(viewAnnotationCount == 1) { "Expected 1 view annotation, got $viewAnnotationCount" }
+
+    // Verify callback is not yet triggered
+    assert(!clicked) { "Click callback should not be triggered yet" }
+
+    // Execute the click action directly (similar to how iOS test calls marker.tapAction?())
+    onClickCallback()
+
+    // Verify that our click callback was invoked
+    assert(clicked) { "Expected click callback to be triggered" }
+  }
+
   private fun setMapContent(
     cameraCenter: Point,
     annotationCenter: Point,

extension-compose/src/main/java/com/mapbox/maps/extension/compose/annotation/Marker.kt

@@ -10,6 +10,8 @@ import android.text.TextPaint
 import android.text.TextUtils
 import androidx.compose.foundation.Canvas
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -60,6 +62,7 @@ import java.lang.ref.WeakReference
  * @param innerColor The inner color of the [Marker]
  * @param stroke The color of optional strokes. Pass null to remove the strokes.
  * @param text A text to be displayed with the [Marker]
+ * @param onClick Optional callback to be invoked when the marker is clicked
  */
 @Composable
 @MapboxMapComposable
@@ -69,7 +72,8 @@ public fun Marker(
   color: Color = Color(0xffcfdaf7),
   innerColor: Color = Color(0xffffffff),
   stroke: Color? = Color(0xff3a59fa),
-  text: String? = null
+  text: String? = null,
+  onClick: (() -> Unit)? = null
 ) {
   val stableOptions = remember(point) {
     viewAnnotationOptions {
@@ -87,7 +91,17 @@ public fun Marker(
   ) {
     Column(
       modifier = Modifier
-        .size(width = 120.dp, height = 100.dp),
+        .size(width = 120.dp, height = 100.dp)
+        .run {
+          if (onClick != null) {
+            clickable(
+              indication = null,
+              interactionSource = remember { MutableInteractionSource() }
+            ) { onClick() }
+          } else {
+            this
+          }
+        },
       horizontalAlignment = Alignment.CenterHorizontally,
       verticalArrangement = Arrangement.Top
     ) {