Design process for building an interactive map

This isn’t really a tutorial of how to create an interactive map as this blog post would be way too long and too complex. It’s more about the process of taking various resources and putting them together to create something. As I write this post this map is a work in progress. View Demo

The first step was to create the map. This was mostly done taking a screen grab from a satellite view of our campus off of Google maps. Then the buildings were traced using the pen too for each panel and curve. Shading was applied to give the buildings a 3D look.

For masthead where the text looks like chalkboard type I used the rough texture of paper overlay into white type. I then outlined the type and the arrow that I drew with a rough brush.

The map below is using several different technologies.

• Image maps to make hot regions using Adobe Dreamweaver to define the coordinates on mouse hover.

• A jQuery trigger was applied to the text to light up the various buildings in the image map. Using jQuery maphilight.

• Then I added used the spry tooltips to create a bubble that appears on the hover over the text or the building giving information as to the location of the building and a link for more details. I styled the bubble using CSS.

Then when you click on either the words or the building there is a window that dims the map and pops up with more information about the program and a closeup detail of the map. For this I used the greybox popup window script “that doesn’t suck”

Getting everything to link up and trigger all the other elements across these various scripts was a challenge but in the end I know what to modify to make it work. At least I hope so when I put this down for a couple months!