Highcharts Demo

author(s): Torstein Hønsi

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/5.0.10/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/5.0.10/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/5.0.10/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>

<div id="container" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>

JavaScript

var data = Highcharts.geojson(Highcharts.maps['countries/us/us-all']),
  // Some responsiveness
  small = $('#container').width() < 400;

// Set drilldown pointers
$.each(data, function(i) {
  this.drilldown = this.properties['hc-key'];
  this.value = i; // Non-random bogus data
});

// Instanciate the map
Highcharts.mapChart('container', {
  chart: {
    events: {
      drilldown: function(e) {
        if (!e.seriesOptions) {
          var chart = this,
            mapKey = 'countries/us/' + e.point.drilldown + '-all',
            // Handle error, the timeout is cleared on success
            fail = setTimeout(function() {
              if (!Highcharts.maps[mapKey]) {
                chart.showLoading('<i class="icon-frown"></i> Failed loading ' + e.point.name);

                fail = setTimeout(function() {
                  chart.hideLoading();
                }, 1000);
              }
            }, 3000);

          // Show the spinner
          chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>'); // Font Awesome spinner

          // Load the drilldown map
          $.getScript('https://code.highcharts.com/mapdata/' + mapKey + '.js', function() {

            data = Highcharts.geojson(Highcharts.maps[mapKey]);

            // Set a non-random bogus value
            $.each(data, function(i) {
              this.value = i;
            });

            // Hide loading and add series
            chart.hideLoading();
            clearTimeout(fail);
            chart.addSeriesAsDrilldown(e.point, {
              name: e.point.name,
              data: data,
              dataLabels: {
                enabled: true,
                format: '{point.name}'
              }
            });
          });
        }

        this.setTitle(null, {
          text: e.point.name
        });

        chart.update({
          colorAxis: {
            dataClasses: [{
              to: 20
            }, {
              from: 20,
              to: 40
           ...