IMaP Demonstration

The Image Markup and Presentation tool (IMaP) allows very large images to displayed in a web browser. The images can exceed the size of the browser window; the user can pan the image in any direction to see the hidden areas. The user can zoom in to see greater detail or zoom out for an overview. The image can be marked up with symbols, shapes and labels, which are displayed as overlays on top of the base image. The markup can also link to extensive annotations, which can be displayed when the user clicks on an image feature. Feature annotations are stored in a database, which can be searched.

IMaP is made up of a set of related components that work together to allow the large image to be marked up, prepared for use, and displayed on the web. The three main components are the IMaP Administration Utility, which manages and simplifies the process of preparing images; the IMaP Viewer, which displays the image in a web browser and allows the user to interact with it; and a markup tool, such as the HCMC Image Markup Tool or the Inkscape drawing program (see below), which allows the image to be annotated.

The Image Markup and Presentation tool is customizeable in various ways. The Viewer can be used on its own as a complete web page, or can be embedded in another page to use an existing interface. Some examples of this are shown below. Click any image to jump to a related web page.

The Image Markup and Presentation tool is entirely open source. The project is released under the Mozilla Public Licence version 1.1 (http://www.mozilla.org/MPL/MPL-1.1.html). The source code and documentation is available for download.

The HCMC Image Markup Tool is used to mark up the images with annotations linked to image features. The Markup Tool produces Scalable Vector Graphics (SVG) files, which the IMaP Administration Utility converts to a format usable by the IMaP viewer. The Markup Tool is open source software and is freely available from the HCMC web site.

The Administration Utility can also work with SVG files produced by the open source Inkscape drawing program, which can be used to draw any arbitrary shape on the base image for use as an overlay. Other sources of symbols, shapes and annotations can also be added to the Utility.

The IMaP Administration Utility manages IMaP projects; a project encapsulates one or more images and their markup. The Administration Utility hides the complex set of files and options needed to render large images with overlays, so relatively little training is needed to produce an IMaP project. Extensive online help is available from within the Utility, and other documentation includes a Workflow Manual that guides the user through the usual steps of preparing an image.

The Administration Utility on this demonstration site has some of its options restricted for security reasons, but is otherwise fully functional. You can log in with the user name "guest" and password "guest" (without the quotes). Changes you make to the demonstration project will affect the displayed images, but the changes are temporary; they are all rolled back every night.

The IMaP Viewer provides a user interface that allows the user to interact with the displayed images. The basic user interface displays one image at a time that fills the entire browser window; the user can pan the image in any direction, zoom in and out, show or hide information layers, and get information on image features. Extensive help is available from within the viewer.

The IMaP viewer can also be embedded in other web pages, to allow it to be integrated in the web site design. This example shows a Gallery interface: one image is displayed at a time, with a thumbnail gallery to select the image to view.

This example embeds two independent copies of the IMaP Viewer in a single web page, allowing two images to be compared. The dual vertical view shows two images, one occupying the left half of the browser window, the other the right half.

This example also embeds two independent copies of the IMaP Viewer in a single web page, allowing two images to be compared. The dual horizontal view shows two images, one occupying the top half of the browser window, the other the bottom half.

This example embeds the IMaP Viewer into a page that is part of a larger web site. The Map of London project displays the Viewer as a window within the overall site layout. In this case the Viewer window is a fixed size that does not grow or shrink as the browser window is resized.

This example embeds the IMaP Viewer into a larger web site. The viHistory project displays the Viewer in various ways within the site structure; one set of maps uses a Scalable Vector Graphics (SVG) drawing as an index to the maps.