Custom callout bubble to MKMapView in iPhone

UPDATE! FOUND A NEW SOLUTION!

My latest version, 2.0 of Gasmacken contains a solution to the very annoying problem with a creating a custom callout bubble to the MKMapView in the iPhone SDK. There are no way to get a callback from the MKMapView delegate when a callout bubble is opened.

A recap of what you can do with the built in callout bubble.

• MKAnnotation contains title, subtitle and coordinate
• Title must be set in the MKAnnotation to get the callout bubble
• You can customize left or right of the callout bubble (MKAnnotationView) with a UIView but not change the callout bubble design at all

One solution (almost) might be to use a property change listener for the selected value. Unfortunately, the selected property is only changed if you have a title set in the MKAnnotation, which also brings up the built in callout bubble. This is a good solution if you e.g. want to play a sound when you open up the built in callout bubble.

My solution, inspired by drawing polylines or routes on a MKMapView, has to do with adding a subview (TouchView see code in example) on top of the MKMapView and writing invisible buttons on the annotations.


#import
#import

@class UIView;

@interface TouchView : UIView {
MKMapView *mapView;
id delegate;
SEL callAtHitTest;
SEL callAtAnnotationClick;
NSMutableArray* buttonToAnnotation;
}
@property (nonatomic, assign) MKMapView * mapView;
@property (assign) id delegate;
@property (assign) SEL callAtHitTest;
@property (assign) SEL callAtAnnotationClick;

- (void) regionChange;
@end


• Selector callAtHitTest will be called every time you click on the map except for subview buttons. This method is great to use for stop follow current location updates in your code.
• Selector callAtAnnotationClick will be called when you click your annotation. This is where you make your custom callout bubble visible.
• Method regionChange must be called every time MKMapView is changed.

In a UIView sub class

1. Create a TouchView, set delegate and the two selectors, callAtHitTest and callAtAnnotationClick.
2. Add MKMapView as a subview to your newly created touchView. Implement MKMapViewDelegate regionDidChangeAnimated. Call method regionChanged in your TouchView class.
3. Populate MKMapView with annotations.
4. Add newly created MKMapView to your TouchView.
5. Add TouchView to surrounding UIView.
6. Call method regionChange once in TouchView.

Here is the viewDidLoad method from the example code.


- (void)viewDidLoad {
[super viewDidLoad];

touchView = [[TouchView alloc] initWithFrame:CGRectMake(0, 0, 320, 460)];
touchView.delegate = self;
touchView.callAtHitTest = @selector(stopFollowLocation);
touchView.callAtAnnotationClick = @selector(annotationClicked:);
//Next we create the MKMapView object, which will be added as a subview of viewTouch
mapView = [[MKMapView alloc] initWithFrame:CGRectMake(0, 0, 320, 460)];
mapView.delegate = self;
touchView.mapView = mapView;
[touchView addSubview:mapView];

//And we display everything!
[self.view addSubview:touchView];

}

Remember to NOT set title and subtitle in your implementation of MKAnnotation. If it is set MKMapView will show the standard callout bubble if you accidentally click outside the TouchView button but inside the standard annotation in the MKMapView.

You might have to do some customization in your TouchView if you do not use the standard MKPinAnnotationView. Change CGRect coordinates for the buttons in TouchView to match your custom annotation view. Change UIButtonTypeRoundedRect to see the actual button and match it to cover your custom annotation view.

One drawback is that if you click a annotation in the TouchView it is not propagated down to the MKMapView which makes pinch zoom bit more tricky if you have many annotations. Someone out there might have a good solution for it?

That’s it. Download example for better understanding. See this post instead.