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":"NR.NI","value":0},
8
{"id":"NR.DE","value":1},
9
{"id":"NR.AI","value":2},
10
{"id":"NR.BU","value":3},
11
{"id":"NR.BO","value":4},
12
{"id":"NR.YA","value":5},
13
{"id":"NR.ME","value":6},
14
{"id":"NR.AR","value":7},
15
{"id":"NR.IJ","value":8},
16
{"id":"NR.AB","value":9},
17
{"id":"NR.AT","value":10},
18
{"id":"NR.EW","value":11},
19
{"id":"NR.BA","value":12},
20
{"id":"NR.UA","value":13}]
21
);
22
23
// create choropleth series
24
series = map.choropleth(dataSet);
25
26
// set geoIdField to 'id', this field contains in geo data meta properties
27
series.geoIdField('id');
28
29
// set map color settings
30
series.colorScale(anychart.scales.linearColor('#deebf7', '#3182bd'));
31
series.hovered().fill('#addd8e');
32
33
// set geo data, you can find this map in our geo maps collection
34
// https://cdn.anychart.com/#maps-collection
35
map.geoData(anychart.maps['nauru']);
36
37
//set map container id (div)
38
map.container('container');
39
40
//initiate map drawing
41
map.draw();
42
});