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']);
23
createSeries(map, 'Mountain', data[2]['mountainData']);
24
createSeries(map, 'Flat', data[3]['flatData']);
25
createSeries(map, 'Individual Time Trial', data[4]['"timeTrialData']);
26
createSeries(map, 'Connector', data[5]['connectorData']);
27
28
// sets the container id for the map
29
map.container('container');
30
31
// command to draw the resulting connector map
32
map.draw();
33
34
});
35
});
36
37
// a helper function to create several series
38
function createSeries(map, name, data) {
39
// configure and customize the series
40
var connectorSeries = map
41
.connector(data)
42
.stroke('#3e5ca6')
43
.fill('#3e5ca6');
44
}