MKAnnotationView Callout Accessory

Question

I am trying to implement a custom annotation with a custom callout view. I have successfully integrated both within my app, as you can see below:

enter image description here

I have created my custom callout view in a xib file:

enter image description here

However, when the user zooms/drags the map, my callout view stays in the same spot on the screen while the map and annotation is in a new position:

enter image description here

I am wondering how I can make the callout view stay above the annotation even when the map is moved, rotated or dragged. The code for my callout view can be found below:

- (MKAnnotationView *) mapView:(MKMapView *)mapView viewForAnnotation:(id <MKAnnotation>) annotation
{
    if ([annotation isKindOfClass:[MKUserLocation class]])
    {
        return nil;  //return nil to use default white dot view
    }

    if ([annotation isKindOfClass:[FishAnnotation class]])
    {
        static NSString *reuseId = @"seafoodRestaurant";
        MKAnnotationView *annotationView = [mapView dequeueReusableAnnotationViewWithIdentifier:reuseId];

        if (annotationView == nil)
        {
            annotationView = [[MKAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:reuseId];
        }
        else
        {
            annotationView.annotation = annotation;
        }

        FishAnnotation *ann = (FishAnnotation *)annotation;
        annotationView.image = [UIImage imageNamed:ann.imageName];
        annotationView.draggable = YES;
        annotationView.canShowCallout = NO;

        return annotationView;
    }

    //return nil (default view) if annotation is not our custom type
    return nil;
}
- (void)mapView:(MKMapView *)mapView didSelectAnnotationView:(MKAnnotationView *)view
{

        CalloutView *calloutView = (CalloutView *)[[[NSBundle mainBundle] loadNibNamed:@"calloutView" owner:self options:nil] objectAtIndex:0];

        CGRect calloutViewFrame = calloutView.frame;

        calloutViewFrame.origin = CGPointMake(view.frame.origin.x - calloutView.frame.size.width/2 + 18, view.frame.origin.y-calloutView.frame.size.height);
        calloutView.frame = calloutViewFrame;
        FishAnnotation *annotation = view.annotation;

        [calloutView setTitle:@"Seafood Restaurant!" subTitle:@"647-123-4567"];

        calloutView.annotation = view.annotation;

        [view.superview addSubview:calloutView];
        [view.superview bringSubviewToFront:calloutView];


}

-(void)mapView:(MKMapView *)mapView didDeselectAnnotationView:(MKAnnotationView *)view
{
    for (UIView *subview in view.superview.subviews)
    {
        if ([subview isKindOfClass:[CalloutView class]])
        {
            [subview removeFromSuperview];
        }
    }
}

Please let me know if there is a way to have the callout view fixed above the annotation. I have tried to use

        [view addSubview:calloutView];
        [view bringSubviewToFront:calloutView];

instead of using view.superview, however the callout view does not display (it's hidden) if I try this.

Sulaiman Majeed Sulaiman Majeed · Accepted Answer · 2014-07-15T20:55:14

I found a temporary solution below. The problem with this is that the buttons on my callout view no longer work. The callout disappears when I select a button.

- (void)mapView:(MKMapView *)mapView didSelectAnnotationView:(MKAnnotationView *)view
{
    FishAnnotation *annotation = view.annotation;

    // [appleMapView setCenterCoordinate:annotation.coordinate animated:YES];

    if(![view.annotation isKindOfClass:[MKUserLocation class]])
    {
        CalloutView *calloutView = (CalloutView *)[[[NSBundle mainBundle] loadNibNamed:@"calloutView" owner:self options:nil] objectAtIndex:0];

        CGRect calloutViewFrame = calloutView.frame;

        calloutViewFrame.origin = CGPointMake(-calloutView.frame.size.width/2 + 18, -calloutView.frame.size.height);
        calloutView.frame = calloutViewFrame;

        [calloutView setTitle:annotation.title subTitle:annotation.subTitle];

        calloutView.annotation = view.annotation;

        [view addSubview:calloutView];
        [view bringSubviewToFront:calloutView];
    }
}

-(void)mapView:(MKMapView *)mapView didDeselectAnnotationView:(MKAnnotationView *)view
{
    for (UIView *subview in view.subviews)
    {
        if ([subview isKindOfClass:[CalloutView class]])
        {
            [subview removeFromSuperview];
        }
    }
}

MKAnnotationView Callout Accessory

2 Answers