Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<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/mapdata/custom/world.js"></script>


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

<button id="getselectedpoints">Get selected points</button>

CSS

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

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

JavaScript

Highcharts.Chart.prototype.unselectAll = function() {
    for (var i = 0; i < this.series[0].data.length; i++) {
        this.series[0].points[i].select(false);
    }
};

$.getJSON('https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/world-population-density.json', function(data) {

    // Initiate the chart
    var chart = Highcharts.mapChart('container', {
        chart: {
            events: {
                selection: function(event) {
                    for (var i = 0; i < this.series[0].data.length; i++) {
                        var point = this.series[0].data[i],
                            xAxis = event.xAxis[0],
                            yAxis = event.yAxis[0];

                        if (point.graphic) {
                            if (point._minX > xAxis.min &&
                                point._maxX < xAxis.max &&
                                point._minY > yAxis.min &&
                                point._maxY < yAxis.max) {

                                point.select(true, true);
                            }
                        }
                    }
                    return false;
                }
            },
            zoomType: 'xy'
        },
        title: {
            text: 'Allow point select'
        },

        legend: {
            title: {
                text: 'Population density per km²'
            }
        },

        plotOptions: {
            series: {
                point: {
                    events: {
                        select: function() {
                            var text = 'Selected ' + this.name + ' (' + this.value + '/km²)',
                                chart = this.series.chart;
                            if (!chart.selectedLabel) {
                                chart.selectedLabel = chart.renderer.label(text, 0, 320)
                                    .add();
                            } else {
                                chart.selectedLabel.attr({
    ...