Nicolas Charvoz Nicolas Charvoz - 2 years ago 418
Swift Question

Custom Annotation Callout View or Custom View ?

I'm currently building an "Uber-like" application, not in the same business but same design, and I would like to know what should I do if I want to represent their "Set pickup location" View/Button.

I already saw this post : Customize MKAnnotation Callout View? which was about Custom Annotation Callout View

In older version it looked like a Custom Callout View, but now it's a bit different, and I don't know where to start if I want to have the same result :

enter image description here

Thanks for your help !

Answer Source

To set different image on left accessory and right accessory, use this code.

 // set different pins colors
- (MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id <MKAnnotation>)annotation {
MKAnnotationView *annotationView = nil;
if( [annotation isKindOfClass:[YOURANNOTATION class] ] )
    static NSString * AnnotationID = @"YOURANNOTATION";
    annotationView = [self.mapView  dequeueReusableAnnotationViewWithIdentifier:AnnotationID];
    if( annotationView == nil )
        annotationView = [[MKAnnotationView alloc] initWithAnnotation:annotation
                                                       reuseIdentifier:AnnotationID] ;

    UIImage * flagImage = nil;

            flagImage = [UIImage imageNamed:@"marker-map@1x.png"];
            [annotationView setImage:flagImage];
            annotationView.canShowCallout = YES;

            //   add an image to the callout window
            UIImageView *leftIconView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"marker-map@1x.png"]];
            annotationView.leftCalloutAccessoryView = leftIconView;

    //adding right button accessory
    UIButton *infoButton = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];

    annotationView.rightCalloutAccessoryView = infoButton;

    //image size and adding image on left accessory
    CGRect resizeRect;
    resizeRect.size = flagImage.size;
    resizeRect.origin = (CGPoint){0.0f, 0.0f};
    [flagImage drawInRect:resizeRect];
    UIImage *resizedImage = UIGraphicsGetImageFromCurrentImageContext();
    annotationView.image = resizedImage;

return annotationView;


Then to call selected annotation

  - (void)mapView:(MKMapView *)mapView annotationView:(MKAnnotationView *)view calloutAccessoryControlTapped:(UIControl *)control

YOURANNOTATION *annotation=(YOURANNOTATION*)view.annotation;

 //do something with your annotation

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download