How to connect 2 annotations with a coloured line inside a MKMapView?

Question

How can i connect 2 annotations inside a Mkmapview with a coloured line ?

Answer 1

google direction api is available for that..pass the origin and destination location

//http://maps.googleapis.com/maps/api/directions/jsonorigin=origin_place&destination=destination_place&waypoints=Charlestown,MA|Lexington,MA&sensor=false

It will give the jSON response which you have parse and pull coordinates. Make a line with that

self.routeLine = [MKPolyline polylineWithPoints:arrPoints count:routeArray.count];

Answer 2

here create create object routeView as as UIImageView class and also lineColor as a UIColor class in .h file like bellow

UIImageView* routeView;  
UIColor* lineColor; 

after in viewDidLoad: method write this code..

routeView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, mapView.frame.size.width, mapView.frame.size.height)];
routeView.userInteractionEnabled = NO;
lineColor = [UIColor magentaColor];
[mapView addSubview:routeView];

and then update when you want to draw line.. and also routes is NSMutableArray in which we store CLLocation (lat-long)

-(void) updateRouteView 
{
    CGContextRef context =  CGBitmapContextCreate(nil, 
                                                  routeView.frame.size.width, 
                                                  routeView.frame.size.height, 
                                                  8, 
                                                  4 * routeView.frame.size.width,
                                                  CGColorSpaceCreateDeviceRGB(),
                                                  kCGImageAlphaPremultipliedLast);

    CGContextSetStrokeColorWithColor(context, lineColor.CGColor);
    CGContextSetRGBFillColor(context, 0.0, 0.0, 1.0, 1.0);
    CGContextSetLineWidth(context, 3.0);

    for(int i = 0; i < routes.count; i++) 
    {
        CLLocation* location1 = [routes objectAtIndex:i];
        CGPoint point = [mapView convertCoordinate:location1.coordinate toPointToView:routeView];
        if(i == 0) 
        {
            CGContextMoveToPoint(context, point.x, routeView.frame.size.height - point.y);
        }
        else 
        {
            CGContextAddLineToPoint(context, point.x, routeView.frame.size.height - point.y);
        }
    }

    CGContextStrokePath(context);

    CGImageRef image = CGBitmapContextCreateImage(context);
    UIImage* img = [UIImage imageWithCGImage:image];

    routeView.image = img;
    CGContextRelease(context);

}

also see this link iphone-how-to-draw-line-between-two-points-on-mapkit

Answer 3

This looks to complicated to me. I found another solution online. Where I first have to add the overlay to my mapView

CLLocationCoordinate2D coordinateArray[2];
coordinateArray[0] = start_location;
coordinateArray[1] = end_location;
self.routeLine = [MKPolyline polylineWithCoordinates:coordinateArray count:2];
/***********************************************/

[_mapView addOverlay:self.routeLine];

Then I set my viewcontroller as a mkmapviewdelegate and implementing the delegate method :

-(MKOverlayView *)mapView:(MKMapView *)mapView viewForOverlay:(id<MKOverlay>)overlay{
if(overlay == self.routeLine)
{
    if(nil == self.routeLineView)
    {
        self.routeLineView = [[MKPolylineView alloc] initWithPolyline:self.routeLine];
        self.routeLineView.fillColor = [UIColor redColor];
        self.routeLineView.strokeColor = [UIColor redColor];
        self.routeLineView.lineWidth = 5;
    }
    return self.routeLineView;
}
return nil;}

But it still does not show up, what am I doing wrong?