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 + "\">" + name + " on OWW</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 + "\">" + name + " on OWW</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>
</html>