CODEWITHSUNDEEP
jqueryhtmlimagemap
Camsoft
Camsoft

Reputation: 12005

Best approach to building an interactive illustrated map?

I've had an illustrated sitemap designed for a holiday resort. It's has multiple areas that when you roll over highlight and display a information box with some info about the item that you're currently over.

The highlighted areas have a slightly different bitmap than the orignal underlying map so using a map highlight library is not an option.

When the user mouses over an area it needs to display an image overlaid as well as the info box.

The areas are not square and some highlighted items are split into multiple areas.

What is the best approach to building an interactive map like this, should I use HTML imagemap with some JS or is there a more modern approach?

Upvotes: 0

Views: 1857

Answers (1)

robertc
robertc

Reputation: 75707

One alternative would be SVG, perhaps using jquery.svg or Raphaël. Have a look at these examples:

  • Analytics - popups over graphical data
  • Pie chart - elements animate in response to mouse overs
  • Australia - an example with an actual map in it

The benefits of SVG are:

  • You end up with markup describing your data, which ultimately can be better for accessibility but might also give you a feel-good semantic glow
  • Event handlers can live against the objects which handle them, rather than backtracking through current mouse position and offsets
  • It's part of HTML5

Upvotes: 2

Related Questions