-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
193 lines (183 loc) · 7.38 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BeeHive</title>
<link rel="stylesheet" href="./bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="./awesome-markers/leaflet.awesome-markers.css" type="text/css" />
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<style type="text/css">
#map {
position:absolute;
top:0;
bottom:0;
width:100%;
}
.logo{
position: absolute;
top: 20px;
left:20px;
width: 210px;
height: 65px;
padding-left: 20px;
z-index: 9999;
background: #FFCD30;
border-radius: 10px;
}
</style>
<script src="./jquery.min.js"></script>
<script src="./bootstrap.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="./awesome-markers/leaflet.awesome-markers.min.js"></script>
<script type="text/javascript">
function timeConverter(UNIX_timestamp){
var a = new Date(UNIX_timestamp*1000);
var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var year = a.getFullYear();
var month = months[a.getMonth()];
var date = a.getDate();
var hour = a.getHours();
var min = a.getMinutes();
var sec = a.getSeconds();
var time = date+','+month+' '+year+' '+hour+':'+min+':'+sec ;
return time;
}
var map;
$( document ).ready(function() {
// create a map in the "map" div, set the view to a given place and zoom
map = L.map('map',{ zoomControl: false }).setView([25.0192013,121.5407913], 16);
// add zoom control to top right, since site logo is on topleft
new L.Control.Zoom({ position: 'topright' }).addTo(map);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
$('#welcome').modal('show');
$('#load-data-button').click(function () {
$(this).button('loading');
$.ajax("data.php?limit=" + $('input[name=load-limit]:checked').val() + "&gender=" + $('input[name=load-gender]:checked').val() + "&uid=" + $('input[name=load-uid]').val() + "&place=" + $("select[name=load-place] option:selected").val() + "&range=" + $('input[name=load-range]').val())
.done(function( data ) {
// gender: 0 boy 1 girl
var text_color = ['cornflowerblue','hotpink'];
var icons = ['male', 'female'];
var marker_color = ['blue','red'];
data.forEach(function(data){
var marker = new L.marker([data['latitude'],data['longitude']], {icon: L.AwesomeMarkers.icon({icon: icons[data['gender']], prefix: 'fa', markerColor: marker_color[data['gender']]}) }).addTo(map)
.bindPopup('<img src="http://filestoretw1.beetalkmobile.com:8081/file/' + data['avatar'] + '"><br>Name: <span style="color:' + text_color[data['gender']] + '">' + data['name'] + '</span><br>Birthday: ' + data['birthday'] + '<br>BeeTalk ID: ' + data['customized_id'] + '<br>Status: ' + data['signature'] + '<br><br>Last Update: ' + timeConverter(data['timestamp']));
console.log(data);
});
if($("select[name=load-place] option:selected").val() != -1){
eval('map.setView([' + $("select[name=load-place] option:selected").val() + '], 16)');
}else{
map.setView([ data[0]['latitude'], data[0]['longitude'] ], 16);
}
$(this).button('reset');
$('#welcome').modal('hide');
});
});
});
</script>
</head>
<body>
<div class="logo">
<h3><span style="color: white"><span style="vertical-align: text-top">⬢</span> Bee</span>Hive <span style="color: white; vertical-align: text-bottom; font-size: 0.7em">alpha</span></h3>
</div>
<div class="modal fade" id="welcome" tabindex="-1" role="dialog" aria-hidden="true">
<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">歡迎使用 BeeHive</h4>
</div>
<div class="modal-body">
<div class="form-group">
顯示性別：<br>
<div class="radio-inline">
<label>
<input type="radio" name="load-gender" value="-1" checked>
不限
</label>
</div>
<div class="radio-inline">
<label>
<input type="radio" name="load-gender" value="0">
男生
</label>
</div>
<div class="radio-inline">
<label>
<input type="radio" name="load-gender" value="1">
女生
</label>
</div>
</div>
<div class="form-group">
附近地區：
<select name="load-place">
<option value="-1" selected>不限</option>
<option value="25.046254,121.51753200000009">捷運台北車站</option>
<option value="25.017341000000002,121.53975200000004">臺灣大學</option>
<option value="24.986233,121.57584300000008">政治大學</option>
<option value="25.036328,121.432772">輔仁大學</option>
<option value="25.167817,121.44556">捷運淡水站</option>
<option value="25.037525,121.56378199999993">台北市政府</option>
<option value="24.794725,120.99323200000003">國立清華大學</option>
<option value="24.785915,120.99673499999994">交通大學光復校區</option>
<option value="25.079651,121.23421699999994">臺灣桃園國際機場</option>
<option value="24.969481,121.19251600000007">國立中央大學</option>
<option value="24.13678,120.68500799999993">台中火車站</option>
<option value="22.998361,120.21606799999995">成功大學</option>
<option value="22.639619,120.30210999999997">高雄火車站</option>
<option value="22.729957,120.406616">義大遊樂世界</option>
<option value="24.178744,120.64649099999997">逢甲夜市</option>
</select>
周圍
<input name="load-range" value="0">
公里
</div>
<div class="form-group">
載入資料的筆數：<br>
<div class="radio-inline">
<label>
<input type="radio" name="load-limit" value="100" checked>
100
</label>
</div>
<div class="radio-inline">
<label>
<input type="radio" name="load-limit" value="500">
500
</label>
</div>
<div class="radio-inline">
<label>
<input type="radio" name="load-limit" value="1000">
1000
</label>
</div>
<div class="radio-inline">
<label>
<input type="radio" name="load-limit" value="3000">
3000
</label>
</div>
<div class="radio-inline">
<label>
<input type="radio" name="load-limit" value="15000">
15000
</label>
</div>
<br>UID:<br>
<input name="load-uid" value="">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-loading-text="載入中..." id="load-data-button">載入</button>
</div>
</div>
</div>
</div>
<div id="map"></div>
</body>
</html>