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

    Highcharts.mapChart('container', {
        chart: {
            map: topology
        },

        title: {
            text: 'Highmaps basic flowmap demo'
        },

        subtitle: {
            text: 'Highcharts Maps flow map'
        },

        mapNavigation: {
            enabled: true
        },

        legend: {
            enabled: false
        },

        accessibility: {
            point: {
                valueDescriptionFormat: '{xDescription}.'
            }
        },

        plotOptions: {
            mappoint: {
                tooltip: {
                    headerFormat: '{point.point.id}<br>',
                    pointFormat: 'Lat: {point.lat} Lon: {point.lon}'
                }
            }
        },

        series: [{
            name: 'Basemap',
            showInLegend: false,
            states: {
                inactive: {
                    enabled: false
                }
            }
        }, {
            type: 'mappoint',
            id: 'europe',
            name: 'Cities',
            dataLabels: {
                format: '{point.id}'
            },
            data: [{
                id: 'Oslo',
                lat: 59.91,
                lon: 10.76
            }, {
                id: 'Warszawa',
                lat: 52.17,
                lon: 20.97
            }, {
                id: 'Paris',
                lat: 48.73,
                lon: 2.37
            }, {
                id: 'Roma',
                lat: 41.8,
                lon: 12.6
            }, {
                id: 'Madrid',
                lat: 40.47,
                lon: -3.57
            }, {
                id: 'Dublin',
                lat: 53.43,
                lon: -6.24
            }, {
                id: 'Helsinki',
                lat: 60.32,
                lon: 24.97
            }, {
                id: 'Budapest',
                lat: 47.43,
                lon: 19.26
            }, {
                id: 'Sofia',
                lat: 42.69,
                lon: 23.4
            }]
        }, {
            type: 'flowmap',
            name: 'Flow route',
            accessibility: {
                description:
                'This is a demonstration of the flowmap using weighted links.'
            },
            linkedTo: ':previous',
            minWidth: 5,
            maxWidth: 15,
            growTowards: true,
            markerEnd: {
                width: '50%',
                height: '50%'
            },
            fillColor: '#31c2cc',
            fillOpacity: 0.2,
            color: '#0000FF',
            data: [{
                from: 'Oslo',
                to: 'Helsinki',
                weight: 20,
                markerEnd: {
                    width: '70%',
                    height: '70%'
                }
            }, {
                from: 'Oslo',
                to: 'Dublin',
                weight: 70,
                fillOpacity: 0.7
            }, {
                from: 'Warszawa',
                to: 'Helsinki',
                weight: 10
            }, {
                from: 'Warszawa',
                to: 'Paris',
                weight: 5
            }, {
                from: 'Warszawa',
                to: 'Madrid',
                weight: 20
            }, {
                from: 'Warszawa',
                to: 'Budapest',
                weight: 0.1
            }, {
                from: 'Warszawa',
                to: 'Sofia',
                weight: 60,
                growTowards: true,
                fillColor: '#1cd635',
                fillOpacity: 0.4
            }, {
                from: 'Warszawa',
                to: 'Roma',
                weight: 2,
                markerEnd: {
                    width: 14,
                    height: 24
                }
            }]
        }]
    });
})();