Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js"></script>
<script src="https://code.highcharts.com/maps/js/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>

<div id="container"></div>

CSS

@import 'https://code.highcharts.com/css/highcharts.css';
#container {
  height: 500px;
  width: 800px;
  margin: 0 auto;
}

// data labels
.highcharts-data-label-box {
  fill: #a4edba;
  stroke: gray;
  stroke-width: 1px;
}

.highcharts-data-label {
  font-weight: normal;
}

.highlight .highcharts-data-label-box {
  fill: red;
  stroke-width: 2px;
  stroke: black;
}

.highlight.highcharts-data-label text {
  font-weight: bold;
  fill: white;
}

JavaScript

$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function(data) {

  var countryData = [{
    "key": "in",
    "index": 2
  }, {
    "key": "us",
    "index": 2
  }];

  var pointData = [{
    "countryCode": "in",
    "site_id": 3,
    "center_count": 2,
    "location": "(Ahmedabad,India,APAC)",
    "headcount": 600,
    "lat": 23.022505,
    "lon": 72.5713621
  }, {
    "countryCode": "us",
    "site_id": 4,
    "center_count": 2,
    "location": "(Arcadia,Greece,EMEA)",
    "headcount": 700,
    "lat": 34.1397292,
    "lon": -118.0353449
  }];

  // Initiate the chart
  Highcharts.mapChart('container', {
    title: {
      text: 'Test map'
    },
    tooltip: {
      enabled: true
    },
    mapNavigation: {
      enabled: true
    },
    series: [{
      mapData: Highcharts.maps["custom/world"],
      data: countryData,
      joinBy: ['hc-key', 'key'],
      name: "Country Info",
      states: {
        hover: {
          color: "#00b700"
        }
      },
      tooltip: {
        headerFormat: '',
        pointFormat: '{point.name}'
      },
      dataLabels: {
        enabled: true,
        formatter: function() {
          return this.point.name;
        },
        borderRadius: 2,
        y: -10,
        shape: 'callout',
        className: 'highlight'
      },
      point: {
        events: {
          click() {
            console.log("Code : ", this.key)
          }
        }
      }
    }, {
      type: 'mappoint',
      mapData: Highcharts.maps["custom/world"],
      data: pointData,
      name: 'Point Info',
      states: {
        hover: {
          color: "#abb700"
        }
      },
      tooltip: {
        headerFormat: '',
        pointFormat: '{point.location}'
      },
      dataLabels: {
        enabled: true,
        formatter: function() {
          return this.point.name;
        }
      },
      point: {
        events: {
          click() {
            console.log("Code :...