root / djnro / templates / front / world.html @ 2788460f
History | View | Annotate | Download (8 kB)
1 |
{% extends "base.html" %} |
---|---|
2 |
{% load i18n %} |
3 |
{% load staticfiles %} |
4 |
{% block currentpagetitle %}World{% endblock %} |
5 |
{% block homepage %}{% endblock %} |
6 |
{% block hometop %}{% endblock %} |
7 |
{% block world %}class="active"{% endblock %} |
8 |
{% block extrahead %} |
9 |
<style type="text/css"> |
10 |
|
11 |
.headtitle {font-family: "Franklin Gothic Demi", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif; letter-spacing: -1px; } |
12 |
</style>
|
13 |
<script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script> |
14 |
<script type="text/javascript" src="{% static 'js/markerclusterer.js' %}"></script> |
15 |
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> |
16 |
<script type="text/javascript"> |
17 |
var lat = "{{MAP_CENTER.0}}";
|
18 |
var lat = parseFloat(lat.replace(",","."));
|
19 |
var lng = "{{MAP_CENTER.1}}";
|
20 |
var lng = parseFloat(lng.replace(",","."));
|
21 |
var zoomLevel = 6;
|
22 |
var latlng = new google.maps.LatLng(lat,lng);
|
23 |
var map = '';
|
24 |
var bounds = '';
|
25 |
var image = '';
|
26 |
var infoWindow;
|
27 |
addr = {};
|
28 |
|
29 |
|
30 |
var styles = [ {
|
31 |
url : '{% static '/img/edugroup.png' %}',
|
32 |
height : 54,
|
33 |
width : 63,
|
34 |
textColor : '#ffffff',
|
35 |
textSize : 11
|
36 |
}, {
|
37 |
url : '{% static '/img/edugroup.png' %}',
|
38 |
height : 54,
|
39 |
width : 63,
|
40 |
textColor : '#ffffff',
|
41 |
textSize : 11
|
42 |
}, {
|
43 |
url : '{% static '/img/edugroup.png' %}',
|
44 |
height : 54,
|
45 |
width : 63,
|
46 |
textColor : '#ffffff',
|
47 |
textSize : 11
|
48 |
} ];
|
49 |
|
50 |
function initialize() {
|
51 |
image = new google.maps.MarkerImage('{% static '/img/edupin.png' %}',
|
52 |
// This marker is 29 pixels wide by 40 pixels tall.
|
53 |
new google.maps.Size(29, 40),
|
54 |
// The origin for this image is 0,0.
|
55 |
new google.maps.Point(0, 0),
|
56 |
// The anchor for this image is the base of the flagpole at 18,42.
|
57 |
new google.maps.Point(14, 40));
|
58 |
|
59 |
var styleArray = [ {
|
60 |
featureType : "all",
|
61 |
stylers : [ {
|
62 |
saturation : -60
|
63 |
}, {
|
64 |
gamma : 1.00
|
65 |
} ]
|
66 |
}, {
|
67 |
featureType : "poi.business",
|
68 |
elementType : "labels",
|
69 |
stylers : [ {
|
70 |
visibility : "off"
|
71 |
} ]
|
72 |
}, {
|
73 |
"featureType" : "transit.line",
|
74 |
"elementType" : "geometry",
|
75 |
"stylers" : [ {
|
76 |
"visibility" : "off"
|
77 |
} ]
|
78 |
}, {
|
79 |
"featureType" : "poi",
|
80 |
"elementType" : "all",
|
81 |
"stylers" : [ {
|
82 |
"visibility" : "off"
|
83 |
} ]
|
84 |
}, {
|
85 |
'featureType' : "administrative.country",
|
86 |
'elementType' : "labels",
|
87 |
'stylers' : [ {
|
88 |
'visibility' : "off"
|
89 |
} ]
|
90 |
}
|
91 |
|
92 |
];
|
93 |
|
94 |
geocoder = new google.maps.Geocoder();
|
95 |
var mapOptions = {
|
96 |
center : latlng,
|
97 |
zoom : zoomLevel,
|
98 |
mapTypeId : google.maps.MapTypeId.ROADMAP,
|
99 |
styles : styleArray,
|
100 |
mapTypeId : google.maps.MapTypeId.ROADMAP,
|
101 |
mapTypeControlOptions : {
|
102 |
style : google.maps.MapTypeControlStyle.DEFAULT
|
103 |
},
|
104 |
navigationControl : true,
|
105 |
mapTypeControl : false,
|
106 |
};
|
107 |
map = new google.maps.Map(document.getElementById("map_canvas"),
|
108 |
mapOptions);
|
109 |
|
110 |
|
111 |
var homeControlDiv = document.createElement('div');
|
112 |
homeControlDiv.className='roundButtonHolder';
|
113 |
homeControlDiv.id="locationButton";
|
114 |
var homeControl = new HomeControl(homeControlDiv, map);
|
115 |
|
116 |
homeControlDiv.index = 1;
|
117 |
map.controls[google.maps.ControlPosition.TOP_LEFT].push(homeControlDiv);
|
118 |
|
119 |
bounds = new google.maps.LatLngBounds();
|
120 |
infoWindow = new google.maps.InfoWindow();
|
121 |
google.maps.event.addListener(map, 'idle', function() {
|
122 |
center = map.getCenter();
|
123 |
geocode(center);
|
124 |
zoom = map.getZoom();
|
125 |
if (zoom > 12){
|
126 |
$("#showCityBtn").show();
|
127 |
$("#showCountryBtn").hide();
|
128 |
}
|
129 |
else if ((zoom <= 12) && (zoom > 7)){
|
130 |
$("#showCityBtn").hide();
|
131 |
$("#showCountryBtn").show();
|
132 |
}
|
133 |
else {
|
134 |
$("#showCityBtn").hide();
|
135 |
$("#showCountryBtn").hide();
|
136 |
}
|
137 |
});
|
138 |
|
139 |
|
140 |
}
|
141 |
|
142 |
var markers = new Array();
|
143 |
function placeMarkers() {
|
144 |
|
145 |
$
|
146 |
.get(
|
147 |
"{% url worldPoints %}",
|
148 |
function(data) {
|
149 |
$
|
150 |
.each(
|
151 |
data,
|
152 |
function(index, jsonMarker) {
|
153 |
var marker = createMarker(jsonMarker);
|
154 |
if (marker) {
|
155 |
bounds
|
156 |
.extend(marker.position);
|
157 |
markers.push(marker);
|
158 |
google.maps.event
|
159 |
.addListener(
|
160 |
marker,
|
161 |
'click',
|
162 |
function() {
|
163 |
infoWindow.setContent(jsonMarker.text);
|
164 |
infoWindow
|
165 |
.open(
|
166 |
map,
|
167 |
marker);
|
168 |
});
|
169 |
}
|
170 |
});
|
171 |
var mcOptions = {
|
172 |
gridSize : 60,
|
173 |
maxZoom : null,
|
174 |
styles : styles
|
175 |
};
|
176 |
|
177 |
var markerCluster = new MarkerClusterer(map,
|
178 |
markers, mcOptions);
|
179 |
map.fitBounds(bounds);
|
180 |
});
|
181 |
}
|
182 |
|
183 |
function createMarker(markerObj) {
|
184 |
var latLng = new google.maps.LatLng(markerObj.lat, markerObj.lng);
|
185 |
var marker = new google.maps.Marker({
|
186 |
'position' : latLng,
|
187 |
'map' : map,
|
188 |
'icon' : image,
|
189 |
});
|
190 |
return marker
|
191 |
}
|
192 |
|
193 |
function clusterMarkers(markers) {
|
194 |
var markerCluster = new MarkerClusterer(map, markers);
|
195 |
}
|
196 |
|
197 |
|
198 |
function geocode(position){
|
199 |
addr = {};
|
200 |
geocoder
|
201 |
.geocode(
|
202 |
{
|
203 |
'latLng' : position
|
204 |
},
|
205 |
function(results, status) {
|
206 |
if (status == google.maps.GeocoderStatus.OK) {
|
207 |
if (results.length >= 1) {
|
208 |
for ( var ii = 0; ii < results[0].address_components.length; ii++) {
|
209 |
var street_number = route = street = city = state = zipcode = country = formatted_address = '';
|
210 |
var types = results[0].address_components[ii].types
|
211 |
.join(",");
|
212 |
if (types == "sublocality,political"
|
213 |
|| types == "locality,political"
|
214 |
|| types == "neighborhood,political"
|
215 |
|| types == "political") {
|
216 |
addr.city = (city == '' || types == "locality,political") ? results[0].address_components[ii].long_name
|
217 |
: city;
|
218 |
}
|
219 |
if (types == "country,political") {
|
220 |
addr.country = results[0].address_components[ii].long_name;
|
221 |
}
|
222 |
}
|
223 |
}
|
224 |
}
|
225 |
});
|
226 |
}
|
227 |
|
228 |
function codeAddress(address) {
|
229 |
geocoder.geocode( { 'address': address}, function(results, status) {
|
230 |
if (status == google.maps.GeocoderStatus.OK) {
|
231 |
map.setCenter(results[0].geometry.location);
|
232 |
map.fitBounds(results[0].geometry.bounds)
|
233 |
} else {
|
234 |
//alert("Geocode was not successful for the following reason: " + status);
|
235 |
}
|
236 |
});
|
237 |
}
|
238 |
|
239 |
function HomeControl(controlDiv, map) {
|
240 |
|
241 |
// Set CSS styles for the DIV containing the control
|
242 |
// Setting padding to 5 px will offset the control
|
243 |
// from the edge of the map.
|
244 |
controlDiv.style.padding = '5px';
|
245 |
|
246 |
// Set CSS for the control border.
|
247 |
var controlUI = document.createElement('button');
|
248 |
controlUI.className='btn btn-warning roundButton';
|
249 |
controlUI.id = "showCityBtn";
|
250 |
extraCSS = 'background-image: url({% static '/img/city.png' %});background-position: center center; background-repeat: no-repeat;';
|
251 |
controlUI.style.cssText='display:none; cursor:pointer; white-space:nowrap; position:absolute; '+extraCSS;
|
252 |
controlUI.title = "City View";
|
253 |
|
254 |
// Set CSS for the control border.
|
255 |
var controlUI2 = document.createElement('button');
|
256 |
controlUI2.className='btn btn-warning roundButton';
|
257 |
controlUI2.id = "showCountryBtn";
|
258 |
extraCSS2 = 'background-image: url({% static '/img/country.png' %});background-position: center center; background-repeat: no-repeat;';
|
259 |
controlUI2.style.cssText='display:none; cursor:pointer; white-space:nowrap; position:absolute; '+extraCSS2;
|
260 |
controlUI2.title = "Country View";
|
261 |
|
262 |
controlDiv.appendChild(controlUI);
|
263 |
controlDiv.appendChild(controlUI2);
|
264 |
|
265 |
// Setup the click event listeners: simply set the map to Chicago.
|
266 |
google.maps.event.addDomListener(controlUI, 'click', function() {
|
267 |
codeAddress(addr.city+','+addr.country);
|
268 |
});
|
269 |
google.maps.event.addDomListener(controlUI2, 'click', function() {
|
270 |
codeAddress(addr.country);
|
271 |
});
|
272 |
|
273 |
}
|
274 |
|
275 |
$(document).ready(function() {
|
276 |
initialize();
|
277 |
marks = placeMarkers();
|
278 |
clusterMarkers(marks);
|
279 |
});
|
280 |
</script>
|
281 |
{% endblock %} |
282 |
|
283 |
|
284 |
{% block content %} |
285 |
<h4>{% trans "Eduroam Worldwide" %}</h4> |
286 |
<hr>
|
287 |
|
288 |
<div id="map_canvas" style="width:100%; height:600px; overflow: hidden;"></div> |
289 |
{% endblock %} |
290 |
|
291 |
|