Making and Using Clickable Web-Based Maps for Geography Education: It's Easy

Dr. Miriam Helen Hill


Paper presented at the annual meeting of the National Council for Geographic Education, November 4, 1999 in Boston, Massachusetts.  Dr. M. H. Hill was a Visiting Assistant Professor in the Department of Geology and Geography at Auburn University in Auburn University, Alabama. She is now an Associate Professor in the Department of Physical and Earth Sciences at Jacksonville State University in Jacksonville, Alabama.

Abstract: Clickable maps identify a page area and link another frame. Clicking the area provides additional information about that area. Instructions and classroom applications are discussed.


Maps and graphics are an integral part of geography and geography education. Geography is a very strongly visually based discipline. Often, we place a map before our students and attempt to draw their attention to something we see on that map; however, just as what we say may not register, what we see may not be where their attention is directed.

Individualizing instruction is an attempt to draw the student into the learning process, making them active learners involved in hands-on ways. Collaborative learning may extend this direct involvement to small groups. Computer technology can facilitate both approaches by serving as a media for graphic presentation. Computer screens can readily display a variety of graphic images, photographs, diagrams, maps, and text, as well as animations, videos, and audio clips. Together, these can tell the story of spaces and places in ways unavailable to educators in decades past.

Integrating the graphic image with the diversity of associated materials is the first development challenge. Assuming one image can be used to tie a collection of materials together, just as we use a map and point to and describe different places on that map, that image may serve as the center of the lesson and direct the user to the other materials.

Clickable web-based maps identify a page area and link another frame. Clicking the area provides additional information about that location. One program which is readily available and easily used to create these links is MapEdit from Boutell.com. MapEdit may be downloaded from the web site and used gratis for a 30 day period and a short extended grace time. To continue usage beyond the trial period requires a registration key. The price of the program is currently $25. However, non-profit and educational uses receive discounts. By submitting a request on school letterhead, I was able to receive a code for permanent usage.

Illustrating a graphic with MapEdit is easy. First, an HTML page containing the graphic is needed. The graphic may be a scanned, drawn, or downloaded .jpg file. The HTML base page may be created by use of a program such as Netscape Composer or even hand coded. After creation of this base web page, MapEdit can be used to undertake the screen digitization necessary to link the areas of the graphic to other web pages.

Loading MapEdit brings up the program's opening page. File menu/open or the open folder icon can be used to locate the base HTML file. After selection of the base page, the base .jpg file must be selected as a base page may contain multiple graphics. These two steps tell the program which file to alter by the addition of the digitization information and which graphic to load in order to proceed with this mapping of points.

At this stage, the base graphic or .jpg image appears on the screen of the MapEdit program. The icon toolbar contains eleven choices. The first three are standard icons for open document, close document, and save document. The second group of three icons are those for the digitization process. Digitized areas may be rectangles, circles, or polygons. The next four icons allow changes to be made to previously digitized areas. These are to test and edit hotspots, move hotspots, add points to polygons, and remove points from polygons. The final icon accesses the help contents.

For this example, irregularly shaped areas are best suited, so the add polygon icon was used. The cursor is used to click on corners to form the clickable area for the linked image. A right mouse click closes the area and opens the object URL box. The destination URL file name needs to be entered. (The program contains other advanced options here.) Clicking on okay returns you to the digitizing screen. Cancel or delete removes this area and allows you to redo the area. Upon choosing OK, the working HTML document will have been revised. Additional lines now include area shape information, coordinates for the digitized area, and the link information. Although after only one area has been added, it is not essential to save the document; you should always periodically save your work. I have found the program to be fairly stable with few crashes, but it is always better to be safe than sorry. Clicking the save icon results in the permanent alteration of the original HTML file. Clicking the add polygon icon starts the digitization of the second area and a right click closes the area and opens the object URL box for the link information. In this manner, all linkable areas may be designated.

A link may be checked through the tools/test + edit menu or the test and edit icon. Clicking in an area will highlight the area and open the object URL box. The link information may be revised as needed through this process.

Area eleven in this example illustrates several items. First, it demonstrates the add rectangle and add circle capabilities. These are adjacent, not overlapping, areas. Secondly, it demonstrates that two separate digitized regions may open the same link.

Because designated areas should not overlap, gaps or non-clickable locations exist on the image. A default URL option may be designated to provide additional instructions on where to click or other appropriate information. Completion of this option is not necessary. It is easily accessed by clicking on a non-digitized area during the test + edit process and typing in the URL address.

When all of the areas have been identified and checked, do not forget to save the HTML document with File/Save or the save icon. Then exit MapEdit through the File/Exit menu or close the program.

If you are creating the link pages, use your web composer to design them. If the links were to web sites, the page is ready to be viewed.

Use a web-browser like Netscape or AOL to open the HTML document and view the links. The landform at M is a drumlin. Clicking on it links to the explanation and drumlin photograph. The back button returns the base graphic to the screen for additional choices. U views eskers; 8 views hanging valleys. O takes one off to the University of Wisconsin at Stevens Point to view Karen Lemke's page on cirques from her Illustrated Glossary of Alpine Glacial Landforms or R is her page on arêtes.

Now that you know how to make images clickable, we can turn to examples of their use. In the previous example, the base graphic was a diagram. More commonly, we might use maps. In 1998, Tom Martinson's GY500 class undertook a Walking Tour of Auburn, Alabama project. While he and I produced several versions of this tour, one used a clickable map to display the location of photographs taken on this tour. Looking to the left (west) from the highlighted point, one would see Samford Hall.

In another application, a topographic map such as Cumberland, Maryland might have identified points. A student could click on the points to see a photograph from the location. Clicking on point 8 could link to the view looking down on the water gap with the railroad tracks, road, and river running through the mountain pass.

Still another application would be place name drill. For my world regional geography classes, I have used a web-based map manual. Each of the world realms, like the Australian Realm, has a base map with numbered features and a list of matching questions. The questions are clickable for the choices. Clicking on the number on the map reveals the correct place identification.

MapEdit has many educational applications. I am confident that you can come up with appropriate uses for your own classroom. Most students appreciate the interactive nature of working with these materials and find it more fun and interesting than traditional methods. Check it out by surfing to www.boutell.com.