Render part of MKMapView to image - ios

Question

I am interested in capturing a portion of the map to create the image you see on the top of the popover. I guess I'll capture a UIImage, you can do so starting from the coordinates of the pin?
Thanks

Answer 1

You can try something like this:
- (UIImage*) imageFromView:(UIView*)view rect:(CGRect)rect {
// capture the full view in an image
UIGraphicsBeginImageContextWithOptions(view.bounds.size, view.opaque, 0.0);
[view.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage* viewImg = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
// crop down to just our desired rectangle, accounting for Retina scale
CGFloat scale = [[UIScreen mainScreen] scale];
CGRect scaledRect = CGRectMake(scale * rect.origin.x, scale * rect.origin.y,
scale * rect.size.width, scale * rect.size.height);
CGImageRef resultImgRef = CGImageCreateWithImageInRect([viewImg CGImage], scaledRect);
UIImage* result = [UIImage imageWithCGImage: resultImgRef
scale: 1.0f / scale
orientation: UIImageOrientationUp];
CGImageRelease(resultImgRef);
return result;
}
- (IBAction)onButtonTapped:(id)sender {
// just pick the map's center as the location to capture. could be anything.
CLLocationCoordinate2D center = self.map.centerCoordinate;
// convert geo coordinates to screen (view) coordinates
CGPoint point = [self.map convertCoordinate:center toPointToView: self.map];
// make this span whatever you want - I use 120x80 points
float width = 120.0;
float height = 80.0;
// here's the frame in which we'll capture the underlying map
CGRect frame = CGRectMake(point.x - width / 2.0,
point.y - height / 2.0,
width, height);
// just show the captured image in a UIImageView overlay
// in the top, left corner, with 1:1 scale
UIImageView* overlay = [[UIImageView alloc] initWithImage: [self imageFromView: self.map rect: frame]];
frame.origin = CGPointZero;
overlay.frame = frame;
[self.view addSubview: overlay];
}
The imageFromView:rect: method just captures a given rectangular area, within a given view, and produces a UIImage.
The onButtonTapped method uses the first method to capture an area around the center of my map, and display the captured image at the upper left corner of the screen. Of course, you can replace the map center with the coordinate of your pin, make the area width/height whatever you like, and put the resulting image into your popup view.
This is just a demonstration. I used a button in my sample app, just to trigger the capture, after panning the map where I wanted it to be.
Results
Limitations
My code just displays the captured rectangle at a 1:1 size ratio. Of course, if you want, you can put the captured UIImage into a UIImageView that scales it however you like. You could make the image bigger. But, you will lose image sharpness if you do that. This process just does a screen capture of a UIView. It doesn't work on map data directly, so when you blow it up (display the image at a larger size), the image doesn't sharpen as it does when you actually zoom in on a MKMapView.

Answer 2

On iOS7 you can use MKMapSnapshotter