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: [50.8, -3.6, 50.8, -1.6]},
12
{points: [50.8, -1.6, 51.5, -0.16], stroke:'navy', to: "New Forest National Park", marker: {fill: "#9fa8da"}},
13
{points: [51.5,-0.16, 51.7, -1.29]},
14
{points: [51.7, -1.29, 52.2, 0.27]},
15
{points: [52.2, 0.27, 53.3, -1.5], to: "Cambridge"},
16
{points: [53.3, -1.5, 54.5,-3.4], to: "Edinburgh"},
17
{points: [54.5, -3.4, 57.1, -2.19], stroke:'green', to: "Aberdeen"}
18
];
19
// create map chart
20
var map = anychart.map();
21
22
//create connector series
23
var series = map.connector(data);
24
25
// set geodata
26
map.geoData(anychart.maps['united_kingdom']);
27
28
//set markers
29
series.markers({position: '100%', size: 3, type: 'circle'});
30
series.hovered().markers({position: '100%', size: 3, fill: '#1976d2', stroke: '2 #E1E1E1', type: 'circle'});
31
series.selected().markers({position: '100%', size: 3, fill: '#1976d2', stroke: '2 #E1E1E1', type: 'circle'});
32
33
// name of the chart
34
map.title("Defining some series settings through the dataSet");
35
36
// set container id for the chart
37
map.container('container');
38
39
// initiate chart drawing
40
map.draw();
41
});