Selecting multiple areas map

India map with different colors on selection

by Rohit Bisht

HTML

<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/indiaLow.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/black.js"></script>
<div id="info" style=""></div>
<div id="chartdiv"></div>
<div class="section-map-list">
  <ul class="nav nav-tabs">
    <li class="active">
      <a href="#india" data-anchor="india" data-toggle="tab">India</a>
    </li>
  </ul>
  <div class="tab-content">
    <div id="india" class="tab-pane active">
      <table class=" table-hover table-striped">
        <tbody></tbody>
      </table>
    </div>
  </div>
</div>

CSS

#chartdiv {
  width: 100%;
  height: 500px;
}

JavaScript

var map = AmCharts.makeChart("chartdiv", {
    "type": "map",
    "theme": "black",
    "panEventsEnabled": true,
    "backgroundColor": "#00aeff",
    "backgroundAlpha": 1,
    "dataProvider": {
        "map": "indiaLow",
        "getAreasFromMap": true,
        "images": [{
            "id": "backButton",
            "label": "Back to continents map",
            "rollOverColor": "#ffffff",
            "labelRollOverColor": "#ffffff",
            "useTargetsZoomValues": true,
            "right": 100,
            "top": 30,
            "labelFontSize": 10,
            "selectable": true,
            "imageURL": "http://simplemaps.com/static/svg/in/in.svg",
            "width": 32,
            "height": 32,
            "label": "District Level Map"
        }]
    },
    "areasSettings": {
        "autoZoom": false,
        "color": "#CDCDCD",
        "colorSolid": "#5EB7DE",
        "selectedColor": "#5EB7DE",
        "selectedColor": getRandomColor(),
        "outlineColor": "#666666",
        "rollOverColor": "#ffffff",
        "rollOverOutlineColor": "#FFFFFF",
        "selectable": true
    },
    "listeners": [{
        "event": "clickMapObject",
        "method": function(event) {
            map.selectedObject = map.dataProvider;
            event.mapObject.showAsSelected = !event.mapObject.showAsSelected;
            map.returnInitialColor(event.mapObject);
            var states = [];
            for (var i in map.dataProvider.areas) {
                var area = map.dataProvider.areas[i];
                if (area.showAsSelected) {  
                    //set a new color only if it wasn't assigned before
                	  area.selectedColor = area.selectedColor || getRandomColor(); 
                    states.push(area.title);
                }
            }
             document.getElementById("info").innerHTML = "Selected states:<br />" + (states.length ? states.join(", ") : "none");
            
            // set same zoom levels to retain map...