1 /* Copyright 2009 the Melange authors.

     2  *

     3  * Licensed under the Apache License, Version 2.0 (the "License");

     4  * you may not use this file except in compliance with the License.

     5  * You may obtain a copy of the License at

     6  *

     7  *   http://www.apache.org/licenses/LICENSE-2.0

     8  *

     9  * Unless required by applicable law or agreed to in writing, software

    10  * distributed under the License is distributed on an "AS IS" BASIS,

    11  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

    12  * See the License for the specific language governing permissions and

    13  * limitations under the License.

    14  */

    15 /**

    16  * @author <a href="mailto:fadinlight@gmail.com">Mario Ferraro</a>

    17  */

    18 

    19 (function () {

    20   var melange = window.melange;

    21   this.prototype = new melange.templates._baseTemplate();

    22   this.prototype.constructor = melange.templates._baseTemplate;

    23   melange.templates._baseTemplate.apply(this, arguments);

    24 

    25   var _self = this;

    26 

    27   // Global variables

    28   var map;

    29 

    30   // Map data taken from JS context

    31   var map_data = this.context.map_data;

    32 

    33   // HTML div tag where map needs to be inserted

    34   var map_div = "org_home_map";

    35 

    36   // Map load function

    37   function map_load() {

    38 

    39     // Setup required icons

    40     var base_icon = new google.maps.Icon();

    41     base_icon.shadow = "http://www.google.com/mapfiles/shadow50.png";

    42     base_icon.iconSize = new google.maps.Size(20, 34);

    43     base_icon.shadowSize = new google.maps.Size(37, 34);

    44     base_icon.iconAnchor = new google.maps.Point(9, 34);

    45     base_icon.infoWindowAnchor = new google.maps.Point(9, 2);

    46     base_icon.infoShadowAnchor = new google.maps.Point(18, 25);

    47     var student_icon = new google.maps.Icon(base_icon);

    48     student_icon.image = "http://www.google.com/mapfiles/marker.png";

    49     var mentor_icon = new google.maps.Icon(base_icon);

    50     mentor_icon.image = "/soc/content/images/mentor-marker.png";

    51 

    52     if (google.maps.BrowserIsCompatible()) {

    53       // Create the map and add small controls

    54       map = new google.maps.Map2(document.getElementById(map_div));

    55       map.addControl(new google.maps.LargeMapControl());

    56       map.addControl(new google.maps.MapTypeControl());

    57 

    58       // Set map center and initial zoom level

    59       map.setCenter(new google.maps.LatLng(0, 0), 1);

    60 

    61       var mentors = {};

    62       var students = {};

    63       var projects = {};

    64       var polylines = [];

    65 

    66       jQuery.each(map_data.people, function (key, person) {

    67         if (person.type === "student") {

    68           students[key] = {

    69             "name": person.name,

    70             "lat": person.lat,

    71             "lon": person.lon,

    72             "projects": person.projects

    73           };

    74         }

    75         if (person.type === "mentor") {

    76           mentors[key] = {

    77             "name": person.name,

    78             "lat": person.lat,

    79             "lon": person.lon,

    80             "projects": person.projects

    81           };

    82         }

    83       });

    84 

    85       // Iterate over projects to draw polylines

    86       jQuery.each(map_data.projects, function (key, project) {

    87         var current_student = students[project.student_key];

    88         var current_mentor = mentors[project.mentor_key];

    89         if (current_student !== undefined && 

    90             current_mentor !== undefined &&

    91             current_student.lat !== null &&

    92             current_student.lon !== null &&

    93             current_mentor.lat !== null &&

    94             current_mentor.lon !== null) {

    95               /*jslint white: false */

    96               polylines.push([

    97                 [current_student.lat, current_student.lon],

    98                 [current_mentor.lat, current_mentor.lon]

    99               ]);

   100               /*jslint white: true */

   101         }

   102       });

   103 

   104       // Iterate over students

   105       jQuery.each(students, function (key, person) {

   106         var html = "";

   107         var marker = null;

   108 

   109         if (person.lat !== null && person.lon !== null) {

   110           var point = new google.maps.LatLng(person.lat, person.lon);

   111 

   112           marker = new google.maps.Marker(point, student_icon);

   113           html = [

   114             "<strong>", person.name, "</strong><br />",

   115             "<span style='font-style:italic;'>Student</span><br />",

   116             "<div style='height:100px;width:300px;",

   117             "overflow:auto;font-size:70%'>"

   118           ].join("");

   119           // iterate through projects

   120           jQuery.each(person.projects, function () {

   121             var current_project = map_data.projects[this];

   122             html += [

   123               "<a href='", current_project.redirect, "'>",

   124               current_project.title, "</a><br />",

   125               "Mentor: ", current_project.mentor_name, "<br />"

   126             ].join("");

   127           });

   128           html += "</div>";

   129           google.maps.Event.addListener(marker, "click", function () {

   130             marker.openInfoWindowHtml(html);

   131           });

   132 

   133           map.addOverlay(marker);

   134         }

   135       });

   136 

   137       // Iterate over mentors

   138       jQuery.each(mentors, function (key, person) {

   139         var html = "";

   140         var marker = null;

   141 

   142         if (person.lat !== null && person.lon !== null) {

   143           var point = new google.maps.LatLng(person.lat, person.lon);

   144 

   145           marker = new google.maps.Marker(point, mentor_icon);

   146           html = [

   147             "<strong>", person.name, "</strong><br />",

   148             "<span style='font-style:italic;'>Mentor</span><br />",

   149             "<div style='height:100px;width:300px;",

   150             "overflow:auto;font-size:70%'>"

   151           ].join("");

   152           // iterate through projects

   153           jQuery.each(person.projects, function () {

   154             var current_project = map_data.projects[this];

   155             html += [

   156               "<a href='", current_project.redirect, "'>",

   157               current_project.title, "</a><br />",

   158               "Student: ", current_project.student_name, "<br />"

   159             ].join("");

   160           });

   161           html += "</div>";

   162 

   163           google.maps.Event.addListener(marker, "click", function () {

   164             marker.openInfoWindowHtml(html);

   165           });

   166 

   167           map.addOverlay(marker);

   168         }

   169       });

   170 

   171       // Draw all polylines

   172       jQuery.each(polylines, function () {

   173         var from = new google.maps.LatLng(this[0][0], this[0][1]);

   174         var to = new google.maps.LatLng(this[1][0], this[1][1]);

   175         var polyline = new google.maps.Polyline([from, to], "#ff0000", 3);

   176         map.addOverlay(polyline);

   177       });

   178     }

   179   }

   180 

   181   jQuery(

   182     function () {

   183       melange.loadGoogleApi("maps", "2", {}, map_load);

   184     }

   185   );

   186 

   187 }());