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
map = anychart.map();
4
5
// create data set
6
var dataSet = anychart.data.set([
7
{'id': 'TD.HD', 'value': 0},
8
{'id': 'TD.KM', 'value': 1},
9
{'id': 'TD.LC', 'value': 2},
10
{'id': 'TD.BA', 'value': 3},
11
{'id': 'TD.BI', 'value': 4},
12
{'id': 'TD.GR', 'value': 5},
13
{'id': 'TD.OA', 'value': 6},
14
{'id': 'TD.LO', 'value': 7},
15
{'id': 'TD.LR', 'value': 8},
16
{'id': 'TD.ME', 'value': 9},
17
{'id': 'TD.TA', 'value': 10},
18
{'id': 'TD.MA', 'value': 11},
19
{'id': 'TD.SA', 'value': 12},
20
{'id': 'TD.NJ', 'value': 13},
21
{'id': 'TD.MW', 'value': 14},
22
{'id': 'TD.BR', 'value': 15},
23
{'id': 'TD.TI', 'value': 16},
24
{'id': 'TD.EN', 'value': 17},
25
{'id': 'TD.CG', 'value': 18},
26
{'id': 'TD.BG', 'value': 19},
27
{'id': 'TD.SI', 'value': 20},
28
{'id': 'TD.MO', 'value': 21}
29
]);
30
31
// create choropleth series
32
series = map.choropleth(dataSet);
33
34
// set geoIdField to 'id', this field contains in geo data meta properties
35
series.geoIdField('id');
36
37
// set map color settings
38
series.colorScale(anychart.scales.linearColor('#deebf7', '#3182bd'));
39
series.hovered().fill('#addd8e');
40
41
// set geo data, you can find this map in our geo maps collection
42
// https://cdn.anychart.com/#maps-collection
43
map.geoData(anychart.maps['chad']);
44
45
//set map container id (div)
46
map.container('container');
47
48
//initiate map drawing
49
map.draw();
50
});