How to render composite MKOverlay

Question

I want to create an MKOverlay that groups a few MKShapes together, but I’m having problems with the composited MKOverlayRenderer.

I’d like to avoid doing these all as separate MKOverlays and MKOverlayRenderers, because a) that’s a lot of files and b) they’re conceptually the same thing.

Here’s what I have. From MyOverlay.h:

@property (nonatomic) CLLocationCoordinate2D coordinate;
@property (nonatomic, readonly) MKMapRect boundingMapRect;
@property (strong, nonatomic, readonly) MKCircle *circle;
@property (strong, nonatomic, readonly) MKCircle *editCircle;
@property (strong, nonatomic, readonly) MKPolyline *radiusLine;

From MyOverlay.m:

- (id)initWithCoordinate:(CLLocationCoordinate2D)coordinate {
    self = [super init];
    if (self) {
        _coordinate = coordinate;
        _circle = [MKCircle circleWithCenterCoordinate:_coordinate radius:_radius];
        _editCircle = [MKCircle circleWithCenterCoordinate:_coordinate radius:_radius * 0.1];
        CLLocationCoordinate2D offset = [self translateCoord:_coordinate distanceLat:0.0 distanceLong:_radius];
        CLLocationCoordinate2D coords[2];
        coords[0] = _coordinate;
        coords[1] = offset;
        _radiusLine = [MKPolyline polylineWithCoordinates:coords count:2];
        _boundingMapRect = MKMapRectUnion(MKMapRectUnion(_circle.boundingMapRect, _editCircle.boundingMapRect), _radiusLine.boundingMapRect);
    }
    return self;
}

From MyOverlayRenderer.m:

@interface MyOverlayRenderer ()

@property (nonatomic, strong) MKCircleRenderer *circleRenderer;
@property (nonatomic, strong) MKCircleRenderer *editCircleRenderer;
@property (nonatomic, strong) MKPolylineRenderer *radiusLineRenderer;
@property (nonatomic) MKMapRect circleBoundingMapRect;
@property (nonatomic) MKMapRect editCircleBoundingMapRect;
@property (nonatomic) MKMapRect radiusLineBoundingMapRect;

@end

@implementation MyOverlayRenderer

- (instancetype)initWithMyOverlay:(MyOverlay *)overlay {
    self = [super initWithOverlay: overlay];
    if (self) {
        _circleRenderer = [[MKCircleRenderer alloc] initWithCircle: overlay.circle];
        _circleRenderer.lineWidth = 2.0;
        _circleRenderer.strokeColor = overlay.color;
        _circleBoundingMapRect = overlay.circle.boundingMapRect;
        CGFloat red, green, blue, alpha;
        [overlay.color getRed:&red green:&green blue:&blue alpha:&alpha];
        _circleRenderer.fillColor = [UIColor colorWithRed:red green:green blue:blue alpha:alpha * 0.2];
        _editCircleRenderer = [[MKCircleRenderer alloc] initWithCircle:overlay.editCircle];
        _editCircleRenderer.fillColor = overlay.color;
        _editCircleBoundingMapRect = overlay.editCircle.boundingMapRect;
        _radiusLineRenderer = [[MKPolylineRenderer alloc] initWithPolyline:overlay.radiusLine];
        _radiusLineRenderer.lineWidth = 1.5;
        _radiusLineRenderer.strokeColor = overlay.color;
        _radiusLineRenderer.lineDashPattern = @[@2.0, @2.0];
        _radiusLineBoundingMapRect = overlay.radiusLine.boundingMapRect;
    }
    return self;
}

- (void)drawMapRect:(MKMapRect)mapRect zoomScale:(MKZoomScale)zoomScale inContext:(CGContextRef)context {
    double x = MKMapRectGetMidX(mapRect);
    double y = MKMapRectGetMidY(mapRect);
    CGContextSaveGState(context);
    [_circleRenderer drawMapRect:_circleBoundingMapRect zoomScale:zoomScale inContext:context];
    CGContextRestoreGState(context);
    CGContextSaveGState(context);
    CGContextMoveToPoint(context, x, y);
    [_editCircleRenderer drawMapRect:_editCircleBoundingMapRect zoomScale:zoomScale inContext:context];
    CGContextRestoreGState(context);
    CGContextMoveToPoint(context, x, y);
    [_radiusLineRenderer drawMapRect:_radiusLineBoundingMapRect zoomScale:zoomScale inContext:context];
}

The results are ugly. The radiusLine should originate at the center of the circle, and the editCircle should be along the edge of the circle.

myOverlay Results

I believe my error is in the drawMapRect:zoomScale:inContext: method -- this is just the latest code I tried there -- but am not sure what the error is....

Dylan Dylan · Accepted Answer · 2014-09-05T07:39:11

Yep, the problem was in drawMapRect:zoomScale:inContext:. I had to translate to the origins of each of the elements in my composite before drawing them. This works:

- (void)drawMapRect:(MKMapRect)mapRect zoomScale:(MKZoomScale)zoomScale inContext:(CGContextRef)context {
    CGPoint p;

    CGContextSaveGState(context);
    p = [self pointForMapPoint:_circleMapRect.origin];
    CGContextTranslateCTM(context, p.x, p.y);
    [_circleRenderer drawMapRect:_circleBoundingMapRect zoomScale:zoomScale inContext:context];

    CGContextRestoreGState(context);
    CGContextSaveGState(context);
    p = [self pointForMapPoint:_editCircleBoundingMapRect.origin];
    CGContextTranslateCTM(context, p.x, p.y);
    [_editCircleRenderer drawMapRect:_editCircleBoundingMapRect zoomScale:zoomScale inContext:context];

    CGContextRestoreGState(context);
    CGContextSaveGState(context);
    p = [self pointForMapPoint:_radiusLineBoundingMapRect.origin];
    CGContextTranslateCTM(context, p.x, p.y);
    [_radiusLineRenderer drawMapRect:_radiusLineBoundingMapRect zoomScale:zoomScale inContext:context];
    CGContextRestoreGState(context);
}

Much better.

How to render composite MKOverlay

1 Answers