MapKit Flyover iOS Tutorial

Apple Maps provides the ability to "flyover" major cities and landmarks. This feature enables the user to interactively pan, zoom and rotate around locations in the Maps app. In this tutorial flyover mode is enabled above the Capitol in Washington. This tutorial is made with Xcode 9 and built for iOS 11.

Open Xcode and create a new Single View App.

For product name, use IOS11FlyOVerMapKitTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and choose Next.

Go to the Storyboard and drag a Map View to the main view. Next, drag two buttons below the Map View and give them a title of resp. "Left" and "Right". The Storyboard should look like this.

Select the Map View and select the Auto Layout "Add New Constraints" button. Pin the Map View to the top, left and right and select "Add 3 Constraints".

Repeat this step for the two buttons and pin them to the left and bottom and to the right and bottom.

Select the Assistant Editor and make sure the ViewController.swift is visible. Ctrl and drag from the Map view to the ViewController class and create the following Outlet.

Ctrl and drag from the left Button to the ViewController class and create the following Action.

Ctrl and drag from the right Button to the ViewController class and create the following Action

Go to the ViewController class and add the following properties.

let distance: CLLocationDistance = 800
let pitch: CGFloat = 400
let heading = 45.0
var camera: MKMapCamera?

The view from which the flyover is represented to the user is controlled by assigning an MKMapCamera object to the Map View.  The MKMapCamera object is configured with the distance. pitch and heading of the camera.

Implement the viewDidLoad method

override func viewDidLoad() {
    super.viewDidLoad()
        
    mapView.mapType = .satelliteFlyover
        
    // coordinates of Capitol
    let coordinate = CLLocationCoordinate2DMake(38.889819, -77.009066)
        
    camera = MKMapCamera(lookingAtCenter: coordinate, fromDistance: distance, pitch: pitch, heading: heading)
    mapView.camera = camera!
}

The mapType property is set to sattelliteFlyovr type. The camera object is created with the coordinates of the Capital building.

Implement the rotateLeft method

@IBAction func rotateLeft(_ sender: Any) {
    UIView.animate(withDuration: 1.0, animations: {
        self.camera!.heading -= 10
        self.mapView.camera = self.camera!
    })
}

This will rotate the heading to 10 degrees to the left.

Implement the rotateRight method

@IBAction func rotateRight(_ sender: Any) {
    UIView.animate(withDuration: 1.0, animations: {
        self.camera!.heading += 10
        self.mapView.camera = self.camera!
    })
}

This will rotate the heading to 10 degrees to the left.

Build and Run the projectand use the button rotate the camera view.

You can download the source code of the IOS11FlyOVerMapKitTutorial at the ioscreator repository on Github.