June 13, 2011, 3:14 a.m.
posted by purezlo
Create the Google Maps Scrolling Effect
When Google Maps (http://maps.google.com/) was first introduced, the interactivity of the map blew people's socks off. On older mapping sites, you were presented with a map that had eight arrows positioned around it. When you clicked on an arrow, the page would be refreshed, and the map scrolled by one map unit in the direction you requested. Because of that page refresh, though, you had to reorient yourself to the new location.
Google Maps changed all that. With Google Maps [Hack #95], you simply click on the map and then drag it in whichever direction you want to go. The page never refreshes (although it occasionally redraws), and you never lose track of where you were.
Figure shows the system's conceptual design. On the lefthand side of the illustration is the page, and on the righthand side is a set of images that contain the sliced-up larger image. The map moves within a view rectangle by repositioning the images within the view area. These images are drawn from the bank of images on the righthand side (all of the images are available instantly, without requiring a refresh).
The image scroller design
The code you want is shown in Figure; save it as index.php.
Mimicking Google with a little PHP wizardry
Each image in the grid needs to be the same size; their width and height are defined by the width and height values at the start of the script. The rows and cols values define how big the viewport is, and the maxrows and maxcols values define how big the entire map is.
The last thing the PHP code does is to set up the viewport images in the body section of the page. These all start out absolutely positioned in the upper-lefthand corner of the page. Once the page is rendered, the rest of the magic is left to the browser.
The position( ) function is where the fun really takes place. It calculates which images are required to draw the map, sets the src attribute of the image tags to the correct files, positions the images on the page, and sets the clipping values on each image so that you always get a square.
Running the Hack
Upload the code and the source images to your PHP server, and browse to the index.php page. You should see something like Figure.
From here, click on the image and drag down and to the right. The image should scroll seamlesslywithout a page refreshto a point roughly similar to what you see in Figure.
Keep in mind that this isn't a single image that's being scrolled; it's a set of 1,600 smaller 100 x 100 images that are being swapped in and out of the document seamlessly. This is done using a 7 x 7 grid of image tags. These tags are positioned absolutely on the page with CSS. As the user scrolls around, the images are moved, and their clipping is adjusted. When the user exceeds the extent of the current images on the page, the image sources are updated with the required images.
The starting position of the scroll plane
With an application like this, doing the work on the browser without a page refresh can be very cool and can result in a much better end-user experience. When pages refresh, the screen turns white, and then (slowly) updates with new content. This can be a very jarring experience, often causing a user to lose his frame of reference. If the page refresh can be avoided, the user will not experience this discontinuity of reference (and happy users make happy programmers, right?).