Tips and tricks to implement a javascript web-interface using HTML image maps

Question

Hi, I'd like to get some tips and tricks to implement a web-interface with JavaScript that would allow users to click on some predefined regions on a map and returns a list of the clicked regions when clicking on a submit button. This list will be then send to a server (for that I can use the HTTP "post" method).

1. The first question is : how to define the regions on a map. I red about HTML image maps but it seems to be cumbersome as I'll have to extract the coordinates of each region. I was wondering if they would be a way to automatically generate this list from an image ?

2. The second question is : how to store the list of clicked regions so that I can send it to the server when the user clicks on the submit button. I'm not too familiar with JavaScript so it will probably be an easy one for experienced JavaScript programmers ;-)

Thanks

Answer 1

1. You can use one of the many images map creation programs out there, or find a utility to do it for you: q=Image+Tracing+OR+trace+"Image+MAP"+OR+imagemap

2. A hidden field in a form can be updated with

   [ area onclick="document.forms[0].clicked.value+=',region3'" ... />

   [ area onclick="document.forms[0].clicked.value+=',region4'" ... />

   [form onsubmit="var val = this.clicked.value; if (val) this.clicked.value=val.substring(1)">

   [input type="hidden" name="clicked" value="" />

where the script removes the leading comma

Please change the [ to < - SO is giving me a hard time with the above code

Answer 2

1. It depends on where you're getting your maps from. Is there a public API? In general I'd say they would have to be added manually. To help you could create an interface that would do this for you easier i.e. you drag a small box around a specific area, then you can enter its details such as county, area code, etc.

2. Store the regions as a 2-multidimensional array. map[x][y].town = 'uxbridge' then delegate an event listener to a image. Find out the x,y coordinates the mouse was clicked on, loop through the map array to see if it matches. The user would have to click on a 1px point for it to be found in the array, so to avoid this just use a "spacing" value of say 50px, so the x,y can be 50px out either way. Then highlight that area and add it to the region array. There probably is a better way of doing this with <map> and better algorithm to search the map[] array, but ultimately you'd have to convert every element in the map[] array to <area> which would be cumbersome anyway

---

Actually scrap that, <map><area> would be much easier and suited for this. The biggest problem here is working out how to get the regions stored into the map[] array, again this is point 1 and all about the API that you can use, or add them manually through an interface. Then you loop through the array and output it to each with its x, y, w, h coords to an area and push to the DOM once complete. Then add an event listener to each OR if you want to be much more efficient, delegate an event listener on <map> to handle the on click events. Then you just pull the data from the map[] array for that area element.

Answer 3

I tried the maphilight script (http://davidlynch.org/js/maphilight/) and it works quite well but it seems to consume a lot of CPU time when using maps with many areas (I have around 10000 areas). Would there be a way to fix that ?

By the way, there is an improved version of this script available here : http://formidablo.nl/jquery/