How to make your intensity maps interactive

Intensitymap

Google’s Intensity Map charts are a really easy and clean way to show heat maps of geographic data. Unfortunately, there’s no way to take the next step in the user experience, and let people mouse over and click on the maps to see additional information about a particular area.

To solve that problem, I’ve written a PHP script that extracts the country and state boundaries from the maps and constructs a Javascript function to return the state code for any point on the maps. You can see an example of this in practice at http://web.mailana.com/labs/mapclicker/ or you can download the complete source, including the boundary extractor.

The example page will show the state or country code for any point you move the mouse over on either of the maps, and if you click, will display an alert showing the name. It assumes your image has the maximum 440×220 dimensions, but you can apply scaling to the coordinates if you are using something smaller.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: