JSFiddle - React, Tailwind, and code Playground

by Luke Marlow

HTML

<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/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>

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

CSS

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

JavaScript

var data = [
  ['DE.SH', Math.floor(Math.random() * 100000)],
  ['DE.BE', Math.floor(Math.random() * 100000)],
  ['DE.MV', Math.floor(Math.random() * 100000)],
  ['DE.HB', Math.floor(Math.random() * 100000)],
  ['DE.HH', Math.floor(Math.random() * 100000)],
  ['DE.RP', Math.floor(Math.random() * 100000)],
  ['DE.SL', Math.floor(Math.random() * 100000)],
  ['DE.BY', Math.floor(Math.random() * 100000)],
  ['DE.SN', Math.floor(Math.random() * 100000)],
  ['DE.ST', Math.floor(Math.random() * 100000)],
  ['DE.NW', Math.floor(Math.random() * 100000)],
  ['DE.BW', Math.floor(Math.random() * 100000)],
  ['DE.HE', Math.floor(Math.random() * 100000)],
  ['DE.NI', Math.floor(Math.random() * 100000)],
  ['DE.TH', Math.floor(Math.random() * 100000)],
];

Highcharts.getJSON('https://onelazy.dev/map-germany.geo.json', function(geojson) {

  // Initiate the chart
  Highcharts.mapChart('container', {
    chart: {
      map: geojson
    },

    title: {
      text: 'German Highmaps Example'
    },

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

    colorAxis: {
      tickPixelInterval: 100
    },

    series: [{
      data: data,
      keys: ['code_hasc', 'value'],
      joinBy: 'code_hasc',
      name: 'Streams',
      states: {
        hover: {
          color: '#a4edba'
        }
      },
      dataLabels: {
        enabled: true,
        format: '{point.properties.postal}'
      }
    }]
  });
});