Zooming like a big boy

Wow, so I have had a ticket sitting in my queue for some time now that I didn’t think would be easy. What we had to do was to Zoom in the user but leave the location of the Zoom in the same place it was on the map. After much thinking (about two hours) I came up with my solution.

The principle is simple. Figure out where the users mouse is. Get the XY, zoom in figure out what LatLng is in that XY Position, get the difference. Then apply the difference to center point and set the new center point.

public function zoomMapKeepingXYCoords():void
{
var mouseXY:IPointXY = new PointXY(myMap.mouseX, myMap.mouseY);
var mouseLL:IPointLL = myMap.pixToLL(new PointXY(myMap.mouseX, myMap.mouseY))
setZoom(myMap.getZoomLevel() + 1);
var newLLatXY:IPointLL = myMap.pixToLL(mouseXY);
var latDiff:Number = mouseLL.lat – newLLatXY.lat;
var lngDiff:Number = mouseLL.lng – newLLatXY.lng;
var centerAftZoom:IPointLL = myMap.getCenter();
var newCenter:IPointLL = new PointLL(myMap.getCenter().lat + latDiff,myMap.getCenter().lng + lngDiff );
myMap.setCenter(newCenter);

}

Have Fun!