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 the dataset of points that are defined by latitude and longtitude values
10
var dataSet_lat_long = anychart.data.set([
11
{lat: -25.75, long: 122.18, name: "ACME Corp. branch No. 1", value: 321},
12
{lat: -18.50, long: 135.24, name: "ACME Corp. branch No. 2", value: 293},
13
{lat: -23.12, long: 148.62, name: "ACME Corp. branch No. 3", value: 312},
14
{lat: -17.89, long: 145.09, name: "ACME Corp. branch No. 4", value: 198},
15
{lat: -33.28, long: 135.58, name: "ACME Corp. branch No. 5", value: 309},
16
{lat: -31.21, long: 116.44, name: "ACME Corp. branch No. 6", value: 215},
17
{lat: -32.26, long: 151.44, name: "ACME Corp. branch No. 7", value: 219},
18
{lat: -25.63, long: 152.37, name: "ACME Corp. branch No. 8", value: 179}
19
]);
20
21
// create the dataset of points that are defined by the region id
22
var dataSet_id = anychart.data.set([
23
{"id": "AU.NS", "farms": 240},
24
{"id": "AU.NT", "farms": 202},
25
{"id": "AU.WA", "farms": 193},
26
{"id": "AU.SA", "farms": 196},
27
{"id": "AU.VI", "farms": 48},
28
{"id": "AU.TS", "farms": 13},
29
{"id": "AU.QL", "farms": 136}
30
]);
31
32
var australiaMap = anychart.map();
33
australiaMap.geoData(anychart.maps.australia);
34
35
// Creates the marker series
36
var series_lat_long = australiaMap.marker(dataSet_lat_long);
37
var series_id = australiaMap.marker(dataSet_id);
38
39
// format the tooltips of the lat_long series
40
series_lat_long.tooltip().titleFormat(function(){
41
return this.getData("name");
42
});
43
44
series_lat_long.tooltip().format("Yearly profit: ${%value}m");
45
46
// format the tooltips of the id-defined series
47
series_id.tooltip().titleFormat(function(){
48
return this.name;
49
});
50
series_id.tooltip().format("Sheep farms: {%farms}");
51
52
//format the labels of the id-defined series
53
series_id.labels().format(function(e){
54
return this.name;
55
});
56
57
// format the labels of the series defined by latiude and longtitude
58
series_lat_long.labels(false);
59
60
// turn off the labels of the second series for creating less chaos in a map
61
series_lat_long.hoverLabels(false);
62
series_lat_long.selectLabels(false);
63
64
// hovered and selected labels
65
series_id.hoverLabels().fontColor("black");
66
series_id.selectLabels().fontColor("red");
67
68
// change the color of the lat-long series
69
series_lat_long.stroke("green");
70
series_lat_long.fill("gold");
71
72
// make the markers of the series with id bigger
73
series_id.size("10");
74
series_id.hoverSize("10");
75
76
australiaMap.title("Series of both types put on one map");
77
australiaMap.interactivity().zoomOnMouseWheel(false);
78
australiaMap.container("container");
79
australiaMap.draw();
80
});