Display Route between 2 points on Map

It was not possible to determine route between two points before iOS7. But iOS7 has come with enhanced feature to allow user to determine route between two points.

iOS7 has come with the classes MKDirections, MKDirectionsRequest,  MKDirectionsResponse to determine the route between two points.

Lets understand how these classes  to accomplish this task with below given code.

    CLLocationCoordinate2D sourceCoords = CLLocationCoordinate2DMake(37.7833, -122.4167);//san fransisco
    MKPlacemark *sourcePlacemark = [[MKPlacemark alloc] initWithCoordinate:sourceCoords addressDictionary:nil];
    MKMapItem *source = [[MKMapItem alloc] initWithPlacemark:sourcePlacemark];  
    // Make the destination location
    CLLocationCoordinate2D destinationCoords = CLLocationCoordinate2DMake(34.0500, -118.2500);//los angeles
    MKPlacemark *destinationPlacemark = [[MKPlacemark alloc] initWithCoordinate:destinationCoords addressDictionary:nil];
    MKMapItem *destination = [[MKMapItem alloc] initWithPlacemark:destinationPlacemark]; 
    MKDirectionsRequest *directionsRequest = [MKDirectionsRequest new];
    [directionsRequest setSource:source];
    [directionsRequest setDestination:destination];
    MKDirections *directions = [[MKDirections alloc] initWithRequest:directionsRequest];
    [directions calculateDirectionsWithCompletionHandler:^(MKDirectionsResponse *response, NSError *error) {
        if (error) {
            return;
        }
        // So there wasn't an error - let's plot those routes
        _currentRoute = [response.routes firstObject];
        [mapView setVisibleMapRect:_currentRoute.polyline.boundingMapRect animated:NO];
        [mapView addOverlay:_currentRoute.polyline];
    }];

ow lets understand this code step-by-step.

Step-1:

Create an object of MKMapItem class for source location. This object is later used to request for direction. MKMapItem class contains information about a specific point on a map.

CLLocationCoordinate2D sourceCoords = CLLocationCoordinate2DMake(37.7833, -122.4167);//san fransisco
    MKPlacemark *sourcePlacemark = [[MKPlacemark alloc] initWithCoordinate:sourceCoords addressDictionary:nil];
    MKMapItem *source = [[MKMapItem alloc] initWithPlacemark:sourcePlacemark];

Step-2:

Create another object of MKMapItem class same for destination location same as step-1.

CLLocationCoordinate2D destinationCoords = CLLocationCoordinate2DMake(34.0500, -118.2500);//los angeles
    MKPlacemark *destinationPlacemark = [[MKPlacemark alloc] initWithCoordinate:destinationCoords addressDictionary:nil];
    MKMapItem *destination = [[MKMapItem alloc] initWithPlacemark:destinationPlacemark];

Step-3:

Create an object of MKDirectionsRequest which will be used to request for route information later on. Set its source and destination points in between which you want to get the route.

MKDirectionsRequest *directionsRequest = [MKDirectionsRequest new];
    [directionsRequest setSource:source];
    [directionsRequest setDestination:destination];

Step-4:

Create object of MKDirections using the object of MKDirectionsRequest created in previous step.

MKDirections *directions = [[MKDirections alloc] initWithRequest:directionsRequest];

Step-6:

You will get the route information from the Apple server as the object of MKDirectionsResponse class. Using this object you can draw an overlay on the map.

MKDirections *directions = [[MKDirections alloc] initWithRequest:directionsRequest];
    [directions calculateDirectionsWithCompletionHandler:^(MKDirectionsResponse *response, NSError *error) {
        if (error) {
            return;
        }
        // So there wasn't an error - let's plot those routes
        _currentRoute = [response.routes firstObject];
        [mapView setVisibleMapRect:_currentRoute.polyline.boundingMapRect animated:NO];
        [mapView addOverlay:_currentRoute.polyline];
    }];

Step-7:

To draw an overlay on the map, you need to implement the delegate method of MKMapView as below:

- (MKOverlayRenderer *)mapView:(MKMapView *)mapView rendererForOverlay:(id)overlay {
    if ([overlay isKindOfClass:[MKPolyline class]]) {
        MKPolylineRenderer *renderer = [[MKPolylineRenderer alloc] initWithOverlay:overlay];
        [renderer setStrokeColor:[UIColor redColor]];
        [renderer setLineWidth:4.0];
        return renderer;
    }
    return nil;
}

 

   

Demo Screenshots :

Map                  routeSteps                   routeStepDetail

Let's Think together, Say Something !