Camera animation
A newer version of the Maps SDK is available
This page uses v6.4.1 of the Mapbox Maps SDK. A newer version of the SDK is available. Learn about the latest version, v11.8.0, in the Maps SDK documentation.
Read the MGLMapView
documentation to learn more about the many other approaches that can be used to manipulate a map's viewport.
import Mapbox
class ViewController: UIViewController, MGLMapViewDelegate {
override func viewDidLoad() {
super.viewDidLoad()
let mapView = MGLMapView(frame: view.bounds)
mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
mapView.delegate = self
mapView.styleURL = MGLStyle.outdoorsStyleURL
// Mauna Kea, Hawaii
let center = CLLocationCoordinate2D(latitude: 19.820689, longitude: -155.468038)
// Optionally set a starting point.
mapView.setCenter(center, zoomLevel: 7, direction: 0, animated: false)
view.addSubview(mapView)
}
func mapViewDidFinishLoadingMap(_ mapView: MGLMapView) {
// Wait for the map to load before initiating the first camera movement.
// Create a camera that rotates around the same center point, rotating 180°.
// `fromDistance:` is meters above mean sea level that an eye would have to be in order to see what the map view is showing.
let camera = MGLMapCamera(lookingAtCenter: mapView.centerCoordinate, altitude: 4500, pitch: 15, heading: 180)
// Animate the camera movement over 5 seconds.
mapView.setCamera(camera, withDuration: 5, animationTimingFunction: CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut))
}
}
#import "ViewController.h"
@import Mapbox;
@interface ViewController () <MGLMapViewDelegate>
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
MGLMapView *mapView = [[MGLMapView alloc] initWithFrame:self.view.bounds];
mapView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
mapView.delegate = self;
mapView.styleURL = [MGLStyle outdoorsStyleURL];
// Mauna Kea, Hawaii
CLLocationCoordinate2D center = CLLocationCoordinate2DMake(19.820689, -155.468038);
// Optionally set a starting point.
[mapView setCenterCoordinate:center zoomLevel:7 direction:0 animated:NO];
[self.view addSubview:mapView];
}
-(void)mapViewDidFinishLoadingMap:(MGLMapView *)mapView {
// Wait for the map to load before initiating the first camera movement.
// Create a camera that rotates around the same center point, rotating 180°.
// `fromDistance:` is meters above mean sea level that an eye would have to be in order to see what the map view is showing.
MGLMapCamera *camera = [MGLMapCamera cameraLookingAtCenterCoordinate:mapView.centerCoordinate altitude:4500 pitch:15 heading:180];
// Animate the camera movement over 5 seconds.
[mapView setCamera:camera withDuration:5 animationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
}
@end