Creating clickable maps with Drupal

Technology Blog

I’ve recently worked on a couple of requirements for clickable maps which I think would be of potential interest. As visual aids, maps can be very attractive but they present some technical challenges to the developer.

A map with clickable icons

The first example I want to talk about is one I did for Get Hooked, a fishing site. On the page you’ll see a map at the top with red circles, each of which links to an entry for a particular fishery. How was that generated? As often with Drupal, the answer lies in a combination of CCK, Views and some custom theming.

The first thing I did was to create a custom content type for the fishery and add fields to hold the X and Y coordinates for its map location. If you were looking for a more general solution you might represent the map coordinates as degrees latitude and longitude, and incorporate code to turn those into pixel offsets but the client did not feel that was necessary in this case.

The next step was to create a view to output the path of each entry, its title and the X and Y values. Once I had that I could then theme its output to create the actual map as follows:

  • At the start of the output I inserted an IMG tag for the background map.
  • I gave each row of the view output a class of “blob”, and added a style attribute with left and top properties for the position of the icon to be shown on the map.
  • I created custom CSS to display each entry as a small rectangle, positioned relative to the background map, with a background image of the red circle icon.

So each entry has HTML like this:

<div class="blob" style="left: 489px;top: 74px" >
 <a href="/fisheries/alcove_angling_club" 
  title="Alcove Angling Club" ><span>Alcove Angling Club</span></a>
</div>

And the relevant CSS is like this:

#counties-map {
  position: relative; /* each entry is positioned relative to the map */
}
#counties-map .blob {
  position:absolute;  /* turn on positioning */
}
#counties-map .blob a { /* a small square with icon as background */
  background-image:url(images/blob2.png);
  background-repeat:no-repeat;
  display:block;
  height:8px;
  overflow:hidden;
  width:8px;
}
#counties-map .blob a span { /* shift the link text so it's invisible */
  display:block;
  text-indent:-999px;
}

I’m sure you’ll agree the result is effective – and no Javascript or Flash is required so it’s very lightweight.

A map with clickable areas

Here’s an example of a different kind of map on the Advanced Kitchen Design site, one where the map is sliced up into regions each of which is clickable. In this case each region corresponds to a category applied to the content. Clicking on a link takes you to a view for that category, using the argument feature of Views.

Creating the images for a map made up of separately clickable areas can be onerous, so I used some graphics software to simplify the task. With the help of Xara Xtreme Pro I sliced the original map into pieces following the border lines, then used its export feature to create a web page. The HTML it generated required some editing and refactoring to improve its quality and make it more portable but the end result was some clean code ready for copying into a Drupal block.

The only remaining tasks were to add a mouseover effect and make the map compatible with IE6. The former was achieved with the following CSS snippet:

#ukmap a:hover img {
 opacity: 0.7;
}

The image slicing approach used relies on the alpha transparency of the PNG images used: without it, they won’t join in a clean fashion. IE6 does not by default support alpha transparency, but can be persuaded to recognise it by various means; in this case I employed the very cool Supersleight javascript utility with its invocation wrapped in a conditional comment so it only gets loaded for old versions of IE:

<!--[if lte IE 6]>
<script type="text/javascript" 
 src="/sites/all/themes/akd/supersleight-min.js">
</script>
<script  type="text/javascript" >
supersleight.limitTo('ukmap');
</script>
<![endif]-->

Again, the result is a very effective page component, which is both visually appealing and simple to use.

8 Responses to “Creating clickable maps with Drupal”

  1. Robert Redl

    Thank you very much for this detailed article and the idea how to use CCK to hold the coordinates. I always prefer lightweight solutions like this and will happily add your idea to my Drupal toolbox. Greetings from Vienna, Robert

  2. SEARCH ENGINE

    An easier way to do image map is to use clickable flash maps.It would be great if the software could import any image file, convert it to flash, and add clickable points and regions, with icons etc.
    Thanks for the article

  3. Alfred Armstrong

    That would certainly be another way to achieve it. The data describing the clickable points/regions could be fed into the flash animation as an XML document. But rather than use a simple image for the map, it’d be better to have it generated from a dataset so the application could provide zooming and other advanced features, otherwise there’d be little advantage in using flash.

  4. Md Rana

    I like your post “A map with clickable icons”. I’m new in Drupal but want to learn more about map. Can I expect a detail note or sample project from you?
    Hope I’ll get your help to learn drupal.

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>