Custom MKOverlay with radius in meters

Question

I made a custom overlay by making an NSObject subclass that conforms to the MKOverlay Protocol and a subclass of MKOverlayPathRenderer. My goal was to make a circular overlay that anchored to the user location on an MKMapView and I have that working just fine. Whenever the coordinate on my overlay is set, my renderer, using key-value observing, invalidates the path it drew and then redraws.

The problem I'm having is that I want the radius of the circle to be in meters but I don't think I'm doing the math right or there's something I'm missing. I posted the source code for the overlay object and the renderer below (the interface to the renderer has nothing in it). To give an example, I have the radius set at 200 meters but on the map view, it's only showing up as about 10 meters. Anyone know how to fix that?

//Custom Overlay Object Interface
@import Foundation;
@import MapKit;
@interface CustomRadiusOverlay : NSObject <MKOverlay>

+ (id)overlayWithCoordinate:(CLLocationCoordinate2D)coordinate radius:(CLLocationDistance)radius;

@property (nonatomic) CLLocationCoordinate2D coordinate;
@property (nonatomic) MKMapRect boundingMapRect;
@property (nonatomic) CLLocationDistance radius;

@end

//Custom overlay
#import "CustomRadiusOverlay.h"

@implementation LFTRadiusOverlay

+ (id)overlayWithCoordinate:(CLLocationCoordinate2D)coordinate radius:(CLLocationDistance)radius{
CustomRadiusOverlay* overlay = [LFTRadiusOverlay new];
    overlay.coordinate = coordinate;
    overlay.radius = radius;
    return overlay;
}

- (MKMapRect)boundingMapRect{
    MKMapPoint upperLeft = MKMapPointForCoordinate(self.coordinate);
    MKMapRect bounds = MKMapRectMake(upperLeft.x, upperLeft.y, self.radius*2, self.radius*2);
    return bounds;
}

- (void)setCoordinate:(CLLocationCoordinate2D)coordinate{
    _coordinate = coordinate;
    self.boundingMapRect = self.boundingMapRect;
}

@end


#import "CustomOverlayRadiusRenderer.h"
#import "CustomRadiusOverlay.h"

@interface CustomOverlayRadiusRenderer()

@property (nonatomic) CustomRadiusOverlay* circleOverlay;

@end

@implementation CustomOverlayRadiusRenderer

- (id)initWithOverlay:(id<MKOverlay>)overlay{
    self = [super initWithOverlay:overlay];
    if(self){
        _circleOverlay = (LFTRadiusOverlay*)overlay;
        [_circleOverlay addObserver:self forKeyPath:@"coordinate" options:NSKeyValueObservingOptionNew context:NULL];
        self.fillColor = [UIColor redColor];
        self.alpha = .7f;
    }
    return self;
}

- (void)createPath{
    CGMutablePathRef path = CGPathCreateMutable();
    MKMapPoint mapPoint = MKMapPointForCoordinate(self.circleOverlay.coordinate);
    CGPoint point = [self pointForMapPoint:mapPoint];
    CGPathAddArc(path, NULL, point.x, point.y, self.circleOverlay.radius, 0, kDegreesToRadians(360), YES);
    self.path = path;
}

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context{
    [self invalidatePath];
}
@end

Answer 1

you draw meters (as a radius) but you need to specify everything in MapPoints.

So convert the units:

~~ mapPoints = meters * MKMapPointsPerMeterAtLatitude(coordinate.latitude)