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
dataSetUSA = [
8
{"id": "US.TX", "value": 26956958},
9
{"id": "US.FL", "value": 19552860}
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
// set the geodata
74
map.geoData(anychart.maps.united_states_of_america);
75
// set the series
76
usaSeries = map.choropleth(dataSetUSA);
77
78
// draw the USA map
79
map.container("container");
80
map.draw();
81
82
// load the map of Texas
83
usaSeries.listen("pointClick", function(e) {
84
var id = e.point.get("id");
85
if (id == "US.TX") {
86
87
anychart.data.loadJsonFile("https://cdn.anychart.com/geodata/2.2.0/usa_states/texas/texas.json", function (data){
88
var txMap = anychart.map();
89
txMap.geoData(data);
90
txSeries = txMap.choropleth(dataSetTX);
91
map.drillTo("US.TX", txMap);
92
});
93
}
94
// load the map of Florida
95
if (id == "US.FL") {
96
anychart.data.loadJsonFile("https://cdn.anychart.com/geodata/2.2.0/usa_states/florida/florida.json", function (data){
97
var flMap = anychart.map();
98
flMap.geoData(data);
99
flSeries = flMap.choropleth(dataSetFL);
100
map.drillTo("US.FL", flMap);
101
});
102
}
103
});
104
});