OpenWetWare:Software/Google Earth API/OWW Layers Javascript

From OpenWetWare
Jump to: navigation, search

Multi-Layer Click-able OWW Google Map (pure javascript)

Here is an attempt to get a multi-layer OWW map, purely implemented in javascript:

  • zoom [0:13]: Showing only OWW registered institutions + link to OWW page.
  • zoom [13:+]: Showing institutions + individual labs + links to Lab page on OWW.

Issues

  • Not sure if it is going to be easier to maintain than the XML file version.
  • Need to find proper icons for labs and institutions.
  • Need to add outreach officers (+ region
  • We Could add a User level if we wanted to ...

<html xmlns="http://www.w3.org/1999/xhtml">

   <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAALLbK9zjbd7JpTrkV4-YbwxRSXllrirTOP8BJPCtxjWVzsNMbFRQmkCSOpE5ARgUVPuqz3vsD2xHp3g"
     type="text/javascript"></script>
   <script type="text/javascript">
   //<![CDATA[


//-------------------------------- //Register your institution here, need to update OWW links // //-------------------------------- var OWW_InstitutionLayer = [

 {
   "zoom": [0, 17],
   "places": [
     { "name": "University of the Witwatersrand","posn": [28.03047646695849,-26.19278044648975],"link" : "http://www.openwetware.org" },
     { "name": "Indian Institute of Science, Bangalore","posn": [77.56823161869931,12.99680722434742],"link" : "http://www.openwetware.org"},
     { "name": "Nanyang Technological University","posn": [103.6816891256282,1.349702969597304],"link" : "http://www.openwetware.org"},
     { "name": "University of the Philippines","posn": [121.0636519017243,14.64871925709237],"link" : "http://www.openwetware.org"},
     { "name": "University of Otago","posn": [170.5140133737077,-45.86376586737932],"link" : "http://www.openwetware.org"},
     { "name": "California Institute of Technology","posn": [-118.1252675995744,34.13678002312675],"link" : "http://www.openwetware.org"},
     { "name": "University of California San Francisco","posn": [-122.4253213233008,37.77057255771301],"link" : "http://www.openwetware.org"},
     { "name": "University of California Berkeley","posn": [-122.285962339715,37.86430980502992],"link" : "http://www.openwetware.org"},
     { "name": "University of California Davis","posn": [-121.7431569197535,38.55246916082545],"link" : "http://www.openwetware.org"},
     { "name": "University of Oregon","posn": [-123.0728205726698,44.04544971066777],"link" : ""},
     { "name": "Oregon Health & Science University","posn": [-122.8120559130796,45.49245760657107],"link" : "http://www.openwetware.org"},
     { "name": "University of Victoria","posn": [-123.310516967923,48.46185377922056],"link" : "http://www.openwetware.org"},
     { "name": "University of Chicago, Bangalore","posn": [-87.60116275200926,41.7895243193402],"link" : "http://www.openwetware.org"},
     { "name": "University of Illinois Urbana-Champaign","posn": [-88.23007658552518,40.09986909529124],"link" : "http://www.openwetware.org"},
     { "name": "Purdue University","posn": [-86.93052543373778,40.41677898748529],"link" : ""},
     { "name": "University of Texas at Austin","posn": [-97.74052435294639,30.29011707374583],"link" : "http://www.openwetware.org"},
     { "name": "University of Alabama Birmingham","posn": [-86.80370874803192,33.50261113831522],"link" : "http://www.openwetware.org"},
     { "name": "Penn State University","posn": [-76.74437357528828,40.19701882578909],"link" : "http://www.openwetware.org"},
     { "name": "University of Virginia","posn": [-78.5105136370701,38.04131021007502],"link" : "http://www.openwetware.org"},
     { "name": "Johns Hopkins University","posn": [-76.66233059277029,39.29094902688986],"link" : "http://www.openwetware.org"},
     { "name": "The Rockefeller University","posn": [-73.9557236488932,40.76256087048551],"link" : "http://www.openwetware.org"},
     { "name": "Brookhaven National Laboratory","posn": [-72.88675572332244,40.87068767827645],"link" : "http://www.openwetware.org"},
     { "name": "University of Connecticut Health Center","posn": [-72.79448638098449,41.73953220267904],"link" : "http://www.openwetware.org"},
     { "name": "Brown University","posn": [-71.40239803438365,41.82531808652547],"link" : "http://www.openwetware.org"},
     { "name": "Boston University","posn": [-71.11002768678185,42.35113462169416],"link" : "http://www.openwetware.org"},
     { "name": "Harvard Medical School","posn": [-71.10311915051098,42.33628786767972],"link" : "http://www.openwetware.org"},
     { "name": "MIT","posn": [-71.09007145677018,42.36053792387064],"link" : "http://www.openwetware.org/wiki/MIT"},
     { "name": "Tufts University","posn": [-71.12495555710451,42.39965240903314],"link" : "http://www.openwetware.org"},
     { "name": "University of Bristol","posn": [-2.602497289633318,51.45856988825544],"link" : "http://www.openwetware.org"},
     { "name": "University of Cambridge","posn": [0.1224486718954978,52.20061417429596],"link" : "http://www.openwetware.org"},
     { "name": "Norwich Research Park","posn": [1.22453300992108,52.6238176312022],"link" : "http://www.openwetware.org"},
     { "name": "Imperial College, London","posn": [-0.1776193962824198,51.49984120201953],"link" : "http://www.openwetware.org/wiki/Imperial_College"},
     { "name": "Universite Paris 5-INSERM","posn": [2.31603006539389,48.84661796561812],"link" : "http://www.openwetware.org"},
     { "name": "University of Muenster, Germany","posn": [7.511802335777416,52.02734780073571],"link" : "http://www.openwetware.org"},
     { "name": "University of Ljubljana, Slovenia","posn": [14.51000049245935,46.06000164762095],"link" : "http://www.openwetware.org"}
       
    ]
 }

];


//--------------------------------- //Register your lab here: will only be visible when the zoom factor is >= 13 // //--------------------------------- var OWW_LabLayer = [

 {
   "zoom": [13, 17],
   "places": [
     { "name": "Endy's Lab", "posn": [-71.093330,42.361557], "link":"http://openwetware.org/wiki/Endy" },
     { "name": "Knight's Lab", "posn": [-71.090553,42.361031], "link":"http://openwetware.org/wiki/Knight"}
   ]
 }

];


//-------------------------------------------------------------------- // DO NOT EDIT : google map display machinery (still not working ...) //--------------------------------------------------------------------

function setupOWWMarkers() {

 var mgr = new GMarkerManager(map);
 //--------------------------------- 
 //set institutions markers first
 //---------------------------------
 //define Icon to be displayed
 var institutionIcon = new GIcon();
 institutionIcon.image = "http://labs.google.com/ridefinder/images/mm_20_blue.png";   
 institutionIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
 institutionIcon.iconSize = new GSize(12, 20);
 institutionIcon.shadowSize = new GSize(22, 20);
 institutionIcon.iconAnchor = new GPoint(6, 20);
 institutionIcon.infoWindowAnchor = new GPoint(5, 1);


 //function to create an Institution marker at a given point with the given name and link.

 function createInstitutionMarker(position, name, link) {
   var my_institution_marker = new GMarker(position, { title: name, icon: institutionIcon });
   GEvent.addListener(my_institution_marker, "click", function() {
      my_institution_marker.openInfoWindowHtml("<a href=\"" + link + "\"><b>" + name + " on OWW</b></a>");
   });
 return my_institution_marker;
 }
 //loop over all registered institutions 
 for (var i in OWW_InstitutionLayer) {
   var institution_layer = OWW_InstitutionLayer[i];
   var institutions_markers = [];
   for (var j in institution_layer["places"]) {
     var institution_place = institution_layer["places"][j];
     var institution_posn = new GLatLng(institution_place["posn"][1], institution_place["posn"][0]);
     var institution_marker = createInstitutionMarker(institution_posn, institution_place["name"], institution_place["link"]);
     institutions_markers.push(institution_marker);
   }
   mgr.addMarkers(institutions_markers, institution_layer["zoom"][0], institution_layer["zoom"][1]);
 }
   
 //------------------------- 
 //set labs markers second
 //-------------------------
 //define Icon to be displayed for labs
 var labIcon = new GIcon();
 labIcon.image = "http://openwetware.org/images/0/02/Owwmarker.jpg";  
 labIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
 labIcon.iconSize = new GSize(25, 25);
 labIcon.shadowSize = new GSize(22, 20);
 labIcon.iconAnchor = new GPoint(6, 20);
 labIcon.infoWindowAnchor = new GPoint(5, 1);
 //function to create an Lab marker at the given point with the given name and link 
 function createLabMarker(position, name, link) {
   var my_lab_marker = new GMarker(position, { title: name, icon: labIcon });
   GEvent.addListener(my_lab_marker, "click", function() {
     my_lab_marker.openInfoWindowHtml("<a href=\"" + link + "\"><b>" + name + " on OWW</b></a>");
 });
   return my_lab_marker;
 }


 //loop over registered labs 
 for (var i in OWW_LabLayer) {
   var lab_layer = OWW_LabLayer[i];
   var labs_markers = [];
   for (var j in lab_layer["places"]) {
     var lab_place = lab_layer["places"][j];
     var lab_posn = new GLatLng(lab_place["posn"][1], lab_place["posn"][0]);
     var lab_marker = createLabMarker(lab_posn, lab_place["name"], lab_place["link"]);
     labs_markers.push(lab_marker);
   }
   mgr.addMarkers(labs_markers, lab_layer["zoom"][0], lab_layer["zoom"][1]);
 }
 
 mgr.refresh();

}


//----------------- // load //----------------- function load() {

     if (GBrowserIsCompatible()) {
       map = new GMap2(document.getElementById("map"));
       map.addControl(new GLargeMapControl());
       map.addControl(new GOverviewMapControl());
       map.setCenter(new GLatLng(50, -98), 1);
       map.enableDoubleClickZoom();
       //window.setTimeout(setupOWWMarkers, 0);
       setupOWWMarkers(); 
     }
   }
   //]]>
   addOnloadHook(load);
   hookEvent("unload", GUnload);
   </script>
   <div id="map" style="width: 800px; height: 600px"></div>

</html>