Add camera path animations

Select platform: Android iOS JavaScript

You can add camera path animations to your 3D map to provide a more immersive experience for your users. Camera path animations can fly to, fly around, or be combined to animate the Camera to a point on the map, including specifying its altitude and altitudeMode.

When configuring a Camera for an animation, you can set the altitudeMode property to specify how the camera's altitude is interpreted:

  • AltitudeMode.absolute: Interprets the altitude as meters above mean sea level (the default value if not specified).
  • AltitudeMode.relativeToGround: Interprets the altitude as meters above the ground surface at the camera's center point.
  • AltitudeMode.relativeToMesh: Interprets the altitude as meters above the highest 3D mesh surface (such as buildings or terrain) at the camera's center point.

Fly to

The following code sample demonstrates how to use the flyCameraTo modifier to animate the Camera to fly to a specific point on a 3D map.

Map(mode: .hybrid)
  .flyCameraTo(
    .init(
      center: .init(
        latitude: 47.6210296,
        longitude: -122.3496903,
        altitude: 585
      ),
      heading: 149.0,
      tilt: 77.0,
      roll: 0.0,
      range: 4000,
      altitudeMode: .relativeToGround
    ),
    duration: 5,
    trigger: animate,
    completion: {}
  )

Fly around

The following code sample demonstrates how to use the flyCameraAround modifier to animate the Camera to fly around a specific point on a 3D map.

Map(mode: .hybrid)
  .flyCameraAround(
    .init(
      center: .init(
        latitude: 47.6210296,
        longitude: -122.3496903,
        altitude: 585
      ),
      heading: 149.0,
      tilt: 77.0,
      roll: 0.0,
      range: 3000,
      altitudeMode: .relativeToGround
    ),
    duration: 90,
    repeatCount: 3,
    trigger: flyAround,
    completion: {}
  )