-
Notifications
You must be signed in to change notification settings - Fork 0
/
HikeFinder.html
221 lines (212 loc) · 12.2 KB
/
HikeFinder.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
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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- TODO! Almost everything in this file is identical to the old Hike Finder,
except the 1st CSS rule, which is new, the script loads, described below, and an
extra form element div.
-->
<style type="text/css">
.map-tooltip{
border:1px #eee;
background-color:#FFFBF0;
padding:2px;
}
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
dl.portlet {
background-color: #faf8f9;
margin-bottom: 6px;
border-radius: 8px 8px 0 0;
}
dl.portlet-green dt, dl.portlet-green .portletColor, dl.portlet-green-reverse .portletColor {
background-color: #87a738;
}
dl.portlet dt {
color: white;
font-size: 1.3em;
font-weight: normal;
margin-bottom: 18px !important;
position: relative;
border-radius: 8px 8px 0 0;
}
.tab-active {
color: white !important;
}
.tab-inactive {
color: #BBBBBB !important;
}
.tab-hidden {
display: none;
}
.tab {
border-right: 1px solid #BBBBBB;
cursor: pointer;
margin-right: 0.75em;
padding-right: 0.75em;
}
.left_column {
position: absolute;
width: 55%;
}
.right_column {
position: absolute;
top: 0;
left: 60%;
width: 40%;
}
#content ul#map-key {
background-color: #FAF8F9;
list-style-image: none;
list-style-type: none;
margin: 0;
padding: 0.5em;
}
ul#map-key li {
color: #666666;
display: inline;
margin-right: 1.5em;
}
</style>
<!-- TODO! Integrate these with Plone...
* The first 2 are probably added automatically.
* The googleapis.com script needs to be added, WITH a new API key. We can keep
going keyless during development, but not when open to the public.
* The next 4 .js links load in my code. Plone should be configured to concatenate
these together, maybe minify them.
* getHikesAll.js is for local development only, replace with the commented out
script once this is being served from wta.org.
-->
<script type="text/javascript" src="http://www.wta.org/portal_javascripts/WTA%20Theme/jquery-cachekey7903.js"></script>
<script type="text/javascript" src="http://www.wta.org/portal_javascripts/WTA%20Theme/jquery.cookie-cachekey4341.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=&sensor=false"></script>
<script type="text/javascript" src="Search.js"></script>
<script type="text/javascript" src="Data.js"></script>
<script type="text/javascript" src="HikeFinder.js"></script>
<script type="text/javascript" src="MarkerTooltip.js"></script>
<script type="text/javascript" src="getHikesAll.js"></script>
<!--
<script type="text/javascript" src="http://www.wta.org/go-hiking/map/@@trailhead-search/getHikes?jsonp_callback=WtaTrailheadSearch.setHikes"></script>
-->
</head>
<body>
<div id="left_column" class="left_column">
<div class="" id="parent-fieldname-text-82bb06222e304b0cc2d6d57392b7a64f">
<p><span class="Apple-style-span"><b>Find your next hike! </b>Use your mouse to explore the map and click the icons for more details. Search WTA's Hiking Guide or filter results using the panel at right. <b><i>Zoom in from the statewide view to see many more results.</i> </b>The map only displays hikes with trail coordinates. Happy Hiking! <br></span></p>
<p><span class="boldRedText">Note:</span><span class="Apple-style-span"> Do you like this website? Please consider donating to WTA. <a class="external-link" href="https://www.gifttool.com/donations/Donate?ID=1468&AID=928" target="_blank"><img src="http://www.wta.org/site_images/copy_of_donate.jpg" alt="Donate" class="image-inline" title="Donate"></a><br></span></p>
</div>
<div class="visualClear"><!-- --></div>
<div id="map_canvas" style="width: 700px; height: 500px; position: relative; background-color: rgb(229, 227, 223); overflow: hidden; -webkit-transform: translateZ(0);"></div>
<ul id="map-key"><li title="Hikes in the WTA Hiking Guide for which we have trailhead GPS coordinates.">
<img src="icon-hiker.png">
Hike
</li>
<li title="Zoom in from statewide view for many more suggestions.">
<img src="icon-hiker-featured.png">
Seasonal hike
</li>
<li title="Information about this hike will appear in the Details tab.">
<img src="icon-hiker-selected.png">
Selected hike
</li>
</ul>
</div>
<div id="right_column" class="right_column">
<dl class="portlet portletTrailheadSearch portlet-green"><dt class="portletHeader">
<span class="portletTopLeft"></span>
<span id="tab-search" class="tab tab-active">Search</span>
<span id="tab-details" class="tab tab-inactive">Details</span>
<span id="tab-results" class="tab tab-inactive">Results</span>
<span class="portletTopRight"></span>
</dt>
<dd class="portletItem odd">
<div id="tabc-details" class="tab-contents tab-hidden">Click a hike for more details.</div>
<div id="tabc-results" class="tab-contents tab-hidden">No search results.</div>
<div id="tabc-search" class="tab-contents">
<!-- TODO! This div is new, relative to the old Hike Finder. -->
<div id="geocode-search">
<h4>Zoom in on...</h4>
<form onsubmit="return false;">
<input type="text" id="geocode-text"/>
<input type="submit" id="geocode-button" value="Geocode"/>
</form>
</div>
<div id="zoom-settings">
<div class="discreet clear-link">
[<a href="javascript:void(0)" id="clear-form" title="Click this link to start your search from scratch">start over</a>]
</div>
<h4 id="zoom-label">Zoom Map By Region</h4>
<a class="region-zoom" href="javascript:void(0)" lat="48.365374" lng="-120.973206" z="9">North Cascades</a><br><a class="region-zoom" href="javascript:void(0)" lat="47.958663" lng="-120.984192" z="8">Central Cascades</a><br><a class="region-zoom" href="javascript:void(0)" lat="47.430874" lng="-121.36322" z="8">Snoqualmie Pass</a><br><a class="region-zoom" href="javascript:void(0)" lat="46.103709" lng="-122.060852" z="9">South Cascades</a><br><a class="region-zoom" href="javascript:void(0)" lat="46.880846" lng="-121.640625" z="9">Mt Rainier</a><br><a class="region-zoom" href="javascript:void(0)" lat="47.776252" lng="-123.675842" z="8">Olympics</a><br><a class="region-zoom" href="javascript:void(0)" lat="48.288676" lng="-122.330017" z="9">Puget Sound & Islands</a><br><a class="region-zoom" href="javascript:void(0)" lat="47.905296" lng="-118.927002" z="8">Northeast Washington</a><br><a class="region-zoom" href="javascript:void(0)" lat="46.585294" lng="-118.959961" z="8">Southeast Washington</a>
</div>
<div id="advanced-search">
<h4>Filter the Map</h4>
<div class="discreet clear-link">
[<a href="javascript:void(0)" id="clear-filters" title="Click this link to show all hikes on the map">clear filters</a>]
</div>
<div id="filter-mileage" class="field-wrapper">
<label for="filter-mileage-select" class="hiddenStructure">
Mileage Range
</label>
<select id="filter-mileage-select" class="feature-filter plain"><option value="0">Any mileage</option><option value="1">Under 3 miles</option><option value="2">3 to 8 miles</option><option value="3">8 to 12 miles</option><option value="4">Over 12 miles</option></select></div>
<div id="filter-elevation-gain" class="field-wrapper">
<label for="filter-elevationgain-select" class="hiddenStructure">
Elevation Gain
</label>
<select id="filter-elevationgain-select" class="feature-filter plain"><option value="0">Any elevation gain</option><option value="1">Under 500 ft</option><option value="2">500-1500 ft</option><option value="3">1500-3000 ft</option><option value="4">3000+ ft</option></select></div>
<!-- Feature-filter checkboxes. You can rearrange and re-style at will, so long
as the checkboxes still have class="feature-filter" and feature="*". -->
<div class="field-wrapper">
<input type="checkbox" id="filt_k" class="feature-filter" feature="k"><label class="filter-label" for="filt_k">Kid-friendly</label>
</div>
<!-- The map shows whether it's a coastal hike!
<div class="field-wrapper">
<input type="checkbox" id="filt_c" class="feature-filter" feature="c">
<label class="filter-label" for="filt_c">Coasts</label>
</div> -->
<div class="field-wrapper">
<input type="checkbox" id="filt_l" class="feature-filter" feature="l"><label class="filter-label" for="filt_l">Lakes</label>
</div>
<div class="field-wrapper">
<input type="checkbox" id="filt_r" class="feature-filter" feature="r"><label class="filter-label" for="filt_r">Rivers</label>
</div>
<div class="field-wrapper">
<input type="checkbox" id="filt_w" class="feature-filter" feature="w"><label class="filter-label" for="filt_w">Waterfalls</label>
</div>
<div class="field-wrapper">
<input type="checkbox" id="filt_o" class="feature-filter" feature="o"><label class="filter-label" for="filt_o">Old growth</label>
</div>
<div class="field-wrapper">
<input type="checkbox" id="ff" class="feature-filter" feature="f"><label class="filter-label" for="ff">Fall foliage</label>
</div>
<div class="field-wrapper">
<input type="checkbox" id="wm" class="feature-filter" feature="m"><label class="filter-label" for="wm">Wildflowers/Meadows</label>
</div>
<div class="field-wrapper">
<input type="checkbox" id="mv" class="feature-filter" feature="v"><label class="filter-label" for="mv">Mountain views</label>
</div>
<div class="field-wrapper">
<input type="checkbox" id="camp" class="feature-filter" feature="e"><label class="filter-label" for="camp">Established campsites</label>
</div>
<div class="field-wrapper">
<input type="checkbox" id="filt_s" class="feature-filter" feature="s"><label class="filter-label" for="filt_s">Summits</label>
</div>
<div class="field-wrapper">
<input type="checkbox" id="filt_a" class="feature-filter" feature="a"><label class="filter-label" for="filt_a">Wildlife</label>
</div>
<div class="field-wrapper">
<input type="checkbox" id="filt_p" class="feature-filter" feature="p"><label class="filter-label" for="filt_p">Ridges/Passes</label>
</div>
</div>
<div id="text-search">
<h4>Search WTA's Hiking Guide</h4>
<form onsubmit="return false;">
<input id="search-query" type="text" name="query" class="inputLabel" title="Text Search" width="35"><input id="search-button" type="submit" class="context allowMultiSubmit" name="search" value="Search"><br><input id="search-fulltext" type="checkbox" name="fulltext"><label title="Check this box to search hike description." for="search-fulltext">Full text</label>
</form>
</div>
</div>
</dd>
</dl>
</div>
</body>
</html>