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
11
map
12
.title('Tour de France 2021 Route Map');
13
14
// create a marker series for the place names
15
var citiesSeries = map
16
.marker(data[0]['citiesData'])
17
.type('circle')
18
.fill('#c51923')
19
.stroke(0);
20
21
// create individual series
22
createSeries(map, 'Hilly', data[1]['hillyData'], '#57ae12');
23
createSeries(map, 'Mountainous', data[2]['mountainData'], '#318053');
24
createSeries(map, 'Flat', data[3]['flatData'], '#a4664d');
25
createSeries(map, 'Individual Time Trial', data[4]['timeTrialData'], '#ef6c00');
26
createSeries(map, 'Connector', data[5]['connectorData'], '#fac233');
27
28
// customize the labels for the city names series
29
citiesSeries
30
.labels()
31
.enabled(true)
32
.position('center-bottom')
33
.fontColor('#263238')
34
.offsetY(0)
35
.offsetX(5)
36
.anchor('left-center')
37
.format('{%name}');
38
39
// turn on the legend
40
map.legend(true);
41
42
// exclude cities from the legend
43
citiesSeries.legendItem(false);
44
45
// sets the container id for the map
46
map.container('container');
47
48
// command to draw the resulting connector map
49
map.draw();
50
51
});
52
});
53
54
// a helper function to create several series
55
function createSeries(map, name, data, color) {
56
// configure and customize the series
57
var connectorSeries = map
58
.connector(data)
59
.stroke(function (d) {
60
return {
61
color: color,
62
thickness: 2
63
}
64
})
65
.fill(color)
66
.curvature(0);
67
68
// set the legend shape and color
69
connectorSeries.legendItem({
70
iconType: 'circle',
71
iconFill: color
72
});
73
}