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 the dataset of points that are defined by latitude and longtitude values
10
var data = [
11
{lat: -25.75, long: 122.18, name: "ACME Corp. branch #1", value: 321},
12
{lat: -18.50, long: 135.24, name: "ACME Corp. branch #2", value: 293},
13
{lat: -23.12, long: 148.62, name: "ACME Corp. branch #3", value: 312},
14
{lat: -17.89, long: 145.09, name: "ACME Corp. branch #4", value: 198},
15
{lat: -33.28, long: 135.58, name: "ACME Corp. branch #5", value: 309},
16
{lat: -31.21, long: 116.44, name: "ACME Corp. branch #6", value: 215},
17
{lat: -32.26, long: 151.44, name: "ACME Corp. branch #7", value: 219},
18
{lat: -25.63, long: 152.37, name: "ACME Corp. branch #8", value: 179}
19
];
20
21
var map = anychart.map();
22
map.geoData(anychart.maps.australia);
23
24
// Creates the marker series
25
var series_lat_long = map.marker(data);
26
27
// format the tooltips of the lat_long series
28
series_lat_long.tooltip().titleFormat("{%name}");
29
series_lat_long.tooltip().format("Yearly profit: ${%value}m");
30
31
map.title("Marker series defined by latitude and longitude");
32
33
map.container("container");
34
map.draw();
35
});