root / djnro / templates / front / geolocate.html @ d3ea44a4
History | View | Annotate | Download (10.3 kB)
1 |
{% load i18n %} |
---|---|
2 |
<!DOCTYPE html>
|
3 |
<html lang="en" style="height: 100%"> |
4 |
<head>
|
5 |
<meta charset="utf-8"> |
6 |
<title>{% trans "Closest" %} Eduroam</title> |
7 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
8 |
<link REL="shortcut icon" HREF="/static/img/favicon.ico"> |
9 |
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/static/img/edu144-icon.png"> |
10 |
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/static/img/edu114-icon.png"> |
11 |
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/static/img/edu72-icon.png"> |
12 |
<link rel="apple-touch-icon-precomposed" href="/static/img/edu-icon.png"> |
13 |
<meta name="description" content=""> |
14 |
<meta name="author" content=""> |
15 |
|
16 |
<script type="text/javascript" src="/static/js/jquery.min.js"></script> |
17 |
<link href="/static/css/bootstrap.min.css" rel="stylesheet"> |
18 |
<script src="/static/js/bootstrap.min.js"></script> |
19 |
<script type="text/javascript" src="//maps.google.com/maps/api/js?v=3.exp&sensor=true&language=en&libraries=places"></script> |
20 |
|
21 |
<style>
|
22 |
|
23 |
body { |
24 |
padding-top: 40px; |
25 |
padding-left: 0px; |
26 |
padding-right: 0px; |
27 |
/*padding-bottom: 60px;*/ |
28 |
} |
29 |
#map_canvas { |
30 |
/* |
31 |
width: 100%; |
32 |
height: 100%; |
33 |
*/ |
34 |
position: relative; |
35 |
height: 100%; |
36 |
width: 100%; |
37 |
bottom: 0; |
38 |
left: 0; |
39 |
right: 0; |
40 |
top: 0px; |
41 |
} |
42 |
|
43 |
|
44 |
.navbar-fixed-top{ |
45 |
margin-bottom: 0px; |
46 |
} |
47 |
|
48 |
.btnNoBgMove:hover { |
49 |
background-position: 0 0; |
50 |
} |
51 |
|
52 |
</style>
|
53 |
<!--[if lt IE 9]>
|
54 |
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
55 |
<![endif]-->
|
56 |
|
57 |
<link href="/static/css/bootstrap-responsive.min.css" rel="stylesheet"> |
58 |
<style>
|
59 |
|
60 |
body { |
61 |
|
62 |
padding-left: 0px; |
63 |
padding-right: 0px; |
64 |
/*padding-bottom: 60px;*/ |
65 |
} |
66 |
.container-fluid { |
67 |
padding-left: 0px; |
68 |
padding-right: 0px; |
69 |
} |
70 |
.pac-container{ |
71 |
z-index: 3000 !important; |
72 |
} |
73 |
</style>
|
74 |
<script type="text/javascript"> |
75 |
var lat = "{{MAP_CENTER.0}}";
|
76 |
var lat = parseFloat(lat.replace(",","."));
|
77 |
var lng = "{{MAP_CENTER.1}}";
|
78 |
var lng = parseFloat(lng.replace(",","."));
|
79 |
var zoomLevel = 6;
|
80 |
var latlng = new google.maps.LatLng(lat, lng);
|
81 |
var map = '';
|
82 |
var bounds = '';
|
83 |
var image = '';
|
84 |
var marker = '';
|
85 |
var eduMarker = false;
|
86 |
var infoWindow;
|
87 |
var getOnce = false;
|
88 |
var geocoder = null;
|
89 |
var infoWindow;
|
90 |
var directionDisplay;
|
91 |
var directionsService = new google.maps.DirectionsService();
|
92 |
|
93 |
var styles = [{
|
94 |
url : '/static/img/edugroup.png',
|
95 |
height : 54,
|
96 |
width : 63,
|
97 |
textColor : '#ffffff',
|
98 |
textSize : 11
|
99 |
}, {
|
100 |
url : '/static/img/edugroup.png',
|
101 |
height : 54,
|
102 |
width : 63,
|
103 |
textColor : '#ffffff',
|
104 |
textSize : 11
|
105 |
}, {
|
106 |
url : '/static/img/edugroup.png',
|
107 |
height : 54,
|
108 |
width : 63,
|
109 |
textColor : '#ffffff',
|
110 |
textSize : 11
|
111 |
}];
|
112 |
|
113 |
function initialize() {
|
114 |
image = new google.maps.MarkerImage('/static/img/edupin.png',
|
115 |
new google.maps.Size(29, 40),
|
116 |
new google.maps.Point(0, 0),
|
117 |
new google.maps.Point(14, 40)
|
118 |
);
|
119 |
var styleArray = [{
|
120 |
featureType : "all",
|
121 |
stylers : [{
|
122 |
saturation : -60
|
123 |
}, {
|
124 |
gamma : 1.00
|
125 |
}]
|
126 |
}, {
|
127 |
featureType : "poi.business",
|
128 |
elementType : "labels",
|
129 |
stylers : [{
|
130 |
visibility : "off"
|
131 |
}]
|
132 |
}, {
|
133 |
"featureType" : "transit.line",
|
134 |
"elementType" : "geometry",
|
135 |
"stylers" : [{
|
136 |
"visibility" : "off"
|
137 |
}]
|
138 |
}, {
|
139 |
"featureType" : "poi",
|
140 |
"elementType" : "all",
|
141 |
"stylers" : [{
|
142 |
"visibility" : "off"
|
143 |
}]
|
144 |
}, {
|
145 |
'featureType' : "administrative.country",
|
146 |
'elementType' : "labels",
|
147 |
'stylers' : [{
|
148 |
'visibility' : "off"
|
149 |
}]
|
150 |
}];
|
151 |
var mapOptions = {
|
152 |
center : latlng,
|
153 |
zoom : zoomLevel,
|
154 |
mapTypeId : google.maps.MapTypeId.ROADMAP,
|
155 |
styles : styleArray,
|
156 |
mapTypeId : google.maps.MapTypeId.ROADMAP,
|
157 |
mapTypeControlOptions : {
|
158 |
style : google.maps.MapTypeControlStyle.DEFAULT
|
159 |
},
|
160 |
navigationControl : true,
|
161 |
mapTypeControl : false,
|
162 |
};
|
163 |
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
|
164 |
|
165 |
var input = document.getElementById('searchTextField');
|
166 |
var autocomplete = new google.maps.places.Autocomplete(input);
|
167 |
|
168 |
autocomplete.bindTo('bounds', map);
|
169 |
|
170 |
infoWindow = new google.maps.InfoWindow();
|
171 |
bounds = new google.maps.LatLngBounds();
|
172 |
directionsDisplay = new google.maps.DirectionsRenderer();
|
173 |
geocoder = new google.maps.Geocoder();
|
174 |
directionsDisplay.setMap(map);
|
175 |
|
176 |
if (getOnce == false) {
|
177 |
marker = new google.maps.Marker({
|
178 |
position : latlng,
|
179 |
draggable : true,
|
180 |
animation : google.maps.Animation.DROP,
|
181 |
|
182 |
});
|
183 |
marker.setMap(map);
|
184 |
}
|
185 |
google.maps.event.addListener(map, 'idle', function() {
|
186 |
if(navigator.geolocation && getOnce == false) {
|
187 |
navigator.geolocation.getCurrentPosition(getPosition);
|
188 |
}
|
189 |
|
190 |
});
|
191 |
google.maps.event.addListener(map, 'click', function(event) {
|
192 |
moveMarker(event.latLng);
|
193 |
});
|
194 |
google.maps.event.addListener(marker, 'dragend', function(event) {
|
195 |
moveMarker(event.latLng);
|
196 |
});
|
197 |
|
198 |
google.maps.event.addListener(autocomplete, 'place_changed', function() {
|
199 |
var place = autocomplete.getPlace();
|
200 |
if (place.geometry.viewport) {
|
201 |
map.fitBounds(place.geometry.viewport);
|
202 |
} else {
|
203 |
map.setCenter(place.geometry.location);
|
204 |
map.setZoom(17); // Why 17? Because it looks good.
|
205 |
}
|
206 |
moveMarker(place.geometry.location);
|
207 |
});
|
208 |
}
|
209 |
|
210 |
function calcRoute(start, end) {
|
211 |
$("#distanceText").html();
|
212 |
var request = {
|
213 |
origin:start,
|
214 |
destination:end,
|
215 |
travelMode: google.maps.DirectionsTravelMode.WALKING
|
216 |
};
|
217 |
directionsService.route(request, function(response, status) {
|
218 |
if (status == google.maps.DirectionsStatus.OK) {
|
219 |
directionsDisplay.setDirections(response);
|
220 |
var route = response.routes[0];
|
221 |
var distText = route.legs[0].distance.text;
|
222 |
$("#distanceText").html(distText);
|
223 |
}
|
224 |
});
|
225 |
}
|
226 |
|
227 |
function moveMarker(position) {
|
228 |
marker.setPosition(position);
|
229 |
getClosest(position);
|
230 |
}
|
231 |
|
232 |
function getPosition(position) {
|
233 |
latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
|
234 |
getOnce = true;
|
235 |
map.setCenter(latlng);
|
236 |
map.setZoom(12);
|
237 |
marker.setPosition(latlng);
|
238 |
getClosest(latlng);
|
239 |
}
|
240 |
|
241 |
function getClosest(coords){
|
242 |
$.ajax({
|
243 |
url:"{% url closest %}",
|
244 |
data: {"lat": coords.lat(), "lng": coords.lng()},
|
245 |
type: "GET",
|
246 |
cache: false,
|
247 |
success:function(data){
|
248 |
bounds = new google.maps.LatLngBounds();
|
249 |
if (eduMarker){
|
250 |
eduMarker.setMap(null);
|
251 |
}
|
252 |
bounds.extend(coords);
|
253 |
bounds.extend(new google.maps.LatLng(data.lat, data.lng));
|
254 |
eduMarker = new google.maps.Marker({
|
255 |
position : new google.maps.LatLng(data.lat, data.lng),
|
256 |
draggable : true,
|
257 |
'icon': image,
|
258 |
animation : google.maps.Animation.DROP,
|
259 |
|
260 |
});
|
261 |
eduMarker.setMap(map);
|
262 |
map.fitBounds(bounds);
|
263 |
calcRoute(coords, new google.maps.LatLng(data.lat, data.lng));
|
264 |
google.maps.event
|
265 |
.addListener(
|
266 |
eduMarker,
|
267 |
'click',
|
268 |
function() {
|
269 |
infoWindow.setContent( "<div>"
|
270 |
+ data.text
|
271 |
+ "</div>");
|
272 |
infoWindow
|
273 |
.open(
|
274 |
map,
|
275 |
eduMarker);
|
276 |
});
|
277 |
}
|
278 |
});
|
279 |
|
280 |
}
|
281 |
|
282 |
function autocomplete() {
|
283 |
|
284 |
var input = $('#searchTextField');
|
285 |
var autocomplete = new google.maps.places.Autocomplete(input);
|
286 |
autocomplete.bindTo('bounds', map);
|
287 |
var marker = new google.maps.Marker({
|
288 |
map: map
|
289 |
});
|
290 |
|
291 |
|
292 |
}
|
293 |
|
294 |
function resizeMap()
|
295 |
{
|
296 |
h = $(window).height();
|
297 |
h = h - 55;
|
298 |
$("div#map_canvas").css({'height' : h+'px' });
|
299 |
|
300 |
|
301 |
if (map != undefined)
|
302 |
{
|
303 |
google.maps.event.trigger(map, 'resize');
|
304 |
}
|
305 |
|
306 |
return false;
|
307 |
}
|
308 |
|
309 |
$(document).ready(function() {
|
310 |
initialize();
|
311 |
resizeMap();
|
312 |
$("#myloc").click(function(){
|
313 |
navigator.geolocation.getCurrentPosition(getPosition);
|
314 |
return false;
|
315 |
});
|
316 |
$("#mylocm").click(function(){
|
317 |
navigator.geolocation.getCurrentPosition(getPosition);
|
318 |
return false;
|
319 |
});
|
320 |
|
321 |
});
|
322 |
|
323 |
$(window).resize(function(){
|
324 |
resizeMap();
|
325 |
});
|
326 |
|
327 |
</script>
|
328 |
</head>
|
329 |
|
330 |
<body>
|
331 |
|
332 |
<div class="navbar navbar-fixed-top" style="margin-bottom: 0px; margin-right: 0px; margin-left: 0px;"> |
333 |
<div class="navbar-inner" style="padding: 0px 20px;"> |
334 |
<div class="container-fluid"> |
335 |
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> |
336 |
<span class="icon-bar"></span> |
337 |
<span class="icon-bar"></span> |
338 |
<span class="icon-bar"></span> |
339 |
</a>
|
340 |
<a class="brand" href="#" style="font-size: 14px;"><img src="/static/img/eduroam_trans_80pix.png" style="height:20px"> near me</a> |
341 |
<ul class="nav"> |
342 |
<li id="distanceText" style="line-height:40px;" style="font-size: 14px;"></li> |
343 |
</ul>
|
344 |
<div class="nav-collapse collapse"> |
345 |
<ul class="nav"> |
346 |
<li class="hidden-desktop" style="text-align: center"><span class="alert" style="font-size: 12px;padding: 3px 2px; line-height: 40px;">Accuracy depends on connection type</span></li> |
347 |
<li style="text-align: center"> |
348 |
<div class="navbar-search pull-left" style="margin-left: 5px;"> |
349 |
<input type="text" class="search-query" placeholder="Search" id="searchTextField"> |
350 |
</div>
|
351 |
</li>
|
352 |
<li class="hidden-desktop" style="text-align: center;"><button id="mylocm" title="Current location" class="btn btnNoBgMove" style="background: url('/static/img/home_target.png') no-repeat top center; width: 80px; height: 32px; padding: 0px;" href="#"></button></li> |
353 |
<li class="visible-desktop"><span id="localert" class="alert" style="font-size: 12px;padding: 3px; 2px; line-height: 40px; margin-left: 15px;">Accuracy depends on connection type</span></li> |
354 |
</ul>
|
355 |
<ul class="nav pull-right visible-desktop"> |
356 |
<li class="pull-right" style="text-align: center"> |
357 |
<button id="myloc" title="Current location" class="btn btnNoBgMove" style="background: url('/static/img/home_target.png') no-repeat top center; width: 32px; height: 32px; padding: 0px;" href="#"></button> |
358 |
</li>
|
359 |
</ul>
|
360 |
|
361 |
</div><!--/.nav-collapse --> |
362 |
</div>
|
363 |
</div>
|
364 |
</div>
|
365 |
<div class="container-fluid"> |
366 |
<div class="row-fluid"> |
367 |
<div class="span12"> |
368 |
<div class="row-fluid"> |
369 |
<div id="map_canvas" style="width:100%"></div> |
370 |
</div>
|
371 |
</div>
|
372 |
</div>
|
373 |
</div>
|
374 |
|
375 |
</body>
|
376 |
</html>
|
377 |
|