How can I make my path look more like apple or google draws their path on maps?

Question

I made a navigation app to show the shortest distance between two points on a graph with nodes. I draw a path between every node but the corners does not fit well to each other and it looks like this:

To draw a route I did the following:

   if (ms.path != nil) {
            NodeModel *startNode = nil;
            bool isOverview = [self isOverviewMap];

            for (NodeInPath *endNode in ms.path.allNodes) {
                if (startNode != nil) {
                    if (isOverview || ([startNode.mapId isEqualToString:mapsource.map->mapId] && [endNode.mapId isEqualToString:mapsource.map->mapId])) {

                        CAShapeLayer *elemLayer = [CAShapeLayer layer];

    #ifdef HALL_DEBUG
                        if ([startNode.mapId intValue] == 0 && [endNode.mapId intValue] == 0) {
                            elemLayer.strokeColor = [UIColor redColor].CGColor;
                        } else if ([startNode.mapId intValue] == 0 || [endNode.mapId intValue] == 0) {
                            elemLayer.strokeColor = [UIColor orangeColor].CGColor;
                        } else {
                            if (startNode.kartenelementId.length != 0 || endNode.kartenelementId.length != 0) {
                                elemLayer.strokeColor = [UIColor greenColor].CGColor;
                            } else {
                                elemLayer.strokeColor = [UIColor blueColor].CGColor;
                            }
                        }
    #else
                        elemLayer.strokeColor = [UIColor blueColor].CGColor;
    #endif
                        elemLayer.fillRule    = kCAFillRuleNonZero;
                        elemLayer.position    = CGPointZero;
                        elemLayer.lineWidth   = 30;


                        CGMutablePathRef path = CGPathCreateMutable();

                        if (isOverview) {
                            CGPathMoveToPoint(path, 0, startNode.overviewX, startNode.overviewY);
                            CGPathAddLineToPoint(path, 0, endNode.overviewX, endNode.overviewY);
                        } else if ([startNode.mapId isEqualToString:mapsource.map->mapId] && [endNode.mapId isEqualToString:mapsource.map->mapId]) {
                            CGPathMoveToPoint(path, 0, startNode.mapX, startNode.mapY);
                            CGPathAddLineToPoint(path, 0, endNode.mapX, endNode.mapY);
                        }
                        CGPathCloseSubpath(path);

                        elemLayer.path        = path;
                        CGPathRelease(path);

                        [markerLayer addSublayer:elemLayer];

                        // p1
                        path = CGPathCreateMutable();
                        CAShapeLayer *circleLayer = [CAShapeLayer layer];
                        circleLayer.strokeColor = [UIColor redColor].CGColor;
                        circleLayer.fillColor   = [UIColor redColor].CGColor;
                        circleLayer.fillRule    = kCAFillRuleNonZero;
                        circleLayer.position    = CGPointZero;
                        circleLayer.lineWidth   = 30;
                        circleLayer.path        = path;
                        CGPathRelease(path);

                        CGRect rect;

                        if (isOverview) {
                            rect = CGRectOffset(CGRectMake(startNode.overviewX, startNode.overviewY, 5, 5), -2, -2);
                        } else {
                            rect = CGRectOffset(CGRectMake(startNode.mapX, startNode.mapY, 5, 5), -2, -2);
                        }
                        CGPathAddEllipseInRect((CGMutablePathRef)circleLayer.path, 0, rect);
                        [markerLayer addSublayer:circleLayer];

                        if (endNode == [ms.path.allNodes objectAtIndex:ms.path.allNodes.count - 1]) {
                            // p2
                            path = CGPathCreateMutable();
                            circleLayer = [CAShapeLayer layer];
                            circleLayer.strokeColor = [UIColor redColor].CGColor;
                            circleLayer.fillColor   = [UIColor redColor].CGColor;
                            circleLayer.fillRule    = kCAFillRuleNonZero;
                            circleLayer.position    = CGPointZero;
                            circleLayer.lineWidth   = 30;
                            circleLayer.path        = path;
                            CGPathRelease(path);

                            if (isOverview) {
                                rect = CGRectOffset(CGRectMake(endNode.overviewX, endNode.overviewY, 5, 5), -2, -2);
                            } else {
                                rect = CGRectOffset(CGRectMake(endNode.mapX, endNode.mapY, 5, 5), -2, -2);
                            }
                            CGPathAddEllipseInRect((CGMutablePathRef)circleLayer.path, 0, rect);
                            [markerLayer addSublayer:circleLayer];
                        }

                        if (endNode.description.length > 0) {
                            if (isOverview) {
                                rect = CGRectOffset(CGRectMake(endNode.overviewX, endNode.overviewY, 5, 5), -2, -2);
                            } else {
                                rect = CGRectOffset(CGRectMake(endNode.mapX, endNode.mapY, 5, 5), -2, -2);
                            }
                            [self addMarkerAtPosition:CGPointMake(rect.origin.x + rect.size.width/2, rect.origin.y + rect.size.height/2) withTitle:endNode.description favorite:false];
                        }
                    }
                }
                startNode = endNode;
            }
        }

Any ideas on how to make it look more like apple or google maps does it? Or at least make the corners fit well to each other.

Answer 1

Would rounded line caps do it? Try this... also setting the line joins to rounded, as this will make line segments on the same path look better as well.

CAShapeLayer *elemLayer = [CAShapeLayer layer];
elemLayer.lineCap = kCALineCapRound;
elemLayer.lineJoin = kCALineJoinRound;