(async () => {
const topology = await fetch(
'https://code.highcharts.com/mapdata/custom/europe.topo.json'
).then(response => response.json());
const data = [
[
'is',
64.15,
-21.95,
'Reykjavik',
-6
],
[
'fo',
62,
-6.79,
'Torshavn',
1
],
[
'fi',
60.16,
24.93,
'Helsinki',
-6
],
[
'no',
59.91,
10.75,
'Oslo',
-8
],
[
'ee',
59.43,
24.71,
'Tallinn',
-4
],
[
'se',
59.33,
18.05,
'Stockholm',
-4
],
[
'lv',
56.95,
24.1,
'Riga',
-2
],
[
'ru',
55.75,
37.6,
'Moscow',
-5
],
[
'dk',
55.66,
12.58,
'Copenhagen',
0
],
[
'lt',
54.68,
25.31,
'Vilnius',
-3
],
[
'by',
53.9,
27.56,
'Minsk',
-3
],
[
'ie',
53.31,
-6.23,
'Dublin',
3
],
[
'de',
52.51,
13.4,
'Berlin',
-5
],
[
'nl',
52.35,
4.91,
'Amsterdam',
-4
],
[
'pl',
52.25,
21,
'Warsaw',
-10
],
[
'gb',
51.5,
-0.08,
'London',
-1
],
[
'be',
50.83,
4.33,
'Brussels',
-2
],
[
'ua',
50.43,
30.51,
'Kyiv',
-3
],
[
'cz',
50.08,
14.46,
'Prague',
-3
],
[
'lu',
49.6,
6.11,
'Luxembourg',
-2
],
[
'fr',
48.86,
2.33,
'Paris',
-1
],
[
'at',
48.2,
16.36,
'Vienna',
0
],
[
'sk',
48.15,
17.11,
'Bratislava',
-1
],
[
'hu',
47.5,
19.08,
'Budapest',
-1
],
[
'li',
47.13,
9.51,
'Vaduz',
4
],
[
'md',
47,
28.85,
'Chisinau',
0
],
[
'ch',
46.91,
7.46,
'Bern',
2
],
[
'si',
46.05,
14.51,
'Ljubljana',
0
],
[
'hr',
45.8,
16,
'Zagreb',
0
],
[
'rs',
44.83,
20.5,
'Belgrade',
2
],
[
'ro',
44.43,
26.1,
'Bucharest',
1
],
[
'sm',
43.93,
12.41,
'San Marino',
3
],
[
'ba',
43.86,
18.41,
'Sarajevo',
7
],
[
'mc',
43.73,
7.41,
'Monaco',
8
],
[
'bg',
42.68,
23.31,
'Sofia',
1
],
[
'me',
42.43,
19.26,
'Podgorica',
9
],
[
'ad',
42.2,
1.24,
'Andorra la Vella',
7
],
[
'mk',
42,
21.43,
'Skopje',
4
],
[
'it',
41.9,
12.48,
'Rome',
12
],
[
'va',
41.9,
12.45,
'Vatican',
12
],
[
'al',
41.31,
19.81,
'Tirana',
11
],
[
'es',
40.4,
-3.68,
'Madrid',
11
],
[
'tr',
39.93,
32.86,
'Ankara',
9
],
[
'pt',
38.71,
-9.13,
'Lisbon',
15
],
[
'gr',
37.98,
23.73,
'Athens',
13
],
[
'mt',
35.88,
14.5,
'Valetta',
19
],
[
'nc',
35.18,
33.36,
'North Nicosia',
16
],
[
'cy',
35.16,
33.36,
'Nicosia',
16
]
];
// Create the chart
Highcharts.mapChart('container', {
chart: {
map: topology,
margin: 1
},
title: {
text: 'Winter day temperatures in Europe',
align: 'right',
floating: true,
style: {
textOutline: '5px contrast'
}
},
subtitle: {
text: 'Data source: <a href="https://api.met.no/">api.met.no</a>',
align: 'right',
floating: true,
y: 36
},
mapNavigation: {
enabled: true,
buttonOptions: {
alignTo: 'spacingBox',
verticalAlign: 'bottom'
}
},
mapView: {
padding: [0, 0, 85, 0]
},
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'
},
floating: true,
backgroundColor: '#ffffffcc'
},
tooltip: {
headerFormat: '<span style="color:{point.color}">\u25CF</span> {point.key}:<br/>',
pointFormat: 'Temperature: <b>{point.y}℃</b>'
},
exporting: {
buttons: {
contextButton: {
align: 'left'
}
}
},
series: [{
allAreas: true,
name: 'Countries',
states: {
inactive: {
opacity: 1
}
},
dataLabels: {
enabled: false
},
enableMouseTracking: false
}, {
name: 'Capitals of Europe',
keys: ['id', 'lat', 'lon', 'name', 'y'],
data,
animation: false,
type: 'mappoint',
showInLegend: false,
marker: {
enabled: false
},
dataLabels: {
crop: true,
format: '{y}',
inside: true,
y: -14,
style: {
color: 'contrast',
textOutline: 'none'
},
shape: 'mapmarker',
borderColor: 'black',
borderWidth: 1,
backgroundColor: 'auto'
},
accessibility: {
point: {
valueDescriptionFormat: '{xDescription}, {point.temp}°C.'
}
}
}]
});
})();