46 }, |
49 }, |
47 postalcode: { |
50 postalcode: { |
48 id: "#id_res_postalcode", |
51 id: "#id_res_postalcode", |
49 old_value: "" |
52 old_value: "" |
50 } |
53 } |
51 } |
54 }; |
52 |
55 |
53 // Save current address fields in the JSON Object |
56 // Save current address fields in the JSON Object |
54 function saveOldAddress() { |
57 function saveOldAddress() { |
55 for (var a in address) { |
58 jQuery.each(address, function (level, level_details) { |
56 address[a].old_value = $(address[a].id).val(); |
59 level_details.old_value = jQuery(level_details.id).val(); |
57 } |
60 }); |
58 } |
61 } |
59 |
62 |
60 // Return true if the user has edited address fields |
63 // Return true if the user has edited address fields |
61 function isNewAddress() { |
64 function isNewAddress() { |
62 for (var a in address) { |
65 var is_new = false; |
63 if ($(address[a].id).val() != address[a].old_value) return true; |
66 jQuery.each(address, function (level, level_details) { |
64 } |
67 if (jQuery(level_details.id).val() !== level_details.old_value) { |
65 return false; |
68 is_new = true; |
|
69 return false; |
|
70 } |
|
71 }); |
|
72 return is_new; |
66 } |
73 } |
67 |
74 |
68 // Write saved lat and lng values to page fields |
75 // Write saved lat and lng values to page fields |
69 function setLatLngFields() { |
76 function setLatLngFields() { |
70 $(field_lat).val(current_lat); |
77 jQuery(field_lat).val(current_lat); |
71 $(field_lng).val(current_lng); |
78 jQuery(field_lng).val(current_lng); |
72 } |
79 } |
73 |
80 |
74 // Read lat and lng fields and store them |
81 // Read lat and lng fields and store them |
75 function readLatLngFields() { |
82 function readLatLngFields() { |
76 current_lat = $(field_lat).val(); |
83 current_lat = jQuery(field_lat).val(); |
77 current_lng = $(field_lng).val(); |
84 current_lng = jQuery(field_lng).val(); |
78 } |
85 } |
79 |
86 |
80 // This function reads address fields, merge them and uses |
87 // This function reads address fields, merge them and uses |
81 // GMap API geocoding to find the first hit |
88 // GMap API geocoding to find the first hit |
82 // Using geocoding http://code.google.com/intl/it-IT/apis/maps/documentation/services.html#Geocoding |
89 // Using geocoding |
|
90 // http://code.google.com/intl/it-IT/apis/maps/documentation/ |
|
91 // services.html#Geocoding |
83 function calculateAddress() { |
92 function calculateAddress() { |
84 // If the user has really edited address fields... |
93 // If the user has really edited address fields... |
85 if (isNewAddress()) { |
94 if (isNewAddress()) { |
86 // Merge address fields |
95 // Merge address fields |
87 var address_string = ""; |
96 var address_string = ""; |
88 for (var a in address) { |
97 jQuery.each(address, function (level, level_details) { |
89 address_string+=$(address[a].id).val(); |
98 address_string += jQuery(level_details.id).val() + ","; |
90 if (a!=address.length-1) {address_string+=","}; |
99 }); |
91 } |
|
92 |
100 |
93 // Ask GMap API for geocoding |
101 // Ask GMap API for geocoding |
94 geocoder.getLatLng( |
102 geocoder.getLatLng( |
95 address_string, |
103 address_string, |
96 function(point) { |
104 function (point) { |
97 // If a point is found |
105 // If a point is found |
98 if (point) { |
106 if (point) { |
99 // Save the current address in the JSON object |
107 // Save the current address in the JSON object |
100 saveOldAddress(); |
108 saveOldAddress(); |
101 // Set the new zoom, map center and marker coords |
109 // Set the new zoom, map center and marker coords |
102 var zoom_set = world_zoom; |
110 var zoom_set = world_zoom; |
103 if ($(address.street.id).val()!="") zoom_set = address_zoom; |
111 if (jQuery(address.street.id).val() !== "") { |
104 else if ($(address.city.id).val()!="") zoom_set = city_zoom; |
112 zoom_set = address_zoom; |
105 else if ($(address.state.id).val()!="") zoom_set = state_zoom; |
113 } |
106 else if ($(address.country.id).val()!="") zoom_set = country_zoom; |
114 else if (jQuery(address.city.id).val() !== "") { |
|
115 zoom_set = city_zoom; |
|
116 } |
|
117 else if (jQuery(address.state.id).val() !== "") { |
|
118 zoom_set = state_zoom; |
|
119 } |
|
120 else if (jQuery(address.country.id).val() !== "") { |
|
121 zoom_set = country_zoom; |
|
122 } |
107 map.setCenter(point, zoom_set); |
123 map.setCenter(point, zoom_set); |
108 marker.setPoint(point); |
124 marker.setPoint(point); |
109 map.clearOverlays(); |
125 map.clearOverlays(); |
110 map.addOverlay(marker); |
126 map.addOverlay(marker); |
111 // Save point coords in local variables and then update |
127 // Save point coords in local variables and then update |
118 ); |
134 ); |
119 } |
135 } |
120 } |
136 } |
121 |
137 |
122 // Public function to load the map |
138 // Public function to load the map |
123 this.map_load = function() { |
139 role_profile_gmap.map_load = function () { |
124 // All can happen only if there is gmap compatible browser. |
140 // All can happen only if there is gmap compatible browser. |
125 // TODO: Fallback in case the browser is not compatible |
141 // TODO: Fallback in case the browser is not compatible |
126 if (GBrowserIsCompatible()) { |
142 if (window.GBrowserIsCompatible()) { |
127 // Save the address fields. This is useful if the page is being edited |
143 // Save the address fields. This is useful if the page is being edited |
128 // to not update blindly the lat/lng fields with GMap geocoding if |
144 // to not update blindly the lat/lng fields with GMap geocoding if |
129 // blurring an address field |
145 // blurring an address field |
130 saveOldAddress(); |
146 saveOldAddress(); |
131 var starting_point; |
147 var starting_point; |
132 var zoom_selected = world_zoom; |
148 var zoom_selected = world_zoom; |
133 var show_marker = true; |
149 var show_marker = true; |
134 |
150 |
135 // Create the map and add small controls |
151 // Create the map and add small controls |
136 map = new GMap2(document.getElementById(map_div)); |
152 map = new window.GMap2(document.getElementById(map_div)); |
137 map.addControl(new GSmallMapControl()); |
153 map.addControl(new window.GSmallMapControl()); |
138 map.addControl(new GMapTypeControl()); |
154 map.addControl(new window.GMapTypeControl()); |
139 |
155 |
140 // Instantiate a global geocoder for future use |
156 // Instantiate a global geocoder for future use |
141 geocoder = new GClientGeocoder(); |
157 geocoder = new window.GClientGeocoder(); |
142 |
158 |
143 // If lat and lng fields are not void (the page is being edited) then |
159 // If lat and lng fields are not void (the page is being edited) then |
144 // update the starting coords, modify the zoom level and tells following |
160 // update the starting coords, modify the zoom level and tells following |
145 // code to show the marker |
161 // code to show the marker |
146 if ($(field_lat).val()!="" && $(field_lng).val()!="") { |
162 if (jQuery(field_lat).val() !== "" && jQuery(field_lng).val() !== "") { |
147 readLatLngFields(); |
163 readLatLngFields(); |
148 zoom_selected = address_zoom; |
164 zoom_selected = address_zoom; |
149 show_marker = true; |
165 show_marker = true; |
150 } |
166 } |
151 |
167 |
152 // Set map center, marker coords and show it if this is an editing |
168 // Set map center, marker coords and show it if this is an editing |
153 starting_point = new GLatLng(current_lat,current_lng); |
169 starting_point = new window.GLatLng(current_lat, current_lng); |
154 map.setCenter(starting_point, zoom_selected); |
170 map.setCenter(starting_point, zoom_selected); |
155 marker = new GMarker(starting_point, {draggable:true}); |
171 marker = new window.GMarker(starting_point, {draggable: true}); |
156 if (show_marker) map.addOverlay(marker); |
172 if (show_marker) { |
157 |
173 map.addOverlay(marker); |
|
174 } |
|
175 |
158 // Adds a new event listener to geocode the address when an address |
176 // Adds a new event listener to geocode the address when an address |
159 // field is blurred |
177 // field is blurred |
160 for (var a in address) { |
178 jQuery.each(address, function (level, level_details) { |
161 $(address[a].id).blur(calculateAddress); |
179 jQuery(level_details.id).blur(calculateAddress); |
162 } |
180 }); |
163 |
181 |
164 // Adds a new event listener: if the marker has been dragged around... |
182 // Adds a new event listener: if the marker has been dragged around... |
165 GEvent.addListener(marker, "dragend", function() { |
183 window.GEvent.addListener(marker, "dragend", function () { |
166 // Update internal variables with current marker coords... |
184 // Update internal variables with current marker coords... |
167 current_lat = marker.getPoint().lat(); |
185 current_lat = marker.getPoint().lat(); |
168 current_lng = marker.getPoint().lng(); |
186 current_lng = marker.getPoint().lng(); |
169 // ...and set page fields accordingly |
187 // ...and set page fields accordingly |
170 setLatLngFields(); |
188 setLatLngFields(); |
171 }); |
189 }); |
172 } |
190 } |
173 } |
191 }; |
174 }; |
192 }()); |
175 |
193 |
176 org_home_gmap = new function(){ |
194 (function () { |
|
195 var org_home_gmap = window.org_home_gmap = function () { |
|
196 }; |
177 // Global variables |
197 // Global variables |
178 var map; |
198 var map; |
179 |
199 |
180 // HTML div tag where map needs to be inserted |
200 // HTML div tag where map needs to be inserted |
181 var map_div = "org_home_map"; |
201 var map_div = "org_home_map"; |
182 |
202 |
183 // Setup required icons |
203 // Setup required icons |
184 var base_icon = new GIcon(); |
204 var base_icon = new window.GIcon(); |
185 base_icon.shadow = "http://www.google.com/mapfiles/shadow50.png"; |
205 base_icon.shadow = "http://www.google.com/mapfiles/shadow50.png"; |
186 base_icon.iconSize = new GSize(20, 34); |
206 base_icon.iconSize = new window.GSize(20, 34); |
187 base_icon.shadowSize = new GSize(37, 34); |
207 base_icon.shadowSize = new window.GSize(37, 34); |
188 base_icon.iconAnchor = new GPoint(9, 34); |
208 base_icon.iconAnchor = new window.GPoint(9, 34); |
189 base_icon.infoWindowAnchor = new GPoint(9, 2); |
209 base_icon.infoWindowAnchor = new window.GPoint(9, 2); |
190 base_icon.infoShadowAnchor = new GPoint(18, 25); |
210 base_icon.infoShadowAnchor = new window.GPoint(18, 25); |
191 var student_icon = new GIcon(base_icon); |
211 var student_icon = new window.GIcon(base_icon); |
192 student_icon.image = "http://www.google.com/mapfiles/marker.png"; |
212 student_icon.image = "http://www.google.com/mapfiles/marker.png"; |
193 var mentor_icon = new GIcon(base_icon); |
213 var mentor_icon = new window.GIcon(base_icon); |
194 mentor_icon.image = "/soc/content/images/mentor-marker.png"; |
214 mentor_icon.image = "/soc/content/images/mentor-marker.png"; |
195 |
215 |
196 // Map load function |
216 // Map load function |
197 this.map_load = function(map_data) { |
217 org_home_gmap.map_load = function (map_data) { |
198 |
218 |
199 if (GBrowserIsCompatible()) { |
219 if (window.GBrowserIsCompatible()) { |
200 // Create the map and add small controls |
220 // Create the map and add small controls |
201 map = new GMap2(document.getElementById(map_div)); |
221 map = new window.GMap2(document.getElementById(map_div)); |
202 map.addControl(new GLargeMapControl()); |
222 map.addControl(new window.GLargeMapControl()); |
203 map.addControl(new GMapTypeControl()); |
223 map.addControl(new window.GMapTypeControl()); |
204 |
224 |
205 // Set map center and initial zoom level |
225 // Set map center and initial zoom level |
206 map.setCenter(new GLatLng(0, 0), 1); |
226 map.setCenter(new window.GLatLng(0, 0), 1); |
207 |
227 |
208 var mentors = {}; |
228 var mentors = {}; |
209 var students = {}; |
229 var students = {}; |
210 var projects = {}; |
230 var projects = {}; |
211 var polylines = []; |
231 var polylines = []; |
212 |
232 |
213 jQuery.each(map_data.people, function(key, person) { |
233 jQuery.each(map_data.people, function (key, person) { |
214 if (person.type === "student") { |
234 if (person.type === "student") { |
215 students[key] = { |
235 students[key] = { |
216 "name": person.name, |
236 "name": person.name, |
217 "lat": person.lat, |
237 "lat": person.lat, |
218 "long": person.long, |
238 "long": person.long, |
219 "projects": person.projects |
239 "projects": person.projects |
220 } |
240 }; |
221 } |
241 } |
222 if (person.type === "mentor") { |
242 if (person.type === "mentor") { |
223 mentors[key] = { |
243 mentors[key] = { |
224 "name": person.name, |
244 "name": person.name, |
225 "lat": person.lat, |
245 "lat": person.lat, |
237 current_mentor !== undefined && |
257 current_mentor !== undefined && |
238 current_student.lat !== null && |
258 current_student.lat !== null && |
239 current_student.long !== null && |
259 current_student.long !== null && |
240 current_mentor.lat !== null && |
260 current_mentor.lat !== null && |
241 current_mentor.long !== null) { |
261 current_mentor.long !== null) { |
242 polylines.push([[current_student.lat,current_student.long],[current_mentor.lat,current_mentor.long]]); |
262 /*jslint white: false */ |
|
263 polylines.push([ |
|
264 [current_student.lat, current_student.long], |
|
265 [current_mentor.lat, current_mentor.long] |
|
266 ]); |
|
267 /*jslint white: true */ |
243 } |
268 } |
244 }); |
269 }); |
245 |
270 |
246 // Iterate over students |
271 // Iterate over students |
247 jQuery.each(students, function(key, person) { |
272 jQuery.each(students, function (key, person) { |
248 var html = ""; |
273 var html = ""; |
249 var marker = null; |
274 var marker = null; |
250 |
275 |
251 if (person.lat!==null && person.long!==null) { |
276 if (person.lat !== null && person.long !== null) { |
252 point = new GLatLng(person.lat, |
277 var point = new window.GLatLng(person.lat, person.long); |
253 person.long); |
278 |
254 |
279 marker = new window.GMarker(point, student_icon); |
255 marker = new GMarker(point, student_icon); |
280 html = [ |
256 html = "<strong>" + person.name + "</strong><br />"; |
281 "<strong>", person.name, "</strong><br />", |
257 html += "<span style='font-style:italic;'>Student</span><br />"; |
282 "<span style='font-style:italic;'>Student</span><br />", |
258 html += "<div style='height:100px;width:300px;overflow:auto;font-size:70%'>"; |
283 "<div style='height:100px;width:300px;", |
|
284 "overflow:auto;font-size:70%'>" |
|
285 ].join(""); |
259 // iterate through projects |
286 // iterate through projects |
260 jQuery.each(person.projects, function () { |
287 jQuery.each(person.projects, function () { |
261 var current_project = map_data.projects[this]; |
288 var current_project = map_data.projects[this]; |
262 html += "<a href='"+ current_project.redirect + "'>" + current_project.title + "</a><br />"; |
289 html += [ |
263 html += "Mentor: " + current_project.mentor_name + "<br />"; |
290 "<a href='", current_project.redirect, "'>", |
|
291 current_project.title, "</a><br />", |
|
292 "Mentor: ", current_project.mentor_name, "<br />" |
|
293 ].join(""); |
264 }); |
294 }); |
265 html+= "</div>"; |
295 html += "</div>"; |
266 GEvent.addListener(marker, "click", function() { |
296 window.GEvent.addListener(marker, "click", function () { |
267 marker.openInfoWindowHtml(html); |
297 marker.openInfoWindowHtml(html); |
268 }); |
298 }); |
269 |
299 |
270 map.addOverlay(marker); |
300 map.addOverlay(marker); |
271 } |
301 } |
272 }); |
302 }); |
273 |
303 |
274 // Iterate over mentors |
304 // Iterate over mentors |
275 jQuery.each(mentors, function(key, person) { |
305 jQuery.each(mentors, function (key, person) { |
276 var html = ""; |
306 var html = ""; |
277 var marker = null; |
307 var marker = null; |
278 |
308 |
279 if (person.lat!==null && person.long!==null) { |
309 if (person.lat !== null && person.long !== null) { |
280 point = new GLatLng(person.lat, |
310 var point = new window.GLatLng(person.lat, person.long); |
281 person.long); |
311 |
282 |
312 marker = new window.GMarker(point, mentor_icon); |
283 marker = new GMarker(point, mentor_icon); |
313 html = [ |
284 html = "<strong>" + person.name + "</strong><br />"; |
314 "<strong>", person.name, "</strong><br />", |
285 html += "<span style='font-style:italic;'>Mentor</span><br />"; |
315 "<span style='font-style:italic;'>Mentor</span><br />", |
286 html += "<div style='height:100px;width:300px;overflow:auto;font-size:70%'>"; |
316 "<div style='height:100px;width:300px;", |
|
317 "overflow:auto;font-size:70%'>" |
|
318 ].join(""); |
287 // iterate through projects |
319 // iterate through projects |
288 jQuery.each(person.projects, function () { |
320 jQuery.each(person.projects, function () { |
289 var current_project = map_data.projects[this]; |
321 var current_project = map_data.projects[this]; |
290 html += "<a href='"+ current_project.redirect + "'>" + current_project.title + "</a><br />"; |
322 html += [ |
291 html += "Student: " + current_project.student_name + "<br />"; |
323 "<a href='", current_project.redirect, "'>", |
|
324 current_project.title, "</a><br />", |
|
325 "Student: ", current_project.student_name, "<br />" |
|
326 ].join(""); |
292 }); |
327 }); |
293 html+= "</div>"; |
328 html += "</div>"; |
294 |
329 |
295 GEvent.addListener(marker, "click", function() { |
330 window.GEvent.addListener(marker, "click", function () { |
296 marker.openInfoWindowHtml(html); |
331 marker.openInfoWindowHtml(html); |
297 }); |
332 }); |
298 |
333 |
299 map.addOverlay(marker); |
334 map.addOverlay(marker); |
300 } |
335 } |
301 }); |
336 }); |
302 |
337 |
303 // Draw all polylines |
338 // Draw all polylines |
304 jQuery.each(polylines, function() { |
339 jQuery.each(polylines, function () { |
305 var from = new GLatLng(this[0][0],this[0][1]); |
340 var from = new window.GLatLng(this[0][0], this[0][1]); |
306 var to = new GLatLng(this[1][0],this[1][1]); |
341 var to = new window.GLatLng(this[1][0], this[1][1]); |
307 var polyline = new GPolyline([from, to], "#ff0000", 3); |
342 var polyline = new window.GPolyline([from, to], "#ff0000", 3); |
308 map.addOverlay(polyline); |
343 map.addOverlay(polyline); |
309 }); |
344 }); |
310 } |
345 } |
311 } |
346 }; |
312 }; |
347 }()); |