Configure marker collision behavior

Select platform: Android iOS JavaScript

You can customize the collision behavior of markers that you add to a 3D map.

A map view showing marker collision behavior

The following code sample demonstrates how configure the collisionBehavior of the Marker struct to specify how a marker should behave when it collides with anothermarker or map label.

Swift

Map(camera: $camera, mode: .hybrid) {
  Marker(
     position: .init(
        latitude: 37.794724,
        longitude:  -122.39442,
        altitude: 100.0),
      altitudeMode: .relativeToMesh,
      collisionBehavior: .optionalAndHidesLowerPriority,
      extruded: true,
      label: "Marker 1"
    )
          
    Marker(
      position: .init(
          latitude: 37.7943220,
          longitude: -122.395073,
          altitude: 100.0),
      altitudeMode: .relativeToMesh,
      collisionBehavior: .required,
      extruded: true,
      label: "Marker 2"
    )
          
    Marker(
      position: .init(
          latitude: 37.7934108,
          longitude: -122.396144,
          altitude: 100.0),
      altitudeMode: .relativeToMesh,
      collisionBehavior: .requiredAndHidesOptional,
      extruded: true,
      label: "Marker 3"
    )
}