Highcharts Map Drilldown

by oysteinmoseng

HTML

<div id="container"></div>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/themes/adaptive.js"></script>

<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

CSS

body {
    background: var(--highcharts-background-color);
    color: var(--highcharts-neutral-color-100);
}

#container {
    height: 500px;
    min-width: 310px;
    max-width: 800px;
    margin: 0 auto;
}

JavaScript

(async () => {
        const world = await fetch(
          'https://code.highcharts.com/mapdata/custom/world.topo.json'
        ).then(r => r.json());

        // Set drilldown pointers in the data
        world.objects.default.geometries.map(feature => ({
            'hc-key': feature.properties['hc-key'],
            drilldown: feature.properties['hc-key'],
            value: Math.random()
        }))

        Highcharts.mapChart('container', {
          chart: {
            map: world,
            events: {
              drilldown: async function (e) {
                if (!e.point) return;
                const code = e.point['hc-key'];
                this.showLoading('Loading states…');
                const topo = await fetch(
                  `https://code.highcharts.com/mapdata/countries/${code}/${code}-all.topo.json`
                ).then(r => r.json());
                const stateData = Highcharts.geojson(topo, 'map').map(f => ({
                  'hc-key': f.properties['hc-key'],
                  value: Math.random()
                }));
                this.addSeriesAsDrilldown(e.point, {
                  name: e.point.name || code.toUpperCase(),
                  mapData: topo,
                  data: stateData
                });
                this.hideLoading();
              }
            }
          },
          series: [{
            name: 'Countries',
            data
          }]
        });
      })();