root / templates / front / index.html @ 13e8e1ec
History | View | Annotate | Download (10.7 kB)
1 |
{% extends "base.html" %} |
---|---|
2 |
{% load i18n %} |
3 |
{% block title %}eduroam@Greece{% endblock %} |
4 |
{% block homepage %}class="active"{% endblock %} |
5 |
{% block hometop %}class="active"{% endblock %} |
6 |
{% block extrahead %} |
7 |
<style type="text/css"> |
8 |
html,body { |
9 |
height: 100%; |
10 |
overflow: hidden; |
11 |
} |
12 |
.headtitle {font-family: "Franklin Gothic Demi", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif; letter-spacing: -1px; } |
13 |
</style>
|
14 |
<script type="text/javascript" src="/static/js/jquery.min.js"></script> |
15 |
<script type="text/javascript" src="/static/js/markerclusterer.js"></script> |
16 |
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> |
17 |
<script type="text/javascript"> |
18 |
var lat = 36.97;
|
19 |
var lng = 23.71;
|
20 |
var zoomLevel = 6;
|
21 |
var latlng = new google.maps.LatLng(lat,lng);
|
22 |
var map = '';
|
23 |
var bounds = '';
|
24 |
var image = '';
|
25 |
var infoWindow;
|
26 |
addr = {};
|
27 |
|
28 |
|
29 |
var styles = [ {
|
30 |
url : '/static/img/edugroup.png',
|
31 |
height : 54,
|
32 |
width : 63,
|
33 |
textColor : '#ffffff',
|
34 |
textSize : 11
|
35 |
}, {
|
36 |
url : '/static/img/edugroup.png',
|
37 |
height : 54,
|
38 |
width : 63,
|
39 |
textColor : '#ffffff',
|
40 |
textSize : 11
|
41 |
}, {
|
42 |
url : '/static/img/edugroup.png',
|
43 |
height : 54,
|
44 |
width : 63,
|
45 |
textColor : '#ffffff',
|
46 |
textSize : 11
|
47 |
} ];
|
48 |
|
49 |
function initialize() {
|
50 |
image = new google.maps.MarkerImage('/static/img/edupin.png',
|
51 |
// This marker is 29 pixels wide by 40 pixels tall.
|
52 |
new google.maps.Size(29, 40),
|
53 |
// The origin for this image is 0,0.
|
54 |
new google.maps.Point(0, 0),
|
55 |
// The anchor for this image is the base of the flagpole at 18,42.
|
56 |
new google.maps.Point(14, 40));
|
57 |
|
58 |
var styleArray = [ {
|
59 |
featureType : "all",
|
60 |
stylers : [ {
|
61 |
saturation : -60
|
62 |
}, {
|
63 |
gamma : 1.00
|
64 |
} ]
|
65 |
}, {
|
66 |
featureType : "poi.business",
|
67 |
elementType : "labels",
|
68 |
stylers : [ {
|
69 |
visibility : "off"
|
70 |
} ]
|
71 |
}, {
|
72 |
"featureType" : "transit.line",
|
73 |
"elementType" : "geometry",
|
74 |
"stylers" : [ {
|
75 |
"visibility" : "off"
|
76 |
} ]
|
77 |
}, {
|
78 |
"featureType" : "poi",
|
79 |
"elementType" : "all",
|
80 |
"stylers" : [ {
|
81 |
"visibility" : "off"
|
82 |
} ]
|
83 |
}, {
|
84 |
'featureType' : "administrative.country",
|
85 |
'elementType' : "labels",
|
86 |
'stylers' : [ {
|
87 |
'visibility' : "off"
|
88 |
} ]
|
89 |
}
|
90 |
|
91 |
];
|
92 |
|
93 |
geocoder = new google.maps.Geocoder();
|
94 |
var mapOptions = {
|
95 |
center : latlng,
|
96 |
zoom : zoomLevel,
|
97 |
mapTypeId : google.maps.MapTypeId.ROADMAP,
|
98 |
styles : styleArray,
|
99 |
mapTypeId : google.maps.MapTypeId.ROADMAP,
|
100 |
mapTypeControlOptions : {
|
101 |
style : google.maps.MapTypeControlStyle.DEFAULT
|
102 |
},
|
103 |
navigationControl : true,
|
104 |
mapTypeControl : false,
|
105 |
};
|
106 |
map = new google.maps.Map(document.getElementById("map_canvas"),
|
107 |
mapOptions);
|
108 |
|
109 |
|
110 |
var homeControlDiv = document.createElement('div');
|
111 |
homeControlDiv.className='roundButtonHolder';
|
112 |
homeControlDiv.id="locationButton";
|
113 |
var homeControl = new HomeControl(homeControlDiv, map);
|
114 |
|
115 |
homeControlDiv.index = 1;
|
116 |
map.controls[google.maps.ControlPosition.TOP_LEFT].push(homeControlDiv);
|
117 |
|
118 |
bounds = new google.maps.LatLngBounds();
|
119 |
infoWindow = new google.maps.InfoWindow();
|
120 |
google.maps.event.addListener(map, 'idle', function() {
|
121 |
center = map.getCenter();
|
122 |
geocode(center);
|
123 |
zoom = map.getZoom();
|
124 |
if (zoom > 12){
|
125 |
$("#showCityBtn").show();
|
126 |
$("#showCountryBtn").hide();
|
127 |
}
|
128 |
else if ((zoom <= 12) && (zoom > 7)){
|
129 |
$("#showCityBtn").hide();
|
130 |
$("#showCountryBtn").show();
|
131 |
}
|
132 |
else {
|
133 |
$("#showCityBtn").hide();
|
134 |
$("#showCountryBtn").hide();
|
135 |
}
|
136 |
});
|
137 |
|
138 |
|
139 |
}
|
140 |
|
141 |
var markers = new Array();
|
142 |
function placeMarkers() {
|
143 |
|
144 |
$
|
145 |
.get(
|
146 |
"{% url get-all-services %}",
|
147 |
function(data) {
|
148 |
$
|
149 |
.each(
|
150 |
data,
|
151 |
function(index, jsonMarker) {
|
152 |
var marker = createMarker(jsonMarker);
|
153 |
if (marker) {
|
154 |
bounds
|
155 |
.extend(marker.position);
|
156 |
markers.push(marker);
|
157 |
google.maps.event
|
158 |
.addListener(
|
159 |
marker,
|
160 |
'click',
|
161 |
function() {
|
162 |
infoWindow.content = "<div><h4>"
|
163 |
+ jsonMarker.inst
|
164 |
+ "</h4>"
|
165 |
+
|
166 |
|
167 |
"<div class='tabbable'>"
|
168 |
+ "<ul class='nav nav-tabs'>"
|
169 |
+ "<li class='active'><a href='#tab1' data-toggle='tab'>Main</a></li>"
|
170 |
+ "<li><a href='#tab2' data-toggle='tab'>Advanced</a></li>"
|
171 |
+ "</ul>"
|
172 |
+ "<div class='tab-content'>"
|
173 |
+ "<div class='tab-pane active' id='tab1'>"
|
174 |
+ "<dl class='dl-horizontal'>"
|
175 |
+ "<dt>Name</dt><dd>"
|
176 |
+ jsonMarker.name
|
177 |
+ "</dd>"
|
178 |
+ "<dt>Address</dt><dd>"
|
179 |
+ jsonMarker.address
|
180 |
+ "</dd>"
|
181 |
+ "<dt>Encryption</dt><dd>"
|
182 |
+ jsonMarker.enc
|
183 |
+ "</dd>"
|
184 |
+ "<dt>SSID</dt><dd>"
|
185 |
+ jsonMarker.SSID
|
186 |
+ "</dd>"
|
187 |
+ "<dt>Number of APs</dt><dd>"
|
188 |
+ jsonMarker.AP_no
|
189 |
+ "</dd></dl>"
|
190 |
+ "</div>"
|
191 |
+ "<div class='tab-pane' id='tab2'>"
|
192 |
+ "<dl class='dl-horizontal'>"
|
193 |
+ "<dt>Port Restrict</dt><dd>"
|
194 |
+ jsonMarker.port_restrict
|
195 |
+ "</dd>"
|
196 |
+ "<dt>transp_proxy</dt><dd>"
|
197 |
+ jsonMarker.transp_proxy
|
198 |
+ "</dd>"
|
199 |
+ "<dt>IPv6</dt><dd>"
|
200 |
+ jsonMarker.IPv6
|
201 |
+ "</dd>"
|
202 |
+ "<dt>NAT</dt><dd>"
|
203 |
+ jsonMarker.NAT
|
204 |
+ "</dd>"
|
205 |
+ "<dt>Wired</dt><dd>"
|
206 |
+ jsonMarker.wired
|
207 |
+ "</dd></dl>"
|
208 |
+ "</div>"
|
209 |
+ "</div>"
|
210 |
+ "</div>"
|
211 |
+ "</div>";
|
212 |
infoWindow
|
213 |
.open(
|
214 |
map,
|
215 |
marker);
|
216 |
});
|
217 |
}
|
218 |
});
|
219 |
var mcOptions = {
|
220 |
gridSize : 50,
|
221 |
maxZoom : 15,
|
222 |
styles : styles
|
223 |
};
|
224 |
|
225 |
var markerCluster = new MarkerClusterer(map,
|
226 |
markers, mcOptions);
|
227 |
map.fitBounds(bounds)
|
228 |
});
|
229 |
}
|
230 |
|
231 |
function createMarker(markerObj) {
|
232 |
var title = markerObj.name;
|
233 |
var address = markerObj.address;
|
234 |
var latLng = new google.maps.LatLng(markerObj.lat, markerObj.lng);
|
235 |
var marker = new google.maps.Marker({
|
236 |
'position' : latLng,
|
237 |
'map' : map,
|
238 |
'title' : title,
|
239 |
'address' : address,
|
240 |
'icon' : image,
|
241 |
});
|
242 |
return marker
|
243 |
}
|
244 |
|
245 |
function clusterMarkers(markers) {
|
246 |
var markerCluster = new MarkerClusterer(map, markers);
|
247 |
}
|
248 |
|
249 |
function rad(x) {
|
250 |
return x * Math.PI / 180;
|
251 |
}
|
252 |
|
253 |
function find_closest_marker(event) {
|
254 |
var lat = event.latLng.lat();
|
255 |
var lng = event.latLng.lng();
|
256 |
var R = 6371; // radius of earth in km
|
257 |
var distances = [];
|
258 |
var closest = -1;
|
259 |
for (i = 0; i < markers.length; i++) {
|
260 |
var mlat = markers[i].position.lat();
|
261 |
var mlng = markers[i].position.lng();
|
262 |
var dLat = rad(mlat - lat);
|
263 |
var dLong = rad(mlng - lng);
|
264 |
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2)
|
265 |
+ Math.cos(rad(lat)) * Math.cos(rad(lat))
|
266 |
* Math.sin(dLong / 2) * Math.sin(dLong / 2);
|
267 |
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
268 |
var d = R * c;
|
269 |
distances[i] = d;
|
270 |
if (closest == -1 || d < distances[closest]) {
|
271 |
closest = i;
|
272 |
}
|
273 |
}
|
274 |
|
275 |
alert(markers[closest].address);
|
276 |
}
|
277 |
|
278 |
function geocode(position){
|
279 |
addr = {};
|
280 |
geocoder
|
281 |
.geocode(
|
282 |
{
|
283 |
'latLng' : position
|
284 |
},
|
285 |
function(results, status) {
|
286 |
if (status == google.maps.GeocoderStatus.OK) {
|
287 |
if (results.length >= 1) {
|
288 |
for ( var ii = 0; ii < results[0].address_components.length; ii++) {
|
289 |
var street_number = route = street = city = state = zipcode = country = formatted_address = '';
|
290 |
var types = results[0].address_components[ii].types
|
291 |
.join(",");
|
292 |
if (types == "sublocality,political"
|
293 |
|| types == "locality,political"
|
294 |
|| types == "neighborhood,political"
|
295 |
|| types == "political") {
|
296 |
addr.city = (city == '' || types == "locality,political") ? results[0].address_components[ii].long_name
|
297 |
: city;
|
298 |
}
|
299 |
if (types == "country,political") {
|
300 |
addr.country = results[0].address_components[ii].long_name;
|
301 |
}
|
302 |
}
|
303 |
}
|
304 |
}
|
305 |
});
|
306 |
}
|
307 |
|
308 |
function codeAddress(address) {
|
309 |
geocoder.geocode( { 'address': address}, function(results, status) {
|
310 |
if (status == google.maps.GeocoderStatus.OK) {
|
311 |
map.setCenter(results[0].geometry.location);
|
312 |
map.fitBounds(results[0].geometry.bounds)
|
313 |
} else {
|
314 |
alert("Geocode was not successful for the following reason: " + status);
|
315 |
}
|
316 |
});
|
317 |
}
|
318 |
|
319 |
function HomeControl(controlDiv, map) {
|
320 |
|
321 |
// Set CSS styles for the DIV containing the control
|
322 |
// Setting padding to 5 px will offset the control
|
323 |
// from the edge of the map.
|
324 |
controlDiv.style.padding = '5px';
|
325 |
|
326 |
// Set CSS for the control border.
|
327 |
var controlUI = document.createElement('button');
|
328 |
controlUI.className='btn btn-warning roundButton';
|
329 |
controlUI.id = "showCityBtn";
|
330 |
extraCSS = 'background-image: url(/static/img/city.png);background-position: center center; background-repeat: no-repeat;';
|
331 |
controlUI.style.cssText='display:none; cursor:pointer; white-space:nowrap; position:absolute; '+extraCSS;
|
332 |
controlUI.title = "City View";
|
333 |
|
334 |
// Set CSS for the control border.
|
335 |
var controlUI2 = document.createElement('button');
|
336 |
controlUI2.className='btn btn-warning roundButton';
|
337 |
controlUI2.id = "showCountryBtn";
|
338 |
extraCSS2 = 'background-image: url(/static/img/country.png);background-position: center center; background-repeat: no-repeat;';
|
339 |
controlUI2.style.cssText='display:none; cursor:pointer; white-space:nowrap; position:absolute; '+extraCSS2;
|
340 |
controlUI2.title = "Country View";
|
341 |
|
342 |
controlDiv.appendChild(controlUI);
|
343 |
controlDiv.appendChild(controlUI2);
|
344 |
|
345 |
// Setup the click event listeners: simply set the map to Chicago.
|
346 |
google.maps.event.addDomListener(controlUI, 'click', function() {
|
347 |
codeAddress(addr.city+','+addr.country);
|
348 |
});
|
349 |
google.maps.event.addDomListener(controlUI2, 'click', function() {
|
350 |
codeAddress(addr.country);
|
351 |
});
|
352 |
|
353 |
}
|
354 |
|
355 |
$(document).ready(function() {
|
356 |
initialize();
|
357 |
marks = placeMarkers();
|
358 |
clusterMarkers(marks);
|
359 |
});
|
360 |
</script>
|
361 |
{% endblock %} |
362 |
|
363 |
|
364 |
{% block subcontent %} |
365 |
<h4>{% trans "Eduroam in Greece" %}</h4> |
366 |
<hr>
|
367 |
|
368 |
<div id="map_canvas" style="width:100%; height:600px; overflow: hidden;"></div> |
369 |
{% endblock %} |
370 |
|
371 |
|