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
// This sample uses 3rd party proj4 component
4
// that makes it possible to set coordinates
5
// for the points and labels on the map and
6
// required for custom projections and grid labels formatting.
7
// See https://docs.anychart.com/Maps/Map_Projections
8
9
// create data set
10
var data = [
11
{points: [51.5, -3.2, 57.1, -2.19], from: "Cardiff", to: "Aberdeen", time: "2h 20m"},
12
{points: [55.9, -3.2, 51.45, 0], from: "Edinburgh", to: "London", time: "1h 15m"},
13
{points: [54.7, -5.9, 57.6,-3.9], from: "Dublin", to: "Iverness", time: "1h 15m"}
14
];
15
// create map chart
16
var map = anychart.map();
17
18
//create connector series
19
var series = map.connector(data);
20
21
// changing the curvature of the series
22
series.curvature(0.3);
23
24
// changing the startSize and endSize of the connectors
25
series.startSize(10);
26
series.endSize(0);
27
28
// set geodata
29
map.geoData(anychart.maps['united_kingdom']);
30
31
//set markers
32
series.markers({position: '100%', size: 3, type: 'circle'});
33
series.hovered().markers({position: '100%', size: 3, fill: '#FFCC99', stroke: '2 #E1E1E1', type: 'circle'});
34
series.selected().markers({position: '100%', size: 3, fill: '#FFCC99', stroke: '2 #E1E1E1', type: 'circle'});
35
36
// set colors
37
series.normal().fill("#ef6c00", 0.3);
38
series.hovered().fill("#ef6c00", 0.1);
39
series.selected().fill("#ef6c00", 0.5);
40
series.normal().stroke("#ef6c00");
41
series.hovered().stroke("#ef6c00", 2);
42
series.selected().stroke("#ef6c00", 2);
43
44
// name of the chart
45
map.title("Setting the colors of the connectors");
46
47
series.tooltip().format("A flight from {%from} to {%to} takes at least {%time}");
48
49
// set container id for the chart
50
map.container('container');
51
52
// initiate chart drawing
53
map.draw();
54
});