Wednesday, April 6, 2011

MapKit Custom Images and Offset Issues

Much thanks goes to user Georg who sent us this image of how he was trying to use our TA_MapKitPlugin for TapLynx in his app. He noticed that if we zoom out to a world view, that the custom pin images are no longer in the correct positions.
Georg's Map Showing the Pin Error
The pin he has highlighted actually points to a location in California (Colton) though if we zoom out, it appears to be pinned to a location out in the Pacific.
After we stopped panicking we did some testing and discovered that if we used the system supplied pin images the pin was on the map in the correct location. In the TA_MapKitPlugin the default iPhone pin images will appear if there is no entry for the pinImage key in the NGConfig file. This meant that the location is correct, but there was something wrong with the image.
Next we went over to the Apple documentation and demo code to look at how they implemented custom images. We noticed that that code also has this issue. When using Apple Map Callout demo code, if you zoom all of the way out, the custom pin will appear offset from the proper location.

The Original Pin graphic with lines to show center.
We finally realized that the MapKit code CENTERS the custom image on the map location. So, we added some padding for our custom pin images and, voila, they now stay in the correct location.
Improved Pin graphic with lines to show center.
While initially confusing, this now makes clear something we have always misunderstood: pin shadows. Since the image for a pin is actually much larger than it appears, adding a shadow (or any other shading to improve the 3d effect) to the image is quite easy to do with image editing software. We were always confused by this as we thought it would throw off the pin location in the graphic. However, now that we know the image center is the pin location we understand.
We have updated the TA_MapKitPlugin in github with new versions of the graphics. Additionally, we have found and fixed a bug in the rendering code that sometimes caused a crash, so if you are using an older version of the code, please update.

1 comment:

Unknown said...

There is no need to pad your annotation images.

Each MKAnnotationView supports the properties {centerOffset, calloutOffset} that allow you to adjust the positioning of the image relative to the annotation's coordinate as it is placed onto the map.

These offsets are relative to the image center and are specified as CGPoint values.

Post a Comment