Revision 242932f3 djnro/templates/front/world.html

b/djnro/templates/front/world.html
5 5
{% block homepage %}{% endblock %}
6 6
{% block hometop %}{% endblock %}
7 7
{% block world %}active{% endblock %}
8
{% block extrahead %}
9
<style type="text/css">
10 8

  
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 9

  
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
	}
10
{% block content %}
11
<h1>{% trans "Eduroam Worldwide" %}</h1>
12
<hr>
192 13

  
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>
14
<div id="map_canvas" data-center-lat="{{ MAP_CENTER.0 }}" data-url="{% url worldPoints %}" data-city="{% static 'img/city.png' %}" data-country="{% static 'img/country.png' %}" data-group="{% static 'img/edugroup.png' %}" data-pin="{% static 'img/edupin.png' %}" data-center-lng="{{ MAP_CENTER.1 }}" style="width:100%; height:600px; overflow: hidden;"></div>
281 15
{% endblock %}
282 16

  
283 17

  
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

  
18
{% block extrajs %}
19
<script type="text/javascript" src="{% static 'js/markerclusterer.js' %}"></script>
20
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
21
<script type="text/javascript" src="{% static 'js/world-map.js' %}"></script>
22
{% endblock %}

Also available in: Unified diff