199 var student_icon = new GIcon(base_icon); |
191 var student_icon = new GIcon(base_icon); |
200 student_icon.image = "http://www.google.com/mapfiles/marker.png"; |
192 student_icon.image = "http://www.google.com/mapfiles/marker.png"; |
201 var mentor_icon = new GIcon(base_icon); |
193 var mentor_icon = new GIcon(base_icon); |
202 mentor_icon.image = "/soc/content/images/mentor-marker.png"; |
194 mentor_icon.image = "/soc/content/images/mentor-marker.png"; |
203 |
195 |
204 Object.prototype.keys = function () |
|
205 { |
|
206 var keys = []; |
|
207 for(i in this) if (this.hasOwnProperty(i)) |
|
208 { |
|
209 keys.push(i); |
|
210 } |
|
211 return keys; |
|
212 } |
|
213 |
|
214 |
|
215 // Mark student and enable a popup box upon click |
|
216 function drawMarker(person) { |
|
217 geocoder.setBaseCountryCode(person.ccTLD); |
|
218 geocoder.getLocations( |
|
219 person.city, |
|
220 function(response) { |
|
221 var delay = 0; |
|
222 if (response.Status.code == 620) { |
|
223 // Too fast, try again, with a small pause |
|
224 delay = 100; |
|
225 } else { |
|
226 if (response.Status.code == 200) { |
|
227 // Success; do something with the address. |
|
228 var html = ""; |
|
229 var marker = null; |
|
230 |
|
231 place = response.Placemark[0]; |
|
232 point = new GLatLng(place.Point.coordinates[1], |
|
233 place.Point.coordinates[0]); |
|
234 if (person.type == 'mentor') { |
|
235 marker = new GMarker(point, mentor_icon); |
|
236 html = "<strong>" + person.name + "</strong><br> Mentor"; |
|
237 } else if (person.type == 'student') { |
|
238 marker = new GMarker(point, student_icon); |
|
239 html = "<strong>" + person.name + "</strong><br>"; |
|
240 html += "<a href='"+ person.url + "'>" + person.summary + "</a><br>"; |
|
241 html += "Mentor: " + person.mentor; |
|
242 } |
|
243 |
|
244 GEvent.addListener(marker, "click", function() { |
|
245 marker.openInfoWindowHtml(html); |
|
246 }); |
|
247 |
|
248 map.addOverlay(marker); |
|
249 } |
|
250 |
|
251 // Move onto the next address; this skips bad addresses, too. |
|
252 numGeocoded += 1; |
|
253 } |
|
254 |
|
255 window.setTimeout(geocodeAll, delay); |
|
256 } |
|
257 ); |
|
258 } |
|
259 |
|
260 // Draw a polyline between two points |
|
261 drawPolyLine = function(from, to) { |
|
262 var polyline = new GPolyline([from, to], "#ff0000", 3); |
|
263 map.addOverlay(polyline); |
|
264 } |
|
265 |
|
266 function geocodeAll() { |
|
267 if (numGeocoded < geo_data_keys.length) { |
|
268 drawMarker(geo_data[geo_data_keys[numGeocoded]]) |
|
269 } |
|
270 } |
|
271 |
|
272 // Map load function |
196 // Map load function |
273 this.map_load = function(map_data) { |
197 this.map_load = function(map_data) { |
274 // Check if browser is gmap compatible. |
198 |
275 if (GBrowserIsCompatible()) { |
199 if (GBrowserIsCompatible()) { |
276 geo_data = map_data; |
|
277 |
|
278 // Create the map and add small controls |
200 // Create the map and add small controls |
279 map = new GMap2(document.getElementById(map_div)); |
201 map = new GMap2(document.getElementById(map_div)); |
280 map.addControl(new GLargeMapControl()); |
202 map.addControl(new GLargeMapControl()); |
281 map.addControl(new GMapTypeControl()); |
203 map.addControl(new GMapTypeControl()); |
282 |
204 |
283 // Set map center and initial zoom level |
205 // Set map center and initial zoom level |
284 map.setCenter(new GLatLng(0, 0), 1); |
206 map.setCenter(new GLatLng(0, 0), 1); |
285 geocoder.setCache(null); |
207 |
286 geo_data_keys = geo_data.keys() |
208 var mentors = {}; |
287 window.setTimeout(geocodeAll, 50); |
209 var students = {}; |
288 |
210 var projects = {}; |
|
211 var polylines = []; |
|
212 |
|
213 jQuery.each(map_data.people, function(key, person) { |
|
214 if (person.type === "student") { |
|
215 students[key] = { |
|
216 "name": person.name, |
|
217 "lat": person.lat, |
|
218 "long": person.long, |
|
219 "projects": person.projects |
|
220 } |
|
221 } |
|
222 if (person.type === "mentor") { |
|
223 mentors[key] = { |
|
224 "name": person.name, |
|
225 "lat": person.lat, |
|
226 "long": person.long, |
|
227 "projects": person.projects |
|
228 }; |
|
229 } |
|
230 }); |
|
231 |
|
232 // Iterate over projects to draw polylines |
|
233 jQuery.each(map_data.projects, function (key, project) { |
|
234 var current_student = students[project.student_key]; |
|
235 var current_mentor = mentors[project.mentor_key]; |
|
236 if (current_student !== undefined && |
|
237 current_mentor !== undefined && |
|
238 current_student.lat !== null && |
|
239 current_student.long !== null && |
|
240 current_mentor.lat !== null && |
|
241 current_mentor.long !== null) { |
|
242 polylines.push([[current_student.lat,current_student.long],[current_mentor.lat,current_mentor.long]]); |
|
243 } |
|
244 }); |
|
245 |
|
246 // Iterate over students |
|
247 jQuery.each(students, function(key, person) { |
|
248 var html = ""; |
|
249 var marker = null; |
|
250 |
|
251 if (person.lat!==null && person.long!==null) { |
|
252 point = new GLatLng(person.lat, |
|
253 person.long); |
|
254 |
|
255 marker = new GMarker(point, student_icon); |
|
256 html = "<strong>" + person.name + "</strong><br />"; |
|
257 html += "<span style='font-style:italic;'>Student</span><br />"; |
|
258 html += "<div style='height:100px;width:300px;overflow:auto;font-size:70%'>"; |
|
259 // iterate through projects |
|
260 jQuery.each(person.projects, function () { |
|
261 var current_project = map_data.projects[this]; |
|
262 html += "<a href='"+ current_project.redirect + "'>" + current_project.title + "</a><br />"; |
|
263 html += "Mentor: " + current_project.mentor_name + "<br />"; |
|
264 }); |
|
265 html+= "</div>"; |
|
266 GEvent.addListener(marker, "click", function() { |
|
267 marker.openInfoWindowHtml(html); |
|
268 }); |
|
269 |
|
270 map.addOverlay(marker); |
|
271 } |
|
272 }); |
|
273 |
|
274 // Iterate over mentors |
|
275 jQuery.each(mentors, function(key, person) { |
|
276 var html = ""; |
|
277 var marker = null; |
|
278 |
|
279 if (person.lat!==null && person.long!==null) { |
|
280 point = new GLatLng(person.lat, |
|
281 person.long); |
|
282 |
|
283 marker = new GMarker(point, mentor_icon); |
|
284 html = "<strong>" + person.name + "</strong><br />"; |
|
285 html += "<span style='font-style:italic;'>Student</span><br />"; |
|
286 html += "<div style='height:100px;width:300px;overflow:auto;font-size:70%'>"; |
|
287 // iterate through projects |
|
288 jQuery.each(person.projects, function () { |
|
289 var current_project = map_data.projects[this]; |
|
290 html += "<a href='"+ current_project.redirect + "'>" + current_project.title + "</a><br />"; |
|
291 html += "Student: " + current_project.student_name + "<br />"; |
|
292 }); |
|
293 html+= "</div>"; |
|
294 |
|
295 GEvent.addListener(marker, "click", function() { |
|
296 marker.openInfoWindowHtml(html); |
|
297 }); |
|
298 |
|
299 map.addOverlay(marker); |
|
300 } |
|
301 }); |
|
302 |
|
303 // Draw all polylines |
|
304 jQuery.each(polylines, function() { |
|
305 var from = new GLatLng(this[0][0],this[0][1]); |
|
306 var to = new GLatLng(this[1][0],this[1][1]); |
|
307 var polyline = new GPolyline([from, to], "#ff0000", 3); |
|
308 map.addOverlay(polyline); |
|
309 }); |
289 } |
310 } |
290 } |
311 } |
291 }; |
312 }; |