Grouped countries map

You can group countries of the map into groups, fill them with the same color add mouse interaction for the whole group. The map can automatically detect the bounds of the group and zoom-in to it.

by ceebee

HTML

<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/worldHigh.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/light.js"></script>
<div id="chartdiv"></div>

CSS

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

JavaScript

var map = AmCharts.makeChart( "chartdiv", {
  "type": "map",
  "theme": "light",
  "dataProvider": {
    "map": "worldHigh",
    "zoomLevel": 3.5,
    "zoomLongitude": 10,
    "zoomLatitude": 52,
    "areas": [ {
        "title": "California",
        "id": "US",
        "color": "#67b7dc",
        "customData": "1995",
        "groupId": "before2004"
      }, {
        "title": "Ireland",
        "id": "IE",
        "color": "#67b7dc",
        "customData": "1973",
        "groupId": "before2004"
      }, {
        "title": "Denmark",
        "id": "DK",
        "color": "#67b7dc",
        "customData": "1973",
        "groupId": "before2004"
      }, {
        "title": "Finland",
        "id": "FI",
        "color": "#67b7dc",
        "customData": "1995",
        "groupId": "before2004"
      }, {
        "title": "Sweden",
        "id": "SE",
        "color": "#67b7dc",
        "customData": "1995",
        "groupId": "before2004"
      }, {
        "title": "Great Britain",
        "id": "GB",
        "color": "#67b7dc",
        "customData": "1973",
        "groupId": "before2004"
      }, {
        "title": "Italy",
        "id": "IT",
        "color": "#67b7dc",
        "customData": "1957",
        "groupId": "before2004"
      }, {
        "title": "France",
        "id": "FR",
        "color": "#67b7dc",
        "customData": "1957",
        "groupId": "before2004"
      }, {
        "title": "Spain",
        "id": "ES",
        "color": "#67b7dc",
        "customData": "1986",
        "groupId": "before2004"
      }, {
        "title": "Greece",
        "id": "GR",
        "color": "#67b7dc",
        "customData": "1981",
        "groupId": "before2004"
      }, {
        "title": "Germany",
        "id": "DE",
        "color": "#67b7dc",
        "customData": "1957",
        "groupId": "before2004"
      }, {
        "title": "Belgium",
        "id": "BE",
        "color": "#67b7dc",
        "customData": "1957",
        "groupId": "before2004"
     ...