Open in:

Selecting multiple areas map

Click on several states on the map – each state will change it’s color. Using this feature you can easily create fun and interactive applications.

Demo source

<!-- Styles -->
<style>
#chartdiv {
  width: 100%;
  height: 500px;
}
</style>

<!-- Resources -->
<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/usaLow.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" />

<!-- Chart code -->
<script>
var map = AmCharts.makeChart( "chartdiv", {
  "type": "map",
"theme": "none",

  "panEventsEnabled": true,
  //"backgroundColor": "#666666",
  //"backgroundAlpha": 1,
  "dataProvider": {
    "map": "usaLow",
    "getAreasFromMap": true
  },
  "areasSettings": {
    "autoZoom": false,
    "color": "#CDCDCD",
    "colorSolid": "#5EB7DE",
    "selectedColor": "#5EB7DE",
    "outlineColor": "#666666",
    "rollOverColor": "#88CAE7",
    "rollOverOutlineColor": "#FFFFFF",
    "selectable": true
  },
  "listeners": [ {
    "event": "clickMapObject",
    "method": function( event ) {
      // deselect the area by assigning all of the dataProvider as selected object
      map.selectedObject = map.dataProvider;

      // toggle showAsSelected
      event.mapObject.showAsSelected = !event.mapObject.showAsSelected;

      // bring it to an appropriate color
      map.returnInitialColor( event.mapObject );

      // let's build a list of currently selected states
      var states = [];
      for ( var i in map.dataProvider.areas ) {
        var area = map.dataProvider.areas[ i ];
        if ( area.showAsSelected ) {
          states.push( area.title );
        }
      }
    }
  } ],
  "export": {
    "enabled": true
  }
} );
</script>

<!-- HTML -->
<div id="chartdiv"></div>