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