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 .

Fly to

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

Map(mode: .hybrid)
.flyCameraTo(
  camera: .init(
    center: .init(
      latitude: 47.6210296,
      longitude: -122.3496903,
      altitude: 585), // meters above mean sea level
    heading: 149.0,
    tilt: 77.0,
    roll: 0.0,
    range: 4000),
  duration: 5,
  trigger: animate,
  completion: {}
)

Fly around

The following code sample demonstrates how use the Map.flyCameraAround method 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
    ),
    duration: 90,
    repeatCount: 3,
    trigger: flyAround,
    completion: {}
  )