-
Notifications
You must be signed in to change notification settings - Fork 65
/
Copy pathsearch.html
executable file
·222 lines (214 loc) · 8.18 KB
/
search.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
222
<!--
Copyright 2014 Google Inc. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
This code is an example implementation of how to implement YouTube geo-search
search and search filters via established APIs. The application itself is directed toward the use
case of journalists trying to discover citizen journalism on YouTube. It integrates with the Google Maps API to plot
the upload location of geo-tagged video results.
Author: Stephen Nicholls, March 10, 2014
-->
<!DOCTYPE html>
<html>
<head>
<title>Geo Search Tool</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="js/search.js"></script>
</head>
<body>
<form id="jt_search_form" action="javascript:clickedSearchButton()">
<table>
<tr>
<td width='1050' align="right" valign="top">
<a href="about.html">About</a>
</td>
</tr>
</table>
<div id="topSearchDisplay">
<table id="searchDisplay">
<tr>
<td id="searchLocationLabel">Location</td>
<td> </td>
<td id="timeframeLabel">Time Frame</td>
</tr>
<tr>
<td>
<input id="searchLocation" value='' type="text" placeholder='e.g. City, Intersection, Address'>
</td>
<td> </td>
<td>
<select id='timeWindow' onChange='displayCustomRangeSection()'>
<option value="any" selected="selected">Any Time</option>
<option value="hour">Past Hour</option>
<option value="3hours">Past 3 Hours</option>
<option value="6hours">Past 6 Hours</option>
<option value="9hours">Past 9 Hours</option>
<option value="12hours">Past 12 Hours</option>
<option value="24hours">Past 24 Hours</option>
<option value="week">Past Week</option>
<option value="30days">Past 30 days</option>
<option value="year">Past Year</option>
<option value='custom_range'>Custom Range</option>
</select>
</td>
<td> </td>
<td>
<input id="search-button" type="submit" value="Search">
</td>
</tr>
<tr id='customRangeSection_10'>
<td>
<td>
</tr>
<tr>
<td id='customRangeSection_1' colspan='3'>
<table>
<tr>
<td id='customRangeSection_2'> </td>
<td>
<table>
<tr>
<td id='customRangeSection_3'>Start Date</td>
<td> </td>
<td id='customRangeSection_4'>
<input id='startDate' placeholder='10-01-2011' type="text">
</td>
</tr>
</table>
</td>
<td> </td>
<td>
<table>
<tr>
<td id='customRangeSection_5'>End Date</td>
<td> </td>
<td id='customRangeSection_6'>
<input id='endDate' placeholder='03-22-2014' type="text">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td id='customRangeSection_7' colspan='2'>
<table>
<tr>
<td id='customRangeSection_8'> </td>
<td id='customRangeSection_9'>* use mm-dd-yyyy format</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan='3' align='right'>
<a id="showFiltersLink" href="javascript:showSearchFilters();">Show Advanced Search</a>
<a id="hideFiltersLink" href="javascript:hideSearchFilters();">Hide Advanced Search</a>
</td>
</tr>
</table>
</div>
<div id="showErrorsContainer">
<div class="showErrors"></div>
</div>
<div id="searchFiltersDisplay">
<table>
<tr>
<td> </td>
<td>Keywords
</td>
<td> </td>
<td>Radius
</td>
<td> </td>
<td>Channels to Search On
</td>
<td> </td>
<td>
</td>
</tr>
<tr>
<td> </td>
<td>
<input id='query' value='' type="text" placeholder=' e.g. fire, explosion'
title='Enter keywords here to narrow the search results further'>
</td>
<td> </td>
<td>
<select id='locRadius' title='Enter the location radius to search on'>
<option value="">None</option>
<option value="1km">1km</option>
<option value="10km" selected="selected">10km</option>
<option value="50km">50km</option>
<option value="100km">100km</option>
<option value="500km">500km</option>
<option value="1000km">1000km</option>
</select>
</td>
<td> </td>
<td>
<input id='channelList' value='' type="text" width="100"
title='Enter comma separated list of channels to search exclusively on'>
</td>
<td> </td>
<td>
</td>
</tr>
</table>
<table>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
<td>
<div id="creativeCommonsText">
<input type="checkbox" id="creativeCommonsOnly" value="true"
title='Show only results that are under the Creative Commons liscense.'>
<abbr title='Show only results that are under the Creative Commons liscense.'>Creative Commons Only
Results</abbr></div>
</td>
<td> </td>
<td>
<input type="checkbox" id="embedOnly" value="true"'Show only results that are embeddable in other sites'>
<abbr title='Show only results that are embeddable in other sites'>Embeddable Only Results</abbr></td>
<td> </td>
<td>
<input type="checkbox" id="liveOnly" value="true" title='Show only live stream results'>
<abbr title='Show only live stream results'>Live Only Results</abbr></td>
</tr>
</table>
</div>
</form>
<table>
<tr>
<td colspan='2' align="right">
<div id=searchResultCountContainer>
<div id=searchResultCount></div>
</div>
</td>
</tr>
<tr>
<td width='350'>
<div id="video-container">
<table id='tableOfVideoContentResults'></table>
</div>
</td>
<td valign='top'>
<div id="map-canvas"></div>
</td>
</tr>
</table>
</body>
</html>