-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
134 lines (111 loc) · 5.57 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Storm Impact Map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<link href="https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" />
<link rel="stylesheet" href="src/css/styles.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />
<!-- not needed if using own iconCreateFunction -->
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" />
<!-- animated menu button from https://jonsuh.com/hamburgers/ -->
<link rel="stylesheet" href="src/css/hamburgers.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
</head>
<body>
<div id="sidenav">
<button class="hamburger hamburger--vortex" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<div class="menu-item" data-toggle="modal" data-target="#about-modal">
<i class="fas fa-question"></i>
<span class="menu-title" style="padding-left: 3px">About</span>
</div>
<div class="menu-item" data-toggle="modal" data-target="#contact-modal">
<i class="fas fa-envelope"></i>
<span class="menu-title">Contact</span>
</div>
</div>
<header id="header">
<h3 id="title">UNCG DAISY Storm Impact Map</h3>
<select name="storms" id="storm-selector"></select>
</header>
<div id="about-modal" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title">About</div>
</div>
<div class="modal-body">
This site displays four datasets related to coastal hurricane impacts.
First, the <a href="https://storms.ngs.noaa.gov/">NOAA Emergency Response
Imagery</a> collected after storm events. Second,
<a href="https://coastal.er.usgs.gov/data-release/doi-P9Z362BC/">
USGS predictions of overwash probabilities</a>. Third,
<a href="https://coastal.er.usgs.gov/data-release/doi-P9BW6CG6/">
USGS observations of overwash extents</a>. Fourth, results from a
<a href="https://github.com/UNCG-DAISY/WashoverML">
machine learning predictor of overwash occurence</a>
based on <a href="https://github.com/UNCG-DAISY/Coastal-Image-Labeler">
labeled NOAA images</a>.<br /><br />
The code that underlies this map can be seen in the
<a href="https://github.com/UNCG-DAISY/StormImpactMap">
project repository</a>.<br /><br />
This site is an academic research project — the map and data presented
here are intended solely for informational purposes. We do not intend or
imply any guarantee on the accuracy (or completeness) of any data
displayed on this site. (this disclaimer was adapted from the
NOAA ERI website.)
</div>
</div>
</div>
</div>
<div id="contact-modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title">Contact us</div>
</div>
<div class="modal-body">
<img src="images/valentine237x263.png" alt="godstein" /><br />
Software Developer <br />
jamisont.valentine@gmail.com <br />
<a href="https://github.com/jamisonvalentine">GitHub</a><br /><br /><br />
<img src="images/goldstein-237x300.jpg" alt="godstein" /><br />
Research Scientist <br />
ebgoldst@uncg.edu <br />
<a href="https://ebgoldstein.wordpress.com/">Website</a> <br />
<a href="https://twitter.com/ebgoldstein">Twitter</a> <br />
<a href="https://github.com/ebgoldstein">GitHub</a> <br /><br />
</div>
</div>
</div>
</div>
<div id="map"></div>
<script src="bin/leaflet-1.0.3/leaflet.js"></script>
<!-- <script src="https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js"></script> -->
<script type="text/javascript" src="https://stamen-maps.a.ssl.fastly.net/js/tile.stamen.js"></script>
<script type="text/javascript" src="bin/shp.js"></script>
<!-- <script type="text/javascript" src="js/catiline.js"></script> -->
<script type="text/javascript" src="bin/leaflet.shpfile.js"></script>
<script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<script src="src/js/Storm.js"></script>
<script src="src/js/Util.js"></script>
<script src="src/js/map.js"></script>
</body>
</html>