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/7.14.3/Maps/Map_Projections
8
9
// create data set
10
var data = anychart.data.set([
11
{points: [48.50, 2.20, 48.8, 2.13], from: "Paris", to: "Versailles", take: "bus", stroke:"green"},
12
{points: [48.8, 2.13, 47.31, 5.01], from: "Versailles", to: "Dijon", take: "train", stroke:"navy"},
13
{points: [47.31, 5.01, 45.08, 3.56], from: "Dijon", to: "Beaune", take: "train", stroke:"navy", curvature: -0.5},
14
{points: [45.08, 3.56, 46.95, 4.3], from: "Beaune", to: "Autun", take: "train", stroke:"navy"},
15
{points: [46.95, 4.3, 47.8, 3.8], from: "Autun", to: "Chablis", take: "bus", stroke:"green"},
16
{points: [47.8, 3.8, 48.50, 2.20], from: "Chablis", to: "Paris", take: "bus", stroke:"green"},
17
{points: [48.50, 2.20, 49.4, 1.08], from: "Paris", to: "Rouen, Normady capital", take: "train"},
18
{points: [49.4, 1.08, 49.2, -0.7], from: "Rouen", to: "Bayeux", take: "train", stroke:"navy"},
19
{points: [49.2, -0.7, 48.6, -1.5], from: "Bayeux", to: "Mont Saint-Michel", take: "train", stroke:"navy"},
20
]);
21
22
// create data set for the marker series
23
var data_marker = anychart.data.set([
24
{lat: 48.50, long: 2.20, name: "Paris", label:{position:"bottom", anchor:"top"}, info: "The Capital of France, founded in \nthe 3rd century BC, one of the most \npopular towns in Europe"},
25
{lat: 48.8, long: 2.13, name: "Versailles", label:{position:"right", anchor:"leftBottom"}, info: "The most known showplace in France. \nFrom 1682 to 1789 it de facto \nwas a capital of France"},
26
{lat: 47.31, long: 5.01, name: "Dijon", label:{position:"right", anchor:"leftBottom"}, info: "Being world-famous for its mustard \nand its wine, the medieval city \nof Dijon has the reputation of being \nthe best-kept secret in France"},
27
{lat: 45.08, long: 3.56, name: "Beaune", label:{position:"left", anchor:"rightTop"}, info: "Beanue is a wine capital of Burgundy \nin the C?te d'Or department in eastern France"},
28
{lat: 46.95, long: 4.3, name: "Autun", label:{position:"left", anchor:"rightBottom"}, info: "Augustodunum was founded during the reign \nof the first Roman emperor, Augustus, \nafter whom it was named.\nFamous for St. Lazare's cathedral, \nCouhard Pyramid and the ancient theatre"},
29
{lat: 47.8, long: 3.8, name: "Chablis", label:{position:"left", anchor:"right"}, info: "The village of Chablis gives its name \nto one of the most famous French \nwhite wines. Chablis is made with \nChardonnay, a grape that grows \nparticularly well in the region"},
30
{lat: 49.4, long: 1.08, name: "Rouen", info: "It is the capital of Normandy. \nFormerly one of the largest and \nmost prosperous cities of medieval \nEurope, Rouen was the seat of the \nExchequer of Normandy during the Middle Ages"},
31
{lat: 49.2, long: -0.7, name: "Bayeux", label:{position:"left", anchor:"rightBottom"}, info: "Bayeux is a major tourist attraction, \nbest known to British and French \nvisitors for the Bayeux tapestry. \nThe large Norman-Romanesque and \nGothic Cath?drale Notre-Dame de Bayeux, \nconsecrated in 1077, was arguably \nthe original home of the tapestry"},
32
{lat: 48.6, long: -1.5, name: "Mont Saint-Michel", label:{position:"bottom", anchor:"top"}, info: "It is an island commune in Normandy. \nIt is located about one kilometre \noff the country's northwestern coast,\nat the mouth of the Couesnon River \nnear Avranches. 100 hectares in size. \nAs of 2009, the island has a population of 44."}
33
]);
34
// create map chart
35
var map = anychart.map()
36
37
//create connector series
38
var series = map.connector(data);
39
var series_marker = map.marker(data_marker);
40
41
// changing the curvature of the series
42
series.curvature(0.3);
43
44
// tooltips for the connector series
45
series.tooltip().format("From: {%from} \nTo: {%to} \nThe best way to get there: by {%take}");
46
47
// changing the startSize and endSize of the connectors
48
series.startSize(0);
49
series.endSize(0);
50
51
// setting colors for hovered and selected
52
series.hoverFill("black");
53
series.selectFill("red");
54
series.hoverStroke("black");
55
series.selectStroke("red");
56
57
// setting the marker position
58
var markers = series.markers();
59
markers.position("middle");
60
61
// tooltips of the marker series
62
series_marker.tooltip().format("{%info}");
63
64
// setting the marker type
65
markers.type(anychart.enums.MarkerType.ARROWHEAD);
66
markers.size(7);
67
68
// setting the anchor for the markers
69
markers.anchor("leftCenter");
70
71
// setting the labels
72
var labels = series.labels();
73
labels.enabled(false);
74
75
// set geodata
76
map.geoData(anychart.maps['france']);
77
78
//set series geo id field settings
79
series.markers({fill: '#000', size:10});
80
81
// name of the chart
82
map.title("A trip through France: Burgundy and Normandy");
83
84
// set container id for the chart
85
map.container('container');
86
87
// initiate chart drawing
88
map.draw();
89
});