We’re under a tight deadline to produce a map similar to the one at Recovery.gov.
To be clear, we just need a static image with rollovers that appear as you mouse over a state. Not a Google-like map, not anything fancy or GIS-based. Just an image that will show a little info and then let people click the state to go to a page w/more info about that state.
Recovery.gov’s map is done with Flash, but we want to do it using Javascript and CSS for easy maintenance and accessibility.
Got any ideas or examples to share? Yours or other people’s?
We’ve got a mockup that’s quite good, but the little popup balloon appears in different places in different browsers. Here’s an example of what’s happening. I was pointing at Nevada, so the text is right, but obviously the balloon’s in the wrong place:
What’s interesting is that the balloon shows up in different places in IE, Firefox, Safari, and Chrome. Apparently, mouse tracking works differently across browsers.
Thanks!
The Pew Center on the States has several different maps that are pretty cool. http://www.pewcenteronthestates.org/states.aspx
Pretty basic but we did a GovUps map – https://www.govloop.com/page/govups-1
I will pass this onto our 20 Code for America fellows, I’m sure they will have something to contribute.
A bunch of us at Code for America worked on a map, which may help. We have a demo of the first version of the map here: http://bl.ocks.org/790129
You can check out the code on github: https://github.com/codeforamerica/svg_canvas_experiments/tree/us_cloropleth/us_cloropleth/epa_map
We’re planning on adding more flexible tooltips via jQuery. This may solve the mouse tracking issues. We hope this helps!
Wow, Michael! I’ll contact you directly to discuss further. I want to connect you to my coder.
Thanks!
Candace: thanks for the example – the main Pew map uses Flash but I found a non-Flash one inside the site.
Steve: thanks for the tip!
Alissa: you rock!