Show Off Your Maps with Zoomify

Ortelius Tutorials

Interactive maps capture your reader’s attention by making it easy to see the details. Zoomify is a great way to show off any large map in web design with a slick zoom-and-pan interface. Zoomify Express is a free version available from Zoomify, Inc. that provides fast interactive viewing on the web with just HTML, JPEGs, and Flash. Find our how…

Click to zoom into image

Export Your Map to an Image Graphic

Create your map in Ortelius and export it as a high quality graphics file. In general, we recommend “drawn” vector maps typically be exported as a high-resolution PNG file (choose File > Export from the main menu and choose the PNG at 300dpi option). For maps with image backgrounds, we generally recommend a JPG file export (choose File > Export from the main menu and choose the JPEG at 300dpi option). Either way, Zoomify is going to convert your image to JPG images when it cuts it into tiles.

Zoomify Your Map

Open the Zoomify application. Drag-and-drop your image into the Zoomify window or open it from the Finder. Zoomify will process your image and cut it into JPG tiles, placing them into a new project image folder. Follow the instructions provided with the application if you aren’t sure what to do.

Zoomify HTML Template

For integration with a standard HTML webpage, Zoomify provides a basic HTML template with its software download. Follow the instructions included with the software to Zoomify your map and modify the HTML file (for example, you’ll need to add the path to your project image folder). This works well for viewing large maps on websites, CDs, and DVDs. For websites, you’ll need to put the HTML file, image folder, and SWF file on your server. You can also change settings, such as map size and turn the locator map off or on.

Click here to see the default HTML template in a new window.

Zoomify within your WP Blog

Many websites today are powered by blog software, however Zoomify doesn’t necessarily work within them directly. For example, the WordPress content editor tends to break the Flash inclusion code (it deletes the needed parameters). YD Zoomify is a WordPress plugin and simple way to get around this problem. It inserts zoomable image code that will display perfectly with all Flash-supporting browsers (which is most browsers today). Here is an example:

YD Zoomify enables placement of images directly within a WP blog post, allowing for tight integration of your map with your other content. You upload the image tile folder to your server, edit a few easy settings, and the plugin does the rest.

Zoomify within a Lightbox (PrettyPhoto)

You can display your interactive map within a lightbox interface such as shown below. If you are using a lightbox plugin that supports HTML or external content, then its a matter of pointing the reference link to an HTML webpage rather than an image. We use PrettyPhoto to open our HTML Zoomify content within an iFrame. A lightbox features your interactive map nicely making it stand out a bit from your other content. It also may allow for larger display, and works without the additional YD Zoomify plugin. You’ll need to be comfortable setting up the link tags and may need to experiment a bit with your settings.

click to zoom into image


First, follow the instructions for creating your zoomified map and editing the HTML template. After you upload the image folder, HTML template, and SWF file to your server, you’ll point the lightbox image link to the HTML content. The PrettyPhoto websitedescribes how to view various content in the lightbox.

To do so with external sites (iFrame), follow these steps:

  1. Create a link (<a href=”#”>).
  2. Add the rel attribute “prettyPhoto” to it (rel=”prettyPhoto”).
  3. Change the href of your link so it points to the webpage you want to open (in this case, the full path to your Zoomify HTML file).
  4. Then add “?iframe=true” as a parameters in your HREF so prettyPhoto knows to open the content in an iframe.
  5. Then add the width and height as parameters in your HREF (&width=100&height=100). The dimensions can be percent based.

So, our image link ends up looking like this:

<a rel="prettyPhoto[iframes]" href="http://mapdiva.com/Zoomilfy/ Stregna-Drenchia_1910.htm?iframe=true&amp;width=690&amp;height=530">
Alternatives

If you want to have some pan and zoom capabilities but aren’t sure about using Zoomify, there are other great alternatives. One of the easiest is to provide a PDF file of your map. Ortelius map illustration software exports PDF files directly. A PDF file retains its vector qualities, resulting in sharp graphics even when tightly zoomed. Vector graphics look crisp even at 6400% zoom! And PDF viewers, such as Adobe Reader and Preview, make it easy for users to zoom-and-pan around your map. Note that web users may need to download your content for viewing, and this can sometimes be a bit slow with very large files.

You’ve been viewing our example of a family history map made with Ortelius showing the northeast Italian region of Udine (c. 1910). Click here to view a PDF of the finished map in all its glory.

Be Sociable, Share!

Related Topics

  1. Oh, The Places You’ve Been! Working With Ortelius Map Templates

Tags: , , , , , , , , , , , ,

Comments are closed.
This site uses a Hackadelic PlugIn, Hackadelic Sliding Notes 1.6.2.