-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
103 lines (91 loc) · 4.62 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html lang="en_US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Live Avian Flu Outbreak 2022 Map</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
<link rel="stylesheet" href="./main.css"/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.4/chroma.min.js"></script>
</head>
<body>
<div id="content">
<div id="wrapper">
<h2>Live Avian Flu (HPAI) 2022 Outbreak Map</h2>
<h4 id="date">Last updated:</h4>
<script>
fetch('./settings.json')
.then(response => response.json())
.then(json => $("#date").html('Last updated: ' + json.date))
</script>
<p>This map highlights counties with reported cases of avian influenza (bird flu) in the United States. The outbreak in 2022 was first reported on January 13 in wild waterfowl killed by hunters.<p>
<p>Wild birds can be infected with HPAI and carry the disease to new areas when migrating, potentially exposing domestic poultry to the virus. Millions of commercial poultry have been culled to prevent the spread, and as a result the price of chicken is rising.</p>
<p><b>Sources:</b>
<ul>
<li><a href="https://www.npr.org/2022/04/06/1091061758/bird-flu-outbreak" target="_blank">What we know about the deadliest U.S. bird flu outbreak in 7 years</a>—NPR</li>
<li><a href="https://www.aphis.usda.gov/aphis/ourfocus/animalhealth/animal-disease-information/avian/avian-influenza/2022-hpai" target="_blank">2022 Detections of Highly Pathogenic Avian Influenza</a>—USDA
</ul>
</p>
<!--<p><input type="checkbox" id="switch-btype" />Toggle report type shown.</p>
<p><input type="checkbox" id="switch-numtype" />Toggle type of number shown.</p>-->
<br>
<table style="width: 100%;" id="legend">
<tr>
<th align="right" style="padding-right: 10px;">Wild Bird Reports</th>
<th align="left" style="padding-left: 10px;">Captive Bird Reports</th>
</tr>
<tr>
<td align="right" style="padding-right: 10px;">
<label class="switch">
<input type="checkbox" id="switch-wild" checked>
<span class="slider"></span>
</label>
</td>
<td align="left" style="padding-left: 10px;">
<label class="switch">
<input type="checkbox" id="switch-captive" checked>
<span class="slider"></span>
</label>
</td>
</tr>
<tr>
<td style="padding-right: 10px;" align="right">
<div id="legendw"></div>
</td>
<td style="padding-left: 10px;" align="left">
<div id="legendc"></div>
</td>
</tr>
</table>
<br>
<p>Select individual counties to view reports from that county. Use the switches above to toggle individual layers.</p>
<p>Reports from wild birds are shown in orange. Reports from captive birds are shown in green. Captive reports come from poultry farms and backyard flocks.</p>
</div>
<small id="creds">Map by <a href="https://rivermont.xyz">Will Bennett</a>, source code available <a href="https://github.com/rivermont/hpai-map">on GitHub</a>.</small>
</div>
<div id="map"></div>
<script src="./map.js"></script>
<script>
// funtionality for layer toggles
$('#switch-captive').change(function() {
if(this.checked) {
map.addLayer(counties_captive);
}
else {
map.removeLayer(counties_captive);
}
});
$('#switch-wild').change(function() {
if(this.checked) {
map.addLayer(counties_wild);
}
else {
map.removeLayer(counties_wild);
}
});
</script>
</body>
</html>