How do slippy maps work?

Question

Slippy maps are web widgets which allow the user pan around a two dimensional plane by grabbing and dragging it. This control was made popular by Google maps, and can be seen on many modern mapping systems today. It's obvious as you watch them load that they are actually a grid of images which are loaded as-needed as the user pans. My question is; how are those images aligned, moved, and dynamically loaded in HTML/JS/CSS? Are they divs with background images? Are they loaded into a parent div with overflow:hidden? What strategies do they use to keep from leaking memory as the user pans around. Are there any third party libraries that make it easier to build them. I'm not interested in geographic maps persay, just the interface that's commonly used to display them. Thanks!

Answer 1

Normally a grid of image elements are moved around, and as some move off the end of the viewer and become hidden they are moved to the opposite side of the grid and the src attributes changed to point to the new map tile.

All these, as you say, will be loaded into a parent element with overflow:hidden;

In terms of examples you can look at the open source Open Layers implementation:

http://openlayers.org/