HTMLcopy
1
<div id="container"></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
3
// define the map
4
var map = anychart.map();
5
6
// set the data for the USA map
7
usaDataSet = [
8
{"id": "US.TX", "value": 26956958, "url": "https://cdn.anychart.com/geodata/2.2.0/usa_states/texas/texas.json"},
9
{"id": "US.FL", "value": 19552860, "url": "https://cdn.anychart.com/geodata/2.2.0/usa_states/florida/florida.json"}
10
];
11
12
// create data set for Texas districts
13
dataSetTX = [
14
{'id': 'US.TX.111', 'value': 6222}, //Dallam
15
{'id': 'US.TX.421', 'value': 3186}, //Sherman
16
{'id': 'US.TX.195', 'value': 5369}, //hansford
17
{'id': 'US.TX.357', 'value': 9006}, //Ochiltree
18
{'id': 'US.TX.295', 'value': 3057}, //Lipscomb
19
{'id': 'US.TX.205', 'value': 5537}, //Hartley
20
{'id': 'US.TX.341', 'value': 20121}, //Moore
21
{'id': 'US.TX.233', 'value': 23857}, //hatchinson
22
{'id': 'US.TX.393', 'value': 887}, //roberts
23
{'id': 'US.TX.211', 'value': 3351}, //Hemphill
24
{'id': 'US.TX.359', 'value': 2185}, //Oldham
25
{'id': 'US.TX.375', 'value': 113546}, //Potter
26
{'id': 'US.TX.065', 'value': 6516}, //Carson
27
{'id': 'US.TX.179', 'value': 22744}, //Gray
28
{'id': 'US.TX.483', 'value': 5284}, //Wheeler
29
{'id': 'US.TX.117', 'value': 18561}, //Deaf Smith
30
{'id': 'US.TX.381', 'value': 104312}, //Randall
31
{'id': 'US.TX.011', 'value': 2148}, //Armstrong
32
{'id': 'US.TX.129', 'value': 3828}, //Donley
33
{'id': 'US.TX.087', 'value': 3206}, //Collingsworth
34
{'id': 'US.TX.369', 'value': 10016}, // Parmer
35
{'id': 'US.TX.069', 'value': 8285}, //Castro
36
{'id': 'US.TX.437', 'value': 8378}, //Swisher
37
{'id': 'US.TX.045', 'value': 1790}, //Briscoe
38
{'id': 'US.TX.191', 'value': 3782}, //Hall
39
{'id': 'US.TX.075', 'value': 7688}, //Childress
40
];
41
42
// create data set for Florida districts
43
dataSetFL = [
44
{'id': 'US.FL.063', 'value': 46755}, //Jackson]
45
{'id': 'US.FL.091', 'value': 170498}, //Okaloosa
46
{'id': 'US.FL.077', 'value': 7021}, //Liberty County
47
{'id': 'US.FL.079', 'value': 18733}, //Madison
48
{'id': 'US.FL.039', 'value': 45087}, //Gadsden
49
{'id': 'US.FL.067', 'value': 7022}, //Lafayette
50
{'id': 'US.FL.123', 'value': 19256}, //Taylor
51
{'id': 'US.FL.113', 'value': 117743}, //Santa Rosa
52
{'id': 'US.FL.029', 'value': 13827}, //Dixie
53
{'id': 'US.FL.037', 'value': 11057}, //Franklin
54
{'id': 'US.FL.131', 'value': 40601}, //Walton
55
{'id': 'US.FL.129', 'value': 22863}, //Wakulla
56
{'id': 'US.FL.005', 'value': 159238}, //Bay
57
{'id': 'US.FL.075', 'value': 34450}, //Levy
58
{'id': 'US.FL.083', 'value': 258916}, //Marion
59
{'id': 'US.FL.121', 'value': 34844}, //Suwannee
60
{'id': 'US.FL.065', 'value': 12902}, //Jefferson
61
{'id': 'US.FL.023', 'value': 56513}, //Columbia
62
{'id': 'US.FL.003', 'value': 22259}, //Baker
63
{'id': 'US.FL.073', 'value': 239452}, //Leon
64
{'id': 'US.FL.033', 'value': 294210}, //Escambia
65
{'id': 'US.FL.041', 'value': 14437}, //Gilchrist
66
{'id': 'US.FL.047', 'value': 13327}, //Hamilton
67
{'id': 'US.FL.013', 'value': 13017}, //Calhoun
68
{'id': 'US.FL.125', 'value': 13442}, //Union
69
{'id': 'US.FL.059', 'value': 18564}, //Holmes
70
{'id': 'US.FL.133', 'value': 20973}, //Washington
71
];
72
73
// a dataset array for setting the series inside the states
74
dataSets = {
75
"US.TX": dataSetTX,
76
"US.FL": dataSetFL
77
}
78
79
// set the geodata
80
map.geoData(anychart.maps.united_states_of_america);
81
// set the series
82
usaSeries = map.choropleth(usaDataSet);
83
84
// draw the USA map
85
map.container("container");
86
87
// load the map using AJAX
88
usaSeries.listen("pointClick", function(e) {
89
loadMap(e.point.get("id"), e.point.get("url"), map);
90
});
91
92
map.draw();
93
});
94
95
// load the map
96
function loadMap(id, url, map){
97
anychart.data.loadJsonFile(url, function (data){
98
// create a map to load
99
var drillMap = anychart.map();
100
// put the data into the map
101
drillMap.geoData(data);
102
drillMapSeries = drillMap.choropleth(drillMap.choropleth(dataSets[id]));
103
map.drillTo(id, drillMap);
104
});
105
}