March 22, 2010
Building a scaleable GoogleMaps-like picture viewer in one hour or less.
A few weeks ago, I decided to sketchnote TEDxRTP. This was my first foray into sketching an entire conference. And though the drawings show my trepidation and my errors, I wanted to show them off for others to check out.
If you’re impatient and want to know how I got these drawings online, skip to The Solution.
The Problem
I wanted to show these off in a pannable and scaleable format, similar to Google Maps. This, I felt, did a better job of showing the body of work better than Flickr or another image sharing service. I wanted people to be able to get the large view, then dive down to see the grain of my pencil on the paper. Flaws and all.
I searched around, even tweeted my request. Being impatient, I didn’t even wait for responses to come in and forged ahead. (I probably should have waited, because apparently Microsoft SeaDragon does this.)
Here’s what I came up with. Click the image to play around.
The Solution
I knew fundamentally how Google Maps worked. It creates tiles of images, which are loaded into an interface progressively. Large images are divided into matrices of tiles at differing levels of resolution. The user interface is aware of (1) what is viewable in the viewport and (2) what scale the user is at. This allows the UI to present only those tiles that are needed for the current view at the chosen scale level.
Enter Zoomify
I remembered a tool called Zoomify, which provided an interface that did just that. Looking on their site, I noticed they had a free viewer called Zoomify Express, as well as an app that would cut those images up. Bingo. Downloaded.
Next, I made the high resolution composite of my images. This actually was the longest part, since each of my scans were at 300 dpi and I have just a simple Macbook. Nevertheless, I composited the images to the tune of RJD2 and my computer’s fan furiously spinning. The resulting collage I saved out at full resolution: 300 dpi.
With that image in hand, I dragged it into the Zoomify Converter. After a few minutes, this simple little app had sliced it all up and stored them in a set of folders. Vince Shlomi’s Salad Chopper isn’t even this fast and neat.
Next, I pointed the Zoomify Express html file at this folder. Immediately, it loaded up and was good to go.
Hosting through S3
With this, I could have easily just packaged it all up and popped it onto my Web server. But I was concerned that the traffic might spike and the data transfer would exceed my quota. Thinking back to GarnishBar, I remembered Mike Kibbel saying how easy it was for him to set up and serve assets from Amazon S3. For cents a day, I figured it was worth a shot.
Amazon S3 is essentially a bucket that you can serve files from. You pay based on data transferred, which in my case is not much. Plus, you get the benefit of Amazon’s CDN, which optimizes those transfers for geography. Sounds good. I signed up.
Getting the files there
S3 is a bit strange, in that it requires a special client to get the files transferred in. I had heard of S3Fox, which is a free Firefox plugin that helps you manage your S3 bucket. I added it to my plugin family.
From here, I simply dragged my files (including the HTML file with the Zoomify .swf) onto the transfer pane and waited. Uploads were speedy and simple. There were two errors, but re-uploading those files solved that.
After that I pointed my browser at my S3 url–to no avail. I realized you have to set read permissions on the files for the world to see. I tried this with S3 Fox, but it didn’t seem to work as expected.
Stuck, I wondered if Transmit could manage an S3 bucket. Turns out it can–and quite well. After connecting to S3, I set those permissions to let the world read them. Heading back to that URL, I found that it worked as expected.
So, in about an hour I was able to roll my own zoom-and-pan tool and get it hosted on a world class CDN. Even if the sketches are bad, this was a win.
