Correctly resize MapKit map annotation pin

Question

I have a map with several annotation pins added.

What I want to achieve is, when one of the pins is tapped, the pin enlarges.

I have the following code snippet

func mapView(_ mapView: MKMapView, didSelect view: MKAnnotationView){
    if(view.image != nil){
        UIView.animate(withDuration: 0.1) {
            view.centerOffset = CGPoint(x: 10, y: -20)
            view.frame.size = CGSize(width: (view.image?.size.width)! * 2, height: (view.image?.size.height)! * 2);
            view.frame.offsetBy(dx: (view.image?.size.width)! * 2, dy: (view.image?.size.height)! * 2)
        }
    }
}

While this does resize the image, the image becomes distorted and also the position of the pin moves (so the actual location the pin is placed at, is not the correct location), I can understand why this happens, but what I don't understand is how to get around this.

Is there a recommended method of resizing map pins?

score 3 · Accepted Answer · answered Mar 22 '17 at 21:07

There are 2 problems here. While you said you do understand why they happen, I'll explain them both to make sure we're on the same page and to move from them to possible solutions.

"While this does resize the image, the image becomes distorted"

The reason why this happens is that you resize the annotation view to twice the size of the pin image. This means the pin image will be upscaled and therefore look distorted.

What you can do is: a) (faster solution) make the pins smaller initially. For example make them 0.7 times their regular size and when you need to enlarge them, just animate resizing them to their normal size. b) (proper solution) use a different image for those pins, with twice the height and width of the one you had so far. That way you can still have the pins the same size as you have now, although you will still have to do what I described in point a) (perhaps try using 0.5 scale initially?). If you were using MKPinAnnotationView so far, you'll have to switch to custom MKAnnotationView with custom image.

This way you will have an image that is initially downscaled and then, when enlarged, displayed in its full resolution. There might be some image distortion, but barely visible compared to distortions visible when upscaling the image.

"the position of the pin moves (so the actual location the pin is placed at, is not the correct location)"

This is purely due to incorrect centerOffset. centerOffset is the offset from center of the annotation view (and also your image, if it takes up your entire annotation view without any margins) to the point on the image which is supposed to be "pinned" to the map. That "pinned" point is going to be placed right above the place on the map that the pin is supposed to direct to and will stay above that point when you zoom in or out. When you enlarge your annotation view, the center offset will change - if annotation view becomes, for example, twice as big then the centerOffset will be doubled as well etc.

Thanks John, I will look into this further. As you said, what I will probably need to do is, Create a Custom image, and then when the pin is clicked, expand the image and also include an offset — Wesley Skeen, Mar 24 '17 at 14:55

Correctly resize MapKit map annotation pin

1 Answers1