0

I've been tasked with building an interactive map of all the states in the US and just wondering what the best way is to go about this?

I know I could build this fairly easily in Flash but one of the requirements is for it to work on an iPhone so obviously that rules Flash out!

Requirements:

  1. Must work across all browsers and handheld devices.
  2. Must be updatable via Wordpress.
  3. Must include a small info box that pops up when each state is hovered.
  4. The look of the map will be designed by us (we'd want complete control of this as we're graphic designers!) so this also rules out a custom Google map.

I've done a search on here and found two examples, the first is exactly the kind of thing we want but is done in flash - example

A suggestion was to use this but I don't think I'll be able to create popup bubbles when hovering over each state.

Does anyone know any alternatives?

UPDATE:

An example I like is - Transmit's feature section. How was this built and how could I recreate something like that?

Rob
  • 6,304
  • 24
  • 83
  • 189

2 Answers2

1

I know this thread is already a few months old, but in case people are still looking. I created a wordpress plugin that is able to do what you need. Check out an example of what you can do with it:

http://cmoreira.net/interactive-world-maps-demo/usa-custom-election-map/

It doesn't fit all your requirements, but it can be a good option also.

CMoreira
  • 1,698
  • 1
  • 12
  • 27
1

You can use the plain old <map> tag and put some javascript to show the popup.

(I think it's even possible to only use CSS. You create all the popups but don't display them. In the :hover part of each "US State", you make the corresponding popup appear.)

But there is a problem with your request: combining handheld devices compatibility and hovering is not possible!

It may be too much for what you want to do, but when dealing with maps (as long as you're not happy with a non-customizable Google/Yahoo/Microsoft map), I'd recommend OpenLayers. OpenStreetMap use it as well as other well-known websites.

Don't worry about the WordPress part. Of course you would save time if an existing plugin exists but I think this is the least important thing to consider. I coded a few hand made plugins for WordPress. It's really easy (compared to TYPO3 for example!)

tiktak
  • 1,214
  • 8
  • 15
  • +1 for OpenLayers. Really. It does what you want, it's free, and you can use lots of background data. There was a coding fest for mobile device support recently. OpenLayers, every time, for web maps. – Spacedman May 23 '11 at 11:34
  • Just for ease of use is there anything out there to do something similar to the features area on - http://www.panic.com/transmit/? Essentially those dot will lay over the top of an image of a map. The dots will never move and/or need to be edited but the info that it pops up will change over time. – Rob May 24 '11 at 15:32