HTMLcopy
1
<div id="container"></div>
CSScopy
8
1
html,
2
body,
3
#container {
4
width: 100%;
5
height: 100%;
6
margin: 0;
7
padding: 0;
8
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
3
// load data from a json file
4
anychart.data.loadJsonFile(
5
"https://gist.githubusercontent.com/shacheeswadia/8f45da54d9bf2032fee201dbfc79e0e4/raw/5d10d58f40b4a1d994cef36dbc64545ef90ead80/queenVisits.json",
6
function (data) {
7
8
// create a dataset
9
let dataSet = anychart.data.set(data);
10
11
// create a map instance
12
let map = anychart.map();
13
14
// set the geodata
15
map.geoData("anychart.maps.world");
16
17
// create a choropleth series
18
let series = map.choropleth(dataSet);
19
20
// set the map colors
21
series.colorScale(
22
anychart.scales.linearColor("#f2f2f2", "#42a5f5", "#1976d2", "#233580")
23
);
24
25
// customize the colors in the hovered state
26
series.hovered().fill(function (d) {
27
return anychart.color.darken(d.sourceColor, 0.2);
28
});
29
30
// create the map legend
31
map.colorRange().enabled(true);
32
33
// create zoom controls
34
let zoomController = anychart.ui.zoom();
35
zoomController.render(map);
36
37
// customize the tooltip text
38
series
39
.tooltip()
40
.useHtml(true)
41
.format(function (d) {
42
if (d.name == "United Kingdom") {
43
return "<h6 style='font-size:14px; font-weight:400; margin: 0.2rem 0;'>The Queen lived here.</h6>";
44
} else {
45
return (
46
"<h6 style='font-size:14px; font-weight:400; margin: 0.2rem 0;'>The Queen visited <b>" +
47
d.value +
48
"</b> times.</h6>"
49
);
50
}
51
});
52
53
// set the map title
54
map
55
.title()
56
.enabled(true)
57
.useHtml(true)
58
.text(
59
'<span style = "color: #c8102e; font-size:18px;">State Visits Made by Queen Elizabeth II</span>' +
60
'<br/><span style="font-size: 15px;">The Queen is the most widely traveled head of state in history</span>'
61
);
62
63
// set the container
64
map.container("container");
65
66
// initiate the map drawing
67
map.draw();
68
}
69
);
70
71
});