I am starting a development for an iPad application to help surveyors perform building/site surveys. The basic scenario is that the application will present a plan of a selected building or site (which can be manipulated in the usual iPad way - zoom, rotate, pan). The surveyor (user) will then be able to select pins to drop on the plan which will have pop-outs for entering survey details against the pin. Think iOS Maps app but with a plan/diagram instead of a map and (I guess) using the images co-ordinates rather than geo info.

I have the plan loading into a UIImageView and the various gestures are all working smoothly and I'm now at the big issue of how I'm going to have the pins 'attached' or locked to the plan as it gets zoomed/rotated/panned (and saved/restored). I have played around with a few ideas such as adding pins as UIImageView objects to the base plan image with addsubview. This works in that the pins are locked into position on the base image but then are also scaled and rotated along with the base image when gestures are used. The kind of questions I then have with this approach is... How to have track the pin locations in relation to the base image (plan/diagram) while the base image may be zoomed and rotated? How to keep the pins from scaling (always the same size)? Retain the pins orientation?. I am concerned that I may go down a track that ends up with performance issues or display issues when dealing with many pins (100s).

Again, with iOS Maps application (or google maps) in mind, I am seeking some guidance as to best approach for this at higher level but obviously the more detail and specifics the better!

Many thanks in advance.



This problem was solved in another question I subsequently asked which can be found here... iOS - Math help - base image zooms with pinch gesture need overlaid images adjust X/Y coords relative

Basically, I used a scrollView instead and used the following calculations for positioning x, y...

newX = (pin.baseX * scrollView.zoomScale) + 
    (((pin.frame.size.width * scrollView.zoomScale) - 
    pin.frame.size.width) / 2);
newY = (pin.baseY * scrollView.zoomScale) + 
    ((pin.frame.size.height * scrollView.zoomScale) - 

Note: 'pin' is a custom object that inherits from UIImageView which has properties 'baseX' and 'baseY' where I store the original x/y coordinates of the pin at zoomScale 1.0. See the link above for sample of my full implementation. Thanks.


You have to be working out the coordinates for the pins in a mathematical way rather then using pixels for example if your image was 100 x 100 and you wanted to put the pin in the centre point of the map rather then setting the x and y coordinates to (50, 50) you set them to (image.size.width/2,image.size.height/2) because if you were to then scale the view down the pin would remain in the centre point.

Obviously this is a fairly basic example but the same logic can be applied wherever you put the pin on the image.

Hope this helps.


You could work out your new coordinates by how much the image is being scaled. If the image was again 100 x 100 and you scaled it down to 50 x 50 and you wanted your pin to remain in the same place you would do (x / (100/50), y / (100/50))

The formula would be:

x = x / (original width / new width)

y = y / (original height / new height)