-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
382 lines (344 loc) · 17.7 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
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
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DEP :: Map Interface</title>
<meta name="description" content="Iowa State University, Daily Erosion Project">
<meta name="author" content="daryl herzmann [email protected]">
<link rel="shortcut icon" href="https://www.dailyerosion.org/themes/isubit/iastate8_theme/favicon.ico" type="image/vnd.microsoft.icon" />
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<link type="text/css"
href="https://mesonet.agron.iastate.edu/vendor/openlayers/10.3.0/ol.css"
rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
<link type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.1/themes/base/jquery-ui.min.css"
rel="stylesheet" />
<link type="text/css"
href="//cdn.datatables.net/2.1.8/css/dataTables.dataTables.min.css" rel="stylesheet" />
<!-- Custom styles for app -->
<link href="css/nextgen.css" rel="stylesheet">
<meta name="twitter:card" content="summary">
<meta name="twitter:image:src" content="https://dailyerosion.org/images/logo.png">
<meta name="twitter:title" content="DEP :: Map Interface">
<meta name="twitter:description" content="Daily Erosion Project of Iowa State University">
<meta name="twitter:url" content="https://dailyerosion.org">
<meta name="twitter:creator" content="@dailyerosion">
<meta name="twitter:image:width" content="85">
<meta name="twitter:image:height" content="65">
</head>
<body>
<!-- Modals -->
<div id="newdate-message" title="Updated data available" style="display: none;">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
The realtime processing has finished and new data is available for date:
<span id="newdate-thedate"></span>.
</p>
</div>
<div class="modal fade" id="eventsModal" tabindex="-1" role="dialog"
aria-labelledby="eventsModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-bs-dismiss="modal"
aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="eventsModalLabel">Listing of Daily Events</h4>
</div>
<div class="modal-body" onkeypress="return event.keyCode != 13;">
<div id="eventsres"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Dominant Tillage Modal -->
<div class="modal fade" id="dtModal" tabindex="-1" role="dialog"
aria-labelledby="dtModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="dtModalLabel">DEP Tillage Codes</h4>
</div>
<div class="modal-body" onkeypress="return event.keyCode != 13;">
<p>DEP uses remotely sensed and other data to derive a tillage practice for each
modelled hillslope point. This practice is expressed as a code with increasing
values implying more intense tillage. Here's a brief summary of what each
code implies. A HUC12's dominant tillage practice is the most common tillage
practice within the HUC12 according to our estimates.
</p>
<table class="table table-condensed table-striped">
<thead><tr><th>Code</th><th>Label</th><th>Description</th></tr></thead>
<tbody>
<tr><td>1</td><td>No till</td>
<td>No tillage except by no till planter.</td></tr>
<tr><td>2</td><td>Very high mulch</td>
<td>Spring field cultivate, plant (includes fall chisel plow before corn)</td></tr>
<tr><td>3</td><td>High mulch</td>
<td>Fall chisel plow, spring field cultivate, plant (includes disk before corn, disk was substituted for field cultivate for sorghum).</td></tr>
<tr><td>4</td><td>Medium mulch</td>
<td>Fall chisel plow, spring disk, field cultivate, plant (included an additional spring disking before corn).</td></tr>
<tr><td>5</td><td>Low mulch</td>
<td>Fall chisel plow, two spring disk, field cultivate, plant (before corn, moldboard plow was substituted for chisel plow, and no spring disk).</td></tr>
<tr><td>6</td><td>Fall moldboard plow</td>
<td>Fall moldboard plow, spring disk, spring field cultivate, plant (no spring disk before corn silage).</td></tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Search for Watershed by Name</h4>
</div>
<div class="modal-body" onkeypress="return event.keyCode != 13;">
<p>Enter some case-insensitive text to search for a watershed by name.</p>
<form name="huc12search">
<input type="text" name="q" id="huc12searchtext">
<button type="button" class="btn btn-default" id="huc12searchbtn">
<i class="bi-search"></i>
</button>
</form>
<hr />
<div id="huc12searchres"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End of modals -->
<div id="mapcontrols">
<button class="btn btn-sq-sm btn-danger pull-left active" id="mappointer"
title="Interact with Map.">
<i class="bi-hand-index-fill"></i></button>
<button class="btn btn-sq-sm btn-danger pull-left active" id="mapinfo"
title="Double Click HUC12 for Detailed Data.">
<i class="bi-info-circle"></i></button>
<button class="btn btn-sq-sm btn-danger pull-left" id="mapplus"
title="Zoom Map In.">
<i class="bi-zoom-in"></i></button>
<button class="btn btn-sq-sm btn-danger pull-left" id="mapminus"
title="Zoom Map Out.">
<i class="bi-zoom-out"></i></button>
<button class="btn btn-sq-sm btn-danger pull-left" id="mapprint"
title="Create PNG image of map.">
<i class="bi-printer"></i></button>
</div>
<div id="fdetails">
<span id="info-name"></span>
<br /><strong>HUC12:</strong> <span id="info-huc12"></span>
<br /><strong>Precipitation: </strong><span class="visible-xs-inline"><br></span><span id="info-precip"></span>
<br /><strong>Water Runoff: </strong><span class="visible-xs-inline"><br></span><span id="info-runoff"></span>
<br /><strong>Soil Detachment: </strong><span class="visible-xs-inline"><br></span><span id="info-loss"></span>
<br /><strong>Hillslope Soil Loss: </strong><span class="visible-xs-inline"><br></span><span id="info-delivery"></span>
</div>
<div id="headerdiv">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-1">
<button id="btnq1" data-bs-toggle="offcanvas"
class="btn btn-sq-sm btn-danger" title="Show Menu."
data-bs-target="#sidebar" aria-controls="sidebar">
<i class="bi-list"></i></button>
</div>
<div class="col-2 col-md-1">
<a href="/"><img src="images/deplogo.png" height="50"></a>
</div>
<!-- show this button on mobile -->
<div class="col-8 col-md-3">
<div class="btn-group" style="z-index: 3000;">
<!--
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Water Erosion on Ag Land
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Water Erosion on Ag Land</a></li>
<li><a class="dropdown-item disabled" href="#">Water Erosion on Pasture Land (soon)</a></li>
<li><a class="dropdown-item disabled" href="#">Wind Erosion on Ag Land (soon)</a></li>
<li><a class="dropdown-item disabled" href="#">Water Erosion on Forest Land (soon)</a></li>
-->
</ul>
</div><!-- ./btn-group -->
</div>
<div class="col-7 d-none d-md-block">
<ul class="nav nav-pills" style="margin-top: 5px;">
<li>
<a href="/" class="nav-link">Home</a>
</li>
<li>
<a href="/people" class="nav-link">People</a>
</li>
<li>
<a href="/faq" class="nav-link">FAQ</a>
</li>
<li class="active">
<a href="/map" class="nav-link">Interactive Map</a>
</li>
</ul>
</div><!-- ./content -->
</div><!-- ./row -->
</div><!-- ./container-fluid -->
</div><!-- ./headerdiv -->
<canvas id="colorbar" width="100" height="150"></canvas>
<div class="container-fluid">
<div id="maptitlediv"><span id="maptitle">DEP Map</span></div>
<div id="map" style="width: 100%; height: 100%; position:fixed;"></div>
<div class="offcanvas offcanvas-start" id="sidebar"
data-bs-scroll="true" data-bs-backdrop="false">
<div class="offcanvas-title">
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body" style="overflow-y: scroll;">
<!-- Search box -->
<p>
<button type="button" class="btn btn-default" data-bs-toggle="modal" data-bs-target="#myModal"><i class="bi-search"></i> Search</button>
</p>
<ul class="nav nav-tabs nav-justified" role="tablist" id="myTab">
<li class="nav-item" role="presentation">
<button class="nav-link" id="data-tab" data-bs-toggle="tab"
data-bs-target="#data-pane" type="button" role="tab"
aria-controls="data-pane" aria-selected="true">Data</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link active" id="map-tab" data-bs-toggle="tab"
data-bs-target="#map-pane" type="button" role="tab"
aria-controls="map-pane" aria-selected="true">Map</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade" id="data-pane">
<!-- Data pane stuff -->
<div id="detailsContainer" style="background: #eee;">
<div id="details_loading" style="display: none;"><img src="images/wait24trans.gif" /> Loading...</div>
<div id="details_details"></div>
<div id="details_hidden">Double click on a watershed to load detailed data</div>
</div><!-- ./detailsContainer -->
<fieldset>
<legend>Unit Convention</legend>
<div id="units_radio">
<input type="radio" class="btn-check" name="units" id="english_opt"
autocomplete="off" onchange="setUnits(0);" value="0" checked>
<label class="btn btn-outline-success" for="english_opt">English</label>
<input type="radio" class="btn-check" name="units" id="metric_opt"
autocomplete="off" onchange="setUnits(1);" value="1">
<label class="btn btn-outline-success" for="metric_opt">Metric</label>
</div>
</fieldset>
<h4>Shapefile Download</h4>
<p>Include States for currently shown date range:
<br /><input type="checkbox" checked="checked" name="dlstates" value="IL" id="STIL"> <label for="STIL">Illinois</label>
<br /><input type="checkbox" checked="checked" name="dlstates" value="IA" id="STIA"> <label for="STIA">Iowa</label>
<br /><input type="checkbox" checked="checked" name="dlstates" value="KS" id="STKS"> <label for="STKS">Kansas</label>
<br /><input type="checkbox" checked="checked" name="dlstates" value="MN" id="STMN"> <label for="STMN">Minnesota</label>
<br /><input type="checkbox" checked="checked" name="dlstates" value="MO" id="STMO"> <label for="STMO">Missouri</label>
<br /><input type="checkbox" checked="checked" name="dlstates" value="NE" id="STNE"> <label for="STNE">Nebraska</label>
<br /><input type="checkbox" checked="checked" name="dlstates" value="SD" id="STSD"> <label for="STSD">South Dakota</label>
<br /><input type="checkbox" checked="checked" name="dlstates" value="WI" id="STWI"> <label for="STWI">Wisconsin</label>
</p>
<button onclick="javascript: getShapefile();" class="btn btn-default" type="button"><i class="bi-download"></i> Download Data</button>
<h4>Current DEP Version</h4>
<table class="table table-striped"><tbody>
<tr><th>DEP Label</th><td><span id="dv_label"></span></td></tr>
<tr><th>WEPP Version</th><td><span id="dv_wepp"></span></td></tr>
<tr><th>ACPF</th><td><span id="dv_acpf"></span></td></tr>
<tr><th>Flowpath</th><td><span id="dv_flowpath"></span></td></tr>
<tr><th>GSSURGO</th><td><span id="dv_gssurgo"></span></td></tr>
<tr><th>Software</th><td><span id="dv_software"></span></td></tr>
<tr><th>Tillage</th><td><span id="dv_tillage"></span></td></tr>
<tr><th>Web Interface</th><td><span>v20241230T1123</span></td></tr>
</tbody></table>
</div><!-- ./data-pane -->
<div class="tab-pane fade show active" id="map-pane">
<!-- MAP PANE -->
<fieldset>
<legend>Date Selection:</legend>
<div id="t">
<input type="radio" class="btn-check" name="t" id="single"
autocomplete="off" onchange="setDateSelection('single');" value="single" checked>
<label class="btn btn-outline-success" for="single">Single</label>
<input type="radio" class="btn-check" name="t" id="multi"
autocomplete="off" onchange="setDateSelection('multi');" value="multi">
<label class="btn btn-outline-success" for="multi">Multi</label>
</div>
</fieldset>
<div class="input-group">
<span class="input-group-btn"><button id="minus1d" class="btn btn-default" type="button"><i class="bi-arrow-left"></i></button></span>
<input type="text" name="date" id="datepicker" class="form-control" style="font-weight: bolder;">
<span class="input-group-btn"><button id="plus1d" class="btn btn-default" type="button"><i class="bi-arrow-right"></i></button></span>
</div>
<div style="display: none;" id="settoday"><a class="btn btn-default" role="button" href="javascript: setToday();"><i class="bi-chevron-left"></i> Back to Latest Date</a>
</div>
<div style="display: none;" id="dp2">
<h4>To Date:</h4>
<div class="input-group">
<input type="text" name="date2" id="datepicker2" class="form-control" style="font-weight: bolder;" />
</div>
</div>
<h4>View Outputs: <button onclick="changeOpacity(-0.1);" class="btn btn-default" type="button" title="Decrease Opacity"><i class="bi-brightness-high"></i> -</button>
<button onclick="changeOpacity(0.1);" class="btn btn-default" type="button" title="Increase Opacity"><i class="bi-brightness-low"></i> +</button></h4>
<ul class="list-unstyled deplist">
<li><input type="radio" id="precip-in2_opt" name="whichlayer" value="qc_precip" checked="checked">
<label for="precip-in2_opt">Precipitation</label></li>
<li><input type="radio" id="runoff2_opt" name="whichlayer" value="avg_runoff">
<label for="runoff2_opt">Runoff</label></li>
<li><input type="radio" id="loss2_opt" name="whichlayer" value="avg_loss">
<label for="loss2_opt">Detachment</label></li>
<li><input type="radio" id="delivery2_opt" name="whichlayer" value="avg_delivery">
<label for="delivery2_opt">Hillslope Soil Loss</label></li>
</ul>
<h4>View Metadata:</h4>
<ul class="list-unstyled deplist">
<li><input type="radio" id="slp_opt" name="whichlayer" value="slp">
<label for="slp_opt">Average Slope [%]</label></li>
<li><input type="radio" id="dt_opt" name="whichlayer" value="dt">
<label for="dt_opt">Dominant Tillage Practice</label>
<button type="button" class="btn btn-default" data-bs-toggle="modal" data-bs-target="#dtModal"><i class="bi-info-circle"></i></button>
</li>
</ul>
<p><span id="variable_desc"></span></p>
<h4>Imagery:</h4>
<ul id="ls-base-layers" class="list-unstyled deplist"></ul>
<h4>Layers:</h4>
<ul id="ls-overlay-layers" class="list-unstyled deplist"></ul>
<h4>View US State:</h4>
<button id="il" class="btn btn-default" type="button"><i class="bi-search"></i> Illinois</button>
<button id="ia" class="btn btn-default" type="button"><i class="bi-search"></i> Iowa</button>
<button id="ks" class="btn btn-default" type="button"><i class="bi-search"></i> Kansas</button>
<button id="mn" class="btn btn-default" type="button"><i class="bi-search"></i> Minnesota</button>
<button id="ne" class="btn btn-default" type="button"><i class="bi-search"></i> Nebraska</button>
<button id="wi" class="btn btn-default" type="button"><i class="bi-search"></i> Wisconsin</button>
<br clear="all" />
<p> </p>
</div><!-- ./map-pane -->
</div><!-- tabcontent -->
</div><!-- ./sidebar-content -->
</div><!--/.sidebar-->
</div><!--/.container-fluid -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.1/jquery-ui.min.js"></script>
<script src="https://mesonet.agron.iastate.edu/vendor/openlayers/10.3.0/ol.js"></script>
<script src='//cdn.datatables.net/2.1.8/js/dataTables.min.js'></script>
<script src='lib/jquery.toaster.js'></script>
<script src="v20241230T1123.js"></script>
</html>