Resize MKAnnotationView Image When map zooms in and out?

Question

What i have

I have about 150 MKAnnotationViews on a map. Every MKAnnotationView has an image that replaces the default pin.

What's happening now

When the map zooms in, the MKAnnotationViews are getting smaller and the opposite when it zooms out.

What I wish Happened

Well i want it to be the other way around. Since when the map is small I wish that the MKAnnotationViews will be smaller so the user can see all of them, and when he zooms in I wish they will be bigger.

What code I have so far

I know how to get the zoom change, and i know i can get the "pMapView.region.span.latitudeDelta" as a reference for the zoom amount. and i know i can change the annotationView.frame.

-(void)mapView:(MKMapView *)pMapView regionDidChangeAnimated:(BOOL)animated{
    NSLog(@"mapView.region.span.latitudeDelta = %f",pMapView.region.span.latitudeDelta);
    for (id <MKAnnotation> annotation in pMapView.annotations) {
        MKAnnotationView *annotationView  = [pMapView viewForAnnotation: annotation];
    }
}

Can someone help me with that please? Thanks shani

Answer 1

Actually on the default MKMapView- the annotation (e.g. pin or image) and the callout (e.g. bubble) remain the same size as you zoom in or out. They do not scale. But I get your point- in relation to the map they appear to be growing as the map zooms out and shrinking as the map zooms in.

So there are two solutions to your problem and they work slightly differently:

1. Implement -(void)mapView:(MKMapView *)pMapView regionDidChangeAnimated:(BOOL)animated from the MKMapViewDelegate Protocol Reference - which you've already done.
2. Attach a UIPinchGestureRecognizer to the MKMapView object and then implement the action.

Option #1 - mapView:regionDidChangeAnimated: will be called for either a scroll or a zoom event - basically any time the map region changed as the name implies. This results in a slightly less smooth resizing of icons, because the map events are fired less frequently.

My preferences is for Option #2 - Attach a UIPinchGestureRecognizer to the MKMapView object and then implement the action. Pinch gesture events are fired rather quickly, so you get a smooth resizing of the icon. And they only fire for a recognized pinch event- so they won't fire during a scroll event.

The action methods invoked must conform to one of the following signatures:

- (void)handleGesture;
- (void)handleGesture:(UIGestureRecognizer *)gestureRecognizer;

You have to be careful to not override the maps default zoom behavior. See this post: "UIMapView: UIPinchGestureRecognizer not called" for more info. Short answer is that you have to implement shouldRecognizeSimultaneouslyWithGestureRecognizer: and return YES.

All told here is some sample code:

// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad
{
    [super viewDidLoad];

    self.mapView.mapType = MKMapTypeStandard;   // also MKMapTypeSatellite or MKMapTypeHybrid

    // Add a pinch gesture recognizer
    UIPinchGestureRecognizer *pinchRecognizer = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(handlePinchGesture:)];
    pinchRecognizer.delegate = self;
    [self.mapView addGestureRecognizer:pinchRecognizer];
    [pinchRecognizer release];
}

#pragma mark -
#pragma mark UIPinchGestureRecognizer

- (void)handlePinchGesture:(UIPinchGestureRecognizer *)pinchRecognizer {
    if (pinchRecognizer.state != UIGestureRecognizerStateChanged) {
        return;
    }

    MKMapView *aMapView = (MKMapView *)pinchRecognizer.view;

    for (id <MKAnnotation>annotation in aMapView.annotations) {
        // if it's the user location, just return nil.
        if ([annotation isKindOfClass:[MKUserLocation class]])
            return;

        // handle our custom annotations
        //
        if ([annotation isKindOfClass:[MKPointAnnotation class]])
        {
            // try to retrieve an existing pin view first
            MKAnnotationView *pinView = [aMapView viewForAnnotation:annotation];
            //Format the pin view
            [self formatAnnotationView:pinView forMapView:aMapView];
        }
    }    
}

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
    return YES;
}

So at this point- you again have several options for how to resize the annotation. Both of the following code samples rely on Troy Brant's code for getting the zoom level of an MKMapView.

1. Resize BOTH the annotation image and the callout using a transform. Personally I think the transform results in a cleaner looking resize. But in most cases- resizing the callout is not called for.
2. Resize just the annotation image - I use Trevor Harmon's Resize a UIImage the right way but again my opinion is that it's not as clean looking a resize.

Here is some more sample code:

- (void)formatAnnotationView:(MKAnnotationView *)pinView forMapView:(MKMapView *)aMapView {
    if (pinView)
    {
        double zoomLevel = [aMapView zoomLevel];
        double scale = -1 * sqrt((double)(1 - pow((zoomLevel/20.0), 2.0))) + 1.1; // This is a circular scale function where at zoom level 0 scale is 0.1 and at zoom level 20 scale is 1.1

        // Option #1
        pinView.transform = CGAffineTransformMakeScale(scale, scale);

        // Option #2
        UIImage *pinImage = [UIImage imageNamed:@"YOUR_IMAGE_NAME_HERE"];
        pinView.image = [pinImage resizedImage:CGSizeMake(pinImage.size.width * scale, pinImage.size.height * scale) interpolationQuality:kCGInterpolationHigh];
    }
}

If this works, don't forget to mark it as the answer.