Commit a381fb93 authored by Robert Ricci's avatar Robert Ricci

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
parent b01fd231
......@@ -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)) \
......
<?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);
}
This diff is collapsed.
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";
}
<?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();
}
}
}
?>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment