Europe - Highmaps

Highmaps demo

HTML

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

var levelThreshold = 3, // Zoom level at which we show the detailed data
	dataLow = [[100, 100, 5, 'Label A'], [4000, -1000, 3, 'Label B'], [3000, -4000, 4, 'Label C'], [8000, -8000, 2, 'Label D']],
	dataHigh = [];

// Mock create detailed data from the low detail data
dataLow.forEach(function (point) {
	dataHigh.push([point[0] - 200, point[1] - 40, point[2] / 3, point[3]+ '-1']);
    dataHigh.push([point[0] - 10, point[1] + 20, point[2] / 3, point[3] + '-2']);
    dataHigh.push([point[0] + 200, point[1] + 40, point[2] / 3, point[3] + '-3']);
});


// Create the chart
var chart = Highcharts.mapChart('container', {
    chart: {
        map: 'custom/europe'
    },

    title: {
        text: 'Highmaps clustering demo'
    },

    subtitle: {
        text: 'Source map: <a href="http://code.highcharts.com/mapdata/custom/europe.js">Europe</a>'
    },

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

	legend: {
    	enabled: false
    },

	xAxis: {
    	events: {
        	afterSetExtremes: function (e) {
                var range = e.max - e.min,
                	chart = this.chart,
                	basemap = chart.series[0],
                	maxRange = basemap.dataMax - basemap.dataMin,
                    zoomAmount = maxRange / range;
                if (e.trigger === 'pan') {
                	return; // Ignore panning events
                }
                if (zoomAmount > levelThreshold) {
                    if (!chart.zoomedToCluster) {
                    	chart.zoomedToCluster = true;
                    	this.chart.series[1].hide();
                    	this.chart.series[2].show();
                    }
                } else if (chart.zoomedToCluster) {
                    delete chart.zoomedToCluster;
                    this.chart.series[2].hide();
                    this.chart.series[1].show();
                }
            }
        }
    },

	plotOptions: {
    	mapbubble: {
  ...