HTMLcopy
1
<div id="container"></div>
CSScopy
6
1
html, body, #container {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
anychart.data.loadJsonFile('https://gist.githubusercontent.com/shacheeswadia/4a2e84185d754984681a89194b4282df/raw/ec70b11e8f68e5e6df60cff15bff8dd5b05ce22a/connector-map.json', function (data) {
3
4
// create a connector map chart
5
var map = anychart.connector();
6
7
// set the geodata for france
8
map.geoData('anychart.maps.france');
9
10
// add a title for the map and customize it
11
map
12
.title()
13
.enabled(true)
14
.useHtml(true)
15
.fontColor('#263238')
16
.text(
17
'Tour de France 2021 Route Map<br/>' +
18
'<span style="color:#a3a3a3; font-size: 14px;">Indicating stage terrain</span>'
19
);
20
21
// create a marker series for the place names
22
var citiesSeries = map
23
.marker(data[0]['citiesData'])
24
.type('circle')
25
.fill('#3e5ca6')
26
.stroke(0)
27
.tooltip(false);
28
29
// create individual series
30
createSeries(map, 'Hilly', data[1]['hillyData'], '#57ae12', false);
31
createSeries(map, 'Mountain', data[2]['mountainData'], '#318053', false);
32
createSeries(map, 'Flat', data[3]['flatData'], '#a4664d', false);
33
createSeries(map, 'Individual Time Trial', data[4]['timeTrialData'], '#ef6c00', false);
34
createSeries(map, 'Connector', data[5]['connectorData'], '#fac233', true);
35
36
// customize the labels for the city names series
37
citiesSeries
38
.labels()
39
.enabled(true)
40
.position('center-bottom')
41
.fontColor('#263238')
42
.offsetY(0)
43
.offsetX(5)
44
.anchor('left-center')
45
.format('{%name}');
46
47
// turn on the legend
48
map.legend(true);
49
50
// exclude cities from the legend
51
citiesSeries.legendItem(false);
52
53
// sets the container id for the map
54
map.container('container');
55
56
// command to draw the resulting connector map
57
map.draw();
58
59
});
60
});
61
62
// a helper function to create several series
63
function createSeries(map, name, data, color, isConnector) {
64
// configure and customize the series
65
var connectorSeries = map
66
.connector(data)
67
.stroke(function (d) {
68
return {
69
color: color,
70
thickness: 2,
71
dash: isConnector ? '3 6' : '0'
72
}
73
})
74
.fill(color)
75
.name(name);
76
77
// set the legend shape and color
78
connectorSeries.legendItem({
79
iconType: 'circle',
80
iconFill: color
81
});
82
83
// set the marker size
84
var markers = connectorSeries.markers().size(10);
85
86
// customize the destination series tooltips
87
connectorSeries
88
.tooltip()
89
.format('{%full}')
90
.title({ useHtml: true })
91
.titleFormat(
92
'{%number}. <span style="font-size: 13px; color: #E1E1E1"; padding: 10px>{%short}</span>'
93
);
94
}