Draw Route with MapKit Tutorial

In this tutorial a route is drawn between two well-known locations inside New York. The route is drawn using a polyline as an overlay view on top of the Map.This tutorial is made with Xcode 7.2 and built for iOS 9.2

Open Xcode and create a new Single View Application. For product name, use IOS9DrawRouteMapKitTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and make sure only iPhone is selected in Devices.

In the Project Navigator Pane select the Prokect Settings icon. Click the Capabilities tab and enable the Map framework.

Go to the Storyboard. Select the View Controller, go to the Editor menu and select Embed in -> Navigation Controller. Double-click the Navigation Bar in the View Controller and enter "Route Tutorial". Next, drag a Map Kit View from the Object Library to the the main View. Use the resize handlers to make it fullscreen. The Storyboard will look like this

Open the Assistant Editor and make sure the ViewController.swift file is visible. Ctrl and drag from the Map Kit View to the ViewController class to create the following Outlet.

Select the Map Kit View and select the Pin icon in the lower-right corner of  the Interface Builder (3rd button from the left). Select all pin directions and deselect "Constrain to margins".  Click the "Add 4 Constraints" button. This will pin the Map Kit View to all directions of the edges of the main View.

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

Go to the ViewController.swift file. Add the MapKit framework

import MapKit

This ViewController needs to conform to the MKMapViewDelegate protocol to draw the route. Change the class declaration line to

class ViewController: UIViewController, MKMapViewDelegate {

Next, change the viewDidLoad method to

override func viewDidLoad() {
        // 1.
        mapView.delegate = self
        // 2.
        let sourceLocation = CLLocationCoordinate2D(latitude: 40.759011, longitude: -73.984472)
        let destinationLocation = CLLocationCoordinate2D(latitude: 40.748441, longitude: -73.985564)
        // 3.
        let sourcePlacemark = MKPlacemark(coordinate: sourceLocation, addressDictionary: nil)
        let destinationPlacemark = MKPlacemark(coordinate: destinationLocation, addressDictionary: nil)
        // 4.
        let sourceMapItem = MKMapItem(placemark: sourcePlacemark)
        let destinationMapItem = MKMapItem(placemark: destinationPlacemark)
        // 5.
        let sourceAnnotation = MKPointAnnotation()
        sourceAnnotation.title = "Times Square"
        if let location = sourcePlacemark.location {
            sourceAnnotation.coordinate = location.coordinate
        let destinationAnnotation = MKPointAnnotation()
        destinationAnnotation.title = "Empire State Building"
        if let location = destinationPlacemark.location {
            destinationAnnotation.coordinate = location.coordinate
        // 6.
        self.mapView.showAnnotations([sourceAnnotation,destinationAnnotation], animated: true )
        // 7.
        let directionRequest = MKDirectionsRequest()
        directionRequest.source = sourceMapItem
        directionRequest.destination = destinationMapItem
        directionRequest.transportType = .Automobile
        // Calculate the direction
        let directions = MKDirections(request: directionRequest)
        // 8.
        directions.calculateDirectionsWithCompletionHandler {
            (response, error) -> Void in
            guard let response = response else {
                if let error = error {
                    print("Error: \(error)")
            let route = response.routes[0]
            self.mapView.addOverlay((route.polyline), level: MKOverlayLevel.AboveRoads)
            let rect = route.polyline.boundingMapRect
            self.mapView.setRegion(MKCoordinateRegionForMapRect(rect), animated: true)
  1. The ViewController is the delegate of the MKMapViewDelegate protocol
  2. Set the latitude and longtitude of the locations
  3. Create placemark objects containing the location's coordinates
  4. MKMapitems are used for routing. This class encapsulates information about a specific point on the map
  5. Annotations are added which shows the name of the placemarks
  6. The annotations are displayed on the map
  7. The MKDirectionsRequest class is used to compute the route.
  8. The route will be drawn using a polyline as a overlay view on top of the map. The region is set so both locations will be visible

Next, implement the delegate method mapView(rendererForrOverlay:)

func mapView(mapView: MKMapView, rendererForOverlay overlay: MKOverlay) -> MKOverlayRenderer {
        let renderer = MKPolylineRenderer(overlay: overlay)
        renderer.strokeColor = UIColor.redColor()
        renderer.lineWidth = 4.0
        return renderer

This method return the renderer object which will be used to draw the route on the map. A red color is used with a line thickness of 4.

Build and Run the project, The Locations are displayed including the route between them.

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