GMaps map of user locations. Requires a Google Maps API key and a JSON

file describing the cities that users reside in. Directions for
obtaining these can be found in utah/gmaps/README

www/GNUmakefile.in

@@ -120,6 +120,10 @@ TTFILES  = $(wildcard $(SRCDIR)/timetree/*.png)
 TTFILES += $(wildcard $(SRCDIR)/timetree/*.js)
 TTFILES += $(wildcard $(SRCDIR)/timetree/*.css)
 
+UMFILES  = $(wildcard $(SRCDIR)/usermap/*.php)
+UMFILES += $(wildcard $(SRCDIR)/usermap/*.png)
+UMFILES += $(wildcard $(SRCDIR)/usermap/*.js)
+
 JSFILES += $(wildcard $(SRCDIR)/js/*.js)
 
 # need to make it *.gz; with simply "*", 
@@ -174,6 +178,7 @@ ALLBUI    = $(notdir $(BUIFILES))
 ALLNL     = $(notdir $(NLFILES))
 ALLHY     = $(notdir $(HYFILES))
 ALLTT     = $(notdir $(TTFILES))
+ALLUM     = $(notdir $(UMFILES))
 ALLJS     = $(notdir $(JSFILES))
 ALLROBO   = $(notdir $(ROBOTRACKFILES))
 ALLWISTATS = $(notdir $(WIRELESSSTATSFILES))
@@ -190,6 +195,7 @@ INSTALLFILES = $(addprefix $(INSTALL_SBINDIR)/, htmlinstall) \
 	$(addprefix $(INSTALL_WWWDIR)/netlab/, $(ALLNL)) \
 	$(addprefix $(INSTALL_WWWDIR)/hyperviewer/, $(ALLHY)) \
 	$(addprefix $(INSTALL_WWWDIR)/timetree/, $(ALLTT)) \
+	$(addprefix $(INSTALL_WWWDIR)/usermap/, $(ALLUM)) \
 	$(addprefix $(INSTALL_WWWDIR)/js/, $(ALLJS)) \
 	$(addprefix $(INSTALL_WWWDIR)/robotrack/, $(ALLROBO)) \
 	$(addprefix $(INSTALL_WWWDIR)/wireless-stats/, $(ALLWISTATS)) \

www/usermap/index.php

+<?php
+#
+# EMULAB-COPYRIGHT
+#   Copyright (c) 2009 University of Utah and the Flux Group.
+#   All rights reserved.
+#
+
+include("../defs.php3");
+include("usermap.php");
+
+$optargs = OptionalPageArguments("fullscreen",   PAGEARG_BOOLEAN);
+
+if (isset($fullscreen)) {
+    draw_usermap($USERMAP_TYPE_FULLSCREEN);
+} else {
+    draw_usermap($USERMAP_TYPE_NORMAL);
+}

www/usermap/usermap.js

+var map = null;
+var markers = [];
+var counts = [];
+var markerClusterer = null;
+var individual = false;
+
+/*
+ * Set up the map - should be called as "onload" on the body element
+ */
+function usermap_initialize() {
+    if (GBrowserIsCompatible()) {
+        // Grab the element to display the map in - should be a div with ID
+        // "map_canvas"
+        map = new GMap2(document.getElementById("map_canvas"));
+
+        // Pick a center point and zoom level that fits most markers on
+        map.setCenter(new GLatLng(25, 5), 2);
+
+        // Use the default control set from maps.google.com
+        map.setUIToDefault();
+
+        // Use the default red map icon when displaying individual points
+        var icon = new GIcon(G_DEFAULT_ICON);
+
+        // The JSON file with city points should have been loaded by now,
+        // which sets up the 'users' variable. Put all points from it into
+        // markers
+        for (var i = 0; i < users.cities.length; ++i) {
+            var latlng = new GLatLng(users.cities[i].latitude,
+                                     users.cities[i].longitude);
+            var marker = new GMarker(latlng,{'icon': icon});
+            marker.count = users.cities[i].count;
+            marker.name = users.cities[i].name;
+
+            // Set the text that pops up if the user clicks on the marker
+            marker.bindInfoWindowHtml(marker.name + " <i>(" +
+                                      marker.count + ")</i>");
+
+            markers.push(marker);
+        }
+
+        // Add a custom control, defined below, to view specific regions, etc
+        map.addControl(new ViewSetControl());
+
+        // Start the map up!
+        refreshMap();
+    }
+}
+
+/*
+ * Display icons, clusters, etc. on the map
+ */
+function refreshMap() {
+    /*
+     * Clear out any old state
+     */
+    if (markerClusterer != null) {
+      markerClusterer.clearMarkers();
+    }
+    // If we've put any individual markers on the map, this clears them off
+    map.clearOverlays();
+
+    /*
+     * Put new points on the map
+     */
+    if (individual) {
+        // If displaying individual cities, rather than clusters, just add
+        // the markers directly to the map
+        for (var i = 0; i < markers.length; i++) {
+            map.addOverlay(markers[i]);
+        }
+    } else {
+        // If doing clusters, the MarkerClusterer object does all the work
+        markerClusterer = new MarkerClusterer(map, markers,
+            {'maxZoom': 20, 'gridSize': 20, 'styles': null});
+    }
+}
+
+/*
+ * Custom control objects
+ */
+
+// We define the function first
+function ViewSetControl() {
+}
+
+// To "subclass" the GControl, we set the prototype object to
+// an instance of the GControl object
+ViewSetControl.prototype = new GControl();
+
+// Creates a SPAN for each of the buttons and places them in a container
+// DIV which is returned as our control element. We add the control to
+// to the map container and return the element for the map class to
+// position properly.
+ViewSetControl.prototype.initialize = function(map) {
+  var container = document.createElement("div");
+  this.setContainerStyle_(container);
+
+  // Button to show whole world
+  var worldspan = document.createElement("span");
+  this.setButtonStyle_(worldspan);
+  worldspan.style.borderLeft = "";
+  container.appendChild(worldspan);
+  worldspan.appendChild(document.createTextNode("Worldwide"));
+  GEvent.addDomListener(worldspan, "click", function() {
+    map.setCenter(new GLatLng(25, 5), 2);
+  });
+
+  // Button to show just the USA
+  var USAspan = document.createElement("span");
+  this.setButtonStyle_(USAspan);
+  container.appendChild(USAspan);
+  USAspan.appendChild(document.createTextNode("USA"));
+  GEvent.addDomListener(USAspan, "click", function() {
+    map.setCenter(new GLatLng(37, -100), 4);
+  });
+
+  // Button to show just Europe
+  var europespan = document.createElement("span");
+  this.setButtonStyle_(europespan);
+  container.appendChild(europespan);
+  europespan.appendChild(document.createTextNode("Europe"));
+  GEvent.addDomListener(europespan, "click", function() {
+    map.setCenter(new GLatLng(48, 15), 4);
+  });
+
+  // Button to toggle between individual points and clusters
+  var togglespan = document.createElement("span");
+  this.setButtonStyle_(togglespan);
+  container.appendChild(togglespan);
+  var toggleTextOff = document.createTextNode("Show all markers");
+  var toggleTextOn = document.createTextNode("Show clusters");
+  togglespan.appendChild(toggleTextOff);
+  GEvent.addDomListener(togglespan, "click", function() {
+    // Toggle the button text back and forth
+    if (individual) {
+      individual = false;
+      togglespan.replaceChild(toggleTextOff,toggleTextOn);
+    } else {
+      togglespan.replaceChild(toggleTextOn,toggleTextOff);
+      individual = true;
+    }
+    // Redraw the map
+    refreshMap();
+  });
+
+  map.getContainer().appendChild(container);
+  return container;
+}
+
+// Put the control in the bottom right corner with enough room for the google
+// copyright text below it.
+ViewSetControl.prototype.getDefaultPosition = function() {
+  return new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(25, 15));
+}
+
+// Sets the proper CSS for the container element
+ViewSetControl.prototype.setContainerStyle_ = function(container) {
+  container.style.color = "#0000cc";
+  container.style.backgroundColor = "white";
+  container.style.font = "small Arial";
+  container.style.border = "1px solid black";
+  container.style.padding = "0px";
+  container.style.textAlign = "center";
+  container.style.cursor = "pointer";
+  container.style.float = "left";
+}
+
+// Sets the proper CSS for the given button
+ViewSetControl.prototype.setButtonStyle_ = function(button) {
+    button.style.borderLeft = "1px solid black";
+    button.style.paddingRight = "7px";
+    button.style.paddingLeft = "7px";
+    button.style.paddingRight = "3px";
+    button.style.paddingLeft = "3px";
+    button.style.margin = "0px";
+}

www/usermap/usermap.php

+<?php
+#
+# EMULAB-COPYRIGHT
+#   Copyright (c) 2009 University of Utah and the Flux Group.
+#   All rights reserved.
+#
+
+include_once("../defs.php3");
+
+#
+# Select one of these types for the page
+#
+$USERMAP_TYPE_NORMAL = 0;
+$USERMAP_TYPE_EMBED = 1;
+$USERMAP_TYPE_FULLSCREEN = 2;
+
+$USERMAP_JSONFILE = "all-emulab-cities.json";
+
+$USERMAP_LOC = "${TBBASE}/usermap";
+
+#
+# The headers to load the javascript files
+#
+$USERMAP_SCRIPTHEADERS = <<<EOH
+<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=$GMAP_API_KEY"
+              type="text/javascript">
+</script>
+
+<script src="${USERMAP_LOC}/markerclusterer.js" type="text/javascript">
+</script>
+
+<script src="${USERMAP_LOC}/$USERMAP_JSONFILE" type="text/javascript">
+</script>
+
+<script src="${USERMAP_LOC}/usermap.js" type="text/javascript">
+</script>
+
+<script type="text/javascript" language="javascript">
+addLoadFunction(usermap_initialize);
+addUnloadFunction(GUnload);
+</script>
+EOH;
+
+function usermap_setup() {
+    global $GMAP_API_KEY, $USERMAP_JSONFILE;
+    return (($GMAP_API_KEY != "") && file_exists($USERMAP_JSONFILE));
+}
+
+function draw_usermap($type) {
+    global $GMAP_API_KEY, $USERMAP_JSONFILE, $USERMAP_TYPE_FULLSCREEN,
+        $USERMAP_TYPE_EMBED, $USERMAP_TYPE_NORMAL, $USERMAP_LOC, $THISHOMEBASE,
+        $USERMAP_SCRIPTHEADERS, $TBBASE;
+    if ($GMAP_API_KEY == "") {
+        if ($type == $USERMAP_TYPE_EMBED) {
+            echo("<p><b>Google Map API key not set</b></p>");
+        } else {
+            PAGEERROR("Google Map API key not set");
+        }
+    }
+
+    if (!file_exists($USERMAP_JSONFILE)) {
+        if ($type == $USERMAP_TYPE_EMBED) {
+            echo("<p><b>JSON data source not created</b></p>");
+        } else {
+            PAGEERROR("JSON data source not created");
+        }
+    }
+
+    #
+    # If in fullscreen mode, we don't emit the standard header, just emit the
+    # HTML ourselves
+    #
+    if ($type == $USERMAP_TYPE_FULLSCREEN) {
+        $divstyle = "width: 100%; height: 100%; margin: 0px; padding: 0px;";
+    ?>
+
+    <!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
+      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+    <html xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+        <title><? echo $THISHOMEBASE ?> User Map</title>
+        <script src="<? echo $TBBASE ?>/onload.js" type="text/javascript">
+        </script>
+        <? echo $USERMAP_SCRIPTHEADERS ?>
+    </head>
+    <body style="margin: 0px; padding: 0px;">
+    <?php
+
+    } else {
+        $divstyle = "width: 850px; height: 400px;";
+        if ($type != $USERMAP_TYPE_EMBED) {
+            PAGEHEADER("User Map",NULL,$USERMAP_SCRIPTHEADERS);
+        }
+    }
+
+    echo "<div id=\"map_canvas\" style=\"<? echo $divstyle ?>\"></div>\n";
+
+    if (isset($fullscreen)) {
+        echo "</body></html>";
+    } else {
+        echo "<a href=\"${USERMAP_LOC}/?fullscreen=true\">larger version</a>";
+        if ($type != $USERMAP_TYPE_EMBED) {
+            PAGEFOOTER();
+        }
+    }
+}
+?>