OpenWetWare:Software/Google Earth API/OWW Layers Javascript
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&v=2&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>