Current temperatures in capitals of Europe

author(s): Daniel Studencki

by pepperdigital

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
<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/maps/modules/accessibility.js"></script>

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

CSS

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

JavaScript

(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'],
        ['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'],
        ['mt', 35.88, 14.5, 'Valetta'],
        ['fr', 48.86, 2.33, 'Paris'],
        ['no', 59.91, 10.75, 'Oslo'],
        ['se', 59.33, 18.05, 'Stockholm'],
        ['ru', 55.75, 37.6, 'Moscow'],
        ['gb', 51.5, -0.08, 'London'],
        ['pt', 38.71, -9.13, 'Lisbon'],
        ['gr', 37.98, 23.73, 'Athens'],
        ['at', 48.2, 16.36, 'Vienna'],
        ['sk', 48.15, 17.11, 'Bratislava'],
        ['hu', 47.5, 19.08, 'Budapest'],
        ['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...