How do I create an image overlay and add to MKMapView?

Question

I am trying to learn MapKit and am now trying to add an image as an overlay to the map view. I can\'t seem to find any sample code to help explain how to do this.

Ca

Answer 1

From just looking at Apple's documentation for the MKOverlay protocol, it doesn't look very complex. Just make a class to do whatever you need to compute the overlay and make sure it conforms to that protocol. That means you must have the coordinate and boundingMapRect properties as well as an implementation for intersectsMapRect:. The Apple docs explain it all.

Take a look at the HazardMap sample code from Apple. It uses a custom overlay view like you want to do to display an image in the overlay. You simply need to implement mapView:viewForOverlay: in your MKMapViewDelegate class and return a new instance of your subclass of MKOverlayView to get the custom overlay drawn on the screen.

Answer 2

Documentation:

• MKMapView functions to manage overlays allow for adding them to a map view.
• MKOverlay is the protocol which your overlay object must conform to.
  • MKPolygon, MKPolyLine, MKCircle implement this protocol for simple shapes.
• MKOverlayView is used to actually draw the overlay; subclasses exist for each of the above-mentioned simple shapes.

Sample code:

• HazardMap
• KMLViewer

Answer 3

In the search for a solution for my problem, I keep coming back to this question, and here and also here

They were all answering the question I needed answered but in reverse.

I needed to determine if a UIView, i.e. a draw square on my MapView contains a map pin, if it does let me know so I can remove it or select it etc.

Finally after trying to convert my UIView into some MKCoordinateRegion or alike, I thought work backwards. Instead of turning my UIView or square into map madness, I turned the pins into simple CGPoints and did a simple Rect contains point. Which ended up being my solution.. after about 2 hrs!

Hope this help someone down the line

 func findMapPinsWithinBox() {

    guard let myBox = myBox else { return } // some UIView you have drawn or placed on map

    let visibleMapRect = mapView.visibleMapRect
    let visibleAnnotations =  mapView.annotationsInMapRect(visibleMapRect)

    for pin in visibleAnnotations {

        // depending on design you may need to do some casting here
        // ie let pin = pin as! MyMapAnnotation

        let pinsCGPoint = mapView.convertCoordinate(pin.coordinate, toPointToView: self.view)

        if myBox.frame.contains(pinsCGPoint) {
            print("Pin Found within the Box")
            // select pin or delete etc
        }
    }
}

Answer 4

Here is an example to how to sets a UIImage to a MKMapView overlay. Some parameter (coordinates and image path) are fixed, but the code can be easily changed, I guess.

Create an class that conforms to MKOverlay:

MapOverlay.h

@interface MapOverlay : NSObject <MKOverlay> {

}

- (MKMapRect)boundingMapRect;
@property (nonatomic, readonly) CLLocationCoordinate2D coordinate;

@end

MapOverlay.m

@implementation MapOverlay

- (id)initWithCoordinate:(CLLocationCoordinate2D)coordinate {
    self = [super init];
    if (self != nil) {


    }
    return self;
}

- (CLLocationCoordinate2D)coordinate
{
    CLLocationCoordinate2D coord1 = {
        37.434999,-122.16121
    };

    return coord1;
}

- (MKMapRect)boundingMapRect
{

    MKMapPoint upperLeft = MKMapPointForCoordinate(self.coordinate);

    MKMapRect bounds = MKMapRectMake(upperLeft.x, upperLeft.y, 2000, 2000);
    return bounds;
}


@end

Create an class that conforms to MKOverlayView:

MapOverlayView.h

@interface MapOverlayView : MKOverlayView {

}

@end

MapOverlayView.m

@implementation MapOverlayView

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

    UIImage *image          = [[UIImage imageNamed:@"image.png"] retain];

    CGImageRef imageReference = image.CGImage;

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

    CGContextAddRect(ctx, clipRect);
    CGContextClip(ctx);

    CGContextDrawImage(ctx, theRect, imageReference);

    [image release]; 

}


@end

Add the overlay to the MKMapView:

MapOverlay * mapOverlay = [[MapOverlay alloc] init];
[mapView addOverlay:mapOverlay];
[mapOverlay release];

On the mapView delegate, implement the viewForOverlay:

- (MKOverlayView *)mapView:(MKMapView *)mapView viewForOverlay:(id <MKOverlay>)overlay {

    MapOverlay *mapOverlay = overlay;
    MapOverlayView *mapOverlayView = [[[MapOverlayView alloc] initWithOverlay:mapOverlay] autorelease];

    return mapOverlayView;

}

Hope it helps!