Help EPA: We need a map!

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!

Advertisements

4 Responses to “Help EPA: We need a map!”


  1. 1 Mike Walsh January 20, 2011 at 1:54 am

    DevSeed has some unique solutions in the geospatial mapping space. Contact Eric Gunderson at Eric@developmentseed.org if interested. I am sure he would be interested in helping out.

  2. 2 David Lantner January 21, 2011 at 10:43 am

    Here’s how I would do it. Create a client-side image map followed by a list of each state and its corresponding info (the tooltip details). In addition to the “alt” attribute for each AREA in the map, include the “aria-describedby” attribute containing the “id” of the list item for that state. Then, bind a function to the “mouseover” and “focus” events of each AREA to position and show the tooltip layer and use the AREA’s “aria-describedby” attribute to copy the content from the list into the tooltip layer. Bind “mouseout” and “blur” to hide the tooltip layer. Many tooltip scripts (e.g., plugins for jQuery) allow you to specify which content to display; instead of grabbing the “alt” or “title” attributes, pass in the “aria-describedby” attribute instead.

    This way, the image map is keyboard-friendly and users of assistive technology can use the map with at least basic functionality (links). Plus, if the user’s AT understands WAI-ARIA, the tooltip information will be announced while navigating the image map.

  3. 3 Jeffrey January 22, 2011 at 12:41 am

    Hey, thanks for the ideas! Much appreciated!

  4. 4 business professional attire September 26, 2014 at 11:49 am

    Fashionable styles and popular apparel are constantly in mixed up, and the fashion world is continuously inundated with
    fly-by-night spoofs and runway innovations and ideas.
    When selecting jeans, look for trouser jeans, which fit the widest part at the hip then go straight down; or boot cut jeans, which flare out just slightly
    at the bottom. In later years, some businesses provided Casual Friday’s as an incentive for workers who
    donated money to charitable organizations.


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




I’m on Twitter @levyj413

  • @MeghanJG Wow! Yep, I called into Science Friday when they had Tim O'Reilly on to discuss social media and gov't. 1 month ago
  • Just realized I've been doing social media for the gov't for 10 years! 1 month ago
  • @ariherzog Hi Ari. I've been pretty quiet on Twitter for a while now. Just focused elsewhere. 2 months ago

%d bloggers like this: