-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
110 lines (89 loc) · 5.12 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>PISCES: Richness Map</title>
<link rel="shortcut icon" href="//pisces.ucdavis.edu/files/fav_watershed.gif" type="image/gif" />
<link rel="stylesheet" href="//js.arcgis.com/3.14/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="//js.arcgis.com/3.14/esri/css/esri.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- CSS style sheet for this document -->
<link rel="stylesheet" href="style.css">
<!-- ESRI js api -->
<script src="//js.arcgis.com/3.14/"></script>
<!-- map.js must be called after sourcing esri js api -->
<script type="text/javascript" src="map.js"></script>
</head>
<body class="tundra" onload="load()">
<!-- Modal that pops up when the info button is pressed -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">California Fish Richness</h4>
</div>
<div class="modal-body">
<p>Use the drop down menu to select one of the following richness metrics:</p>
<ul>
<li>
<strong>Native Richness</strong> - the number of native species in each watershed (HUC12). Fish that are translocated or relocated outside of their native range are included in the total only if they are native species to California.
</li>
<li>
<strong>Historical Richness</strong> - the number of fish species historically (pre-1970s) found in each watershed prior to extripations and/or extinctions.
</li>
<li>
<strong>Non-native Richness</strong> - the number of non-native species in each watershed. This only includes fish species that are nonendemic to California. A non-native species is any fish that occurs outside its native range as a result of deliberate or accidental introduction by humans.
</li>
<li>
<strong>Jaccard: Native Fish</strong> - the Jaccard distance for the native fish assemblage in each watershed. Jaccard distance is a measure of similarity of adjacent populations.
</li>
<li>
<strong>Jaccard: All Fish</strong> - the Jaccard distance for the current assemblage (both native and non-native fish) in each watershed.
</li>
</ul>
<p>Click on each HUC12 to view the assemblage list for the watershed.</p>
<div style="text-align: center; display: block; margin: auto;">
<a href="//pisces.ucdavis.edu/"><img src="img/pisces_2.png" alt="" id="logo" width="250px"></a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#myModal').modal('hide'); // or 'show'
});
</script>
<div id="contain" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false">
<div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
<div id="loading">
<i class="fa fa-refresh fa-spin fa-3x"></i>
</div>
<div id="feedback">
<div id="info">
<h3>Fish Richness</h3>
<div id="legendWrapper"></div>
<div id="fieldWrapper"></div>
</div>
</div>
<div id="help">
<!-- Button trigger modal -->
<button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal">
<i class="fa fa-info-circle"></i>
</button>
</div>
</div>
</div>
</body>
</html>