How to define image map with pins in Javascript?

Question

I have image map in .png format. All I need to do is to add a sidebar where users click on for example "restaurants" and pins with restaurants will show on an image map. When user mouseover a pin, it will show some more informations. I would like to do it in Javascript, but not with Google Maps. I have really small amount of pins for four different categories. What is the best way to do it in Javascript?

Answer 1

there are some nice JavaScript project to deal with maps (also "little" maps like yours :) ).

I recommend to take a look to Leaflet, which is a really lightweight and simple to use library (http://leaflet.cloudmade.com/)

On the other hand you have OpenLayers which is a really powerful and complete library (http://openlayers.org/).

These can help you with the maps, pins and popups. On the other hand you need to handle your categories, for example, creating some buttons, listening for click events on them and showing/hidding some pins on the map. I'm supposing you have no problem on this second task. Remember great projects like jQuery+jQueryUI or Dojo can help on that part.

Cheers.