[MAPSSDK-851] Add Animation support to Marker on Android and iOS (#7661)

This PR adds pre-defined animations to Markers for both iOS and Android,
enabling developers to easily animate markers when they appear (marker
is added to the map) or disappear (removed from map). There are three
pre-defined animations, which can be combined

GitOrigin-RevId: 37a14f5b0ffa8c7adc9d2b0421b0114507a5f17b

Author: pjleonard37

CHANGELOG.md

@@ -4,14 +4,15 @@ Mapbox welcomes participation and contributions from everyone.
 
 ## main
 
+### Features ✨ and improvements 🏁
+* Add animation to experimental `Marker` with two animation triggers: `appear` and `disappear`. Each trigger accepts `MarkerAnimationEffect` including `wiggle` (pendulum rotation), `scale`, `fadeIn`, and `fadeOut`. Effects can be customized with parameters (e.g., `scale(from: 0.5, to: 1.5)`, `fade(from: 0.5, to: 1.0)`) and combined for rich animations. See `MarkersExample` for usage.
+
 ## 11.19.0-rc.1 - 12 February, 2026
 
 ### Features ✨ and improvements 🏁
 * Introduce new `LineLayer.lineElevationGroundScale` property to scale elevated lines with terrain exaggeration.
 * Promote elevated lines properties to stable: `LineLayer.lineZOffset` and `LineLayer.lineElevationReference`.
 * Introduce experimental `SymbolScaleBehavior` API to automatically scale map symbols (icons and text) based on system accessibility text size settings. Set `MapboxMap.symbolScaleBehavior` property to configure: `.system` (automatic scaling), `.system(mapping:)` (custom mapping function), or `.fixed(scaleFactor:)` (fixed scale, default is 1.0). Valid scale factor range is [0.8, 2.0]. Automatic scaling is opt-in; symbols default to fixed 1.0x scale.
-
-### Features ✨ and improvements 🏁
 * Add `ModelSource` support with `Model`, `ModelMaterialOverride`, and `ModelNodeOverride` to enable interactive 3D models. Material overrides allow customization of color, emissive strength, opacity, and color mix intensity. Node overrides enable control of model part transformations such as rotating doors, landing gear, or propellers. Models can be updated via source-driven approach (modifying `ModelSource.models` directly) or feature-state driven approach (using expressions with feature state for dynamic control). For implementation examples, see `Interactive3DModelFeatureStateExample` (SwiftUI), `Interactive3DModelSourceExample` (UIKit), and `Animated3DModelSourceExample` (SwiftUI).
 
 ## 11.19.0-beta.1 - 28 January, 2026

Sources/Examples/SwiftUI Examples/MarkersExample.swift

@@ -8,60 +8,138 @@ struct MarkersExample: View {
     @State private var showStroke: Bool = true
     @State private var showText: Bool = true
     @State private var overlayHeight: CGFloat = 0
-    @State private var markerText: String = "Central Helsinki"
-    @State private var tappedPoints = [CLLocationCoordinate2D]()
+    @State private var showPresetMarkers: Bool = true
+
+    // Helsinki coordinates for the map center
+    private let centerCoord = CLLocationCoordinate2D(latitude: 60.1699, longitude: 24.9384)
+
+    // User-added markers
+    @State private var userMarkers: [MarkerData] = []
 
     var body: some View {
-        Map(initialViewport: .camera(center: .helsinki, zoom: 15, pitch: 60)) {
-            Marker(coordinate: .helsinki)
-                .color(markerColor)
-                .stroke(showStroke ? strokeColor : nil)
-                .text(showText ? markerText : nil)
-                .onTapGesture {
-                    markerColor = .random
-                }
+        Map(initialViewport: .camera(center: centerCoord, zoom: 13, pitch: 45)) {
+            // Three preset markers demonstrating different animation types
+            if showPresetMarkers {
+                let coord1 = CLLocationCoordinate2D(latitude: 60.1699, longitude: 24.9384 - 0.01)
+                Marker(coordinate: coord1)
+                    .color(markerColor)
+                    .stroke(showStroke ? strokeColor : nil)
+                    .text(showText ? "Wiggle+Scale" : nil)
+                    .animation(.wiggle, .scale, when: .appear)
+                    .animation(.wiggle, .scale(from: 1, to: 0), when: .disappear)
+                    .onTapGesture {
+                        print("Marker tapped at: \(coord1.latitude), \(coord1.longitude)")
+                    }
 
-            ForEvery(tappedPoints, id: \.latitude) { coord in
-                Marker(coordinate: coord)
+                let coord2 = CLLocationCoordinate2D(latitude: 60.1699, longitude: 24.9384)
+                Marker(coordinate: coord2)
                     .color(markerColor)
                     .stroke(showStroke ? strokeColor : nil)
-                    .text(showText ? String(format: "%.3f, %.3f", coord.latitude, coord.longitude) : nil)
+                    .text(showText ? "Scale" : nil)
+                    .animation(.scale, when: .appear)
+                    .animation(.scale(from: 1, to: 0), when: .disappear)
                     .onTapGesture {
-                        markerColor = .random
+                        print("Marker tapped at: \(coord2.latitude), \(coord2.longitude)")
+                    }
+
+                let coord3 = CLLocationCoordinate2D(latitude: 60.1699, longitude: 24.9384 + 0.01)
+                Marker(coordinate: coord3)
+                    .color(markerColor)
+                    .stroke(showStroke ? strokeColor : nil)
+                    .text(showText ? "Fade" : nil)
+                    .animation(.fadeIn, when: .appear)
+                    .animation(.fadeOut, when: .disappear)
+                    .onTapGesture {
+                        print("Marker tapped at: \(coord3.latitude), \(coord3.longitude)")
                     }
             }
 
-            TapInteraction { tapContext in
-                tappedPoints.append(tapContext.coordinate)
-                return true
+            // User-added markers
+            ForEvery(userMarkers, id: \.id) { markerData in
+                Marker(coordinate: markerData.coordinate)
+                    .color(markerColor)
+                    .stroke(showStroke ? strokeColor : nil)
+                    .text(showText ? String(format: "%.2f, %.2f", markerData.coordinate.latitude, markerData.coordinate.longitude) : nil)
+                    .animation(.wiggle, .scale, when: .appear)
+                    .animation(.wiggle, .scale(from: 1, to: 0), when: .disappear)
+                    .onTapGesture {
+                        print("Marker tapped at: \(markerData.coordinate.latitude), \(markerData.coordinate.longitude)")
+                    }
+            }
+
+            TapInteraction { context in
+                addMarker(at: context.coordinate)
+                return false
             }
 
             LongPressInteraction { _ in
-                tappedPoints.removeAll()
-                return true
+                userMarkers.removeAll()
+                showPresetMarkers = false
+                return false
             }
         }
-        .additionalSafeAreaInsets(.bottom, overlayHeight)
-        .ignoresSafeArea(edges: [.all] )
+        .additionalSafeAreaInsets(Edge.Set.bottom, overlayHeight)
+        .ignoresSafeArea(edges: [.all])
         .overlay(alignment: .bottom) {
-            VStack(alignment: .leading) {
-                Text("Tap to add a Marker")
-                ColorPicker("Marker Color", selection: $markerColor)
-                ColorPicker("Stroke Color", selection: $strokeColor)
-                Toggle("Show stroke", isOn: $showStroke)
-                Toggle("Show Marker text", isOn: $showText)
-            }
-            .padding(.horizontal, 10)
-            .padding(.vertical, 6)
-            .floating(RoundedRectangle(cornerRadius: 10))
-            .limitPaneWidth()
-            .onChangeOfSize { size in
-                overlayHeight = size.height
+            HStack {
+                Spacer()
+                VStack(alignment: .leading, spacing: 8) {
+                    Text("Marker Animations")
+                        .font(.headline)
+
+                    VStack(alignment: .leading, spacing: 2) {
+                        Text("• Three preset markers show different animation types")
+                            .font(.caption2)
+                        Text("• Tap the map to add new markers with animation")
+                            .font(.caption2)
+                        Text("• Long press the map to remove all markers")
+                            .font(.caption2)
+                    }
+                    .foregroundColor(.secondary)
+
+                    Divider()
+
+                    // Styling Controls
+                    Text("Styling")
+                        .font(.subheadline)
+                        .fontWeight(.semibold)
+
+                    ColorPicker("Marker Color", selection: $markerColor)
+                    ColorPicker("Stroke Color", selection: $strokeColor)
+
+                    Toggle("Show stroke", isOn: $showStroke)
+                    Toggle("Show text", isOn: $showText)
+                }
+                .padding(.horizontal, 10)
+                .padding(.vertical, 6)
+                .floating(RoundedRectangle(cornerRadius: 10))
+                .limitPaneWidth()
+                .onChangeOfSize { size in
+                    overlayHeight = size.height
+                }
+                Spacer()
             }
         }
     }
+
+    private func addMarker(at coordinate: CLLocationCoordinate2D) {
+        let newMarker = MarkerData(
+            id: UUID().uuidString,
+            coordinate: coordinate
+        )
+        userMarkers.append(newMarker)
+    }
 }
 
+// MARK: - MarkerData
+
+struct MarkerData: Identifiable {
+    let id: String
+    let coordinate: CLLocationCoordinate2D
+}
+
+// MARK: - Previews
+
 struct MarkersExample_Previews: PreviewProvider {
     static var previews: some View {
         MarkersExample()

Sources/Examples/SwiftUI Examples/Testing Examples/SwiftUIRoot.swift

@@ -21,7 +21,7 @@ struct SwiftUIExamples {
             Example("Animated 3D airplane model", note: "Animate a 3D airplane model along a flight path with animated propellers, landing gear, and lights using feature state.", destination: Animated3DModelSourceExample())
         },
         Examples.Category("Annotations") {
-            Example("Add Map Markers", note: "Add/remove Markers to your map.", destination: MarkersExample())
+            Example("Add Map Markers", note: "Add Markers to your map.", destination: MarkersExample())
             Example("View Annotations", note: "Add/remove view annotation on tap.", destination: ViewAnnotationsExample())
             Example("Weather annotations", note: "Show view annotations with contents changed on selection.", destination: WeatherAnnotationExample())
             Example("Layer Annotations", note: "Add/remove layer annotation on tap.", destination: AnnotationsExample())