-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
120 lines (106 loc) · 6.1 KB
/
index.html
File metadata and controls
120 lines (106 loc) · 6.1 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
<!doctype html>
<html lang="en">
<head>
<!-- meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<!--scripts and style sheets -->
<!-- leaflet created style sheet -->
<link rel="stylesheet" href="css/leaflet.css" />
<!-- custom style sheet -->
<link rel="stylesheet" href="css/style.css" />
<!-- bootstrap style sheet -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!-- leaflet javascript api -->
<script src="js/leaflet.js"></script>
<!-- jquery javascript api -->
<script src="js/jquery.min.js"></script>
<!-- bootstrap javascript api -->
<script src="js/bootstrap.min.js"></script>
<!-- autolinker javascript api-->
<script src="js/Autolinker.min.js"></script>
<!-- style sheet for the geocoder toolbar -->
<link rel="stylesheet" href="http://k4r573n.github.io/leaflet-control-osm-geocoder/Control.OSMGeocoder.css" />
<!-- javascript for geocoder toolbar -->
<script src="http://k4r573n.github.io/leaflet-control-osm-geocoder/Control.OSMGeocoder.js"></script>
<script src="js/leaflet.label.js"></script>
<link rel="stylesheet" href="css/leaflet.label.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-plugins/3.0.0/layer/tile/Bing.js"></script>
<!-- webpage title -->
<title>WSSI Web Map</title>
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><b><font color="white">WSSI Web Map</font></b> </a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" onclick="$('#aboutModal').modal('show'); return false;"><i class="fa fa-picture-o"></i><font color="white">About</font></a></li>
<!-- dropdown list of WSSI offices that allow the user to zoom to office locations-->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><font color="white">WSSI Offices</font> <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-header"><b>Zoom to WSSI Offices</b></li>
<li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" onclick="map.setView([38.795544,-77.600838], 16);; return false;"><i class="fa fa-arrows-alt"></i>Northern Virginia Office</a></li>
<li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" onclick="map.setView([37.264389, -79.977162], 16);; return false;"><i class="fa fa-arrows-alt"></i>Southwestern Virginia Office</a></li>
<li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" onclick="map.setView([39.093901,-76.634860], 16);; return false;"><i class="fa fa-arrows-alt"></i>Maryland Office</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Begin page content -->
<div id="map">
</div>
<!-- wssi geojson files embeded in javascript files -->
<script src="data/json_sitesSmooth5000.js"></script>
<!-- leaflet javascript api -->
<script src="js/app.js"></script>
<!-- display modal legend through bootstrap api-->
<div class="modal fade" id="aboutModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><b>About</b></h4>
</div>
<div class="modal-body">
<p>The WSSI Web Map shows our work across 220,000 acres in the Mid-Atlantic. With more than 5,000 projects in our portfolio, our staff has unmatched local experience with natural and cultural resources and Clean Water Act permitting and compliance.</br></br>Wetland Studies and Solutions, Inc (WSSI) makes no claims, promises, or guarantees about the absolute accuracy, completeness, or adequacy of the contents of this application. The data shown in this application is for informational purposes only and some of the datasets have been generalized to improve to overall speed of the web page.</p>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- display modal legend through bootstrap api-->
<div class="modal fade" id="legendModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><b><center>Map Legend</center></b></h4>
</div>
<div class="modal-body">
<p><center><img src="legend/legend.png" style="width:250px;height:228px;"></center></p>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- map footer divisions-->
<footer class="footer">
<div class="container">
<p class="text-muted"><center><b><font color="white">Click on the green boundaries for additional information</font></b></center></p>
</div>
</footer>
</body>