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?

score 2 · Accepted Answer · answered Dec 09 '13 at 00:14

There are a couple of problems:

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 = ...
```
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.

Instead of using a circle overlay, can a polygon like a rectangle shape be used? — wigging, Dec 10 '13 at 02:35
Yes, any overlay type that supplies what data MapOverlayRenderer needs is fine. I used MKCircle because it was the easiest to create. — , Dec 10 '13 at 02:40
Also, please see my other question related to `MKOverlayRenderer` http://stackoverflow.com/questions/20558591/animated-gif-in-an-mkmapview-overlay-using-mkoverlayrenderer — wigging, Dec 13 '13 at 04:22

MKOverlayRenderer to display UIImage over map view

1 Answers1

Linked