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 dataSet = anychart.data.set([
11
{'id': 'Sydney', 'size': 106, "lat": -33.51, "lon": 151.11},
12
{'id': 'Cape York', 'size': 103, "lat": -10.41, "lon": 142.22}, //north point/
13
{'id': 'Cape South-Point', 'size': 109, "lat": -39.08, "lon": 142.22}, //south
14
{'id': 'Cape Byron', 'size': 108, "lat": -28.36, "lon": 153.38}, //east point/
15
{'id': 'Steep-Point Cape', 'size': 95, "lat": -26.09, "lon": 113.09},
16
{"id": 'Alice Springs', 'size': 100, "lat": -23.69, "long": 133.87},
17
{"id": 'Adelaide', 'size': 99, "lat": -34.98, "long": 138.42}
18
]);
19
20
// create map chart
21
var map = anychart.map();
22
23
// set geodata using https://cdn.anychart.com/geodata/1.2.0/countries/australia/australia.js
24
map.geoData(anychart.maps.australia);
25
26
//create bubble series
27
var series = map.bubble(dataSet);
28
29
//set series geo id field settings
30
series.labels().format(function(){
31
return (this.id);
32
});
33
34
series.tooltip().format(function(){
35
return (this.size + "th of tourists");
36
});
37
38
series.tooltip().titleFormat(function(){
39
return (this.id);
40
});
41
42
map.title("Most popluar places \n of touristic interest in 2013");
43
44
// change the bubble max size
45
map.maxBubbleSize(45);
46
map.minBubbleSize(15);
47
48
// set container id for the chart
49
map.container('container');
50
// initiate chart drawing
51
map.draw();
52
});