-
Notifications
You must be signed in to change notification settings - Fork 0
/
WorldMapTemplate.html
156 lines (138 loc) · 4.63 KB
/
WorldMapTemplate.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<html>
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/maps.js"></script>
<script src="https://cdn.amcharts.com/lib/4/geodata/worldLow.js"></script>
<script src="https://cdn.amcharts.com/lib/4/geodata/data/countries2.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
</html>
<style>
#chartdiv {
width: 100%;
height: 100%;
}
</style>
<body>
<div id="chartdiv"></div>
</body>
<script>
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
var continents = {
"AF": 0,
"AN": 1,
"AS": 2,
"EU": 3,
"NA": 4,
"OC": 5,
"SA": 6
}
// Create map instance
var chart = am4core.create("chartdiv", am4maps.MapChart);
chart.projection = new am4maps.projections.Miller();
// Create map polygon series for world map
var worldSeries = chart.series.push(new am4maps.MapPolygonSeries());
worldSeries.useGeodata = true;
worldSeries.geodata = am4geodata_worldLow;
worldSeries.exclude = ["AQ"];
var worldPolygon = worldSeries.mapPolygons.template;
worldPolygon.tooltipText = "{name}";
worldPolygon.nonScalingStroke = true;
worldPolygon.strokeOpacity = 0.5;
worldPolygon.fill = am4core.color("#fff");
worldPolygon.propertyFields.fill = "color";
var hs = worldPolygon.states.create("hover");
hs.properties.fill = chart.colors.getIndex(9);
// Create country specific series (but hide it for now)
var countrySeries = chart.series.push(new am4maps.MapPolygonSeries());
countrySeries.useGeodata = true;
countrySeries.hide();
countrySeries.geodataSource.events.on("done", function(ev) {
worldSeries.hide();
countrySeries.show();
});
var countryPolygon = countrySeries.mapPolygons.template;
countryPolygon.tooltipText = "{name}";
countryPolygon.nonScalingStroke = true;
countryPolygon.strokeOpacity = 0.5;
countryPolygon.fill = am4core.color("#eee");
var hs = countryPolygon.states.create("hover");
hs.properties.fill = chart.colors.getIndex(9);
// Set up click events
worldPolygon.events.on("hit", function(ev) {
ev.target.series.chart.zoomToMapObject(ev.target);
var map = ev.target.dataItem.dataContext.map;
if (map) {
ev.target.isHover = false;
countrySeries.geodataSource.url = "https://www.amcharts.com/lib/4/geodata/json/" + map + ".json";
countrySeries.geodataSource.load();
}
});
// Set up data for countries
var colorDict = {COLORVALUES};
var dataDict = {DATAVALUES};
//Replace new names of the covid data api with the old names of the world map api
var replaceValues = {
"Czech Republic" : "Czechia",
"Moldova, Republic of" : "Moldova",
"Russian Federation" : "Russia",
"Korea, Democratic People's Republic of" : "North Korea",
"Korea, Republic of" : "South Korea",
"Viet Nam" : "Vietnam",
"Lao People's Democratic Republic" : "Laos",
"Congo, the Democratic Republic of the" : "Congo",
"Tanzania, United Republic of" : "Tanzania",
"Swaziland" : "Eswatini",
"Venezuela, Bolivarian Republic of" : "Venezuela",
"Bolivia, Plurinational State of" : "Bolivia",
"Iran, Islamic Republic of" : "Iran",
"Syrian Arab Republic" : "Syria"};
var data = [];
for(var id in am4geodata_data_countries2) {
if (am4geodata_data_countries2.hasOwnProperty(id)) {
var country = am4geodata_data_countries2[id];
if(replaceValues[country.country] != undefined) {
country.country = replaceValues[country.country]
}
var color = colorDict[country.country]
var name = country.country + dataDict[country.country];
if(color == undefined) {
color = "MINCOLOR";
name = country.country;
}
if (country.maps.length) {
data.push({
id: id,
color: color,
map: country.maps[0],
name: name
});
}
}
}
console.log(data);
worldSeries.data = data;
// Zoom control
chart.zoomControl = new am4maps.ZoomControl();
var homeButton = new am4core.Button();
homeButton.events.on("hit", function() {
worldSeries.show();
countrySeries.hide();
chart.goHome();
});
homeButton.icon = new am4core.Sprite();
homeButton.padding(7, 5, 7, 5);
homeButton.width = 30;
homeButton.icon.path = "M16,8 L14,8 L14,16 L10,16 L10,10 L6,10 L6,16 L2,16 L2,8 L0,8 L8,0 L16,8 Z M16,8";
homeButton.marginBottom = 10;
homeButton.parent = chart.zoomControl;
homeButton.insertBefore(chart.zoomControl.plusButton);
var heatLegend = chart.createChild(am4charts.HeatLegend);
heatLegend.width = am4core.percent(100);
heatLegend.minColor = am4core.color("MINCOLOR");
heatLegend.maxColor = am4core.color("MAXCOLOR");
heatLegend.minValue = MINVALUE;
heatLegend.maxValue = MAXVALUE;
}); // end am4core.ready()
</script>