Protoglobe.com

Draggable Map Grid

This demo appears to show a pane dragging a pane around underneath what seems like a transparent layer, but is actually just a div that uses relative positioning and hidden overflow to simulate the effect. The grid lines are drawn dynamically each time the layer is 'dropped' after dragging, using the difference between mouse grab and drop points to calculate the grid offset and how many boxes to draw outside of the visible area so that the next drag won't display empty space. The coordinates are calculated based on the assumption that you start at 0,0, and zoom is taken into account. Click the numbers below to change the zoom. Also note that the center point should stay the same if you resize it, which is done by grabbing the tab and moving it around.

An actual map could be displayed here by taking a set of very large pictures, scaling them down to various sizes depending on how far out you're zooming, and breaking them into pieces. I haven't really thought through how you would organize and divide the pictures to fit neatly at various zooms, but at least this demo shows how the dragging and grid recalculation would work. Ignoring the zoom feature, you might also use this system to map out a game board of some sort.