Skip to main content

Markers

Markers are a SwiftUI convenience feature that creates customizable pin-style markers displayed above the map. They are ideal for quickly symbolizing a point on the map without needing custom image assets.

Benefits:

  • No image assets required - uses built-in default marker design
  • Simple API with essential customization options (color, stroke, inner color, text)
  • Quick to implement for common use cases

Limitations:

  • SwiftUI only (not available in UIKit)
  • Limited styling compared to annotations or view annotations
  • Less efficient for large datasets (100+ markers)
Experimental Feature

Markers are currently marked as experimental with @_spi(Experimental). Import MapboxMaps with @_spi(Experimental) import MapboxMaps to use this feature.

Adding a basic marker​

The simplest way to add a marker is to specify a coordinate:

import SwiftUI
@_spi(Experimental) import MapboxMaps

struct MyMapView: View {
    var body: some View {
        Map {
            Marker(coordinate: CLLocationCoordinate2D(latitude: 40.7128, longitude: -74.0060))
        }
    }
}

Customizing markers​

You can customize markers with colors, strokes, and text:

Colors and strokes​

Map {
    Marker(coordinate: CLLocationCoordinate2D(latitude: 40.7128, longitude: -74.0060))
        .color(.blue)           // Set the main marker color
        .stroke(.purple)        // Add a stroke color
        .innerColor(.white)     // Set the inner circle color
}

Adding text​

Map {
    Marker(coordinate: CLLocationCoordinate2D(latitude: 40.7128, longitude: -74.0060))
        .color(.red)
        .text("New York City")
}

Removing strokes​

To remove the stroke, set it to nil:

Map {
    Marker(coordinate: CLLocationCoordinate2D(latitude: 40.7128, longitude: -74.0060))
        .stroke(nil)  // No stroke
}

Adding multiple markers​

Use ForEvery to add multiple markers from a data collection:

struct Location {
    let id: UUID
    let coordinate: CLLocationCoordinate2D
    let name: String
}

struct MyMapView: View {
    let locations: [Location] = [
        Location(id: UUID(), coordinate: CLLocationCoordinate2D(latitude: 40.7128, longitude: -74.0060), name: "New York"),
        Location(id: UUID(), coordinate: CLLocationCoordinate2D(latitude: 34.0522, longitude: -118.2437), name: "Los Angeles"),
        // ... more locations
    ]
    
    var body: some View {
        Map {
            ForEvery(locations, id: \.id) { location in
                Marker(coordinate: location.coordinate)
                    .color(.red)
                    .text(location.name)
            }
        }
    }
}

Removing markers​

In SwiftUI, Markers conform to MapContent. Removing them from the Map block will also remove them from the map. This also works for conditional rendering. The code snippet below uses an if statement and a boolean state variable to control the visibility of a Marker.

@State var showMarker = false
Map {
    if showMarker {
        Marker(coordinate: CLLocationCoordinate2D(latitude: 40.7128, longitude: -74.0060))
          .color(.blue)
          .stroke(.purple)
          .innerColor(.white)
    } 
}

Performance considerations​

Markers create separate SwiftUI views, so performance may degrade with large numbers of markers. For scenarios with 100+ markers, consider:

Was this page helpful?