root / djnro / templates / front / geolocate.html @ 2788460f
History | View | Annotate | Download (7.8 kB)
1 |
{% extends 'base.html' %} |
---|---|
2 |
{% load i18n %} |
3 |
{% load staticfiles %} |
4 |
{% block currentpagetitle %}{% trans "Closest Access Point" %}{% endblock %} |
5 |
|
6 |
{% block extrajs %} |
7 |
<script type="text/javascript" src="//maps.google.com/maps/api/js?v=3.exp&sensor=true&language=en&libraries=places"></script> |
8 |
<script type="text/javascript"> |
9 |
var lat = "{{MAP_CENTER.0}}";
|
10 |
var lat = parseFloat(lat.replace(",","."));
|
11 |
var lng = "{{MAP_CENTER.1}}";
|
12 |
var lng = parseFloat(lng.replace(",","."));
|
13 |
var zoomLevel = 6;
|
14 |
var latlng = new google.maps.LatLng(lat, lng);
|
15 |
var map = '';
|
16 |
var bounds = '';
|
17 |
var image = '';
|
18 |
var marker = '';
|
19 |
var eduMarker = false;
|
20 |
var infoWindow;
|
21 |
var getOnce = false;
|
22 |
var geocoder = null;
|
23 |
var infoWindow;
|
24 |
var directionDisplay;
|
25 |
var directionsService = new google.maps.DirectionsService();
|
26 |
|
27 |
var styles = [{
|
28 |
url : '{% static 'img/edugroup.png' %}',
|
29 |
height : 54,
|
30 |
width : 63,
|
31 |
textColor : '#ffffff',
|
32 |
textSize : 11
|
33 |
}, {
|
34 |
url : '{% static 'img/edugroup.png' %}',
|
35 |
height : 54,
|
36 |
width : 63,
|
37 |
textColor : '#ffffff',
|
38 |
textSize : 11
|
39 |
}, {
|
40 |
url : '{% static 'img/edugroup.png' %}',
|
41 |
height : 54,
|
42 |
width : 63,
|
43 |
textColor : '#ffffff',
|
44 |
textSize : 11
|
45 |
}];
|
46 |
|
47 |
function initialize() {
|
48 |
image = new google.maps.MarkerImage('{% static 'img/edupin.png' %}',
|
49 |
new google.maps.Size(29, 40),
|
50 |
new google.maps.Point(0, 0),
|
51 |
new google.maps.Point(14, 40)
|
52 |
);
|
53 |
var styleArray = [{
|
54 |
featureType : "all",
|
55 |
stylers : [{
|
56 |
saturation : -60
|
57 |
}, {
|
58 |
gamma : 1.00
|
59 |
}]
|
60 |
}, {
|
61 |
featureType : "poi.business",
|
62 |
elementType : "labels",
|
63 |
stylers : [{
|
64 |
visibility : "off"
|
65 |
}]
|
66 |
}, {
|
67 |
"featureType" : "transit.line",
|
68 |
"elementType" : "geometry",
|
69 |
"stylers" : [{
|
70 |
"visibility" : "off"
|
71 |
}]
|
72 |
}, {
|
73 |
"featureType" : "poi",
|
74 |
"elementType" : "all",
|
75 |
"stylers" : [{
|
76 |
"visibility" : "off"
|
77 |
}]
|
78 |
}, {
|
79 |
'featureType' : "administrative.country",
|
80 |
'elementType' : "labels",
|
81 |
'stylers' : [{
|
82 |
'visibility' : "off"
|
83 |
}]
|
84 |
}];
|
85 |
var mapOptions = {
|
86 |
center : latlng,
|
87 |
zoom : zoomLevel,
|
88 |
mapTypeId : google.maps.MapTypeId.ROADMAP,
|
89 |
styles : styleArray,
|
90 |
mapTypeId : google.maps.MapTypeId.ROADMAP,
|
91 |
mapTypeControlOptions : {
|
92 |
style : google.maps.MapTypeControlStyle.DEFAULT
|
93 |
},
|
94 |
navigationControl : true,
|
95 |
mapTypeControl : false,
|
96 |
};
|
97 |
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
|
98 |
|
99 |
var input = document.getElementById('searchTextField');
|
100 |
var autocomplete = new google.maps.places.Autocomplete(input);
|
101 |
|
102 |
autocomplete.bindTo('bounds', map);
|
103 |
|
104 |
infoWindow = new google.maps.InfoWindow();
|
105 |
bounds = new google.maps.LatLngBounds();
|
106 |
directionsDisplay = new google.maps.DirectionsRenderer();
|
107 |
geocoder = new google.maps.Geocoder();
|
108 |
directionsDisplay.setMap(map);
|
109 |
|
110 |
if (getOnce == false) {
|
111 |
marker = new google.maps.Marker({
|
112 |
position : latlng,
|
113 |
draggable : true,
|
114 |
animation : google.maps.Animation.DROP,
|
115 |
|
116 |
});
|
117 |
marker.setMap(map);
|
118 |
}
|
119 |
google.maps.event.addListener(map, 'idle', function() {
|
120 |
if(navigator.geolocation && getOnce == false) {
|
121 |
navigator.geolocation.getCurrentPosition(getPosition);
|
122 |
}
|
123 |
|
124 |
});
|
125 |
google.maps.event.addListener(map, 'click', function(event) {
|
126 |
moveMarker(event.latLng);
|
127 |
});
|
128 |
google.maps.event.addListener(marker, 'dragend', function(event) {
|
129 |
moveMarker(event.latLng);
|
130 |
});
|
131 |
|
132 |
google.maps.event.addListener(autocomplete, 'place_changed', function() {
|
133 |
var place = autocomplete.getPlace();
|
134 |
if (place.geometry.viewport) {
|
135 |
map.fitBounds(place.geometry.viewport);
|
136 |
} else {
|
137 |
map.setCenter(place.geometry.location);
|
138 |
map.setZoom(17); // Why 17? Because it looks good.
|
139 |
}
|
140 |
moveMarker(place.geometry.location);
|
141 |
});
|
142 |
}
|
143 |
|
144 |
function calcRoute(start, end) {
|
145 |
$("#distanceText").html();
|
146 |
var request = {
|
147 |
origin:start,
|
148 |
destination:end,
|
149 |
travelMode: google.maps.DirectionsTravelMode.WALKING
|
150 |
};
|
151 |
directionsService.route(request, function(response, status) {
|
152 |
if (status == google.maps.DirectionsStatus.OK) {
|
153 |
directionsDisplay.setDirections(response);
|
154 |
var route = response.routes[0];
|
155 |
var distText = route.legs[0].distance.text;
|
156 |
$("#distanceText").html('Total distance: ' + distText);
|
157 |
}
|
158 |
});
|
159 |
}
|
160 |
|
161 |
function moveMarker(position) {
|
162 |
marker.setPosition(position);
|
163 |
getClosest(position);
|
164 |
}
|
165 |
|
166 |
function getPosition(position) {
|
167 |
latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
|
168 |
getOnce = true;
|
169 |
map.setCenter(latlng);
|
170 |
map.setZoom(12);
|
171 |
marker.setPosition(latlng);
|
172 |
getClosest(latlng);
|
173 |
}
|
174 |
|
175 |
function getClosest(coords){
|
176 |
$.ajax({
|
177 |
url:"{% url closest %}",
|
178 |
data: {"lat": coords.lat(), "lng": coords.lng()},
|
179 |
type: "GET",
|
180 |
cache: false,
|
181 |
success:function(data){
|
182 |
bounds = new google.maps.LatLngBounds();
|
183 |
if (eduMarker){
|
184 |
eduMarker.setMap(null);
|
185 |
}
|
186 |
bounds.extend(coords);
|
187 |
bounds.extend(new google.maps.LatLng(data.lat, data.lng));
|
188 |
eduMarker = new google.maps.Marker({
|
189 |
position : new google.maps.LatLng(data.lat, data.lng),
|
190 |
draggable : true,
|
191 |
'icon': image,
|
192 |
animation : google.maps.Animation.DROP,
|
193 |
|
194 |
});
|
195 |
eduMarker.setMap(map);
|
196 |
map.fitBounds(bounds);
|
197 |
calcRoute(coords, new google.maps.LatLng(data.lat, data.lng));
|
198 |
google.maps.event
|
199 |
.addListener(
|
200 |
eduMarker,
|
201 |
'click',
|
202 |
function() {
|
203 |
infoWindow.setContent( "<div>"
|
204 |
+ data.text
|
205 |
+ "</div>");
|
206 |
infoWindow
|
207 |
.open(
|
208 |
map,
|
209 |
eduMarker);
|
210 |
});
|
211 |
}
|
212 |
});
|
213 |
|
214 |
}
|
215 |
|
216 |
function autocomplete() {
|
217 |
|
218 |
var input = $('#searchTextField');
|
219 |
var autocomplete = new google.maps.places.Autocomplete(input);
|
220 |
autocomplete.bindTo('bounds', map);
|
221 |
var marker = new google.maps.Marker({
|
222 |
map: map
|
223 |
});
|
224 |
|
225 |
|
226 |
}
|
227 |
|
228 |
function resizeMap()
|
229 |
{
|
230 |
|
231 |
if (map != undefined)
|
232 |
{
|
233 |
google.maps.event.trigger(map, 'resize');
|
234 |
}
|
235 |
|
236 |
return false;
|
237 |
}
|
238 |
|
239 |
$(document).ready(function() {
|
240 |
initialize();
|
241 |
resizeMap();
|
242 |
$("#myloc").click(function(){
|
243 |
navigator.geolocation.getCurrentPosition(getPosition);
|
244 |
return false;
|
245 |
});
|
246 |
$("#mylocm").click(function(){
|
247 |
navigator.geolocation.getCurrentPosition(getPosition);
|
248 |
return false;
|
249 |
});
|
250 |
|
251 |
});
|
252 |
|
253 |
$(window).resize(function(){
|
254 |
resizeMap();
|
255 |
});
|
256 |
|
257 |
</script>
|
258 |
{% endblock %} |
259 |
|
260 |
{% block bodyclass %}closest{% endblock%} |
261 |
{% block header %} |
262 |
<div class="push-top"></div> |
263 |
<nav class="navbar navbar-default navbar-fixed-top"> |
264 |
<div class="container"> |
265 |
<div class="navbar-header"> |
266 |
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> |
267 |
<span class="sr-only">Toggle navigation</span> |
268 |
<span class="icon-bar"></span> |
269 |
<span class="icon-bar"></span> |
270 |
<span class="icon-bar"></span> |
271 |
</button>
|
272 |
<a class="navbar-brand" href="/"><img src="{% static 'img/eduroam_logo.png' %}" /></a> |
273 |
</div>
|
274 |
<div id="navbar" class="navbar-collapse collapse"> |
275 |
<div class="col-sm-3 col-md-3 pull-right"> |
276 |
<div class="input-group" style="margin-top: 8px;"> |
277 |
<span class="input-group-btn"> |
278 |
<button id="mylocm" class="btn btn-default" type="button">My location</button> |
279 |
</span>
|
280 |
<input type="text" id="searchTextField" class="form-control" placeholder="Search for..."> |
281 |
</div>
|
282 |
</div>
|
283 |
<div class="col-sm-3 col-md-3 pull-right" style="margin-top: 18px"> |
284 |
<span id="distanceText"></span> |
285 |
</div>
|
286 |
</div>
|
287 |
</div>
|
288 |
</nav>
|
289 |
{% endblock %} |
290 |
{% block content %} |
291 |
<div id="map_canvas" style="width:100%"></div> |
292 |
{% endblock %} |
293 |
|