(async () => {

    const topology = await fetch(
        'https://code.highcharts.com/mapdata/custom/europe.topo.json'
    ).then(response => response.json());

    // The demo uses https://api.met.no/ API. Every AJAX
    // call downloads the XML format data, basing on specific capital
    // city latitude and longitude values.

    function getJSON(url, cb) {
        const request = new XMLHttpRequest();
        request.open('GET', url, true);

        request.onload = function () {
            if (this.status < 400) {
                return cb(JSON.parse(this.response));
            }
        };

        request.send();
    }

    // Data structure: [country_code, latitude, longitude, capital_city]
    const newData = [
        ['dk', 55.66, 12.58, 'Copenhagen'],
        ['fo', 62, -6.79, 'Torshavn'],
        ['hr', 45.8, 16, 'Zagreb'],
        ['nl', 52.35, 4.91, 'Amsterdam'],
        ['ee', 59.43, 24.71, 'Tallinn'],
        ['bg', 42.68, 23.31, 'Sofia'],
        ['es', 40.4, -3.68, 'Madrid'],
        ['it', 41.9, 12.48, 'Rome'],
        ['sm', 43.93, 12.41, 'San Marino'],
        ['va', 41.9, 12.45, 'Vatican'],
        ['tr', 39.93, 32.86, 'Ankara'],
        ['mt', 35.88, 14.5, 'Valetta'],
        ['fr', 48.86, 2.33, 'Paris'],
        ['no', 59.91, 10.75, 'Oslo'],
        ['de', 52.51, 13.4, 'Berlin'],
        ['ie', 53.31, -6.23, 'Dublin'],
        ['ua', 50.43, 30.51, 'Kyiv'],
        ['fi', 60.16, 24.93, 'Helsinki'],
        ['se', 59.33, 18.05, 'Stockholm'],
        ['ru', 55.75, 37.6, 'Moscow'],
        ['gb', 51.5, -0.08, 'London'],
        ['cy', 35.16, 33.36, 'Nicosia'],
        ['pt', 38.71, -9.13, 'Lisbon'],
        ['gr', 37.98, 23.73, 'Athens'],
        ['lt', 54.68, 25.31, 'Vilnius'],
        ['si', 46.05, 14.51, 'Ljubljana'],
        ['ba', 43.86, 18.41, 'Sarajevo'],
        ['mc', 43.73, 7.41, 'Monaco'],
        ['al', 41.31, 19.81, 'Tirana'],
        ['nc', 35.18, 33.36, 'North Nicosia'],
        ['rs', 44.83, 20.5, 'Belgrade'],
        ['ro', 44.43, 26.1, 'Bucharest'],
        ['me', 42.43, 19.26, 'Podgorica'],
        ['li', 47.13, 9.51, 'Vaduz'],
        ['at', 48.2, 16.36, 'Vienna'],
        ['sk', 48.15, 17.11, 'Bratislava'],
        ['hu', 47.5, 19.08, 'Budapest'],
        ['ad', 42.2, 1.24, 'Andorra la Vella'],
        ['lu', 49.6, 6.11, 'Luxembourg'],
        ['ch', 46.91, 7.46, 'Bern'],
        ['be', 50.83, 4.33, 'Brussels'],
        ['pl', 52.25, 21, 'Warsaw'],
        ['mk', 42, 21.43, 'Skopje'],
        ['lv', 56.95, 24.1, 'Riga'],
        ['by', 53.9, 27.56, 'Minsk'],
        ['is', 64.15, -21.95, 'Reykjavik'],
        ['md', 47, 28.85, 'Chisinau'],
        ['cz', 50.08, 14.46, 'Prague']
    ];
    // Get temperature for specific localization, and add it to the chart.
    // It takes point as first argument, countries series as second
    // and capitals series as third. Capitals series have to be the
    // 'mappoint' series type, and it should be defined before in the
    // series array.
    function getTemp(point, countries, capitals) {

        const url = 'https://api.met.no/weatherapi/locationforecast/2.0/?lat=' +
        point[1] + '&lon=' + point[2];

        const callBack = json => {

            const temp = json.properties.timeseries[0].data.instant.details
                .air_temperature;
            const colorAxis = countries.chart.colorAxis[0];

            const country = {
                'hc-key': point[0],
                value: parseInt(temp, 10) || null
            };
            const capital = {
                name: point[3],
                lat: point[1],
                lon: point[2],
                color: colorAxis.toColor(temp),
                temp: parseInt(temp, 10) || 'No data'
            };

            countries.addPoint(country);
            capitals.addPoint(capital);
            return temp;
        };

        getJSON(url, callBack);
    }

    // Create the chart
    Highcharts.mapChart('container', {
        chart: {
            map: topology,
            animation: false,
            events: {
                load: function () {
                    var countries = this.series[0];
                    var capitals = this.series[1];
                    newData.forEach(function (elem) {
                        getTemp(elem, countries, capitals);
                    });
                }
            }
        },

        title: {
            text: 'Current temperatures in capitals of Europe'
        },

        subtitle: {
            text: 'Data source: <a href="https://api.met.no/">https://api.met.no/</a>'
        },

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

        colorAxis: {
            min: -25,
            max: 40,
            labels: {
                format: '{value}°C'
            },
            stops: [
                [0, '#0000ff'],
                [0.3, '#6da5ff'],
                [0.6, '#ffff00'],
                [1, '#ff0000']
            ]
        },

        legend: {
            title: {
                text: 'Degrees Celsius'
            }
        },

        tooltip: {
            headerFormat: '<span style="color:{point.color}">\u25CF</span> {point.key}:<br/>',
            pointFormatter: function () {
                var value = Number.isInteger(this.temp) ? this.temp + '°C' : 'No data';
                return 'Temperature: <b>' + value + '</b>';
            }
        },

        series: [{
            name: 'Temperatures',
            states: {
                hover: {
                    color: '#BADA55'
                }
            },
            dataLabels: {
                enabled: false
            },
            enableMouseTracking: false,
            accessibility: {
                point: {
                    valueDescriptionFormat: '{xDescription}, {point.value}°C.'
                }
            }
        }, {
            name: 'Capitals of Europe',
            type: 'mappoint',
            showInLegend: false,
            marker: {
                lineWidth: 1,
                lineColor: '#000'
            },
            dataLabels: {
                crop: true,
                formatter: function () {
                    var value = Number.isInteger(this.point.temp) ? this.point.temp + '°C' : 'No data';
                    return '<span>' + this.key + '</span><br/><span>' + value + '</span>';
                }
            },
            accessibility: {
                point: {
                    valueDescriptionFormat: '{xDescription}, {point.temp}°C.'
                }
            }
        }]
    });

})();