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":"IN.AN","value":0},
8
{"id":"IN.AP","value":1},
9
{"id":"IN.AR","value":2},
10
{"id":"IN.AS","value":3},
11
{"id":"IN.BR","value":4},
12
{"id":"IN.CH","value":5},
13
{"id":"IN.CT","value":6},
14
{"id":"IN.DN","value":7},
15
{"id":"IN.DD","value":8},
16
{"id":"IN.DL","value":9},
17
{"id":"IN.GA","value":10},
18
{"id":"IN.GJ","value":11},
19
{"id":"IN.HR","value":12},
20
{"id":"IN.HP","value":13},
21
{"id":"IN.JH","value":14},
22
{"id":"IN.KA","value":15},
23
{"id":"IN.KL","value":16},
24
{"id":"IN.LD","value":17},
25
{"id":"IN.MP","value":18},
26
{"id":"IN.MH","value":19},
27
{"id":"IN.MNL","value":20},
28
{"id":"IN.ML","value":21},
29
{"id":"IN.MZ","value":22},
30
{"id":"IN.NL","value":23},
31
{"id":"IN.OR","value":24},
32
{"id":"IN.PY","value":25},
33
{"id":"IN.PB","value":26},
34
{"id":"IN.RJ","value":27},
35
{"id":"IN.SK","value":28},
36
{"id":"IN.TN","value":29},
37
{"id":"IN.TR","value":30},
38
{"id":"IN.UP","value":31},
39
{"id":"IN.UT","value":32},
40
{"id":"IN.WB","value":33},
41
{"id":"IN.TG","value":34},
42
{"id":"IN.JK","value":35},
43
{"id":"IN.LA","value":36}]
44
);
45
46
// create choropleth series
47
series = map.choropleth(dataSet);
48
49
// set geoIdField to 'id', this field contains in geo data meta properties
50
series.geoIdField('id');
51
52
// set map color settings
53
series.colorScale(anychart.scales.linearColor('#deebf7', '#3182bd'));
54
series.hovered().fill('#addd8e');
55
56
// set geo data, you can find this map in our geo maps collection
57
// https://cdn.anychart.com/#maps-collection
58
map.geoData(anychart.maps['india']);
59
60
//set map container id (div)
61
map.container('container');
62
63
//initiate map drawing
64
map.draw();
65
});