MKOverlayRenderer to display UIImage over map view

Question

I'm trying to display an image over a map view in iOS 7.

I subclassed MKOverlayRenderer as follows:

MapOverlayRenderer.h

#import <Foundation/Foundation.h>
@import MapKit;

@interface MapOverlayRenderer : MKOverlayRenderer

@end

MapOverlayRenderer.m

#import "MapOverlayRenderer.h"

@implementation MapOverlayRenderer

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

    UIImage *image = [UIImage imageNamed:@"marker"];
    CGImageRef imageReference = image.CGImage;

    MKMapRect theMapRect = [self.overlay boundingMapRect];
    CGRect theRect = [self rectForMapRect:theMapRect];

    CGContextScaleCTM(context, 1.0, -1.0);
    CGContextTranslateCTM(context, 0.0, -theRect.size.height);

    CGContextDrawImage(context, theRect, imageReference);
}

@end

And I have the following in my view controller which contains the map view:

ViewController.m

#import "ViewController.h"
#import "MapOverlayRenderer.h"
@import MapKit;

@interface ViewController () <MKMapViewDelegate>

@property (weak,nonatomic) IBOutlet MKMapView *mapView;

@end

@implementation ViewController

- (void)viewDidLoad {

    [super viewDidLoad];

    [self.mapView setDelegate:self];
}

- (MKOverlayRenderer *)mapView:(MKMapView *)mapView rendererForOverlay:(id<MKOverlay>)overlay {

    MapOverlayRenderer *mapOverlay = [[MapOverlayRenderer alloc] init];
    return mapOverlay;
}

- (IBAction)showSeattle:(id)sender {

    CLLocationCoordinate2D location = {47.61167908,-122.33325958};
    int radius = 100000; //radius in meters
    MKCoordinateRegion region = MKCoordinateRegionMakeWithDistance(location, radius, radius);
    [self.mapView setRegion:[self.mapView regionThatFits:region] animated:YES];
}

@end

When the IBAction is called to zoom the map to a location, I do not see the image on top of the map view.

How can you use the MKOverlayRenderer in iOS 7 to display images on top of a map view?

Answer 1

There are a couple of problems:

1. Where is the code actually adding an overlay to the map by calling addOverlay? You'll need to create an object of type id<MKOverlay> and pass it in the addOverlay call. You could create a custom class that implements MKOverlay but in this case, you could just use MKCircle to represent the position and size of your image. In the showSeattle: method:

   CLLocationCoordinate2D location = {47.61167908,-122.33325958};
   int radius = 100000; //radius in meters
   
   MKCircle *c = [MKCircle circleWithCenterCoordinate:location radius:radius];
   [self.mapView addOverlay:c];
   
   MKCoordinateRegion region = ...
   

2. In rendererForOverlay, the code is creating an instance of MapOverlayRenderer but not giving it a reference to the underlying overlay model object. Call initWithOverlay instead:

   MapOverlayRenderer *mapOverlay 
       = [[MapOverlayRenderer alloc] initWithOverlay:overlay];
   

By the way, you could put an image at the location much more easily using an annotation (but the image won't scale with the zoom level as an overlay-based image will). Not sure which functionality you want.