Sign in Subscribe
Getting Directions in MapKit with SwiftUI
MapKit

Getting Directions in MapKit with SwiftUI

Learn how to get directions and show a route on a Map view in SwiftUI.

Moritz Philip Recke, Tiago Gomes Pereira

• 3 min read

A typical scenario could be to calculate travel time and directions for any of the selected search results. Based on a selectedResult we can calculate a route of type MKRoute within a getDirections() function.

import SwiftUI
import MapKit

struct ContentView: View {
    @State private var selectedResult: MKMapItem?
    @State private var route: MKRoute?

    var body: some View {
        Map(selection: $selectedResult) {
            // ...
        }
    }

    func getDirections() { 
        
    }
}

Initial set-up of your view.

Configure a MKDirections.Request() and with source location and destination location. In this example, we are using a fixed location as the source location, but of course, this could be the user's current location or any other coordinate.

func getDirections() {
    self.route = nil
    
    // Check if there is a selected result
    guard let selectedResult else { return }
    
    // Coordinate to use as a starting point for the example
    let startingPoint = CLLocationCoordinate2D(
        latitude: 40.83657722488077,
        longitude: 14.306896671048852
    )
    
    // Create and configure the request
    let request = MKDirections.Request()
    request.source = MKMapItem(placemark: MKPlacemark(coordinate: startingPoint))
    request.destination = self.selectedResult
    
    // Get the directions based on the request
    Task {
        let directions = MKDirections(request: request)
        let response = try? await directions.calculate()
        route = response?.routes.first
    }
}

The request is run asynchronously. Once you get a response you can access the valid route objects and then add them to a property in your view, so you can use them in your interface. Here we have a property called route that will store the first valid route from our response object.

Let’s use the .onChange modifier to monitor the selectedResult property and whenever it changes, we call the getDirections() function.

struct ContentView: View {

    ...
    
    var body: some View {
        Map(selection: $selectedResult) {
            // ...
        }
        .onChange(of: selectedResult){
            getDirections()
        }
    }
    
    ...
}

Getting the direction once a location is selected.

Lastly, in our Map view, we can add a MapPolyLine object if a route is available. We will use a blue stroke to display the way to the selected point of interest.

struct ContentView: View {

    @State private var selectedResult: MKMapItem?
    @State private var route: MKRoute?

    private let startingPoint = CLLocationCoordinate2D(
            latitude: 40.83657722488077,
            longitude: 14.306896671048852
    )

    var body: some View {
        Map(selection: $selectedResult) {
            // Adding the marker for the starting point
            Marker("Start", coordinate: self.startingPoint)
        
            // Show the route if it is available
            if let route {
                MapPolyline(route)
                    .stroke(.blue, lineWidth: 5)
            }
        }
        .onChange(of: selectedResult){
            getDirections()
        }
    }
		
    ...
}

Adding the polyline on the map to represent the route

You can also get other types of information from a route, like the travel time between the source and destination locations. Let’s create a computed property called travelTime. It uses the route object to read and return its expected travel time through the expectedTravelTime property. To get it in the format of hours and minutes use a formatter object.

struct ContentView: View {
    @State private var selectedResult: MKMapItem?
    @State private var route: MKRoute?
    
    private var travelTime: String? {
        // Check if there is a route to get the info from
        guard let route else { return nil }
    
        // Set up a date formater
        let formatter = DateComponentsFormatter()
        formatter.unitsStyle = .abbreviated
        formatter.allowedUnits = [.hour, .minute]
    
        // Format the travel time to the format you want to display it
        return formatter.string(from: route.expectedTravelTime)
    }
    
    var body: some View { ... }
    
    func getDirections() { ... }
}

Creating the computed property to read the travel time of the route.

Here is a completely functional example showing the route between two hard-coded points on a Map view:

import SwiftUI
import MapKit

struct ContentView: View {
    @State private var selectedResult: MKMapItem?
    @State private var route: MKRoute?
    
    private let startingPoint = CLLocationCoordinate2D(
        latitude: 40.83657722488077,
        longitude: 14.306896671048852
    )
    
    private let destinationCoordinates = CLLocationCoordinate2D(
        latitude: 40.849761,
        longitude: 14.263364
    )
    
    var body: some View {
        Map(selection: $selectedResult) {
            // Adding the marker for the starting point
            Marker("Start", coordinate: self.startingPoint)
            
            // Show the route if it is available
            if let route {
                MapPolyline(route)
                    .stroke(.blue, lineWidth: 5)
            }
        }
        .onChange(of: selectedResult){
            getDirections()
        }
        .onAppear {
            self.selectedResult = MKMapItem(placemark: MKPlacemark(coordinate: self.destinationCoordinates))
        }
    }
    
    func getDirections() {
        self.route = nil
        
        // Check if there is a selected result
        guard let selectedResult else { return }
        
        // Create and configure the request
        let request = MKDirections.Request()
        request.source = MKMapItem(placemark: MKPlacemark(coordinate: self.startingPoint))
        request.destination = self.selectedResult
        
        // Get the directions based on the request
        Task {
            let directions = MKDirections(request: request)
            let response = try? await directions.calculate()
            route = response?.routes.first
        }
    }
    
}

Fully functioning example. Copy and paste in an app project to see it working.

Sign up for more like this.

Enter your email
Subscribe