Creating your own interactive maps

Interactive maps provide a neat way for people reading your pages to find their way around your pages. A familiar example of interactive maps are the Holmes Hall floor maps available on this server. (Side note: An older version of these maps were done on MacHTTP running on a Macintosh, written by Chuck Shotton.) Most Unix-based servers have a script called imagemap, written by Kevin Hughes, which allows users to make maps. A customized version of imagemap called imap is available on our server. It uses identical configuration files but has the added advantage of not requiring installation of the map by the server administrator, and a couple of additional features.

Making an Interactive Clickable Map

In order to set up an interactive map in one of your pages, follow these steps:

Create a .gif file with the image to be used for making an interactive map.
Create the map definition file for specifying the areas on the interactive map corresponding to URLs.
Insert HTML code into your page referring to the map.

The Map Definition File

The maps are defined by the map definition file which is a plain text file containing the coordinates for different areas which point their corresonding URLs. (The mapedit program by Thomas Boutell is available on our workstations to aid in the creation of this map file.) If you would like to manually edit your map definition files, read the following details. Lines in the map definition file can have one of the following three formats:

# this is a comment method URL coords coords [coords ...] default URL

The first example shows a comment line. Blank lines are also ignored by the imap program. The second example gives the URL for a given method. The three valid methods used by imap are circle for circles, poly for polygons, and rect for rectangles. The last example defines a URL for the default location. The default URL is used if the user selects a location which not defined by the lines in the configuration file, and is typically required for all maps.

Methods

The three methods are described below:

circle: This method requires two coordinates: The first indicates the center of the circle, and the second coordinate indicates a point on the edge of the circle.
poly: This method is followed by the coordinates of the vertices of the polygon. A polygon can have at most 100 vertices.
rect: This method requires two coordinates: The first for the upper left coordinate, and the second for the lower right coordinate.

Specifying area coordinates for map definitions

The area coordinates are given as comma-delimited x-y pairs. By using a graphics viewer program such as xv, you can find the coordinates for points on an image to define such areas. For example, in order to define a map area for a rectangle with its upper left corner at coordinates (100, 215) and its lower right corner at coordinates (235,300), the corresponding line within the map configuration file would be as follows:

rect /joe/found_me.html 100,215 235,300

If the user clicks on the interactive map within these coordinates, the local URL /joe/found_me.html will be sent to the user.

URLs used within maps

The URL specified in these map definition files can be local, meaning that the references are from the server's document root, or global, where a complete URL must be given.

The required HTML code

The gif file will be displayed on a page by using the img tag in one of your .html files. In order for your image to behave as an image map, the following format must be used in your .html page:

<A HREF="http://www.eng.hawaii.edu/cgi-bin/imap/joe/joe.map">
<IMG SRC="/joe/Gifs/joesmap.gif" ISMAP></A><BR>
Click on this map for more information.

In this example, the user joe has placed his page into our server already, using the Submit form. All his files are located in his Html directory. His map file is called joe.map, which is located in this directory, referenced after the ...cgi-bin/imap.

Additional features

In addition to supporting regular imagemap configuration settings, there are two features may be useful:

The text method -- For text-based browsers, such as Lynx, image maps usually give errors. If a user with a text-based browser uses your image map, the URL given by the text method will be followed.
The * URL -- This URL does nothing, and is an alias to our /dev/null script.

Any questions or comments should be directed to the following address:

webmaster@wiliki.eng.hawaii.edu