MKAnnotationView with custom view and image view

Question

In my Map application, instead of showing a pin, I want to show a colored background circle with image in it. The color of the background (which is shade of green in below image) circle is dynamic. It will look as in below image:

I created TCircleView which draws the color in "drawRect"

To show similar annotation, I created object of TCircleView and UIImageView and add them to MKAnnotationView object. Its looking good and visible as expected.

But its not allowing to detect tap/touch to show the call out.

I'm using the below code:

- (MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id<MKAnnotation>)annotation {

    if ([annotation isKindOfClass:[MKPointAnnotation class]]) {
        return nil;
    }

    static NSString *annotationIdentifier = @"StickerPin";

    MKAnnotationView *annotationView = (MKAnnotationView *)[mapView dequeueReusableAnnotationViewWithIdentifier:annotationIdentifier];

    if (!annotationView) {
        annotationView = [[MKAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:annotationIdentifier];
        annotationView.canShowCallout = YES;
    }

    TCircleView* circleView = [[TCircleView alloc] init];
    circleView.green = [postObj[@"severity"] floatValue]; //dynamic value coming from server

    UIImageView* imgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Piano"]];

    CGRect r = imgView.frame;
    r.size.height = r.size.width = 60;
    imgView.frame = r;
    circleView.frame = r;

    [annotationView addSubview:circleView];
    [annotationView addSubview:imgView];

    return annotationView;
}

Its not allowing to show the callout or not even calling the delegate "didSelectAnnotationView:"
How to show the custom view as annotation on the map?

Answer 1

The default frame width and height for MKAnnotationView is 0,0.
This is most likely preventing it from responding to touches.

Normally, if you set its image property, the frame is automatically set for you.

Since you're not setting the image and adding subviews instead, try manually setting frame to be at least as big as its largest subview.

For example:

imgView.frame = r;
circleView.frame = r;
annotationView.frame = r;  // <-- add this line