VirtualAlbion using Deep Zoom and SeaDragon Ajax

Lionhead recently published a high resolution map of Albion (the world of Fable II in case you’re not into games). The map is pretty nice and very detailed. It’s a huge image (45.8MB, 16 megapixels) that they built for people to print and hang on their walls. When I saw that, I immediately thought how great this would work with Deep Zoom and SeaDragon Ajax. Of course, once we have virtually infinite zooming abilities, it would be even better if the map zoomed into detailed sub-maps of the various cities of Albion. Oh well, maybe they’ll do that eventually (or someone else will take on the task).

Anyways, I thought this was a great opportunity to show an end-to-end walkthrough of how I built that online version of the full resolution Albion map.

  1. Download the map file to local hard drive. Extract the TIF file from the zip archive.
  2. Download and install the Deep Zoom Composer tool.
  3. Run Deep Zoom Composer, click “new project”, name it “Albion”.
  4. In the Import tab, click “Add image…”:DeepZoomAddImage
  5. Navigate to the TIF file, select it and click “open”. Wait for the file to be imported.
  6. Go to the Compose tab, drag the image and drop it onto the design surface (anywhere, it doesn’t matter as we’re only putting one image on the surface):DeepZoomDragImage
  7. Go to the Export tab, and click “Create a PhotoZoom account” if you don’t have one already. The alternative is to host the tile files yourself but the PhotoZoom option is by far the simplest.
    Follow the instructions (they are really simple) and create an album from the web site and name it “Albion”.
  8. Sign in using your LiveID account from the Composer application.
  9. Switch to “Existing Albums”, where you should see “Albion”, then click “select album cover” and click “OK” in the dialog that will open and that should contain only the map image. Click “Publish” and wait for the project to upload. DeepZoomExistingAlbums
  10. Now comes the tricky part. I’ve asked the SeaDragon people to take a look as there is a step here that is far from optimal, apparently because a link that used to be on the album page was removed. All of the instructions under this step should be replaced with a simple copy and paste once this is fixed.
    Navigate to the album’s page. The url should be something like
    Now we need to find the url to copy and paste into the SeaDragon Ajax embedding page. Use the “View Source” command of your browser to get at the page’s source code. Look for the <object> tag. It should have a <param> tag named “initParam” that points to a url like Copy this url into the address bar of the browser and decode it by replacing ‘%3a’ with ‘:’ and ‘%2f’ with ‘/’. The url I got out of that process was:

    Press the return key to navigate to that url and again use the “View Source” option. You should see something like this:
    <Collection MaxLevel="8" TileSize="256" Format="jpg" NextItemId="1" xmlns="">
        <I Id="0" N="0" Source=
          <Size Width="4000" Height="4000" />
          <Viewport Width="1" X="-0" Y="-0" />
    Copy the part between “Image” and “.xml”, close the browser tab and paste the url on the address bar, replacing the current url, starting at “Collection”. The resulting url should look something like this:

    This is the url of your Deep Zoom image. Copy that url.
  11. Navigate to Paste the url of your Deep Zoom Image into the form field and press “Build Embed”.
  12. You can then modify the dimensions of the viewer (I chose 500px by 500px) and press “Build Embed” again.
  13. Copy the HTML code that appears below the viewer. This is the code you need to embed into the target web page.

Voilà. The viewer should just work once you’ve followed these steps. I hope this helps and that step 10 is fixed soon. Deep Zoom is a fantastic tool and being able to build your own and host it for free is a great thing.

UPDATE: this is now completely obsolete. The SeaDragon team now has a super-easy web-based tool. Just give it the URL of an image file on the web, and they will give you the code to embed the SeaDragon/DeepZoom view of it.


  • Why is DeepZoom so slow? I mean there's always a lag after I move the mouse until it reacts. If you go to one of the maps sites (live or google) and do the same thing, with JS, it's actually more responsive? How can that be? Thanks.

  • @Peter: it's pretty smooth for me. Maybe you tried at a time when the server was feeling a little cold. What browser are you using?

  • I tried IE7, FF3, and Chrome; same result in all. It's not that is not smooth, it is, more like it's lagging. Let's say I click and drag over 300px, it takes about one second for the image to catch up to the mouse. If this is intentional then it's a bad choice IMO, it gives the impression that it can't keep up with you. Like when you play a video game that has a very low frame rate, you do something and the actual game is lagging behind. Also the CPU pegs at 100% on one core which tells me it can't keep up. I tried this with SL2 and SL3 beta. Are you not experiencing these things? I tried this on two computers (one Windows 2003 and one Windows 7) and got the same UX.

  • @Peter: no, I'm not experiencing any of that, in any browser. The CPU does have a short spike on interactions, but nothing that affects perceived performance, which is instantaneous for me. Please contact the SeaDragon team to get to the bottom of this:

  • @Virgilio: you can get support from the SeaDragon team here:

  • Anyway to navigate through multi pages of a tif image?


  • @Rosh: not with this. Quite off-topic actually.

Comments have been disabled for this content.