How To Event Listen And Programatically Highlight Specific Regions Of My India Map?

I want the map of India and the list with text for the regions to listen to each other so that when the mouse pointer is hovering above a region then the corresponding region name

Solution 1:

I have build something similar using kinetic JS & JSON data. Approach is pretty simple, you have to get your India Map traced in SVG by designer in Adobe Illustrator, once that is done you need to parse that SVG through Kinetics JS which render Canvas elements.

I have also created a simple parser in PHP which reads SVG data and converts it into javascript object.

http://codepen.io/anon/pen/ByemRJ

varTerritoryPathData= {
    U05A001: {
        path:'M178.619,101.544c-0.39-0.55-1.205-0.61-1.555-1.3 c-0.33-0.651,0.001-1.798-0.173-2.519c-0.596-2.448-2.815-4.989-4.059-6.996c-0.784-1.264-0.606-2.619-1.729-3.664 c-1.431-1.333-4.058-1.276-3.687-3.819c0.192-1.328,1.622-2.811,2.375-3.813c1.005-1.339,0.985-2.45,1.694-3.712 c0.101-0.18,0.139-0.695,0.222-0.938c1.298-0.076,3.113,0.382,3.88-0.752c0.577-0.851,0.165-3.419,0.111-4.466 c-2.078,0.217-6.329-3.901-7.261-5.625c-0.395-0.731-0.137-1.464-0.435-2.128c-0.635-1.415-0.585-0.781-1.845-1.201 c-1.692-0.564-2.109-1.096-3.374-2.463c-2.49-2.692-5.928-3.239-8.94-5.171c-1.626-1.044-4.494-6.443-2.453-8.172 c0.445-0.376,1.56-0.033,2.128-0.178c0.914-0.234,1.244-0.407,1.979-0.961c1.577-1.189,1.5-1.851,1.497-3.867 c-0.001-1.643,0.035-3.193,0.193-4.832c0.226-2.326,1.55-1.68,2.472-3.514c0.265-0.525,0.072-1.515,0.232-2.082 c0.208-0.738,0.675-1.197,0.975-1.92c0.512-1.234,0.867-2.911,1.191-4.215c0.466-1.868,0.616-2.173,2.043-3.519 c1.273-1.2,1.608-2.639,2.548-3.862c0.082-0.107,0.164-0.572,0.228-0.738c4.289-0.738,9.563,0.701,13.676-0.614 c2.455-0.785,2.125-2.803,2.125-5.214c0-0.891-0.314-2.458-0.013-3.283c0.333-0.916,1.474-1.778,1.977-2.67 c1.862-0.29,3.561,0.323,4.605,1.903c0.813,1.231,0.707,2.62,1.541,3.862c2.178,3.247,6.219,2.019,9.665,2.505

Take a look at my work, http://ibnlive.in.com/delhi-assembly-election-results-2013-live/

I have followed this basic tutorial http://dev.filkor.org/2013/04/14/create-an-interactive-map-using-javascript-and-html-5-canvas/ and hacked the things according to my project requirements.