How to draw a route between two locations using MapKit in Swift?

Question

How can I draw a route between user's current location to a specific location using MapKit in Swift?

I searched a lot, but didn't find any helpful Swift-specific links or tutorials.

Mediacy

Search for MKDirectionsRequest, addOverlay, and rendererForOverlay. There are Swift examples on SO of each. – Bernstein

thanks for your help. But really i didn't find any valuable result for Swift. Do you have any result or example can i start from it? – Mediacy

Use Google to search SO -- the answers are here. Otherwise, look at the documentation for those classes and methods, write some code, try something. – Bernstein

checkout this one #26564354 – Shirring

I'll just link to a tutorial that shows how to do that in Swift: Ray Wenderlich: Overlays in MapKit This should cover what you need. – Maibach

@Anna i followed as you said..but couldnot succeed #30775654 – Histogen

Answer 1

Swift 4

class MapController: UIViewController, MKMapViewDelegate {

// MARK: - showRouteOnMap

func showRouteOnMap(pickupCoordinate: CLLocationCoordinate2D, destinationCoordinate: CLLocationCoordinate2D) {

    let sourcePlacemark = MKPlacemark(coordinate: pickupCoordinate, addressDictionary: nil)
    let destinationPlacemark = MKPlacemark(coordinate: destinationCoordinate, addressDictionary: nil)

    let sourceMapItem = MKMapItem(placemark: sourcePlacemark)
    let destinationMapItem = MKMapItem(placemark: destinationPlacemark)

    let sourceAnnotation = MKPointAnnotation()

    if let location = sourcePlacemark.location {
        sourceAnnotation.coordinate = location.coordinate
    }

    let destinationAnnotation = MKPointAnnotation()

    if let location = destinationPlacemark.location {
        destinationAnnotation.coordinate = location.coordinate
    }

    self.mapView.showAnnotations([sourceAnnotation,destinationAnnotation], animated: true )

    let directionRequest = MKDirectionsRequest()
    directionRequest.source = sourceMapItem
    directionRequest.destination = destinationMapItem
    directionRequest.transportType = .automobile

    // Calculate the direction
    let directions = MKDirections(request: directionRequest)

    directions.calculate {
        (response, error) -> Void in

        guard let response = response else {
            if let error = error {
                print("Error: \(error)")
            }

            return
        }

        let route = response.routes[0]

        self.mapView.add((route.polyline), level: MKOverlayLevel.aboveRoads)

        let rect = route.polyline.boundingMapRect
        self.mapView.setRegion(MKCoordinateRegionForMapRect(rect), animated: true)
    }
}

// MARK: - MKMapViewDelegate

func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {

    let renderer = MKPolylineRenderer(overlay: overlay)

    renderer.strokeColor = UIColor(red: 17.0/255.0, green: 147.0/255.0, blue: 255.0/255.0, alpha: 1)

    renderer.lineWidth = 5.0

    return renderer
}

Giannini

Hey , i am using the same code but it will not draw me the path with blue line – Forte

please don't forget to use this function // MARK: - MKMapViewDelegate func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer { let renderer = MKPolylineRenderer(overlay: overlay) renderer.strokeColor = UIColor(red: 17.0/255.0, green: 147.0/255.0, blue: 255.0/255.0, alpha: 1) renderer.lineWidth = 5.0 return renderer } – Giannini

you must use MKMapViewDelegate and with func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer you will find renderer.strokeColor = UIColor(red: 17.0/255.0, green: 147.0/255.0, blue: 255.0/255.0, alpha: 1) and make renderer.lineWidth = 5.0 to be visible – Giannini

I am getting error in calculate distance error block – Forte

for testing i am calling the function this way : let locationSource = CLLocationCoordinate2D(latitude: 40.7128, longitude: 74.0060) let locationDestination = CLLocationCoordinate2D(latitude: 41.3851, longitude: 2.1734) showRouteOnMap(pickupCoordinate: locationSource, destinationCoordinate: locationDestination) M I doing something wrong ? – Forte

I use like this let sourceLocation = CLLocationCoordinate2D(latitude: pickupLatitude as! CLLocationDegrees, longitude: pickupLongitude as! CLLocationDegrees) let destinationLocation = CLLocationCoordinate2D(latitude: destLatitude as! CLLocationDegrees, longitude: destLongitude as! CLLocationDegrees) DispatchQueue.main.async { self.showRouteOnMap(pickupCoordinate: sourceLocation, destinationCoordinate: destinationLocation) } – Giannini

maybe you need to use in DispatchQueue.main.async – Giannini

@Anita: The location drawing won't work in some countries like India. Please have a look at apple.com/ios/feature-availability/#maps-directions – Vo

@Anita So I think you can use Google Maps in this part if you work on app on India. – Giannini

If someone has followed the steps of @AbdelrahmanMohamed and the route doesn't appear, maybe needs to add mapView.delegate = self. btw, why this answer hasn't been marked as the solution yet? – Me

thanks, @antonio I don't know how to marked as the solution by the way you are right of course you should add mapView.delegate = self to use the map delegate – Giannini

@antonio__ I guess you can ask from the question owner to mark my answer as the solution – Giannini

I have 3 pinned locations. CurrentLocation -> Destination1 -> Dest2 -> Dest3. I want to traverse all these 3 locations after dest1 is arrived. From CurrentLocation to Dest1 is arrived route to Dest1->Dest2. After Dest2 is arrived go from Dest2 to Dest3. – Afro

I believe you can do it but you need to memorize destinations in some value and start using it after that – Giannini

This works like a charm for me. But need 1 help, want to add some padding in left and right side of the overlay so that it looks in the middle of the map. – Symmetrize

@PoojaGupta I believe you can reduce the range of zoom – Giannini

Answer 2

class MapController: UIViewController, MKMapViewDelegate {

func showRouteOnMap() {
    let request = MKDirectionsRequest()
    request.source = MKMapItem(placemark: MKPlacemark(coordinate: annotation1.coordinate, addressDictionary: nil))
    request.destination = MKMapItem(placemark: MKPlacemark(coordinate: annotation2.coordinate, addressDictionary: nil))
    request.requestsAlternateRoutes = true
    request.transportType = .Automobile

    let directions = MKDirections(request: request)

    directions.calculateDirectionsWithCompletionHandler { [unowned self] response, error in
        guard let unwrappedResponse = response else { return }

        if (unwrappedResponse.routes.count > 0) {
            self.mapView.addOverlay(unwrappedResponse.routes[0].polyline)
            self.mapView.setVisibleMapRect(unwrappedResponse.routes[0].polyline.boundingMapRect, animated: true)
        }
    }
}

func mapView(mapView: MKMapView!, rendererForOverlay overlay: MKOverlay!) -> MKOverlayRenderer! {
    if overlay is MKPolyline {
            var polylineRenderer = MKPolylineRenderer(overlay: overlay)
            polylineRenderer.strokeColor = UIColor.blueColor()
        polylineRenderer.lineWidth = 5
        return polylineRenderer
    }
    return nil
}

The return is an array of possible routes, usually we just want to show the first. The annotations are the map annotations.

Pandemonium

Since Swift 2, you cannot return nil in rendererForOverlay. Return MKPolylineRenderer() instead. – Capo

Answer 3

Swift 5 + Extension based on bdelrahman Mohamed's answer

extension MKMapView {

  func showRouteOnMap(pickupCoordinate: CLLocationCoordinate2D, destinationCoordinate: CLLocationCoordinate2D) {
    let sourcePlacemark = MKPlacemark(coordinate: pickupCoordinate, addressDictionary: nil)
    let destinationPlacemark = MKPlacemark(coordinate: destinationCoordinate, addressDictionary: nil)
    
    let sourceMapItem = MKMapItem(placemark: sourcePlacemark)
    let destinationMapItem = MKMapItem(placemark: destinationPlacemark)
    
    let sourceAnnotation = MKPointAnnotation()
    
    if let location = sourcePlacemark.location {
        sourceAnnotation.coordinate = location.coordinate
    }
    
    let destinationAnnotation = MKPointAnnotation()
    
    if let location = destinationPlacemark.location {
        destinationAnnotation.coordinate = location.coordinate
    }
    
    self.showAnnotations([sourceAnnotation,destinationAnnotation], animated: true )
    
    let directionRequest = MKDirections.Request()
    directionRequest.source = sourceMapItem
    directionRequest.destination = destinationMapItem
    directionRequest.transportType = .automobile
    
    // Calculate the direction
    let directions = MKDirections(request: directionRequest)
    
    directions.calculate {
        (response, error) -> Void in
        
        guard let response = response else {
            if let error = error {
                print("Error: \(error)")
            }
            
            return
        }
        let route = response.routes[0]
        self.addOverlay((route.polyline), level: MKOverlayLevel.aboveRoads)
        let rect = route.polyline.boundingMapRect
        self.setRegion(MKCoordinateRegion(rect), animated: true)
    }
}}

Voidance

Answer 4

override func viewDidLoad() { super.viewDidLoad()

     mapView.delegate = self
    
    let sourceLocation = CLLocationCoordinate2D(latitude: 22.4649, longitude: 69.0702)
    let destinationLocation = CLLocationCoordinate2D(latitude: 23.0225, longitude: 72.5714)
    
    let span = MKCoordinateSpan(latitudeDelta: 0.1, longitudeDelta: 0.1)
    
    let sourceRegion = MKCoordinateRegion(center: sourceLocation, span: span)
    mapView.setRegion(sourceRegion, animated: true)
    
    let destinationRegion = MKCoordinateRegion(center: destinationLocation, span: span)
    mapView.setRegion(destinationRegion, animated: true)
    
    let sourcePin = MKPointAnnotation()
    sourcePin.coordinate = sourceLocation
    mapView.addAnnotation(sourcePin)
    
    let destinationPin = MKPointAnnotation()
    destinationPin.coordinate = destinationLocation
    mapView.addAnnotation(destinationPin)
    

    let sourcePlacemark = MKPlacemark(coordinate: sourceLocation, addressDictionary: nil)
    let destinationPlacemark = MKPlacemark(coordinate: destinationLocation, addressDictionary: nil)
    
    let directionRequest = MKDirections.Request()
    directionRequest.source = MKMapItem(placemark: sourcePlacemark)
    directionRequest.destination = MKMapItem(placemark: destinationPlacemark)
    directionRequest.transportType = .automobile
    
    let directions = MKDirections(request: directionRequest)
    directions.calculate { (response, error) in
       guard let response = response else {
        if let error = error {
            print("Error: \(error)")
        }
            return
        }
        let route = response.routes[0]
        self.mapView.addOverlay((route.polyline), level: MKOverlayLevel.aboveRoads)
        
        let rect = route.polyline.boundingMapRect
        self.mapView.setRegion(MKCoordinateRegion(rect), animated: true)
    }

func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {
     let renderer = MKPolylineRenderer(overlay: overlay)
    renderer.strokeColor = UIColor.red
    renderer.lineWidth = 4.0
    return renderer
}

Charissacharisse