HTMLcopy
1
<div id="container">
2
</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
// create map
3
var map = anychart.map();
4
5
// create data set
6
var dataSet = anychart.data.set(
7
[{"id":"0","value":0},
8
{"id":"SG.SW","value":1},
9
{"id":"SG.JI","value":2},
10
{"id":"SG.CS","value":3},
11
{"id":"SG.NW","value":4},
12
{"id":"SG.NE","value":5},
13
{"id":"SG.SE","value":6}]
14
);
15
16
// create choropleth series
17
series = map.choropleth(dataSet);
18
19
// set geoIdField to 'id', this field contains in geo data meta properties
20
series.geoIdField('id');
21
22
// set map color settings
23
series.colorScale(anychart.scales.linearColor('#deebf7', '#3182bd'));
24
series.hovered().fill('#addd8e');
25
26
// set geo data, you can find this map in our geo maps collection
27
// https://cdn.anychart.com/#maps-collection
28
map.geoData(anychart.maps['singapore']);
29
30
//set map container id (div)
31
map.container('container');
32
33
//initiate map drawing
34
map.draw();
35
});