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': 'AF', 'value': 0},
8
{'id': 'AO', 'value': 1},
9
{'id': 'AL', 'value': 2},
10
{'id': 'AE', 'value': 3},
11
{'id': 'AR', 'value': 4},
12
{'id': 'AM', 'value': 5},
13
{'id': 'TF', 'value': 6},
14
{'id': 'AU', 'value': 7},
15
{'id': 'AT', 'value': 8},
16
{'id': 'AZ', 'value': 9},
17
{'id': 'BI', 'value': 10},
18
{'id': 'BE', 'value': 11},
19
{'id': 'BJ', 'value': 12},
20
{'id': 'BF', 'value': 13},
21
{'id': 'BD', 'value': 14},
22
{'id': 'BG', 'value': 15},
23
{'id': 'BA', 'value': 16},
24
{'id': 'BY', 'value': 17},
25
{'id': 'BZ', 'value': 18},
26
{'id': 'BO', 'value': 19},
27
{'id': 'BR', 'value': 20},
28
{'id': 'BN', 'value': 21},
29
{'id': 'BT', 'value': 22},
30
{'id': 'BW', 'value': 23},
31
{'id': 'CF', 'value': 24},
32
{'id': 'CA', 'value': 25},
33
{'id': 'CH', 'value': 26},
34
{'id': 'CL', 'value': 27},
35
{'id': 'CN', 'value': 28},
36
{'id': 'CI', 'value': 29},
37
{'id': 'CM', 'value': 30},
38
{'id': 'Cyprus_U.N._Buffer_Zone', 'value': 31},
39
{'id': 'CD', 'value': 32},
40
{'id': 'CG', 'value': 33},
41
{'id': 'CO', 'value': 34},
42
{'id': 'CR', 'value': 35},
43
{'id': 'CU', 'value': 36},
44
{'id': 'N._Cyprus', 'value': 37},
45
{'id': 'CY', 'value': 38},
46
{'id': 'CZ', 'value': 39},
47
{'id': 'DE', 'value': 40},
48
{'id': 'DJ', 'value': 41},
49
{'id': 'DK', 'value': 42},
50
{'id': 'DO', 'value': 43},
51
{'id': 'DZ', 'value': 44},
52
{'id': 'EC', 'value': 45},
53
{'id': 'EG', 'value': 46},
54
{'id': 'ER', 'value': 47},
55
{'id': 'ES', 'value': 48},
56
{'id': 'EE', 'value': 49},
57
{'id': 'ET', 'value': 50},
58
{'id': 'FI', 'value': 51},
59
{'id': 'FJ', 'value': 52},
60
{'id': 'FK', 'value': 53},
61
{'id': 'FR', 'value': 54},
62
{'id': 'GA', 'value': 55},
63
{'id': 'GB', 'value': 56},
64
{'id': 'GE', 'value': 57},
65
{'id': 'GH', 'value': 58},
66
{'id': 'GN', 'value': 59},
67
{'id': 'GW', 'value': 60},
68
{'id': 'GQ', 'value': 61},
69
{'id': 'GR', 'value': 62},
70
{'id': 'GL', 'value': 63},
71
{'id': 'GT', 'value': 64},
72
{'id': 'GY', 'value': 65},
73
{'id': 'HN', 'value': 66},
74
{'id': 'HR', 'value': 67},
75
{'id': 'HT', 'value': 68},
76
{'id': 'HU', 'value': 69},
77
{'id': 'ID', 'value': 70},
78
{'id': 'IN', 'value': 71},
79
{'id': 'IE', 'value': 72},
80
{'id': 'IR', 'value': 73},
81
{'id': 'IQ', 'value': 74},
82
{'id': 'IS', 'value': 75},
83
{'id': 'IL', 'value': 76},
84
{'id': 'IT', 'value': 77},
85
{'id': 'JO', 'value': 78},
86
{'id': 'JP', 'value': 79},
87
{'id': 'KZ', 'value': 80},
88
{'id': 'KE', 'value': 81},
89
{'id': 'KG', 'value': 82},
90
{'id': 'KH', 'value': 83},
91
{'id': 'KR', 'value': 84},
92
{'id': 'Kosovo', 'value': 85},
93
{'id': 'KW', 'value': 86},
94
{'id': 'LA', 'value': 87},
95
{'id': 'LB', 'value': 88},
96
{'id': 'LR', 'value': 89},
97
{'id': 'LY', 'value': 90},
98
{'id': 'LK', 'value': 91},
99
{'id': 'LS', 'value': 92},
100
{'id': 'LT', 'value': 93},
101
{'id': 'LV', 'value': 94},
102
{'id': 'MA', 'value': 95},
103
{'id': 'MD', 'value': 96},
104
{'id': 'MG', 'value': 97},
105
{'id': 'MX', 'value': 98},
106
{'id': 'MK', 'value': 99},
107
{'id': 'ML', 'value': 100},
108
{'id': 'MM', 'value': 101},
109
{'id': 'ME', 'value': 102},
110
{'id': 'MN', 'value': 103},
111
{'id': 'MZ', 'value': 104},
112
{'id': 'MR', 'value': 105},
113
{'id': 'MW', 'value': 106},
114
{'id': 'MY', 'value': 107},
115
{'id': 'NA', 'value': 108},
116
{'id': 'NC', 'value': 109},
117
{'id': 'NE', 'value': 110},
118
{'id': 'NG', 'value': 111},
119
{'id': 'NI', 'value': 112},
120
{'id': 'NL', 'value': 113},
121
{'id': 'NO', 'value': 114},
122
{'id': 'NP', 'value': 115},
123
{'id': 'NZ', 'value': 116},
124
{'id': 'OM', 'value': 117},
125
{'id': 'PK', 'value': 118},
126
{'id': 'PA', 'value': 119},
127
{'id': 'PE', 'value': 120},
128
{'id': 'PH', 'value': 121},
129
{'id': 'PG', 'value': 122},
130
{'id': 'PL', 'value': 123},
131
{'id': 'PR', 'value': 124},
132
{'id': 'KP', 'value': 125},
133
{'id': 'PT', 'value': 126},
134
{'id': 'PY', 'value': 127},
135
{'id': 'PS', 'value': 128},
136
{'id': 'QA', 'value': 129},
137
{'id': 'RO', 'value': 130},
138
{'id': 'RW', 'value': 131},
139
{'id': 'EH', 'value': 132},
140
{'id': 'SA', 'value': 133},
141
{'id': 'SD', 'value': 134},
142
{'id': 'SS', 'value': 135},
143
{'id': 'SN', 'value': 136},
144
{'id': 'SL', 'value': 137},
145
{'id': 'SV', 'value': 138},
146
{'id': 'Somaliland', 'value': 139},
147
{'id': 'SO', 'value': 140},
148
{'id': 'RS', 'value': 141},
149
{'id': 'SR', 'value': 142},
150
{'id': 'SK', 'value': 143},
151
{'id': 'SI', 'value': 144},
152
{'id': 'SE', 'value': 145},
153
{'id': 'SZ', 'value': 146},
154
{'id': 'SY', 'value': 147},
155
{'id': 'TD', 'value': 148},
156
{'id': 'TG', 'value': 149},
157
{'id': 'TH', 'value': 150},
158
{'id': 'TJ', 'value': 151},
159
{'id': 'TM', 'value': 152},
160
{'id': 'TL', 'value': 153},
161
{'id': 'TN', 'value': 154},
162
{'id': 'TR', 'value': 155},
163
{'id': 'TW', 'value': 156},
164
{'id': 'TZ', 'value': 157},
165
{'id': 'UG', 'value': 158},
166
{'id': 'UA', 'value': 159},
167
{'id': 'UY', 'value': 160},
168
{'id': 'US', 'value': 161},
169
{'id': 'UZ', 'value': 162},
170
{'id': 'VE', 'value': 163},
171
{'id': 'VN', 'value': 164},
172
{'id': 'YE', 'value': 165},
173
{'id': 'ZA', 'value': 166},
174
{'id': 'ZM', 'value': 167},
175
{'id': 'ZW', 'value': 168},
176
{'id': 'RU', 'value': 169}
177
]);
178
179
// create choropleth series
180
series = map.choropleth(dataSet);
181
182
// set geoIdField to 'id', this field contains in geo data meta properties
183
series.geoIdField('id');
184
185
// set map color settings
186
series.colorScale(anychart.scales.linearColor('#deebf7', '#3182bd'));
187
series.hovered().fill('#addd8e');
188
189
// set geo data, you can find this map in our geo maps collection
190
// https://cdn.anychart.com/#maps-collection
191
map.geoData(anychart.maps['world']);
192
193
//set map container id (div)
194
map.container('container');
195
196
//initiate map drawing
197
map.draw();
198
});