MKAnnotation image offset with custom pin image

Question

I have a MKAnnotation with an custom pin image. However the pin(MKAnnotationView) centers the image in relation to the specified coordinate. I want to set the point of the coordinate at the bottom center of the image, not center.

I've tried using annView.centerOffset = CGPointMake(-12, -28);. But the problem is that centerOffset isn't relevant to the maps zoom level.

One can do this both in the JS API and in Android. Is there any possibility to do this in objective-c?

..fredrik

Sax

Answer 1

Your UIAnnotationView is always drawn at the same scale, the map's zoom level doesn't matter. That's why centerOffset isn't bound with the zoom level.

annView.centerOffset is what you need. If you see that your pin is not at the good location (for example, the bottom center move a little when you change the zoom level), it's because you didn't set the right centerOffset.

By the way, if you want to set the point of the coordinate at the bottom center of the image, the x coordinate of your centerOffset should be 0.0f, as annotationView center the image by default. So try :

annView.centerOffset = CGPointMake(0, -imageHeight / 2);

Hannis

Super! In order not to look for image height you may write annView.centerOffset = CGPointMake(0, -annView.frame.size.height / 2); – Catafalque

But to do that you have to look up (slower) or hardcode (bad) the image dimensions. The better solution (possibly a newer feature?) is Pancho's answer, using layer.anchorPoint. – Tortuous

@Zoleas, It's perfect solution and working fine with custom pin image on map. – Emcee

When using circle image for Pin I had to use centerOffset = CGPointMake(0, 0) – Jalap

Answer 2

Setting the centerOffset often moves the image arround when user rotates or zooms the map, as anchor point is still set to the center of the image instead of its lower center.

You can set the anchor point of the annotation to the bottom center of you custom image as follows:

yourAnnotation.layer.anchorPoint = CGPointMake(0.5f, 1.0f);

This way when user zooms or rotates the map your custom annotation will never move from its coordinates on the map.

Jorgan

Hm, I used this solution before, because it does not rely on the actual dimensions of the annotation image. But I cannot verify that the annotation moves while rotating when using centerOffset. – Serilda

Answer 3

You can use this guide to figure out your center offset.

Hannigan

Answer 4

All the given solutions by now would mess up the pin if you zoom out. The only fully working solution I found so far is to increase your custom image height with its height. In other words - double the height. Also move the pin image to the top and leave the rest transparent. This way the center of the image will be the bottom point of your push pin.

Now no matter how much you zoom or if you rotate the map the pin will stay centered on the location you want.

The one problem I can think of is that the tappable area for this pin will be increased as well.

I hope this helps!

Irrigation