Highcharts Demo

author(s): Wojciech Chmiel

by Alagar Kamuthurai

HTML

<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>
<button id="GetPoints" style="margin-left: 2em">Get Points</button>

CSS

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

JavaScript

var storedPoints = [];
var chart = {};
Highcharts.getJSON('https://cdn.jsdelivr.net/gh/highcharts/highcharts@1e9e659c2d60fbe27ef0b41e2f93112dd68fb7a3/samples/data/european-train-stations-near-airports.json', function(data) {
  chart = Highcharts.mapChart('container', {
    chart: {
      map: 'custom/europe',
      events: {
        render() {
					let chart = this;
					
					chart.series[1].points.forEach(p => {
							if (storedPoints.includes(p.x)) {
								p.select(null, true)
							}
					})
        }
      }
    },
    title: {
      text: 'European Train Stations Near Airports'
    },
    subtitle: {
      text: 'Data source: https://github.com/trainline-eu/stations'
    },
    mapNavigation: {
      enabled: true
    },
    tooltip: {
      formatter: function() {
        if (this.point.clusteredData) {
          return 'Clustered points: ' + this.point.clusterPointsAmount;
        }
        return '<b>' + this.key + '</b><br>Lat: ' + this.point.lat.toFixed(2) + ', Lon: ' + this.point.lon.toFixed(2);
      }
    },
    colorAxis: {
      min: 0,
      max: 20
    },
    plotOptions: {
      mappoint: {
        marker: {
          states: {
            select: {
              fillColor: 'red',
              lineWidth: 1,
              lineColor: 'yellow'
            },
            hover: {
              color: '#a4edba'
            }
          }
        },
        cluster: {
          enabled: true,
          allowOverlap: false,
          animation: {
            duration: 450
          },
          layoutAlgorithm: {
            type: 'grid',
            gridSize: 70
          },
          zones: [{
            from: 1,
            to: 4,
            marker: {
              radius: 20
            }
          }, {
            from: 5,
            to: 9,
            marker: {
              radius: 15
            }
          }, {
            from: 10,
            to: 15,
            marker: {
              radius: 17
            }
          }, {
        ...