Dynamically coloring a US map with Javascript

Question

I need to write a webpage which starts with a blank map of the US and colors the states according to data it receives from various Ajax requests. The map needs to change over time without the page reloading, and the user can click on various controls to instantly change how the map is colored. This all needs to be done locally, so I can't make use of Google maps or any similar internet service.

I'd hope to do this in the browser with Javascript. Is there a good library for doing this? Or any general suggestions for how to best implement this?

Answer 1

I would take a plugin like this just change it to do "highlighting" based on your dynamic data:

• http://plugins.jquery.com/project/maphilight

• Demo of plugin: http://davidlynch.org/js/maphilight/docs/demo_usa.html

Currently it highlights on mouseover, but highlighting using data given should be very straightforward.

The fact it comes with a map of the US and highlighting ready to go set is just gravy.

Answer 2

You may still be able to use the Google Static Maps API's "path" parameter to overlay the color you want. Create some static maps and save the resulting image.

http://code.google.com/apis/maps/documentation/staticmaps/index.html#Paths

Answer 3

Sounds like a job for Raphaël