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 10 and built for iOS 12.

Open Xcode and create a new Single View App.

For product name, use IOSFlyOverMapKitTutorial 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 Resolve Auto Layout Issues button and select Reset to Suggested Constraints.

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 import the MapKit framework

import MapKit

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 action 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 action 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 IOSFlyOVerMapKitTutorial at the ioscreator repository on Github.