-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
165 lines (143 loc) · 10.2 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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<!-- Google Tag Manager -->
<script>
(function (w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != "dataLayer" ? "&l=" + l : "";
j.async = true;
j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, "script", "dataLayer", "GTM-KLJNT5P");
</script>
<!-- End Google Tag Manager -->
<title>Mapping California's Wildfires</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'>
<!-- Twitter summary card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Mapping California's Wildfires" />
<meta name="twitter:url" content="https://projects.capradio.org/california-wildfire-map" />
<meta name="twitter:image"
content="https://projects.capradio.org/california-wildfire-map/assets/california-wildfire-map-image.jpg" />
<meta name="twitter:description"
content="See the location and some perimeters of wildfires currently burning in California. Updated hourly, the map is based on data from local, state and federal agencies." />
<!-- Social sharing meta -->
<meta property="og:type" content="article" />
<meta property="og:title" content="Mapping California's Wildfires" />
<meta property="og:url" content="https://projects.capradio.org/california-wildfire-map" />
<meta property="og:image"
content="https://projects.capradio.org/california-wildfire-map/assets/california-wildfire-map-image.jpg" />
<meta property="og:description"
content="See the location and some perimeters of wildfires currently burning in California. Updated hourly, the map is based on data from local, state and federal agencies." />
<!-- Styles -->
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.css'>
<link rel='stylesheet'
href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.2/mapbox-gl-geocoder.css'
type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel='stylesheet' href='styles/style.processed.css'>
<!-- JS -->
<script src='https://pym.nprapps.org/pym.v1.min.js'></script>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>
<script src='https://api.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.js'></script>
<script
src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.2/mapbox-gl-geocoder.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>
<script src="https://unpkg.com/tabbable/dist/index.umd.js"></script>
<script src="https://unpkg.com/focus-trap/dist/focus-trap.umd.js"></script>
</head>
<body aria-live="polite">
<header>
<h1>Mapping</br>California’s</br>Wildfires</h1>
</header>
<div id="modal" class="modal animated-dialog" aria-hidden="false">
<div id="modal-content" class="modal-content" aria-hidden="false">
<button id="close">
<span class="material-icons material-icons-outlined">
close
</span>
</button>
<h2 id="about-heading" class="about">About this map</h1>
<p>By George LeVines</p>
<p>This map is for general information purposes only and should not be used in an emergency or for
planning travel.</p>
<p>Hotspot <svg viewBox="0 0 15 15" class="about-svg" style="margin-bottom: -2px;" width="11px"
height="15px" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
<path
d="M 15 7.5 C 15 11.642 11.642 15 7.5 15 C 3.358 15 0 11.642 0 7.5 C 0 3.358 3.358 0 7.5 0 C 11.642 0 15 3.358 15 7.5 Z"
style="fill: firebrick;" bx:origin="0 0" />
</svg> data comes from four <a href="https://firms.modaps.eosdis.nasa.gov/" target="_blank">NASA</a>
satellites. A cluster of hotspots can represent an emerging wildfire or burn activity at the edge of
a fire perimeter. However, satellite imaging can sometimes capture bright things such as solar panel
glare and byproduct burnoff at oil refineries. It also may miss some hotspots due to cloud cover or
smoke plumes. Always check with your local fire department for more information.</p>
<p>Most recent perimeter <svg class="about-svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" width="14.999997"
height="15.000007" viewBox="0 0 3.9687492 3.9687519" version="1.1" id="svg5"
inkscape:version="1.1.1 (c3084ef, 2021-09-22)" sodipodi:docname="poly_icon.svg">
<sodipodi:namedview id="namedview7" pagecolor="#ffffff" bordercolor="#111111" borderopacity="1"
inkscape:pageshadow="0" inkscape:pageopacity="0" inkscape:pagecheckerboard="1"
inkscape:document-units="px" showgrid="false" inkscape:zoom="9.591727"
inkscape:cx="59.895366" inkscape:cy="26.637539" inkscape:window-width="1440"
inkscape:window-height="847" inkscape:window-x="0" inkscape:window-y="25"
inkscape:window-maximized="0" inkscape:current-layer="layer1" units="px" fit-margin-top="0"
fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0"></sodipodi:namedview>
<defs id="defs2"></defs>
<g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1"
transform="translate(-0.04463171,-0.04388963)">
<path sodipodi:type="star"
style="fill:#ffa700;fill-opacity:1;fill-rule:evenodd;top: 10px;left: 10px;" id="path33"
inkscape:flatsided="false" sodipodi:sides="5" sodipodi:cx="95.189667"
sodipodi:cy="222.70792" sodipodi:r1="193.44685" sodipodi:r2="132.29352"
sodipodi:arg1="-0.22471116" sodipodi:arg2="0.13548742" inkscape:rounded="0.12"
inkscape:randomized="0.3"
d="m 323.00124,142.39346 c 7.03064,4.97817 -36.72118,64.43318 -44.52716,71.077 -14.11409,12.01278 -47.36382,173.60457 -59.70746,188.05395 -6.82681,7.99141 -52.83044,-40.51866 -61.86161,-44.36679 -16.32938,-6.95785 -175.976255,39.26323 -186.455445,25.90526 -5.79565,-7.3878 45.42205,-42.69365 40.01863,-50.49988 C 0.69820232,318.44845 -116.50949,187.43013 -121.27342,169.48503 -123.90818,159.56027 -16.953793,75.514741 -6.6749331,73.986286 11.910406,71.222666 84.502305,11.366624 102.17365,16.657075 c 9.77336,2.925952 -0.81425,107.569235 9.09224,111.900225 17.91206,7.83094 199.02316,4.83506 211.73535,13.83616 z"
transform="matrix(0.00891685,0,0,0.01027946,1.1264355,-0.12393451)"
inkscape:transform-center-x="-0.060087351" inkscape:transform-center-y="-0.12551184">
</path>
</g>
</svg> and fire origin <svg class="about-svg" xmlns="http://www.w3.org/2000/svg"
enable-background="new 0 0 24 24" height="16px" viewBox="0 0 24 24" width="16px"
fill="CornflowerBlue">
<g>
<rect fill="none" height="24" width="24" y="0"></rect>
</g>
<g>
<path
d="M19.48,12.35c-1.57-4.08-7.16-4.3-5.81-10.23c0.1-0.44-0.37-0.78-0.75-0.55C9.29,3.71,6.68,8,8.87,13.62 c0.18,0.46-0.36,0.89-0.75,0.59c-1.81-1.37-2-3.34-1.84-4.75c0.06-0.52-0.62-0.77-0.91-0.34C4.69,10.16,4,11.84,4,14.37 c0.38,5.6,5.11,7.32,6.81,7.54c2.43,0.31,5.06-0.14,6.95-1.87C19.84,18.11,20.6,15.03,19.48,12.35z M10.2,17.38 c1.44-0.35,2.18-1.39,2.38-2.31c0.33-1.43-0.96-2.83-0.09-5.09c0.33,1.87,3.27,3.04,3.27,5.08C15.84,17.59,13.1,19.76,10.2,17.38z">
</path>
</g>
</svg> data comes from the Wildland Fire Interagency Geospatial Services Group. Fires covering less
than 10 acres or without perimeter data are omitted. For more information about
<a href="https://data-nifc.opendata.arcgis.com/datasets/nifc::wfigs-current-wildland-fire-perimeters/about"
target="_blank">
perimeter data click here</a> and for
<a href="https://data-nifc.opendata.arcgis.com/datasets/nifc::wfigs-current-wildland-fire-locations/about"
target="_blank">
origin points click here</a>.
</p>
<p>All data is a best approximation given the available technology and air and ground resources.</p>
<p><strong>Accessibility:</strong> This map is navigable using the keyboard arrow keys and plus and
minus symbols when the entire window is tab selected.</p>
<p id="lastUpdated" class="lastUpdated">Map data last updated on </p>
</div>
</div>
<button id="modalBtn" class="mapbox-control-top-left about" id="" aria-describedby="about-heading">
About this map
</button>
<div id="map">
<nav id="menu"></nav>
</div>
<div id="warning" class="toggle-content is-visible">
<p>Map is for general information only. Not intended for emergencies!</p>
</div>
<script src="scripts/index.js"></script>
</body>
</html>