HAH! Figured out how to make it stay in the same location when you zoom in or out!
Code:
$(".map-control a").click(function() {//control panel
var cn = this.className;
if ( cn == "zoom" || cn == "back" )
{
var newZoom = ( cn == "zoom" ) ? curZoom - 1 : curZoom + 1;
if ( newZoom < 0 || newZoom >= zoomLevels.length ) return false; // already at min/max
// try to position new zoom level at same spot
var curLevel = zoomLevels[curZoom];
var holder = document.getElementById("mapholder");
// where have we moved the map to?
var x = parseInt( holder.style.left );
var y = parseInt( holder.style.top )
// normalize x and y to 100% zoom
x = x * 100 / curLevel;
y = y * 100 / curLevel;
// okay, NOW we can set the new zoom...
curZoom = newZoom;
var zoomLevel = zoomLevels[curZoom]; // percentage
var theMap = document.getElementById("mainMap");
theMap.className = "zoom" + zoomLevel;
// change the holder height/width so the mover knows the new boundaries
holder.style.height = theMap.offsetHeight + "px";
holder.style.width = theMap.offsetWidth + "px";
// calculate the proper NEW relative locations for the map:
x = Math.round(x * zoomLevel / 100 );
y = Math.round(y * zoomLevel / 100 );
// and move it there:
holder.style.left = x + "px";
holder.style.top = y + "px";
} else {
var viewport = $("#viewport2");
//this.className is same as method to be called
viewport.mapbox(cn);
}
return false;
});
It's not perfect. If you are at far bottom corner with zoom=100 and then change to lower zoom level, you will still be at far bottom corner, but the map will be scrolled too far left and up. The first time you go to move the map, it snaps so that there is no "off the map" showing.
I can fix this, too, but it's a pain.