Using Image Maps in Javascript – A Demo Application

Past month I was busy with project back in office, JAXL web chat client and photolog – a custom made wp-plugin for converting it into a photo blog. As I am close to finish them all, I am back to blogging after more than a month.

Here I would like to demonstrate a cool technique which I explored while working for the india elections site. We decided to have a cool india map where we could show data for each state. Though flash is always the best method to go with for such applications (and finally we did it with flash :D) I wanted to explore if we can do the same thing efficiently with javascript.

Not being a javascript expert, I first moved to various friends expert in javascript and they told me about image map technique in javascript. I did some research, read various blog posts and finally came up with the application below. (I will be demonstrating the application and challenges you will face while building such application, for basics of image map kindly search for it, you will get many tutorials on web on javascript image maps)

Challenges I faced:
Javascript image map technique utilizes the (x,y) co-ordinates which you provide to javascript. Depending upon the input (x,y) co-ordinates, javascript will build an image map over the image. When I was building this application, the biggest challenge was how to get the pixel by pixel border for each and every state. I don’t know dreamweaver, photoshop or any other software which can tell me this. Moreover, even if I knew, I was not sure how much effort will it require to note down each and every pixel lying on the state borders. Finally to counter this problem I came up with a javascript, which makes this task 99% easier.

Using javascript to detect image borders pixel by pixel:
Javascript image map requires pixel to be given in the following format (x1,y1,x2,y2,….,xn,yn). So I wrote a javascript which will automatically generate the current pixels of your mouse, in above format as you move it.

Lets try this out. Click here to open this javascript hack. Click CNTR++ (i.e. zoom into your browser) as many times as you can. You will now have a very enlarged and a bit blurred india map in front of you. But good thing is you can clearly move your mouse over state borders. This javascript gets enabled on your 1st mouse click on the map. So choose a state and click your mouse on its border. Now start moving your mouse on this state’s border till you come back to the same point, where you started. Click 2nd time on that point to disable this javascript function and WOW! Below you have the border pixel positions in the required format to be used straight with javascript image maps. Copy and paste that to get a final image map like this.

View the final image map file by clicking here.

edges.html


  
    
  
  
    

Study the source of the final application by visiting here and use the above javascript to extract edge information of your map file. I know there are some questions unanswered but I will wait for your comments to answer them 😀

PS: By demoing my application here, I permit you to use this sample code for any purpose. However I do not permit you to copy paste the indian map images for your personal or professional sites or works.