Select area from checkbox

Select area in a map from checkbox list

by Rohit Bisht

HTML

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/indiaHigh.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="mapdiv"></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 table-hover table-striped">
        <tbody></tbody>
      </table>
    </div>
  </div>
</div>

CSS

body, html {
  padding: 10px;
  margin: 10px;
}

#mapdiv {
  width: 50%;
  height: 500px;
  float: left;
}

.section-map-list {
  width: 49%;
  float: left;
}

.tab-content {
  overflow: auto;
  height: 400px;
}

JavaScript

jQuery(document).ready(function() {
    var lists = {
        india: ["IN-AN", "IN-AP", "IN-AR", "IN-AS", "IN-BR", "IN-CH", "IN-CT", "IN-DD", "IN-DL", "IN-DN", "IN-GA", "IN-GJ", "IN-HP", "IN-HR", "IN-JH", "IN-JK", "IN-KA", "IN-KL", "IN-LD", "IN-MH", "IN-ML", "IN-MN", "IN-MP", "IN-MZ", "IN-NL", "IN-OR", "IN-PB", "IN-PY", "IN-RJ", "IN-SK", "IN-TG", "IN-TN", "IN-TR", "IN-UP", "IN-UT", "IN-WB"]
    };
    var names = {};

    // CREATE MAP
    map = AmCharts.makeChart("mapdiv", {
        "type": "map",
        "theme": "light",
        "addClassNames": true,
        "dataProvider": {
            "map": "indiaHigh",
            "getAreasFromMap": true,
            "areas": []
        },
        "areasSettings": {
            "autoZoom": false,
            "selectable": true
        }
    });

    map.addListener("clickMapObject", function(event) {
        var CC = event.mapObject.id;
        var checkbox = jQuery("input[value=" + CC + "]");
        var anchor = jQuery(checkbox).parents(".tab-pane").attr("id");
        var mapObject = event.mapObject;

        map.selectedObject = map.dataProvider;

        mapObject.showAsSelected = !mapObject.showAsSelected;
        map.returnInitialColor(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);
                }
            }

        checkbox[0].checked = event.mapObject.showAsSelected;

        jQuery(".section-map-list .nav-tabs [data-anchor=" + anchor + "]").tab("show");map.validateNow();
    });

    map.updateSelection = function() {
        var areas = [];
        jQuery(".section-map-list input:checked").each(function() {
            var CC = this.value;

            areas.push({
      ...