Go beyond simple linear animations with fly-to transitions, available in the latest version of our iOS SDK. Take advantage of this fluid animation style through user tracking mode:
// Objective-CmapView.userTrackingMode=MGLUserTrackingModeFollow
// SwiftmapView.userTrackingMode=.Follow
Orient users in style
Fly-to animations keep your users from losing their bearings when traversing great distances. At zoom level 18, if the map moves a few miles using a standard animation (e.g., using -[MGLMapView setCenterCoordinate:animated:]
), your users only see a bunch of streets flashing by.
Using fly-to, the map seamlessly zooms out to show the origin and destination simultaneously, providing important context with minimal developer effort. In the above video, we make the return trip from San Francisco to San José by air using:
// Objective-CCLLocationCoordinate2DsanJose=CLLocationCoordinate2DMake(37.33598,-121.89062);MGLMapCamera*originCamera=[MGLMapCameracameraLookingAtCenterCoordinate:sanJosefromEyeCoordinate:sanJoseeyeAltitude:50000];[mapViewflyToCamera:cameracompletionHandler:^{// Optionally catch a connecting flight}];
// SwiftletsanJose=CLLocationCoordinate2D(latitude:37.33598,longitude:-121.89062)letcamera=MGLMapCamera(lookingAtCenterCoordinate:sanJose,fromEyeCoordinate:sanJose,eyeAltitude:50000)mapView.flyToCamera(camera){// Optionally catch a connecting flight}
For an advanced example of how to chain together complex camera movements, see this world tour of Mapbox offices.
Keep the destination in sight
Maybe you prefer to drive back to San Francisco from San José — entirely reasonable! With targeted course tracking mode, your destination never leaves the screen. Coupled with a bottom-aligned location and course indicator, your navigation app is going to look great.
Create this polished experience using:
// Objective-CCLLocationCoordinate2DsanFrancisco=CLLocationCoordinate2DMake(37.7806,-122.42);mapView.userTrackingMode=MGLUserTrackingModeFollowWithCourse;mapView.userLocationVerticalAlignment=MGLAnnotationVerticalAlignmentBottom;[mapViewsetTargetCoordinate:sanFranciscoanimated:YES];
// SwiftletsanFrancisco=CLLocationCoordinate2D(latitude:37.7806,longitude:-122.42)mapView.userTrackingMode=.FollowWithCoursemapView.userLocationVerticalAlignment=.BottommapView.setTargetCoordinate(sanFrancisco,animated:true)
Getting started
Head over to our iOS SDK overview page to get started. Be sure to check out our refreshed API documentation while you’re there!