-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.html
More file actions
500 lines (471 loc) · 24.7 KB
/
index.html
File metadata and controls
500 lines (471 loc) · 24.7 KB
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
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
<!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 akrherz@iastate.edu">
<link rel="shortcut icon" href="https://www.dailyerosion.org/themes/isubit/iastate8_theme/favicon.ico" type="image/vnd.microsoft.icon" />
<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">
<link rel="stylesheet" href="src/style.css" type="text/css">
</head>
<body>
<!-- Modals -->
<div class="modal fade" id="newdate-message" tabindex="-1" role="dialog" aria-labelledby="newdateModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="newdateModalLabel">Updated data available</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>
<i class="bi-check-circle" style="color: green; margin-right: 10px;"></i>
The realtime processing has finished and new data is available for date:
<strong><span id="newdate-thedate"></span></strong>.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal" data-action="goto-latest">Go to Latest Date</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keep Current Date</button>
</div>
</div>
</div>
</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">
<h4 class="modal-title" id="eventsModalLabel">Listing of Daily Events</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</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-secondary" 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">
<h4 class="modal-title" id="dtModalLabel">DEP Tillage Codes</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</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-sm 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-secondary" 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">
<h4 class="modal-title" id="myModalLabel">Search for Watershed by Name or ID</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Enter some case-insensitive text to search for a watershed by name or
enter the HUC12 numeric ID.</p>
<form name="huc12search" id="huc12searchform">
<label class="visually-hidden" for="huc12searchtext">Search for watershed by name or HUC12 ID</label>
<input type="text" name="q" id="huc12searchtext" aria-describedby="huc12searchhelp">
<button id="huc12searchbtn" type="submit" class="btn btn-secondary">
<i class="bi-search"></i> Search</button>
</form>
<hr />
<div id="huc12searchhelp" class="visually-hidden">Type a watershed name or HUC12 ID, then press Enter or activate Search.</div>
<div id="huc12searchres"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End of modals -->
<div id="mapcontrols">
<button class="btn btn-sq-sm btn-danger float-start active" id="mappointer"
title="Interact with Map." aria-label="Interact with Map">
<i class="bi-hand-index-fill"></i></button>
<button class="btn btn-sq-sm btn-danger float-start active" id="mapinfo"
title="Double Click HUC12 for Detailed Data." aria-label="Double Click HUC12 for Detailed Data">
<i class="bi-info-circle"></i></button>
<button id="mapplus" class="btn btn-sq-sm btn-danger float-start" title="Zoom Map In." aria-label="Zoom Map In"><i class="bi-zoom-in"></i></button>
<button id="mapminus" class="btn btn-sq-sm btn-danger float-start" title="Zoom Map Out." aria-label="Zoom Map Out"><i class="bi-zoom-out"></i></button>
<button id="mapprint" class="btn btn-sq-sm btn-danger float-start" title="Create PNG image of map." aria-label="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 Delivery: </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"
aria-label="Open menu" aria-expanded="false">
<i class="bi-list"></i></button>
</div>
<div class="col-2 col-md-1">
<a href="/">
<img src="src/images/deplogo.png" height="50" class="d-md-none" alt="DEP Logo">
<img src="src/images/deplogo_large.png" height="50" class="d-none d-md-inline" alt="DEP Logo">
</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>
<a href="https://www.dailyerosion.org/files/inline-files/DEP_Interactive_Map_Manual_DEC_2025.pdf"
class="nav-link" target="_blank">Interactive Map Manual</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="false" data-bs-backdrop="true"
aria-labelledby="sidebar-title">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="sidebar-title">Daily Erosion Project</h5>
<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-secondary" 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="false">
<i class="bi-table"></i> 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">
<i class="bi-map"></i> Map</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade" id="data-pane">
<!-- Watershed Details -->
<div class="card mb-2" id="detailsContainer">
<div class="card-header py-1">
<i class="bi-droplet me-2"></i> Watershed Details
</div>
<div class="card-body py-2 ps-1">
<div id="details_loading" style="display: none;"><img src="src/images/wait24trans.gif" /> Loading...</div>
<div id="details_hidden" class="text-center text-muted py-2">
<i class="bi-cursor fs-4 d-block mb-2"></i>
Double click on a watershed to load detailed data
</div>
<div id="details_details" style="display: none;">
<div class="mb-2">
<strong id="details_name"></strong>
<code id="details_huc12_display" class="small ms-2"></code>
<input type="hidden" id="details_huc12">
</div>
<div class="btn-group btn-group-sm w-100 mb-2" role="group">
<button id="details_btn_daily" data-action="view-events" data-period="daily"
class="btn btn-outline-primary" type="button" data-bs-toggle="modal"
data-bs-target="#eventsModal">
<i class="bi-table"></i> Daily</button>
<button id="details_btn_yearly" data-action="view-events" data-period="yearly"
class="btn btn-outline-primary" type="button" data-bs-toggle="modal"
data-bs-target="#eventsModal">
<i class="bi-calendar3"></i> Yearly</button>
</div>
<h6 id="details_summary_title" class="text-muted small mb-1">Summary</h6>
<table class="table table-sm table-bordered mb-2">
<tbody>
<tr><th>Precip</th><td id="details_precip"></td></tr>
<tr><th>Runoff</th><td id="details_runoff"></td></tr>
<tr><th>Soil Detachment</th><td id="details_loss"></td></tr>
<tr><th>Hillslope Soil Delivery</th><td id="details_delivery"></td></tr>
</tbody>
</table>
<h6 class="text-muted small mb-1">Top 10 Soil Detachment Days</h6>
<table class="table table-sm table-striped table-bordered mb-0" style="font-size: 0.85em;">
<thead>
<tr>
<th>Date (m/d/y)</th>
<th><abbr title="Precipitation">Pcpn</abbr> (<span id="details_top10_punit"></span>)</th>
<th><abbr title="Runoff">Roff</abbr> (<span id="details_top10_punit2"></span>)</th>
<th><abbr title="Soil Detachment">Detach</abbr> (<span id="details_top10_lunit"></span>)</th>
<th><abbr title="Hillslope Soil Delivery">Delivery</abbr> (<span id="details_top10_lunit2"></span>)</th>
</tr>
</thead>
<tbody id="details_top10"></tbody>
</table>
</div>
</div>
</div>
<!-- Unit Convention -->
<div class="card mb-2">
<div class="card-header py-1">
<i class="bi-rulers me-2"></i> Unit Convention
</div>
<div class="card-body py-2">
<div id="units_radio">
<input type="radio" class="btn-check" name="units" id="english_opt"
autocomplete="off" 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" value="1">
<label class="btn btn-outline-success" for="metric_opt">Metric</label>
</div>
</div>
</div>
<!-- Shapefile Download -->
<div class="card mb-2">
<div class="card-header py-1">
<i class="bi-download me-2"></i> Shapefile Download
</div>
<div class="card-body py-2">
<p class="small mb-2"><strong>Include States for currently shown date range:</strong></p>
<div class="row">
<div class="col-6">
<div><input type="checkbox" checked="checked" name="dlstates" value="IL" id="STIL"> <label for="STIL">Illinois</label></div>
<div><input type="checkbox" checked="checked" name="dlstates" value="IA" id="STIA"> <label for="STIA">Iowa</label></div>
<div><input type="checkbox" checked="checked" name="dlstates" value="KS" id="STKS"> <label for="STKS">Kansas</label></div>
<div><input type="checkbox" checked="checked" name="dlstates" value="MN" id="STMN"> <label for="STMN">Minnesota</label></div>
</div>
<div class="col-6">
<div><input type="checkbox" checked="checked" name="dlstates" value="MO" id="STMO"> <label for="STMO">Missouri</label></div>
<div><input type="checkbox" checked="checked" name="dlstates" value="NE" id="STNE"> <label for="STNE">Nebraska</label></div>
<div><input type="checkbox" checked="checked" name="dlstates" value="SD" id="STSD"> <label for="STSD">South Dakota</label></div>
<div><input type="checkbox" checked="checked" name="dlstates" value="WI" id="STWI"> <label for="STWI">Wisconsin</label></div>
</div>
</div>
<button data-action="download-shapefile" class="btn btn-secondary btn-sm mt-2" type="button"><i class="bi-download"></i> Download Data</button>
</div>
</div>
<!-- DEP Version -->
<div class="card mb-2">
<div class="card-header py-1">
<i class="bi-info-circle me-2"></i> DEP Version Details
</div>
<div class="card-body py-2">
<table class="table table-sm table-striped mb-0"><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 id="dv_web_interface">Loading...</span></td></tr>
</tbody></table>
</div>
</div>
</div><!-- ./data-pane -->
<div class="tab-pane fade show active" id="map-pane">
<!-- Date Selection -->
<div class="card mb-2">
<div class="card-header py-1">
<i class="bi-calendar-event me-2"></i> Date Selection
</div>
<div class="card-body py-2">
<div id="t" class="mb-2">
<input type="radio" class="btn-check" name="t" id="single"
autocomplete="off" value="single" checked>
<label class="btn btn-outline-success btn-sm" for="single">Single</label>
<input type="radio" class="btn-check" name="t" id="multi"
autocomplete="off" value="multi">
<label class="btn btn-outline-success btn-sm" for="multi">Multi</label>
</div>
<label class="form-label visually-hidden" for="datepicker">Date</label>
<div class="input-group input-group-sm">
<button id="minus1d" class="btn btn-secondary" type="button" aria-label="Previous day"><i class="bi-arrow-left"></i></button>
<input type="date" name="date" id="datepicker" class="form-control" style="font-weight: bolder;">
<button id="plus1d" class="btn btn-secondary" type="button" aria-label="Next day"><i class="bi-arrow-right"></i></button>
</div>
<div style="display: none;" id="dp2" class="mt-2">
<label class="small text-muted" for="datepicker2">To Date:</label>
<div class="input-group input-group-sm">
<input type="date" name="date2" id="datepicker2" class="form-control" style="font-weight: bolder;" />
</div>
</div>
<div style="display: none;" id="setdate" class="mt-2">
<button class="btn btn-secondary btn-sm" type="button" id="settoday">
<i class="bi-calendar"></i> Set Date
</button>
</div>
</div>
</div>
<!-- Available Data Layers -->
<div class="card mb-2">
<div class="card-header py-1 d-flex justify-content-between align-items-center">
<span><i class="bi-layers me-2"></i> Available Data Layers</span>
<span>
<button data-action="decrease-opacity" class="btn btn-outline-secondary btn-sm py-0 px-1" type="button" title="Decrease Opacity" aria-label="Decrease opacity"><i class="bi-brightness-high"></i></button>
<button data-action="increase-opacity" class="btn btn-outline-secondary btn-sm py-0 px-1" type="button" title="Increase Opacity" aria-label="Increase opacity"><i class="bi-brightness-low"></i></button>
</span>
</div>
<div class="card-body py-2">
<p class="text-muted small mb-1"><strong>Outputs</strong></p>
<ul class="list-unstyled deplist mb-2">
<li data-category="output">
<input type="radio" id="precip-in2_opt" name="whichlayer" value="qc_precip"
checked="checked" data-description="Precipitation is the liquid equivalent (snow is melted) depth of water spatially averaged over the HUC12.">
<label for="precip-in2_opt">Precipitation</label>
</li>
<li data-category="output">
<input type="radio" id="runoff2_opt" name="whichlayer" value="avg_runoff"
data-description="Runoff is the amount of water leaving the DEP modelled hillslopes averaged for a HUC12.">
<label for="runoff2_opt">Runoff</label>
</li>
<li data-category="output">
<input type="radio" id="loss2_opt" name="whichlayer" value="avg_loss"
data-description="Detachment is the amount of soil disturbed from the DEP modelled hillslope averaged for a HUC12.">
<label for="loss2_opt">Detachment</label>
</li>
<li data-category="output">
<input type="radio" id="delivery2_opt" name="whichlayer" value="avg_delivery"
data-description="Hillslope Soil Delivery is the amount of soil delivered to the bottom the modelled hillslope averaged for a HUC12.">
<label for="delivery2_opt">Hillslope Soil Delivery</label>
</li>
</ul>
<p class="text-muted small mb-1"><strong>Metadata</strong></p>
<ul class="list-unstyled deplist mb-1">
<li data-category="metadata">
<input type="radio" id="slp_opt" name="whichlayer" value="slp"
data-description="Average Slope is a HUC12 averaged value of bulk slope for DEP modelled hillslopes.">
<label for="slp_opt">Average Slope [%]</label>
</li>
<li data-category="metadata">
<input type="radio" id="dt_opt" name="whichlayer" value="dt"
data-description="Dominant Tillage Practice is the most common DEP tillage code within a HUC12. See info button for more details.">
<label for="dt_opt">Dominant Tillage Practice</label>
<button type="button" class="btn btn-outline-primary btn-sm ms-2" data-bs-toggle="modal"
data-bs-target="#dtModal" style="padding: 0.1rem 0.4rem; font-size: 0.85em;"
aria-label="More information about dominant tillage practice">
<i class="bi-info-circle-fill"></i> info</button>
</li>
</ul>
<p id="layer-description" class="text-muted small mb-0"></p>
</div>
</div>
<!-- Imagery -->
<div class="card mb-2">
<div class="card-header py-1">
<i class="bi-image me-2"></i> Imagery
</div>
<div class="card-body py-2">
<ul id="ls-base-layers" class="list-unstyled deplist mb-0"></ul>
</div>
</div>
<!-- Layers -->
<div class="card mb-2">
<div class="card-header py-1">
<i class="bi-stack me-2"></i> Layers
</div>
<div class="card-body py-2">
<ul id="ls-overlay-layers" class="list-unstyled deplist mb-0"></ul>
</div>
</div>
<!-- Zoom to State -->
<div class="card mb-2">
<div class="card-header py-1">
<i class="bi-geo-alt me-2"></i> Zoom to State
</div>
<div class="card-body py-2">
<div class="d-flex flex-wrap gap-1">
<button data-state="il" class="btn btn-outline-secondary btn-sm szoom" type="button">Illinois</button>
<button data-state="ia" class="btn btn-outline-secondary btn-sm szoom" type="button">Iowa</button>
<button data-state="ks" class="btn btn-outline-secondary btn-sm szoom" type="button">Kansas</button>
<button data-state="mn" class="btn btn-outline-secondary btn-sm szoom" type="button">Minnesota</button>
<button data-state="ne" class="btn btn-outline-secondary btn-sm szoom" type="button">Nebraska</button>
<button data-state="wi" class="btn btn-outline-secondary btn-sm szoom" type="button">Wisconsin</button>
</div>
</div>
</div>
</div><!-- ./map-pane -->
</div><!-- tabcontent -->
</div><!-- ./sidebar-content -->
</div><!--/.sidebar-->
</div><!--/.container-fluid -->
<script type="module" src="./src/main.js"></script>
</html>