Charting Change Atlas: adding zoom

First go see the Charting Change Atlases sporting multiple layers of zoom at http://heritageburnaby.ca/EN/main/chartingchange.html. Then come back. I'll wait.

I previously explained in Charting Change Atlas: the technical details the basics of how we turned static TIFFs of historical City of Burnaby geography into dynamic tiled maps upon which float pins marking points of interest. At the time I remarked that the maps were a victim of their own success in that everyone who used them expected them to zoom.

Hardly was I surprised, then, when the fire-eyed demigods behind heritageburnaby.com directed us to add zoom to the maps or die in the attempt. Also I get paid for this stuff.

Zoom levels as tile layers

Normally, when using an online map tool like Google Maps or Bing Maps, a zoom action actually takes you to a new layer of map tiles. The zoom levels are like a stack of pancakes: move up or down a layer and you're eating another pancake entirely. The more you zoom in, the more detailed the tile sets generally get, to further the illusion you are floating above the earth and getting "closer" to the ground.

Fig. 1 Tile layers stacked like pancakes.

Zoom levels as resized tiles

We couldn't do that. The images are what they are, and no separate layers could be had within the scope of the project. Instead, the application resizes the tiles on the fly. That is, the tiles aren't replaced with other tiles, they are blown up when zooming in or shrunk when zooming out.

Fig. 2 Tiles expand or shrink in size when zooming. Unlike pancakes.

Everything shifts

When the tiles resize, everything else has to. Also, all the pin markers have to recalculate their positions. Fortunately, it's just math. Okay, a lot of math. But the new sizes and positions are cached so they don't have to be redone when the zoom level is revisited, and the javascript is refactored to the point where all the zoom elements have to do is call:

map.zoom(settings.zoom.current, newZoomIncrement);

Fig. 3 Relationship between viewport, map, and map's drag area.

Screenshots

Here's how the Modern Burnaby (1955 - 2000) map looks as you zoom out from 100% to 50%. One tile is bordered in red to show how it changes in size. Same tile, three different sizes based on zoom percentage.

Fig 4. above - map at 100%, tile image is 300 x 330 pixels (original size).

Fig 5. above - map at 75%, tile image is 225 x 248 pixels (300 * 0.75 = 225).

Fig 6. above - map at 50%, tile image is 150 x 165 pixels (300 * 0.5 = 150).