I'm a web developer working on a solution and my issue seems to be a pure math problem and I though someone here could help.
I have a map, when a user clicks a point the user is moved to the click point and zoomed in at that point a specific "amount". The map projection is Mercator. All measurements are detected by the distance from the top left corner for example the "point" starts at 787, 469 or 787 from the left and 460 from the top. When the user selects a point, for example 573, 139 the map moves the point and scales/zooms simultaneously. During this point the location on the map moves.
The best way to visualize this is with a balloon. Imagine the very tip top of the balloon is the stating point, call it "point a". You draw a dot on the balloon (say 1in from above and 2.4in to the left), call it "point b". When you blow the balloon up the dot "moves" away from "point a" so if you tried to measure from "point a" 1, 2.4 you'll miss "point b".
So, now image if you started your finger above "point a" at 5in and as the balloon was blown up you moved your finger over and down to touch "point b" at the 1, 2.4 mark. In doing this, you'll always miss the point by x amount.
That's my issue I need to calculate that change in position.
What I know:
starting "height": 250.6690353697 (the width of my map / (2*pi))
starting point a: 787.5, 480
point b before it moves: 522.8125, 318.609375
What I don't know:
where point b will be after scale and zoom (aka, after the balloon is blown up)
Currently the "point b" to move to is calculated by:
x = (x pos of "point a" starting point) - (x pos of "point b") + (half width of the map)
y = (y pos of "point a" starting point) - (y pos of "point b") + (half height of the map)
This works perfectly without scaling. Once scaling is introduced the point (the x, y of point b) stays the same but the location on the map selected changes.
I hope I explained this well enough.