I saw this customized callout and tried lurking stackoverflow (actually I did ask the question) on how to create a customized callout (the speech bubble the appears when you touch the pins/annotations. Normally, you can only get an image or two and two lines of text, namely the Title and Subtitle in the callout, and sometimes you need more informations displayed.
but first, on to the creation of Custom pins:
- (MKAnnotationView *)mapView:(MKMapView *)mapview viewForAnnotation:(id <MKAnnotation>)annotation
{
if ([annotation isKindOfClass:[MKUserLocation class]])
return nil;
static NSString* AnnotationIdentifier = @”AnnotationIdentifier”;
MKAnnotationView *annotationView = [mapView dequeueReusableAnnotationViewWithIdentifier:AnnotationIdentifier];
if(annotationView)
return annotationView;
else
{
UIImage *img = [UIImage imageNamed:@”default_thumb.png”];
MKAnnotationView *annotationView =
[[MKAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:AnnotationIdentifier];
annotationView.canShowCallout = YES;
annotationView.image = img;
annotationView.draggable = YES;
/*
// change left accessory view button with image
UIImageView *leftAccView = [[UIImageView alloc] initWithImage:img];
annotationView.leftCalloutAccessoryView = leftAccView;
//include a right button to show more info
UIButton* rightButton = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];
[rightButton addTarget:self action:@selector(calloutSubMenu:) forControlEvents:UIControlEventTouchUpInside];
[rightButton setTitle:annotation.title forState:UIControlStateNormal];
annotationView.rightCalloutAccessoryView = rightButton;
*/
return annotationView;
}
return nil;
}
here, the image imported (default_thumb.png) is shown instead of a regular pin done by overriding - (MKAnnotationView *)mapView:(MKMapView *)mapview viewForAnnotation:(id <MKAnnotation>)annotation and using the image you want to use. The extra code commented out changes the left callout accessory button into UIImage instead of a regular UIButton for the callout’s accessory view. Same thing can be done to the right accessory button.
On to the Custom Callout:
First you create a subclass of UIViewController (mine uses a xib to skip the extra coding).
In the xib , add the necessary contents to display in your callout.
// Override viewing of the annotation’s callout
-(void)mapView:(MKMapView *)mapview didSelectAnnotationView:(MKAnnotationView *)view
{
[mapView deselectAnnotation:view.annotation animated:YES];
PopOverCallout *popOverCallout = [[PopOverCallout alloc]init];
UIPopoverController *popOver = [[UIPopoverController alloc] initWithContentViewController:popOverCallout];
self.annotationPopoverController = popOver;
popOver.popoverContentSize = CGSizeMake(200, 70);
[popOver presentPopoverFromRect:view.bounds inView:view permittedArrowDirections:UIPopoverArrowDirectionAny animated:YES];
}
In your controller with the Map View, override (void)mapView:(MKMapView *)mapview didSelectAnnotationView:(MKAnnotationView *)view method subclass.
Inside the method, create a UIPopoverController initialized with the your subclass (the PopOverCallout is the UIViewController subclass you made).
store the new popover controller into an instance variable.
set the size popover which is from the upper-left corner of the xib of the UIViewController subclass.
finally the last line initializes the properties of your popover.
I’ll probably edit this post later to make things easier to understand… or not. Anyways, that’s that.
