Use camera animations
This example demonstrates how to create a Camera Animation using the Mapbox Maps SDK for iOS.
In this implementation, a CameraOptions object is utilized to define the initial camera
settings with a specific center location and zoom level. The MapView
is then initialized with these camera options and displayed on the view.
Upon the map loading, the camera animates to a new location over
New York City with a different zoom level, bearing, and pitch using
the ease
method of the CameraAnimationManager.
Moreover, event listeners are configured to handle camera animator events.
The code observes and prints information when a camera animation
is started or finished, leveraging the onCameraAnimatorStarted
and onCameraAnimatorFinished methods provided by the CameraAnimationManager.
This setup allows developers to track and respond to camera animation
events efficiently.
This example code is part of the Maps SDK for iOS Examples App, a working iOS project available on Github. iOS developers are encouraged to run the examples app locally to interact with this example in an emulator and explore other features of the Maps SDK.
See our Run the Maps SDK for iOS Examples App tutorial for step-by-step instructions.
import UIKit
import MapboxMaps
final class ViewController: UIViewController {
private var mapView: MapView!
private var cancelables = Set<AnyCancelable>()
override func viewDidLoad() {
super.viewDidLoad()
let cameraOptions = CameraOptions(center: CLLocationCoordinate2D(latitude: 42.88, longitude: -78.870000), zoom: 6)
let mapInitOptions = MapInitOptions(cameraOptions: cameraOptions)
mapView = MapView(frame: view.bounds, mapInitOptions: mapInitOptions)
mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(mapView)
// Allows the delegate to receive information about map events.
mapView.mapboxMap.onMapLoaded.observeNext { _ in
// Center the map camera over New York City.
let centerCoordinate = CLLocationCoordinate2D(
latitude: 40.7128, longitude: -74.0060)
let newCamera = CameraOptions(center: centerCoordinate,
zoom: 7.0,
bearing: 180.0,
pitch: 15.0)
self.mapView.camera.ease(to: newCamera, duration: 5.0) { [weak self] (_) in
}
}.store(in: &cancelables)
mapView.camera
.onCameraAnimatorStarted
.observe { animator in
print("Animator started: \(animator.owner)")
}
.store(in: &cancelables)
mapView.camera
.onCameraAnimatorFinished
.owned(by: .compass)
.observe { animator in
print("Animator finished: \(animator.owner)")
}
.store(in: &cancelables)
}
}