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 the region id
10
var dataSet_id = anychart.data.set([
11
{"id": "AU.NS", "farms": 240},
12
{"id": "AU.NT", "farms": 202},
13
{"id": "AU.WA", "farms": 193},
14
{"id": "AU.SA", "farms": 196},
15
{"id": "AU.VI", "farms": 48},
16
{"id": "AU.TS", "farms": 13},
17
{"id": "AU.QL", "farms": 136}
18
]);
19
20
var australiaMap = anychart.map();
21
australiaMap.geoData(anychart.maps.australia);
22
23
// Creates the marker series
24
var series_id = australiaMap.marker(dataSet_id);
25
26
//format the labels of the id-defined series
27
series_id.labels().format(function(e){
28
return e.name;
29
});
30
31
series_id.tooltip().format("Id: {%id} \nSheep farms: {%farms}");
32
33
// hovered and selected labels
34
series_id.hoverLabels().fontColor("black");
35
series_id.selectLabels().fontColor("red");
36
37
australiaMap.title("Marker series on a map");
38
australiaMap.interactivity().zoomOnMouseWheel(false);
39
australiaMap.container("container");
40
australiaMap.draw();
41
});