HTML

Clickable Geographical Map Regions

When your site has web pages with geographical maps, sometimes it is nice to make the regions of the map clickable. Imagine that you have a political map of Western Europe. It would be nice to make the countries clickable, so that when a user clicks a country, he would go to a page that has political information (e.g. history) about the country. We can use HTML image-maps to achieve this, but the shapes of countries are irregular. How can we turn an irregular shape into a clickable region? Keep reading.

Author Info:

By: Chrysanthus Forcha

Poor Best

Rating:

/ 3

June 03, 2008

TABLE OF CONTENTS:

Realize that the outline of a geographical map looks like an irregular polygon. So to make a region of a geographical map clickable, think of its outline as an irregular polygon, then look for the coordinates of the vertices of this outline. In the HTML document, these coordinates will form the coordinates of an AREA element with a polygon shape. The AREA element is, of course, part of the image-map. To make all the geographical regions of the map clickable, the MAP element will consist of AREA elements with polygon shapes and each AREA element will have the coordinates of the region.

Creating coordinates

If you look at the map of any country, you will notice that the number of vertices and, hence, the number of coordinate pairs are many. In this section, I show you how you can get the coordinates using JavaScript. We shall use the map of Western Europe below to illustrate this.

We shall make the regions of Portugal, Spain and France clickable.

In terms of tools for this project, you need a text editor (notepad) and a browser.

Using your text editor, copy and paste the following and save the file with the name "coords.htm" in a directory. In this same directory, save the image of the map of Western Europe with the name europeMap.jpg (beware of the image type).

<html>

<head>

body {margin:0px; padding:0px}

</style>

var coordStr = ""

function createCoords(event)

{

x=event.clientX;

y=event.clientY;

if (coordStr == "")

{//the first time we start without a comma

coordStr = coordStr + x + "," +y ;