Black and white overlay for an MKMapView

Question

I have an MKMapView and am adding an overlay (MKOverlay) to it.

I would like the overlay to make the map view underneath to appear black & white (i.e. monochrome). Is there any way of doing this?

(I guess I could make the overlay translucent black/gray, but that's not the exact effect I would like.)

System details: developing an iOS 5 app in Xcode 4.2.

Answer 1

The most proper route, which sadly isn't yet available on iOS would be:

Your MKOverlay is at some point being used to create an MKOverlayView, which will have a CALayer as it descends from UIView. You can attach CIFilters as compositingFilters to CALayers, which dictate how the view is composited with the background. You could attach a filter of type CIColorMonochrome to that.

Because that option isn't available, you're going to have to leap through some major hurdles to do the work for yourself. You'll probably need to implement your own custom MKOverlayView that in its drawView uses the techniques given in Apple's QA1703 to get the pixel contents of the map view in the relevant area (be careful not to end up in an infinite recursive loop though), transform those into black and white and present them as your view.

Is that something it's worth investigating further or would you be happier to substitute the effect than to really delve into this stuff?

Answer 2

I needed same color manipulations on map, and I decided that making the whole map black and white may be better solution, here is how you can do this:

1. created new imageCGcontex
2. rendered map in new CGcontext
3. got UIImage from current CGcontext
4. applied CIFilter to UIImage and got CIImage as result
5. rendered CIImage in CIContext and got CGImageRef as result
6. created UIImage from CGImageRef
7. added sub imageview to apple map view
8. set result image to that imageView

Here is some dirty code to do this:

  self.drawContext = [[CIContext alloc] init];
  [self.monochromeSubView removeFromSuperview];

  UIGraphicsBeginImageContext(self.appleMapView.bounds.size);
  UIImage *mySourceImage = UIGraphicsGetImageFromCurrentImageContext();
  CIImage *newMyCiImage = [[CIImage alloc] initWithImage:mySourceImage];
  CIFilter *newMyMonochromeFilter = [CIFilter filterWithName:@"CIPhotoEffectTonal"];
  [newMyMonochromeFilter setValue:newMyCiImage forKey:kCIInputImageKey];
  CIImage *newMyfilteredCIImage = newMyMonochromeFilter.outputImage;
  
  CGImageRef myOutputImageRef = [self.drawContext createCGImage:newMyfilteredCIImage
                                                       fromRect:newMyfilteredCIImage.extent];
  UIImage *newMyImage = [[UIImage alloc] initWithCGImage:myOutputImageRef];

  self.monochromeSubView.image = newMyImage;
  [self.appleMapView addSubview:self.monochromeSubView];

  CGImageRelease(myOutputImageRef);
  UIGraphicsEndImageContext();

Here you go - the map is in black and white colors. To do this dynamically to move monochrome map along with user's gesture you can subclass gesture recognizer, add it directly to map view. Then on every touchesMoved call you can call this redraw function while reusing context you once created. I tried this with apple map taking about 1/3 of the screen and it resulted in extremely low performance (about 3 FPS on iPhone 5s) and there are couple bugs you have to fix, such as: flying map on swipe gesture while monochrome image is static, frequency of map pins redrawing, redraw or animate every pop up that displayed in response to tap. You can try to render map in CALayer, not in Context, Apple recommends it to improve performance, but considering all the above I suppose if you want to see dynamic filtered elements it is better to use other more customizable map: GoogleMap or MapBox.