Europe - Highmaps

Highmaps demo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/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/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

$(function () {

    // Initiate the chart
    var chart = Highcharts.mapChart('container', {

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

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

        mapNavigation: {
            enabled: false,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },
        chart: {
            backgroundColor: "#ccc",
           
        },
        series: [{
            mapData: Highcharts.maps['custom/europe'],
            name: 'Basemap',
            showInLegend: false,
            borderColor: '#fff',
            nullColor: '#afa'
        }, {
    				type: 'mapline',
        		name: 'Links',
        		color: '#c77'
            // Data filled in after chart is drawn
    		}, {
        		type: 'mappoint',
            name: 'Hubs',
            data: [{
            		x: 500,
                y: -400,
								name: 'Hub 1'
            }, {
            		x: 5000,
                y: -3700,
                name: 'Hub 2'
            }, {
            		lat: 47.376636,
                lon: 8.541521,
                name: 'Hub 3'
            }]
        }, {
        		type: 'mappoint',
            name: 'Nodes',
            color: 'grey',
            data: [{
            		x: -400,
                y: -1600,
                name: 'Node 1',
                hub: 'Hub 1'
            }, {
            		x: 800,
                y: -2800,
                name: 'Node 2',
                hub: 'Hub 1'
            }, {
            		x: 2400,
                y: -1300,
                name: 'Node 3',
                hub: 'Hub 1'
            }, {
            		x: 4000,
                y: -1700,
                name: 'Node 4',
                hub: 'Hub 2'
            }, {
            		x: 7000,
                y: -2000,
                name: 'Node 5',
                hub: 'Hub 2'
            }, {
          ...