Let's say we have a Risk-like world map which is divided into regions of custom shape.

How does one enable the user to select an individual region using HTML5/JavaScript? I assume Canvas2D is the first step, but then what?

Let's say we have a Risk-like world map which is divided into regions of custom shape.

How does one enable the user to select an individual region using HTML5/JavaScript? I assume Canvas2D is the first step, but then what?

• javascript

• 2 raphaeljs has a demo that uses a svg to make a clickable map raphaeljs./australia.html – user18428 Commented Jun 27, 2013 at 15:08

2 Answers 2

There are gazillions of great libraries. To name a few:

• http://d3js/
• http://raphaeljs./
• http://paperjs/
• http://box2d-js.sourceforge/
• http://threejs/

Specific examples:

• http://bl.ocks/mbostock/2206590
• http://raphaeljs./world/
• http://raphaeljs./australia.html

You can create a map tag that you then add to your img tag. In your map tag, you define different areas where the user can click. Then, you can define javascript functions to be call on the mousedown event of each area.

I don't like explanation, I prefer examples! So here a link I just found that describe this technique better :

http://www.tutorialspoint./javascript/javascript_image_map.htm

And by the way, you don't need to manually create the areas. There are a tons of WYSIWYG tools out there that will create it for you!