-
Notifications
You must be signed in to change notification settings - Fork 0
/
radar.html
316 lines (285 loc) · 29.3 KB
/
radar.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
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
<!DOCTYPE html>
<html>
<head>
<!--Tab title and icon-->
<title>Live Radar - The Weather Team </title>
<link rel="icon" type="image/png" href="https://busybird15.github.io/assets/twt-round.png">
<!--Set charset and dizable zoom...-->
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!--Links to the Leaflet CSS/JS-->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet"/>
<!--Links to the Google icon set-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
<!--Links to the font used-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap" rel="stylesheet">
<!--Links to the ESRI extension for hurricanes-->
<script src="https://unpkg.com/esri-leaflet/dist/esri-leaflet.js"></script>
<!--CSS-->
<link rel="stylesheet" href="radarstyle.css"></link>
<!--JS is added at the end of the body after elements are constructed-->
</head>
<body style="font-size: 18px;">
<div style="position: absolute; right: 20px; top: 20px;">
<div class="overlay-object" id="timestamp" style="cursor: default; text-align:center; position: relative;">Loading...</div>
</div>
<div id="desktopctrl" style="display:block; position: absolute; left: 50%; bottom: 20px;">
<div id="radarctrlsdiv" class="overlay-object" style="position: relative; left: -50%;">
<ul id="radarctrls" style="text-align: center; padding-left: 0px; margin: 0px; font-size: 0px;">
<li class="sli"><button title="Go to first frame" onclick="stop(); showFrame(0); return;" class="material-symbols-outlined">first_page</button></li>
<li class="sli"><button title="Go back one frame" onclick="stop(); showFrame(animationPosition - 1); return;" class="material-symbols-outlined">skip_previous</button></li>
<li class="sli"><button title="Pause or play the animation" onclick="playStop();" id="stbtn" class="material-symbols-outlined">play_arrow</button></li>
<li class="sli"><button title="Go forward one frame" onclick="stop(); showFrame(animationPosition + 1); return;" class="material-symbols-outlined">skip_next</button></li>
<li class="sli"><button title="Go to last frame" onclick="stop(); showFrame(1000); return;" class="material-symbols-outlined" style="margin-right: 20px;">last_page</button></li>
<li class="sli"><button onclick="refresh();" id="hoverButton" class="material-symbols-outlined" >refresh</button></li>
<li class="sli"><button title="Open the settings menu" onclick="settingsModal();" id="modalBtn" class="material-symbols-outlined">settings</button></li>
<!--<li class="sli"><button onclick="toggleLayerModal();" id="layerBtn" class="material-symbols-outlined">layers</button></li>-->
<li class="sli"><button title="Open the credits menu" onclick="toggleInfoModal();" id="layerBtn" class="material-symbols-outlined">info</button></li>
</ul>
</div>
</div>
<!--Individual refresh-->
<div id="contextMenu" style="text-align: center;" class="hidden">
<h4 style="justify-content: center; margin-top: 0px; margin-bottom: 5px;"><b>Individual refresh</b></h4>
<button style="margin-bottom: 5px" onclick="loadRadar();">Refresh radar</button>
<button style="margin-bottom: 5px" onclick="map.eachLayer(function(layer){if(layer instanceof L.Polygon){map.removeLayer(layer);}}); loadAlerts(); loadWatches(); if (showspcOutlooks){loadOutlook();}">Refresh alerts</button>
<button style="margin-bottom: 5px" onclick="map.eachLayer(function(layer){if (layer instanceof L.Marker){map.removeLayer(layer);}}); loadReports(); ">Refresh reports</button>
<h4 style="justify-content: center; margin-top: 5px; margin-bottom: 5px;"><b>Auto-refresh interval</b></h4>
<input disabled="disabled" placeholder="in seconds, 0 for never" style="border-radius: 3px; border: 0px; padding: 3px;" type="number"></input>
</div>
<div style="position: absolute; left: 50%; bottom: 90px;">
<div id="settingsModal" class="overlay-object" style="width: 330px; padding: 20px; display: none; position: relative; left: -50%; height: 310px;">
<button onclick="closeSettings();" class="close"><div class="material-symbols-outlined" style="font-size: 16px;">close</div></button>
<div style="height: 240px; overflow-y: scroll; overflow-x: hidden; scrollbar-width: none; margin-bottom: 10px;">
<div id="mapsett">
<h3 style="justify-content: center; margin-top: 0px;"><b>Map Settings</b></h3>
<p style="margin-bottom: 1px; margin-top: 1px;">Map Theme</p>
<input type="radio" name="theme" checked="checked" id="light" onchange="setMapType('light');">Light <input type="radio" id="dark" name="theme" onchange="setMapType('dark');">Dark<br>
<p style="margin-bottom: 1px;">Current SPC Outlook</p>
<input type="radio" name="showoutlook" checked="checked" id="showoutlook" onchange="showOutlooks(true);">Show <input type="radio" id="hideoutlook" name="showoutlook" onchange="showOutlooks(false);">Hide<br>
<p style="margin-bottom: 1px;"><b>NEW</b> Hurricane Tracks</p>
<input type="radio" name="hurricanes" checked="checked" id="showhurricanes" onchange="toggleHurricanes(true);">Show <input type="radio" id="hidehurricanes" name="hurricanes" onchange="toggleHurricanes(false);">Hide<br>
<p style="margin-bottom: 1px;">Show Current Location</p>
<input style="padding-left: 5px;" type="checkbox" id="location" onchange="showLocation();" name="location" value="location"><p style="padding-left: 5px; margin: 4px; display: inline;">Display location</p><br>
<div style="margin-left: 25px; display: flex; flex-direction: row; align-items: center; margin-top: 2px; ">
<p style="margin: 5px 0px 0px 0px; color: rgb(2, 255, 2)" class="material-symbols-outlined">verified_user</p>
<p style="margin: 5px 0px 0px 5px;">Your location is never saved, sent, or sold.</p>
</div><br>
<p style="margin-bottom: 1px; margin-top: 1px;">Show YouTube Embed Player</p>
<input type="radio" name="embed" checked="checked" id="embedid" onchange="showEmbed(true);">Show <input type="radio" id="embedidN" name="embed" onchange="showEmbed(false);">Hide<br>
<div style="margin-left: 25px; display: flex; flex-direction: row; align-items: center; margin-top: 2px; ">
<p style="margin: 5px 0px 0px 0px; color: lightblue" class="material-symbols-outlined">info</p>
<p style="margin: 5px 0px 0px 5px;">YouTube Embed Player is not available in small windows and on mobile. <a style="cursor: pointer;" onclick="openModal(3);">How to use the player</a></p>
</div><br>
</div>
<div id="radarsett" style="display: none;">
<h3 style="justify-content: center; margin-top: 0px;"><b>Radar Settings</b></h3>
<p style="margin-bottom: 1px; margin-top: 1px;">Radar Type</p>
<input type="radio" name="kind" checked="checked" id="radar" onchange="setKind('radar')">Radar <input type="radio" id="satellite" name="kind" onchange="setKind('satellite')">Infrared Satellite<br>
<p style="margin-bottom: 1px;">Radar Time</p>
<input type="radio" name="duration" checked="checked" id="past" onchange="setKind('past')">Past <input type="radio" name="duration" id="future" onchange="setKind('future')">Past + Future<br>
<p style="margin-bottom: 1px;">Snow Colors</p>
<input type="radio" name="snowColor" id="snow" onchange="setKind('snow')">Treat as snow <input type="radio" id="rain" name="snowColor" checked="checked" onchange="setKind('rain')">Treat as rain<br>
<p style="margin-bottom: 1px;">Radar Smoothing</p>
<input type="radio" name="smoothing" id="rough" checked="checked" onchange="setKind('smooth')">Smooth <input type="radio" id="smooth" name="smoothing" onchange="setKind('rough')">Rough<br>
<p style="margin-bottom: 1px;">Radar Opacity</p>
<input width="250px" type="range" min="1" max="100" value="75" class="slider" id="radop" onchange="radarOpacityChange()" title="Radar Opacity"><br>
<p style="margin-bottom: 1px;">Radar Color Scheme</p>
<select id="colors" onchange="setColors(); return;">
<option value="0">Monochrome</option>
<option value="1">Fruit</option>
<option value="2">Flames</option>
<option value="3">Titan</option>
<option value="4">The Weather Channel</option>
<option value="5">WeatherBug</option>
<option value="6" selected="selected">The Weather Team</option>
<option value="7">Juice</option>
<option value="8">Dark Sky</option>
</select>
</div>
<div id="alertsett" style="display: none;">
<h3 style="justify-content: center; margin-top: 0px;"><b>Alert Settings</b></h3>
<p style="margin-bottom: 1px;">Alert Fill Opacity</p>
<input width="250px" type="range" min="1" max="100" value="40" class="slider" id="alop" onchange="alertOpacityChange()" title="Alert Opacity">
<p style="margin-bottom: 1px;">Warnings to Show</p>
<div class="alertlist" style="border-left: 0px;">
<input style="padding-left: 5px;" type="checkbox" id="tor" onchange="torChange()" name="tor" checked="checked" value="tor"><p style="padding-left: 5px; color: red; margin: 4px; display: inline;"><b>RED: </b>Tornado Warning</p>
<br>
<input style="padding-left: 5px;" type="checkbox" id="svr" onchange="svrChange()" name="svr" checked="checked" value="svr"><p style="padding-left: 5px; color: rgb(236, 193, 0); margin: 4px; display: inline;"><b>YELLLOW: </b>Severe T-storm Warning</p>
<br>
<input style="padding-left: 5px;" type="checkbox" id="flood" onchange="floodChange()" name="flood" checked="checked" value="flood"><p style="padding-left: 2px; color: magenta; margin: 4px; display: inline;"><b>MAGENTA: </b>Flood Warning</p>
<br>
<input style="padding-left: 5px;" type="checkbox" id="fflood" onchange="ffloodChange()" name="fflood" checked="checked" value="fflood"><p style="padding-left: 2px; color: rgb(1, 233, 1); margin: 4px; display: inline;"><b>GREEN: </b>Flash Flood Warning</p>
<br>
<input style="padding-left: 5px;" type="checkbox" id="spec" onchange="specChange()" name="spec" checked="checked" value="spec"><p style="padding-left: 5px; color: blue; margin: 4px; display: inline;"><b>BLUE: </b>Special Weather Statement</p>
<br>
<input style="padding-left: 5px;" type="checkbox" id="oth" onchange="othChange()" name="oth" checked="checked" value="oth"><p style="padding-left: 2px; color: orange; margin: 4px; display: inline;"><b>ORANGE: </b>Other</p>
</div><br>
<p style="margin-bottom: 1px;">Watches to Show</p>
<div class="alertlist" style="border-left: 0px;">
<input style="padding-left: 5px;" type="checkbox" id="torww" onchange="torwwChange()" name="tor" checked="checked" value="tor"><p style="padding-left: 5px; color: #FE5859; margin: 4px; display: inline;"><b>RED: </b>Tornado Watch</p>
<br>
<input style="padding-left: 5px;" type="checkbox" id="svrww" onchange="svrwwChange()" name="svr" checked="checked" value="svr"><p style="padding-left: 5px; color: #516BFF; text-shadow: 1px 1px 2px #b1bbf7; margin: 4px; display: inline;"><b>BLUE: </b>Severe T-storm Watch</p>
</div>
</div>
<div id="reportsett" style="display: none;">
<h3 style="justify-content: center; margin-top: 0px;"><b>Storm Report Settings</b></h3>
<p style="margin-bottom: 1px;">Reports to Show</p>
<div class="alertlist" style="border-left: 0px;">
<input style="padding-left: 5px;" type="checkbox" id="torr" onchange="torRep()" name="tor" checked="checked" value="tor"><p style="padding-left: 5px; color: red; margin: 4px; display: inline;"><b>RED: </b>Tornado Reports</p>
<br>
<input style="padding-left: 5px;" type="checkbox" id="wndr" onchange="wndRep()" name="wnd" checked="checked" value="svr"><p style="padding-left: 5px; color: blue; margin: 4px; display: inline;"><b>BLUE: </b>Wind Reports</p>
<br>
<input style="padding-left: 5px;" type="checkbox" id="halr" onchange="halRep()" name="hal" checked="checked" value="flood"><p style="padding-left: 2px; color: rgb(1, 233, 1); margin: 4px; display: inline;"><b>GREEN: </b>Hail Reports</p>
</div>
</div>
</div>
<div style="display: flex; align-items: center; justify-content: center; flex-direction: row;">
<button onclick="mapSettings();" id="mapset" class="settinggrp" style="margin-right: 40px; background-color: #4c4cf0;"><div class="material-symbols-outlined" style="font-size: 22px;">map</div></button>
<button onclick="radarSettings();" id="radarset" class="settinggrp" style="margin-right: 40px;"><div class="material-symbols-outlined" style="font-size: 22px;">radar</div></button>
<button onclick="alertSettings();" id="alertset" class="settinggrp" style="margin-right: 40px"><div class="material-symbols-outlined" style="font-size: 22px;">warning</div></button>
<button onclick="reportSettings();" id="reportset" class="settinggrp"><div class="material-symbols-outlined" style="font-size: 22px;">report</div></button>
</div>
</div>
</div>
<div style="position: absolute; left: 50%; bottom: 90px;">
<div id="layerModal" class="overlay-object" style="display: none; position: relative; left: -50%; width: 340px; height: 150px; background-color: black;">
<div class="alertlist" style="border-left: 0px;">
<button onclick="closeSettings();" class="close"><span class="material-symbols-outlined" style="font-size: 16px;">close</span></button>
<br>
<input style="padding-left: 5px;" type="checkbox" id="tor" onchange="torChange()" name="tor" checked="checked" value="tor"><p style="padding-left: 5px; color: red; margin: 4px; display: inline;"><b>RED: </b>Tornado Warning</p>
<br>
<input style="padding-left: 5px;" type="checkbox" id="svr" onchange="svrChange()" name="svr" checked="checked" value="svr"><p style="padding-left: 5px; color: rgb(236, 193, 0); margin: 4px; display: inline;"><b>YELLLOW: </b>Severe Thunderstorm Warning</p>
<br>
<input style="padding-left: 5px;" type="checkbox" id="flood" onchange="floodChange()" name="flood" checked="checked" value="flood"><p style="padding-left: 2px; color: magenta; margin: 4px; display: inline;"><b>MAGENTA: </b>Flood Warning</p>
<br>
<input style="padding-left: 5px;" type="checkbox" id="fflood" onchange="ffloodChange()" name="fflood" checked="checked" value="fflood"><p style="padding-left: 2px; color: rgb(1, 233, 1); margin: 4px; display: inline;"><b>GREEN: </b>Flash Flood Warning</p>
<br>
<input style="padding-left: 5px;" type="checkbox" id="spec" onchange="specChange()" name="spec" checked="checked" value="spec"><p style="padding-left: 5px; color: blue; margin: 4px; display: inline;"><b>BLUE: </b>Special Weather Statement</p>
<br>
<input style="padding-left: 5px;" type="checkbox" id="oth" onchange="othChange()" name="oth" checked="checked" value="oth"><p style="padding-left: 2px; color: orange; margin: 4px; display: inline;"><b>ORANGE: </b>Other</p>
</div>
</div>
</div>
<div style="position: absolute; left: 50%; bottom: 90px;">
<div id="infoModal" class="overlay-object" style="width: 330px; padding: 20px; display: none; position: relative; left: -50%; height: 310px;">
<button onclick="closeSettings();" class="close" style="height: fit-content;"><span class="material-symbols-outlined" style="font-size: 16px;">close</span></button>
<div style="height: 320px; overflow-y: scroll; overflow-x: hidden; scrollbar-width: none; margin-bottom: 10px; width: 285px; text-align: center;">
<h2 style="margin: 10px; margin-bottom: 20px;"><b>Info and Credits</b></h2>
<p style="padding-left: 10px; margin-top: 5px; margin-bottom: 25px;"><b>Built for </b><a href="https://busybird15.github.io/theweatherteam" target="_blank">The Weather Team</a> by <a href="https://x.com/busybird150" target="_blank">BusyBird15</a> (<a href="mailto:[email protected]">contact me</a>).</p>
<div style="text-align: left; margin-bottom: 25px;">
<h3 style="margin: 10px;"><b>What's New:</b></h3>
<p style="padding-left: 10px; margin-top: 5px; margin-bottom: 5px;">Version number: v1.12</p>
<ul style="margin: 0px;">
<li style="padding-left: 10px; margin-top: 5px; margin-bottom: 5px;"><b>NEW </b>hurricane / tropical storm tracker.</li>
<li style="padding-left: 10px; margin-top: 5px; margin-bottom: 5px;">Added animations when closing dialogs.</li>
<li style="padding-left: 10px; margin-top: 5px; margin-bottom: 5px;">Redesigned toolbar.</li>
<li style="padding-left: 10px; margin-top: 5px; margin-bottom: 5px;">Defined map bounds.</li>
<li style="padding-left: 10px; margin-top: 5px; margin-bottom: 5px;">Map no longer auto-refreshes while you are reading a popup.</li>
</ul>
</div>
<div style="text-align: left; margin-bottom: 25px;">
<h3 style="margin: 10px;"><b>Attributions</b></h3>
<p style="padding-left: 10px; margin-top: 5px; margin-bottom: 5px;">Radar Tiles: <a href="https://rainviewer.com/api.html" target="_blank">RainViewer</a></p>
<p style="padding-left: 10px; margin-top: 5px; margin-bottom: 5px;">Map Tiles: <a href="https://leafletjs.com" target="_blank">Leaflet</a> and <a href="https://carto.com/attributions" target="_blank">CARTO</a></p>
<p style="padding-left: 10px; margin-top: 5px; margin-bottom: 5px;">Warnings: <a href="https://www.weather.gov/documentation/services-web-api#/" target="_blank">NOAA's API</a></p>
<p style="padding-left: 10px; margin-top: 5px; margin-bottom: 5px;">Watches: <a href="https://www.mesonet.agron.iastate.edu/request/gis/spc_watch.phtml" target="_blank">the IEM WW Archive</a></p>
<p style="padding-left: 10px; margin-top: 5px; margin-bottom: 5px;">SPC Outlooks: <a href="https://www.spc.noaa.gov/products/outlook/day1otlk_cat.nolyr.geojson" target="_blank">SPC GeoJSON data</a></p>
</div>
<div style="text-align: left; margin-bottom: 25px;">
<h3 style="margin: 10px;"><b>Credits</b></h3>
<p style="padding-left: 10px; margin-top: 5px; margin-bottom: 5px;">Some ideas: <a href="https://www.radar.xtremewx.com/" target="_blank">the XWD's radar</a></p>
</div>
</div>
</div>
</div>
<!--Mobile Alert Box-->
<div id="mobilealertbox" style="overflow-y: auto; display: none; position: absolute; flex-direction: column; z-index: 550; top: 0px; left: 0px; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);"></div>
<!--The Weather Team attribution-->
<a style="color: white;" href="https://busybird15.github.io/theweatherteam">
<div class="overlay-object" id="attr" style="display: flex; top: 20px; left: 20px;">
<img src="https://busybird15.github.io/assets/twt.png" width="40px" height="40px" style="border-radius: 10px;">
<p id="official-radar" style="padding-left: 10px; margin: 10px 0px 5px 0px;"><b>Official Radar</b></p>
</div>
</a>
<!--Stream Player-->
<div class="overlay-object" id="player" style="overflow-x: none; overflow-y: none; display: none; bottom: 20px; left: 20px; flex-direction: column; min-width: 250px; min-height: 200px;">
<div id="handle"></div>
<div style="display: flex; flex-direction: row;">
<input type="text" id="streamUrl" placeholder="Paste stream embed" style="width: calc(100% - 10px); border-radius: 5px; height: auto; margin-right: 10px;">
<button onclick="loadStream()" title="Click to import Youtube embed" class="material-symbols-outlined">smart_display</button><br>
</div>
<div id="streamContainer" style="width: calc(100% - 20px); height: calc(100% - 20px);"></div>
</div>
<!--tutorial box-->
<div class="overlay-object" id="tutorialbox" style="flex-direction: column; overflow-y: auto; scrollbar-width: none; display: none; bottom: 100px; left: 20px; top: 100px; width: 300px; height: 400px; align-items: center;">
<div style="margin-left: 20px;">
<button onclick="closeModal(2);" class="close" style="position: absolute; border-right: 10px; left: calc(100% - 30px);">
<div class="material-symbols-outlined" style="font-size: 16px;">close</div></button><br>
</div>
<p style="margin: 0px; text-align: center;"><b>Radar Tips</b></p>
<p style="text-indent: 20px;"><b>Left Click</b> to pan the map, or click a watch/warning box to view its details.<br></p>
<p style="text-indent: 20px;"><b>Right Click</b> to view the current weather conditions for the place you clicked.<br></p>
<p style="text-indent: 20px;"><b>Click the settings icon in the toolbar</b> to customize polygon opacities, toggle alerts, and more.<br></p>
<p style="text-indent: 20px;"><b>Click the map icon in the lower left</b> to change between dark and light themes.<br></p>
</div>
<!--TSTM TAGS-->
<div class="overlay-object" id="tstmtagbox" style="flex-direction: column; overflow-y: auto; scrollbar-width: none; display: none; bottom: 100px; left: 20px; top: 100px; width: 300px; height: 400px; align-items: center;">
<div style="margin-left: 20px;">
<button onclick="closeModal(1);" class="close" style="position: absolute; border-right: 10px; left: calc(100% - 30px);">
<div class="material-symbols-outlined" style="font-size: 16px;">close</div></button><br>
</div>
<p style="margin: 0px; text-align: center;"><b>Severe Thunderstorm Tags</b></p>
<p style="text-indent: 20px;">The criteria for a baseline or “base” severe thunderstorm warning is 1.00 inch (quarter-sized) hail and/or 58 mph thunderstorm winds. This will not activate a WEA on smartphones. When no damage threat tag is present, damage is expected to be at the base level.<br></p>
<p style="text-indent: 20px; margin: 0px;">The criteria for a considerable damage threat is at least 1.75 inch diameter (golf ball-sized) hail and/or 70 mph thunderstorm winds. This will not activate a WEA on smartphones.<br></p>
<p style="text-indent: 20px;">The criteria for a destructive damage threat is at least 2.75 inch diameter (baseball-sized) hail and/or 80 mph thunderstorm winds. Warnings with this tag will automatically activate a (WEA) on smartphones within the warned area.</p></p>
<a href="https://www.weather.gov/lot/SevereThunderstormWarningsUpdate" target="_blank">Credit: NOAA</a>
</div>
<!--Embed help-->
<div class="overlay-object" id="embedinfobox" style="flex-direction: column; overflow-y: auto; scrollbar-width: none; display: none; bottom: 100px; left: 20px; top: 100px; width: 300px; height: 400px; align-items: center;">
<div style="margin-left: 20px;">
<button onclick="closeModal(3);" class="close" style="position: absolute; border-right: 10px; left: calc(100% - 30px);">
<div class="material-symbols-outlined" style="font-size: 16px;">close</div></button><br>
</div>
<p style="margin: 0px; text-align: center;"><b>How to use the YouTube embed player</b></p>
<p style="text-indent: 20px;"><b>1. </b>Pull up a livestream (or video) on YouTube in a new tab.<br></p>
<p style="text-indent: 20px; margin: 0px;"><b>2. </b>Under the video click "Share" > "Embed". Then copy the code or click "Copy".<br></p>
<p style="text-indent: 20px;"><b>3. </b>Paste the code into the text box in the embed player and click the play button. If the player isn't shown, enable it in Settings > Map. You can't use the player on small screens and mobile devices.<br>You can also resize the player by clicking and dragging the top-right corner.</p>
</div>
<!--Severe Center-->
<div title="Open the Severe Weather Center" class="overlay-object" onclick="severewxcenter(true)" id="severewxcenteropener" style=" cursor: pointer; display: flex; bottom: 20px; right: 20px; height: 30px; width: 300px; justify-content: center; align-items: center;">
<p style="margin: 2px;"><b>Severe Weather Center</b></p>
</div>
<div class="overlay-object" id="severewxcenter" style="display: none; bottom: 80px; right: 20px; height: calc(100% - 180px); width: 300px; justify-content: center;">
<div style="overflow-y: scroll; overflow-x: hidden; scrollbar-width: none;">
<p style="margin: 0px; margin-top: 10px; margin-bottom: 5px;"><b>Outlooks</b></p>
<img class="alertgraphic" id="swody1" style="margin-bottom: 5px;" src="https://www.spc.noaa.gov/partners/outlooks/national/swody1.png">
<img class="alertgraphic" id="swody1_TORN" style="margin-bottom: 5px;" src="https://www.spc.noaa.gov/partners/outlooks/national/swody1_TORN.png">
<img class="alertgraphic" id="swody1_WIND" style="margin-bottom: 5px;" src="https://www.spc.noaa.gov/partners/outlooks/national/swody1_WIND.png">
<img class="alertgraphic" id="swody1_HAIL" style="margin-bottom: 5px;" src="https://www.spc.noaa.gov/partners/outlooks/national/swody1_HAIL.png">
<p style="margin: 0px; margin-top: 10px; margin-bottom: 5px;"><b>Watch Map</b></p>
<img class="alertgraphic" id="WWmap" style="margin-bottom: 5px;" src="https://www.spc.noaa.gov/products/watch/validww.png">
<p style="margin: 0px; margin-top: 10px; margin-bottom: 5px;"><b>Storm Report Map</b></p>
<img class="alertgraphic" id="REPmap" style="margin-bottom: 5px;" src="https://www.spc.noaa.gov/climo/reports/today.gif">
</div>
</div>
<div id="mapid" style="border-radius: 10px; position: absolute; top: 6px; left: 6px; bottom: 6px; right: 6px;"></div>
<div id="mobilectrl" style="position:absolute; bottom: 10px; width:calc(100% - 20px); display:none; z-index: 500; justify-content: center;">
<ul id="radarctrls" style="text-align: center; padding-left: 0px; margin: 0px; font-size: 20px; ">
<li class="sli"><button onclick="stop(); showFrame(0); return;" class="material-symbols-outlined mbtn">first_page</button></li>
<li class="sli"><button onclick="stop(); showFrame(animationPosition - 1); return;" class="material-symbols-outlined mbtn">skip_previous</button></li>
<li class="sli"><button onclick="playStop();" id="stbtn" class="material-symbols-outlined mbtn">play_arrow</button></li>
<li class="sli"><button onclick="stop(); showFrame(animationPosition + 1); return;" class="material-symbols-outlined mbtn">skip_next</button></li>
<li class="sli"><button onclick="stop(); showFrame(1000); return;" class="material-symbols-outlined mbtn" style="margin-right: 10px;">last_page</button></li>
<li class="sli"><button onclick="refresh();" class="material-symbols-outlined mbtn" >refresh</button></li>
<li class="sli"><button onclick="settingsModal();" id="modalBtn" class="material-symbols-outlined mbtn">settings</button></li>
<!--<li class="sli"><button onclick="toggleLayerModal();" id="layerBtn" class="material-symbols-outlined mbtn">layers</button></li>-->
<li class="sli"><button onclick="toggleInfoModal();" id="layerBtn" class="material-symbols-outlined mbtn">info</button></li>
</ul>
</div>
<!--Add JS after elements are added-->
<script src="radarscript.js"></script>
</body>