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.
Can you guys please help me how to create MKOverlays and add them to MKMapKit.
Thanks in advance..
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!
Documentation:
Sample code:
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
}
}
}
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.
