comment 0

Zoomable On-line Previews of my Transit Maps

To say I’m excited about this is an understatement. Thanks to Stuart MacMillan — who very kindly spent the time to show me exactly how this all works — I’ve now implemented awesome zoomable, scrollable versions of many of my transit map designs here on the site. Serving large images on the web has always been problematic (especially when there’s more pixels in the image than can fit on the screen at one time!), and this seems to be the most elegant solution that I’ve seen so far.

I’ve wanted to move away from hosting the big previews of my maps on Flickr for some time now (their “no links to other sites we deem to be commercial” rule has long irked me), but simply moving those enormous, unwieldy JPGs to my own site is also less than satisfactory. Posting them as PDFs is also out of the question for me — even with password protection, PDFs can be pretty easily hacked and reverse-engineered in Illustrator. I’ve spent way too many hours on these maps to post them online in such a potentially vulnerable format (hence also the watermarks on my large online images and these zoomable versions of the map).

Here are the maps that I’ve made zoomable versions of so far:

For those that are curious, Stuart’s method uses the Leaflet.js javascript library combined with Zoomify image tiles exported from Photoshop. The advantage of this technique is that the output doesn’t rely on Flash for viewing (as standard Zoomify export from Photoshop does), so it can be easily viewed on mobile devices — which is more and more important these days. Overall, I’m very happy with the end result, although I do find that the Zoomify export from Photoshop seems to sharpen the image tiles compared to the original image. I’m not quite sure why this occurs: surely the purpose of the export is simply to slice the original image up into smaller tiles for the different zoom levels, rather than applying any kind of (subjective) sharpening to the image?

Further reading:

Leave a Reply