title: How to render composite MKOverlay
body: <p>I want to create an MKOverlay that groups a few MKShapes together, but I’m having problems with the composited MKOverlayRenderer.  </p>
  
  <p>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.</p>
  
  <p>Here’s what I have.  From MyOverlay.h:</p>
  
  <pre><code>@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;
  </code></pre>
  
  <p>From MyOverlay.m:</p>
  
  <pre><code>- (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;
  }
  </code></pre>
  
  <p>From MyOverlayRenderer.m:</p>
  
  <pre><code>@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:&amp;red green:&amp;green blue:&amp;blue alpha:&amp;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];
  }
  </code></pre>
  
  <p>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.</p>
  
  <p><img src="https://i.stack.imgur.com/iXJUE.jpg" alt="myOverlay Results"></p>
  
  <p>I believe my error is in the <code>drawMapRect:zoomScale:inContext:</code> method -- this is just the latest code I tried there --  but am not sure what the error is....</p>