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.

  • James

    i always knew about javascript image maps, but i haven’t seen such an application built out of it before….Thanks for sharing your findings..

  • varun

    Cool dude…. I have something similar but I use vml/svg to draw polygons out of state boundary  cordinates, best part =>no images required and you can zoom and pan, custom color(Theme them),…. love your work……

  • Hey Varun, Yup heard and probably played with SVG long time back….Yeah surely we can do a lot with that….anyways building this was a nice experience for me 😀

  • hey this app is realy cool and hope it got a realtime application

  • hehe, yeah. But the downside effect of this app is that as this app would have grown in size (we were planning to add constituency level data in next phase) , the image load handling would have become a blocker. 🙁 And anyways no matter how hard I would have tried, replicating a flash widget effects would have been tough…. 🙁

  • the info “get <state> schedule and alerts” keeps moving with the mouse pointer making it impossible to reach.. may be a bug

    and replicating a flash widget effects is not only tough but even insecure, because with javascript the code is exposed. The main advantage with flash is the code is hidden.

  • yeah thats not a bug, stopped working on it once we decided not to go with it. Intention was clicking on tooltip will take you to the states page.

    Right it is even insecure in the sense that you code is exposed in javascript.
  • Hi,
    I just learned javascript from my elder brother but don’t have this much knowledge about image access. Thank you so much for sharing such a nice information. It will surly note it for my future use.

  • Anonymouse

    You might want to look into image processing basics – it could have saved you the effort of tracing the borders by hand. Your map is already very well separated into colour-coded regions. Any half decent image segmentation or edge detection algorithm would have taken care of the task in less than a second.
    http://en.wikipedia.org/wiki/Edge_detection/
    http://en.wikipedia.org/wiki/Image_segmentation/
    >and replicating a flash widget effects is not only tough but even insecure, because with javascript the code is exposed. The main advantage with flash is the code is hidden.
    This is a naïve view at best. There’s a plethora of tools to decompile flash out there.

  • Thats fantastic abhi. kudos to you.

  • Pingback: 網站製作學習誌 » [Web] 連結分享()

  • This i nice and saves some times, but theres gotta be a way to detect borders.
    I have to develop such a project.
    I will work with a Country map, Portugal, and i will have to add data from it. I already discovered tools like mapper.js to help me with this.

    Now the challenge is get every x,y or every image map.
    Many tools detects borders. There must be a way to have coordinates by border detection. Does anyone knows about that?

    Abhinav, can you show me your flash example also? Ty in advance.

    • Hi Hugo,

      Yes i remember detecting borders was a hell of a job…. since i m not a designer, i knew very little photoshop and other tricks…. I think photoshop etc can help you with exact border pixels without much of an effort….

  • Surajit Das

    Nice work dude,another way I know of is through SVG.Take any map,open it in Illustrator,create a transparent layer over it,then you can you the free hand drawing utility to trace the image of the map.After this,Illustrator has an inbuilt plugin to transform it into an SVG file.Or you may also install a free avaliable plugin called “AI2Canvas” avaliavle at this URL (http://visitmix.com/work/ai2canvas/) to even convert that Image into a HTML5 Canvas element.

    • Thanks Surajit for pointing out to ai2canvas… looks promising from first look, will sure give it a try 🙂

    • sharma ketan

      Hello,
      can u please give me more detail for SVG?

  • Ron Chandy

    Hello Abhinav Singh

    Can I have something like this on my website: http://www.sterlitetechnologies.com/contacts.aspx I was wondering how to do it.

    • indeed such a thing will be super cool and will ofcourse take a lot more effort than just a country map. But yes, this is quite achievable using image maps in js.

  • That’s super, Now I’m finding the solution of image mapping + java script.

  • Pingback: The Great jQuery Interactive Map Saga, a HowTo()

  • dear writer
    that’s a great idea, i love it.
    but i still can not apply it!
    will you give us a step by step guide?
    i have a poly map of my country “Iran” but still can not apply the java code you have wrote. what should i do?

  • Waleed

    could i have javascript code that highlight each area please?

  • Pingback: 基礎技術 | hoyo 學習紀錄()

  • duckified

    Nice! I would like to have the hot spot mouse click link to run a different php script on each of the hot spots. If possible, please show me the code needed to do that by altering the code in one of your hot spots as an example. Thank you!

  • Sumeet Patel

    Cant you link of the Code Zip file to your blog…. coz m not getting it properly m new to javascript…

  • Sumeet Patel

    Cant you link of the Code Zip file to your blog…. coz m not getting it properly m new to javascript…

  • suresh9696

    What about the new state Telangana, if you could add that or any help regarding it would be helpful

    • You can use similar method I described in the blog to outline co-ordinated for any new state