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
3
// create a data set for connectors
4
var dataSet = [
5
{points: [33.62, 113.34, 36.05, 103.79], travel: "From Xian to Lanzhou"},
6
{points: [36.05, 103.79, 40.14, 94.66], travel: "From Lanzhou to Dunhuang"},
7
{points: [40.14, 94.66, 38.14, 85.52], travel: "From Dunhuang to Qiemo"},
8
{points: [38.14, 85.52, 37.11, 79.91], travel: "From Qiemo to Hotan"},
9
{points: [37.11, 79.91, 39.46, 75.99], travel: "From Hotan to Kashgar"},
10
{points: [39.46, 75.99, 37.66, 62.16], travel: "From Kashgar to Merv"},
11
{points: [37.66, 62.16, 35.68, 51.38], travel: "From Merv to Tehran"},
12
{points: [35.68, 51.38, 33.31, 44.36], travel: "From Tehran to Baghdad"},
13
{points: [33.31, 44.36, 36.19, 36.16], travel: "From Baghdad to Antioch"},
14
{points: [36.19, 36.16, 37.98, 23.72], travel: "From Antioch to Athens", curvature: -0.3, stroke: "blue"},
15
{points: [37.98, 23.72, 45.44, 12.31], travel: "From Athens to Venice", curvature: -0.5, stroke: "blue"}
16
];
17
18
// create a map
19
var map = anychart.map();
20
21
// create a connector series
22
var series = map.connector(dataSet);
23
24
// set geodata
25
map.geoData(anychart.maps['world']);
26
27
// title the map
28
map.title("Silk Road Trade Route from Xian to Venice");
29
30
// create a data set for markers
31
var data_marker = [
32
{"name": "Xian", "lat": 33.62, "long": 113.34},
33
{"name": "Lanzhou", "lat": 36.05, "long": 103.79},
34
{"name": "Dunhuang", "lat": 40.14, "long": 94.66},
35
{"name": "Qiemo", "lat": 38.14, "long": 85.52},
36
{"name": "Hotan", "lat": 37.11, "long": 79.91},
37
{"name": "Kashgar", "lat": 39.46, "long": 75.99},
38
{"name": "Merv", "lat": 37.66, "long": 62.16},
39
{"name": "Tehran", "lat": 35.68, "long": 51.38},
40
{"name": "Baghdad", "lat": 33.31, "long": 44.36},
41
{"name": "Antioch", "lat": 36.19, "long": 36.16},
42
{"name": "Athens", "lat": 37.98, "long": 23.72},
43
{"name": "Venice", "lat": 45.44, "long": 12.31}
44
];
45
46
// create a marker series
47
var series_marker = map.marker(data_marker);
48
49
// define the scale
50
var mapScale = map.scale();
51
mapScale.minimumX(30);
52
mapScale.maximumX(70);
53
mapScale.minimumY(0);
54
mapScale.maximumY(80);
55
56
// set the marker shape and color
57
series_marker.type('circle').fill('red').stroke('#000');
58
59
// format the marker series labels
60
series_marker
61
.labels()
62
.enabled(true)
63
.position('center')
64
.fontColor('#242424')
65
.offsetY(0)
66
.offsetX(5)
67
.anchor('left-center');
68
69
// customize the tooltip
70
// for the connector series
71
series.tooltip().format('{%travel}');
72
// for the marker series
73
series_marker.tooltip().format("{%name} is a city located at latitude {%lat}° and longitude {%long}°");
74
75
// hide the connector marker (arrows) in all states
76
series.normal().markers().size(0);
77
series.hovered().markers().size(0);
78
series.selected().markers().size(0);
79
80
// change the connector series color
81
series.stroke('brown');
82
83
// enable mouse zoom actions
84
map.interactivity().zoomOnMouseWheel(true);
85
map.interactivity().zoomOnDoubleClick(true);
86
87
// add zoom controls
88
var zoomController = anychart.ui.zoom();
89
zoomController.target(map);
90
zoomController.render();
91
92
// set the container id
93
map.container('container');
94
95
// draw the map
96
map.draw();
97
98
});