GeoJSON areas

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/maps/highmaps.js"></script>

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

CSS

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

.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}

JavaScript

(async () => {

  const geo = await fetch(
    'https://code.highcharts.com/mapdata/custom/world-continents.geo.json'
  ).then(response => response.json());

  const europe = await fetch(
    'https://raw.githubusercontent.com/leakyMirror/map-of-europe/master/TopoJSON/europe.topojson').then(response => response.json());

  // Initialize the chart
  Highcharts.mapChart('container', {
    title: {
      text: 'Multiple map'
    },

    mapNavigation: {
      enabled: true,
      buttonOptions: {
        verticalAlign: 'bottom'
      }
    },
    plotOptions: {
      map: {
      }
    },

    series: [{
      name: 'globe',
      mapData: geo,joinBy: ['NAME', 'code'],
      data: []
    }, {
      name: 'UTC',
      data: ['Azerbaijan', 'Albania', 'Austria'].map(code => ({code})),
      mapData: europe,
      joinBy: ['NAME', 'code']
    }]
  });
})();