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":"AF.BG","value":0},
8
{"id":"AF.HR","value":1},
9
{"id":"AF.BM","value":2},
10
{"id":"AF.BK","value":3},
11
{"id":"AF.FB","value":4},
12
{"id":"AF.JW","value":5},
13
{"id":"AF.GR","value":6},
14
{"id":"AF.SP","value":7},
15
{"id":"AF.FH","value":8},
16
{"id":"AF.HM","value":9},
17
{"id":"AF.NM","value":10},
18
{"id":"AF.OZ","value":11},
19
{"id":"AF.2015","value":12},
20
{"id":"AF.KD","value":13},
21
{"id":"AF.ZB","value":14},
22
{"id":"AF.GZ","value":15},
23
{"id":"AF.KT","value":16},
24
{"id":"AF.PK","value":17},
25
{"id":"AF.BD","value":18},
26
{"id":"AF.NR","value":19},
27
{"id":"AF.KR","value":20},
28
{"id":"AF.KZ","value":21},
29
{"id":"AF.NG","value":22},
30
{"id":"AF.TK","value":23},
31
{"id":"AF.BL","value":24},
32
{"id":"AF.KB","value":25},
33
{"id":"AF.KP","value":26},
34
{"id":"AF.PV","value":27},
35
{"id":"AF.LA","value":28},
36
{"id":"AF.LW","value":29},
37
{"id":"AF.2033","value":30},
38
{"id":"AF.SM","value":31},
39
{"id":"AF.VR","value":32},
40
{"id":"AF.PT","value":33}]
41
);
42
43
// create choropleth series
44
series = map.choropleth(dataSet);
45
46
// set geoIdField to 'id', this field contains in geo data meta properties
47
series.geoIdField('id');
48
49
// set map color settings
50
series.colorScale(anychart.scales.linearColor('#deebf7', '#3182bd'));
51
series.hovered().fill('#addd8e');
52
53
// set geo data, you can find this map in our geo maps collection
54
// https://cdn.anychart.com/#maps-collection
55
map.geoData(anychart.maps['afghanistan']);
56
57
//set map container id (div)
58
map.container('container');
59
60
//initiate map drawing
61
map.draw();
62
});