55

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

4 Answers 4

151

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);
4
  • 7
    Super! In order not to look for image height you may write annView.centerOffset = CGPointMake(0, -annView.frame.size.height / 2);
    – AlexanderZ
    Commented Jul 31, 2014 at 17:08
  • 2
    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. Commented Aug 3, 2015 at 3:15
  • @Zoleas, It's perfect solution and working fine with custom pin image on map. Commented Nov 30, 2016 at 9:54
  • When using circle image for Pin I had to use centerOffset = CGPointMake(0, 0) Commented Oct 21, 2019 at 10:46
49

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.

1
  • 1
    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.
    – Klaas
    Commented Aug 23, 2015 at 11:10
21

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

MKAnnotationView centerOffset guide

3

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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.