Question

I’m trying to create a custom MKAnnotationView with image from a url.

What happens is that when the device has retina display, the image of the MKAnnotationView is blurred, as it double its resolution.

If the image is from the app, it will load the @2x image (if one exists), but if you set an image from a url like this for example:

- (MKAnnotationView *) mapView:(MKMapView *) mapView viewForAnnotation:(id ) annotation    
{
MKAnnotationView *customAnnotationView=[[MKAnnotationView alloc]
initWithAnnotation:annotation reuseIdentifier:nil];

NSData * imageData = [[NSData alloc] initWithContentsOfURL: [NSURL URLWithString:@"http://www.interaction-design.org/images/icons/play-button-red-300x300.png"]];


UIImage *img = [UIImage imageWithData:imageData];
[customAnnotationView setImage:img ];
return customAnnotationView;
}

you will see the image on an retina display very pixelated.

Any advice what to do?
Thanks

Answer 1

The gist is this…

1. Use [[UIScreen mainScreen] scale] to ask your server for a standard or @2x image.
2. Create a CGImageRef from the NSData
3. Use the CGImageRef and [[UIScreen mainScreen] scale] to create a UIImage

The code to do that looks like this:

NSString *imagePath = @"http://www.interaction-design.org/images/icons/play-button-red-300x300";
imagePath = [imagePath stringByAppendingString:[[UIScreen mainScreen] scale] > 1 ? @"@2x.png": @".png"];
NSData *imageData = [[NSData alloc] initWithContentsOfURL: [NSURL URLWithString:imagePath]];

CGDataProviderRef dataProvider = CGDataProviderCreateWithCFData((__bridge CFDataRef)imageData);
CGImageRef imageRef = CGImageCreateWithPNGDataProvider(dataProvider, NULL, NO, kCGRenderingIntentDefault);
UIImage *image = [UIImage imageWithCGImage:imageRef scale:[[UIScreen mainScreen] scale] orientation:UIImageOrientationUp];

CGDataProviderRelease(dataProvider);
CGImageRelease(imageRef);

Just note that you will need to have two resolutions of the image on the server given the first two lines of my code. Currently the image will appear smaller on retina, larger on non retina screens.