Search code examples
javascriptevent-handlingdom-eventsdhtmlgeography

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 gets underlined, and similarly if I hover over the name of the region to the left then the corresponding area on the map should be highlighted with the pink color. Can you help me? I can add code to listen for the hover event, but I'm not sure how to programmatically highlight the regions? I can listen for clicking on a region and clicking on a region name but how do I programatically highlight the corresponding region when selecting the text?

enter image description here

<!DOCTYPE html>
<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="keywords"
          content="Houses Apartments, Vacation homes, Offices, Land, Flatmates,Paying Guest, Other real estate, Cars, Motorcycles, Accessories  parts, Trucks, Other vehicles, Home  Garden, Clothing, For Kids (Toys  Clothes), Jewelry  Watches, Hobbies, Sports  Bicycles, Movies, Books  Magazines, Pets, Tickets, Art  Collectibles, Music  Instruments, Computers  Accessories, TV, Audio, Video, Cameras, Cellphones  gadgets, Video games  consoles, Job offers, Resumes, Services, Classes, Professional,Office equipment, Other,  ">
    <meta name="description"
          content="Find jobs, cars, houses, mobile phones and properties for sale in your region conveniently. Find the best deal among {{count}} free ads online!">

    <title>Free classifieds in India - Koolbusiness.com</title>

    <link href="/static/css/koolindex_in.css?0.238133053892" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/static/js/jquery-1.10.2.min.js?0.238133053892"></script>
</head>
<body>
{% include "kooltopbar.html" %}

    <script type='text/javascript' src='http://www.google.com/jsapi'></script>
    <script type='text/javascript'>


        function drawMap() {
 var data = google.visualization.arrayToDataTable([
           ['Province'],
        ['Goa'],
        ['Gujarat'],

         ['Andhra Pradesh'],
['Arunachal Pradesh'],
['Assam'],
['Bihar'],
['Chhattisgarh'],
['Goa'],
['Gujarat'],
['Haryana'],
['Himachal Pradesh'],
['Jammu and Kashmir'],
['Jharkhand'],
['Karnataka'],
['Kerala'],
['Madhya Pradesh'],
['Maharashtra'],
['Manipur'],
['Meghalaya'],
['Mizoram'],
['Nagaland'],
['Orissa'],
['Punjab'],
['Rajasthan'],
['Sikkim'],
['Tamil Nadu'],
['Tripura'],
['Uttaranchal'],
['Uttar Pradesh'],
['West Bengal'],
['Delhi'],
['Lakshadweep'],
['Daman and Diu'],
['Dadra and Nagar Haveli'],
['Chandigarh'],
['Pondicherry'],
['Andaman and Nicobar Islands']
    ]);

 var options = {
           region:'IN',
          backgroundColor: '#81d4fa',
          datalessRegionColor: '#ffc801',
      width:468,
       height:278,
     resolution: 'provinces',
        };
    var container = document.getElementById('mapcontainer');
    var chart = new google.visualization.GeoChart(container);

    function myClickHandler(){
        var selection = chart.getSelection();
        var message = '';
        for (var i = 0; i < selection.length; i++) {
            var item = selection[i];
           // if (item.row != null && item.column != null) {
                message += '{row:' + item.row + ',column:' + item.column + '}';
            //} else
             if (item.row != null) {
                message += '{row:' + item.row + '}';
            //} else if (item.column != null) {
              //  message += '{column:' + item.column + '}';
            }
        }
        if (message == '') {
            message = 'nothing';
        }
        //alert('You selected ' + message);

        if (item.row==2) {
             window.location = "/andhra_pradesh/";
        }
        if (item.row==3) {
             window.location = "/arunachal_pradesh/";
        }
        if (item.row==4) {
             window.location = "/assam/";
        }
        if (item.row==6) {
             window.location = "/chhattisgarh/";
        }
        if (item.row==7) {
             window.location = "/goa/";
        }
        if (item.row==8) {
             window.location = "/gujarat/";
        }
        if (item.row==9) {
             window.location = "/haryana/";
        }
        if (item.row==10) {
             window.location = "/himachal_pradesh/";
        }
        if (item.row==11) {
             window.location = "/jammu_kashmir/";
        }
        if (item.row==12) {
             window.location = "/jharkhand/";
        }
        if (item.row==13) {
             window.location = "/karnataka/";
        }
        if (item.row==14) {
             window.location = "/kerala/";
        }
        if (item.row==15) {
             window.location = "/madhya_pradesh/";
        }
        if (item.row==16) {
             window.location = "/maharashtra/";
        }
        if (item.row==17) {
             window.location = "/manipur/";
        }
        if (item.row==18) {
             window.location = "/meghalaya/";
        }
        if (item.row==19) {
             window.location = "/mizoram/";
        }
        if (item.row==20) {
             window.location = "/nagaland/";
        }
        if (item.row==21) {
             window.location = "/orissa/";
        }
        if (item.row==22) {
             window.location = "/punjab/";
        }
        if (item.row==23) {
             window.location = "/rajasthan/";
        }
        if (item.row==24) {
             window.location = "/sikkim/";
        }
        if (item.row==25) {
             window.location = "/tamil_nadu/";
        }
        if (item.row==25) {
             window.location = "/tripura/";
        }
        if (item.row==28) {
             window.location = "/uttar_pradesh/";
        }
        if (item.row==29) {
             window.location = "/west_bengal/";
        }
        if (item.row==36) {
             window.location = "/andaman_nicobar_islands/";
        }
    }
    google.visualization.events.addListener(chart, 'select', myClickHandler);
    chart.draw(data, options);
        }
google.load('visualization', '1', {packages: ['geochart'], callback: drawMap});

     </script>

<div id="wrapper">

<!--[if lt IE 7]>
<div class="alert-outer alert-error">
    <a href="#" class="alert-closer" title="close this alert" onclick="removeIeNotification(this); return false;">×</a>

    <div class="alert-inner">
        <span><strong>You are using an outdated version of Internet Explorer.</strong> For a faster, safer browsing experience, upgrade today!</span>

    </div>
</div>
![endif]-->
<header>


    <h1 id="logo" class="sprite_index_in_in_en_logo spritetext">koolbusiness.com - The right choice for buying &amp;
        selling in india</h1>

    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- v2 -->
    <ins class="adsbygoogle"
         style="display:inline-block;width:728px;height:15px"
         data-ad-client="ca-pub-7211665888260307"
         data-ad-slot="9119838994"></ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
</header>

<![endif]-->
<div style="width: 100%; overflow: hidden;">
    <div style="width: 768px; float: left;"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- front leaderboard -->
<ins class="adsbygoogle"
     style="display:inline-block;width:728px;height:90px"
     data-ad-client="ca-pub-7211665888260307"
     data-ad-slot="4543980997"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script> </div>
    <div id="post3" style="margin-left: 735px;"> <a href="/ai" id="ad2">Post your ad for free</a> </div>
</div>


<div class="main">
<div class="column_left">
    <div class="box">

        <ul>
            <li>KoolBusiness is easy, free, and kool.</li>
            <li>Buy and sell <a href="/india/cars-for_sale">cars</a>, check our <a href="/india/real_estate">real
                estate</a>
                section, find <a href="/india/jobs">jobs</a>, and much more.
            </li>
            <li>Check our <strong><a href="/india">{{count}} ads online</a></strong> and find what you are looking for
                in
                your region or in all India.
            </li>
        </ul>


    </div>

    <div id="regions">


        <div class="region_links_one">
            <ul class="regions_one">
                <li><a id="region_8" class="region" href="http://www.koolbusiness.com/andhra_pradesh/">Andhra
                    Pradesh</a></li>
                <li><a id="region_9" class="region" href="http://www.koolbusiness.com/arunachal_pradesh/">Arunachal
                    Pradesh</a></li>
                <li><a id="region_10" class="region"
                       href="http://www.koolbusiness.com/assam/">Assam</a>
                </li>
                <li><a id="region_11" class="region"
                       href="http://www.koolbusiness.com/bihar/">Bihar</a>
                </li>
                <li><a id="region_12" class="region"
                       href="http://www.koolbusiness.com/chhattisgarh/">Chhattisgarh</a></li>
                <li><a id="region_13" class="region"
                       href="http://www.koolbusiness.com/goa/">Goa</a></li>
                <li><a id="region_14" class="region" href="http://www.koolbusiness.com/gujarat/">Gujarat</a>
                </li>
                <li><a id="region_15" class="region" href="http://www.koolbusiness.com/haryana/">Haryana</a>
                </li>
                <li><a id="region_16" class="region" href="http://www.koolbusiness.com/himachal_pradesh/">Himachal
                    Pradesh</a></li>
                <li><a id="region_17" class="region" href="http://www.koolbusiness.com/jammu_kashmir/">Jammu
                    &amp;
                    Kashmir</a></li>
                <li><a id="region_18" class="region" href="http://www.koolbusiness.com/jharkhand/">Jharkhand</a>
                </li>
                <li><a id="region_19" class="region" href="http://www.koolbusiness.com/karnataka/">Karnataka</a>
                </li>
                <li><a id="region_20" class="region" href="http://www.koolbusiness.com/kerala/">Kerala</a>
                </li>
                <li><a id="region_21" class="region" href="http://www.koolbusiness.com/madhya_pradesh/">Madhya
                    Pradesh</a></li>
            </ul>
            <ul class="regions_two">
                <li><a id="region_22" class="region"
                       href="http://www.koolbusiness.com/maharashtra/">Maharashtra</a></li>
                <li><a id="region_23" class="region" href="http://www.koolbusiness.com/manipur/">Manipur</a>
                </li>
                <li><a id="region_24" class="region" href="http://www.koolbusiness.com/meghalaya/">Meghalaya</a>
                </li>
                <li><a id="region_25" class="region" href="http://www.koolbusiness.com/mizoram/">Mizoram</a>
                </li>
                <li><a id="region_26" class="region" href="http://www.koolbusiness.com/nagaland/">Nagaland</a>
                </li>
                <li><a id="region_27" class="region" href="http://www.koolbusiness.com/orissa/">Orissa</a>
                </li>
                <li><a id="region_28" class="region" href="http://www.koolbusiness.com/punjab/">Punjab</a>
                </li>
                <li><a id="region_29" class="region" href="http://www.koolbusiness.com/rajasthan/">Rajasthan</a>
                </li>
                <li><a id="region_30" class="region" href="http://www.koolbusiness.com/sikkim/">Sikkim</a>
                </li>
                <li><a id="region_31" class="region" href="http://www.koolbusiness.com/tamil_nadu/">Tamil
                    Nadu</a></li>
                <li><a id="region_32" class="region" href="http://www.koolbusiness.com/tripura/">Tripura</a>
                </li>
                <li><a id="region_34" class="region"
                       href="http://www.koolbusiness.com/uttaranchal/">Uttaranchal</a></li>
                <li><a id="region_33" class="region" href="http://www.koolbusiness.com/uttar_pradesh/">Uttar
                    Pradesh</a></li>
                <li><a id="region_35" class="region" href="http://www.koolbusiness.com/west_bengal/">West
                    Bengal</a></li>
            </ul>
        </div>
        <div class="region_links_two">
            <!-- ads here -->
            <h2>Union territories</h2>


            <ul class="regions_one">
                <li><a class="region" href="http://www.koolbusiness.com/delhi/">Delhi</a></li>
                <li><a class="region" href="http://www.koolbusiness.com/lakshadweep/">Lakshadweep</a></li>
                <li><a class="region" href="http://www.koolbusiness.com/daman_diu/">Daman &amp; Diu</a>
                </li>
                <li><a class="region" href="http://www.koolbusiness.com/dadra_nagar_haveli/">Dadra &amp; Nagar
                    Haveli</a>
                </li>
            </ul>
            <ul class="regions_two">
                <li><a class="region" href="http://www.koolbusiness.com/chandigarh/">Chandigarh</a></li>
                <li><a class="region" href="http://www.koolbusiness.com/pondicherry/">Pondicherry</a></li>
                <li><a class="region" href="http://www.koolbusiness.com/andaman_nicobar_islands/">Andaman &amp;
                    Nicobar
                    Islands</a></li>
            </ul>
        </div>
    </div>

</div>
<div id="my_wrapper">

<div id="mapcontainer"></div>
<div id="gads" style="clear:both">

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- frontpagebelowmap -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-7211665888260307"
     data-ad-slot="3839303791"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>



</div>
</div>



<footer class="nohistory columns">



    <p class="first">A good deal is just around the corner!</p>


    <p>KoolBusiness is the right choice for safe buying and selling in India: a free classifieds website where you
        can buy and sell almost everything.</p>


    <p><a href="/ai">Post an ad for free</a> or browse through our categories. You will find thousands of free
        classifieds for cars, houses, mobile phones and gadgets, computers, pets and dozens of items and services in
        your state or union territory.</p>


    <p>

        <strong>KoolBusiness does not charge any fee and does not require registration.</strong> Every
        ad is checked so we can give you the highest quality possible for the ads on our site. That’s why
        KoolBusiness is the most convenient, easiest to use and most complete free ads site in India.</p>


    <div id="world_sites">





    </div>




</footer>

</div>



</body>
</html>
Solution

  • 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

    var TerritoryPathData = {
    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.