Drawing MKMapView Overlay like Google Maps Directions

iOS 5 changed the way the built-in Google Maps App draws routes:

Apple's line

I would now like to replicate the design of the route overlay in my own app but I am currently only able to draw a plain blue line. I would like to add the 3D-effect with the gradient, borders and the glow. Any ideas on how to accomplish this?

Currently I'm using the following code:

CGContextSetFillColorWithColor(context, fillColor.CGColor);
CGContextSetLineJoin(context, kCGLineJoinRound);
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetLineWidth(context, lineWidth);
CGContextAddPath(context, path);
CGContextReplacePathWithStrokedPath(context);
CGContextFillPath(context);

Resulting in a rather ugly line:

my line

Thanks!

Update: The solution should work on iOS 4.0 and up.

Edit Report

I think that @ChrisMiles is correct in that the segments are probably being drawn individually. (I initially thought that this might have been doable using CGPatternRef but you don't have any access to the CTM or path endpoints inside the pattern drawing callback.)

With this in mind, here is an exceedingly crude, back-of-the-envelope example of how you might begin such an effort (filling the segments individually). Note that:

gradient colors are guessed
end caps are nonexistent and will need to be separately implemented
some aliasing artifacts remain
not a great deal of attention was paid to performance

Hopefully this can get you started at least (and works through some of the analytic geometry).

-  (CGGradientRef)lineGradient
{
    static CGGradientRef gradient = NULL;
    if (gradient == NULL) {
        CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
        CGColorRef white = [[UIColor colorWithWhite:1.f
                                              alpha:0.7f] CGColor];
        CGColorRef blue = [[UIColor colorWithRed:0.1f
                                           green:0.2f
                                            blue:1.f
                                           alpha:0.7f] CGColor];
        CGColorRef lightBlue = [[UIColor colorWithRed:0.4f
                                                green:0.6f
                                                 blue:1.f
                                                alpha:0.7f] CGColor];
        CFMutableArrayRef colors = CFArrayCreateMutable(kCFAllocatorDefault, 
                                                        8,
                                                        NULL);
        CFArrayAppendValue(colors, blue);
        CFArrayAppendValue(colors, blue);
        CFArrayAppendValue(colors, white);
        CFArrayAppendValue(colors, white);
        CFArrayAppendValue(colors, lightBlue);
        CFAr


                        
                        
                            answered 2012-05-22T10:15:44.127

Drawing MKMapView Overlay like Google Maps Directions

1 Answer

Your Answer