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]},
6
{points: [36.05, 103.79, 40.14, 94.66]},
7
{points: [40.14, 94.66, 38.14, 85.52]},
8
{points: [38.14, 85.52, 37.11, 79.91]},
9
{points: [37.11, 79.91, 39.46, 75.99]},
10
{points: [39.46, 75.99, 37.66, 62.16]},
11
{points: [37.66, 62.16, 35.68, 51.38]},
12
{points: [35.68, 51.38, 33.31, 44.36]},
13
{points: [33.31, 44.36, 36.19, 36.16]},
14
{points: [36.19, 36.16, 37.98, 23.72]},
15
{points: [37.98, 23.72, 45.44, 12.31]}
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 container id
57
map.container('container');
58
59
// draw the map
60
map.draw();
61
62
});