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":"TH.4255","value":0},
8
{"id":"TH.MH","value":1},
9
{"id":"TH.CP","value":2},
10
{"id":"TH.NT","value":3},
11
{"id":"TH.PU","value":4},
12
{"id":"TH.PG","value":5},
13
{"id":"TH.RN","value":6},
14
{"id":"TH.ST","value":7},
15
{"id":"TH.KR","value":8},
16
{"id":"TH.PL","value":9},
17
{"id":"TH.SA","value":10},
18
{"id":"TH.SG","value":11},
19
{"id":"TH.TG","value":12},
20
{"id":"TH.YL","value":13},
21
{"id":"TH.CR","value":14},
22
{"id":"TH.CM","value":15},
23
{"id":"TH.LG","value":16},
24
{"id":"TH.LN","value":17},
25
{"id":"TH.NA","value":18},
26
{"id":"TH.PY","value":19},
27
{"id":"TH.PR","value":20},
28
{"id":"TH.PS","value":21},
29
{"id":"TH.SO","value":22},
30
{"id":"TH.UD","value":23},
31
{"id":"TH.KN","value":24},
32
{"id":"TH.KP","value":25},
33
{"id":"TH.PC","value":26},
34
{"id":"TH.PH","value":27},
35
{"id":"TH.SH","value":28},
36
{"id":"TH.TK","value":29},
37
{"id":"TH.UT","value":30},
38
{"id":"TH.AT","value":31},
39
{"id":"TH.CN","value":32},
40
{"id":"TH.LB","value":33},
41
{"id":"TH.NN","value":34},
42
{"id":"TH.PB","value":35},
43
{"id":"TH.NS","value":36},
44
{"id":"TH.PA","value":37},
45
{"id":"TH.PT","value":38},
46
{"id":"TH.SB","value":39},
47
{"id":"TH.SR","value":40},
48
{"id":"TH.BM","value":41},
49
{"id":"TH.NO","value":42},
50
{"id":"TH.NP","value":43},
51
{"id":"TH.PE","value":44},
52
{"id":"TH.PK","value":45},
53
{"id":"TH.RT","value":46},
54
{"id":"TH.SP","value":47},
55
{"id":"TH.SS","value":48},
56
{"id":"TH.SM","value":49},
57
{"id":"TH.SI","value":50},
58
{"id":"TH.UR","value":51},
59
{"id":"TH.AC","value":52},
60
{"id":"TH.YS","value":53},
61
{"id":"TH.CB","value":54},
62
{"id":"TH.CC","value":55},
63
{"id":"TH.CT","value":56},
64
{"id":"TH.SK","value":57},
65
{"id":"TH.RY","value":58},
66
{"id":"TH.TT","value":59},
67
{"id":"TH.BR","value":60},
68
{"id":"TH.CY","value":61},
69
{"id":"TH.KK","value":62},
70
{"id":"TH.KL","value":63},
71
{"id":"TH.MS","value":64},
72
{"id":"TH.NR","value":65},
73
{"id":"TH.RE","value":66},
74
{"id":"TH.SU","value":67},
75
{"id":"TH.LE","value":68},
76
{"id":"TH.NK","value":69},
77
{"id":"TH.SN","value":70},
78
{"id":"TH.UN","value":71},
79
{"id":"TH.NB","value":72},
80
{"id":"TH.NF","value":73},
81
{"id":"TH.MD","value":74},
82
{"id":"TH.NW","value":75},
83
{"id":"TH.PI","value":76},
84
{"id":"TH.BK","value":77}]
85
);
86
87
// create choropleth series
88
series = map.choropleth(dataSet);
89
90
// set geoIdField to 'id', this field contains in geo data meta properties
91
series.geoIdField('id');
92
93
// set map color settings
94
series.colorScale(anychart.scales.linearColor('#deebf7', '#3182bd'));
95
series.hovered().fill('#addd8e');
96
97
// set geo data, you can find this map in our geo maps collection
98
// https://cdn.anychart.com/#maps-collection
99
map.geoData(anychart.maps['thailand']);
100
101
//set map container id (div)
102
map.container('container');
103
104
//initiate map drawing
105
map.draw();
106
});