-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
136 lines (112 loc) · 6.66 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="./assets/css/styles.css" rel='stylesheet'/>
<title>Bigfoot Trail</title>
</head>
<body>
<div id="container" class=".container-fluid">
<div class="row">
<div id="sidebar" class="col-md-3">
<img src="./assets/images/bigfoot-300x300.gif" />
<h2>Explore the Bigfoot Trail</h2>
<p>The Bigfoot Trail is a long distance hiking trail through the Klamath Mountains of northwest California
and,
briefly, southwest Oregon. The trail begins in the Yolla Bolly-Middle Eel Wilderness and ends near Redwood
National and State Parks at the Pacific Ocean near Crescent City, CA.</p>
<p><a href="https://www.bigfoottrail.org/" target="_blank">Get more information about the trail here</a>.</p>
<div class="accordion" id="trail-layers">
<!-- Bigfoot Trail Layers Section -->
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse"
data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Trail Layers
</button>
</h2>
</div>
<!-- Bigfoot Trail Layers Checkboxes -->
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#trail-layers">
<div class="card-body trailLayers">
<div><input type="checkbox" id="trailChk" name="trailChk" value="bigfoot-trail" checked><label
for="trailChk">Bigfoot Trail</label></div>
<div><input type="checkbox" id="photoChk" name="photoChk" value="photo-points"><label
for="photoChk">Photo
Points</label></div>
<div><input type="checkbox" id="poiChk" name="poiChk" value="POI"><label for="poiChk">Points of
Interest</label></div>
<div><input type="checkbox" id="waterChk" name="waterChk" value="water-points"><label
for="waterChk">Water
Supply</label></div>
</div>
</div>
</div> <!-- End bigfoot trail layers card -->
<!-- Wilderness Layers Section -->
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse"
data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Wilderness
</button>
</h2>
</div>
<!-- Wilderness Layers Checkboxes -->
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#trail-layers">
<div class="card-body trailLayers">
<div><input type="checkbox" id="wildernessChk" name="wildernessChk" value="Wilderness-areas"><label
for="wildernessChk"> Wilderness Boundaries (coming soon)</label></div>
</div>
</div>
</div> <!-- End Wilderness Layers Card Section -->
<!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
<!-- Fire and AQ Data Layers Section -->
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse"
data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Fire & Air
</button>
</h2>
</div>
<!-- Fire and AQ Data Layers Checkboxes -->
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#trail-layers">
<div class="card-body trailLayers">
<div><input type="checkbox" id="fire_perimeters" name="fire_perimeters" value="fire_perimeters"><label
for="fire_perimeters"> Fire Perimeters (coming soon)</label></div>
<div><input type="checkbox" id="air_quality" name="air_quality" value="AQI_data"><label
for="air_quality"> Air Quality - Purple Air</label></div>
</div>
</div>
</div> <!-- End Fire Data Layers Card Section -->
<!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
</div> <!-- End layers accordian -->
</div> <!-- End sidebar -->
<div id="map-container" class="col">
<div id="map"></div>
<div id="menu">
<select name="maps" id="maps">
<option value="light-v10" selected>Light</option>
<option value="dark-v10">Dark</option>
<option value="outdoors-v11">Outdoors</option>
<option value="streets-v11">Streets</option>
<option value="satellite-v9">Satellite</option>
</select>
</div>
</div> <!-- End map-container -->
</div> <!-- End row -->
</div> <!-- End container -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
<script src="./assets/js/script.js"></script>
<script src="./assets/js/layers.js"></script>
<!-- <script src="./assets/js/purple.js"></script> -->
</body>
</html>