<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/europe.js"></script>
<script src="https://code.highcharts.com/modules/marker-clusters.js"></script>
<script src="https://code.highcharts.com/modules/coloraxis.js"></script>

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

#container {
  min-width: 310px;
  max-width: 1200px;
  height: 600px;
  margin: 0 auto;
}   ?>

Highcharts.getJSON('https://cdn.jsdelivr.net/gh/highcharts/[email protected]/samples/data/european-train-stations-near-airports.json', function (data) {
  Highcharts.mapChart('container', {
    chart: {
      map: 'custom/europe'
    },
    title: {
      text: 'European Train Stations Near Airports'
    },
    subtitle: {
      text: 'Data source: https://github.com/trainline-eu/stations'
    },
    mapNavigation: {
      enabled: true
    },
    tooltip: {
      headerFormat: '',
      pointFormat: '<b>{point.name}</b><br>Lat: {point.lat:.2f}, Lon: {point.lon:.2f}'
    },
    colorAxis: {
      min: 0,
      max: 20
    },
    plotOptions: {
      mappoint: {
        cluster: {
          enabled: true,
          allowOverlap: false,
          animation: {
            duration: 450
          },
          layoutAlgorithm: {
            type: 'grid',
            gridSize: 70
          },
          zones: [{
            from: 1,
            to: 4,
            marker: {
              radius: 13
            }
          }, {
            from: 5,
            to: 9,
            marker: {
              radius: 15
            }
          }, {
            from: 10,
            to: 15,
            marker: {
              radius: 17
            }
          }, {
            from: 16,
            to: 20,
            marker: {
              radius: 19
            }
          }, {
            from: 21,
            to: 100,
            marker: {
              radius: 21
            }
          }]
        }
      }
    },
    series: [{
      name: 'Basemap',
      borderColor: '#A0A0A0',
      nullColor: 'rgba(200, 200, 200, 0.3)',
      showInLegend: false
    }, {
      type: 'mappoint',
      enableMouseTracking: true,
      colorKey: 'clusterPointsAmount',
      name: 'Cities',
      color: Highcharts.getOptions().colors[1],
      data: data
    }]
  });
});