IS305 Fall 2008 :: Activity :: Just Me | People: | Everyone | Inbox | Just Me |
| Display: | Full-text | Summary |
| Include: | Blog Posts | Blog Comments | Files | Wiki Page | Wiki Comments |
| << Older | Page 1 of 7 |
The Work of Edward Tufte and Graphics Press
http://www.edwardtufte.com/tufte/
Search Results for 'tufte'
http://makingmaps.wordpress.com/?s=tufte
How Useful is Tufte for Making Maps?
http://makingmaps.wordpress.com/2007/08/16/how-useful-is-tufte-for-making-maps/
The Theory Behind User Interface Design
http://www.glnet.tv/source/profile.asp?url=UITheory_Resources
Executive dashboards - Tufte
http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0000bx&topic_id=1&topic=Ask+E%2eT%2e
Medical information exchange: The patient, doctor, computer triangle
http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001k8&topic_id=1&topic=Ask+E%2eT%2e
Dashboard Examples
http://www.enterprise-dashboard.com/sitemap/
Dashboard Eye Candy
http://www.enterprise-dashboard.com/2008/05/29/dashboard-eye-candy/
Cartographic Communication
http://www.colorado.edu/geography/gcraft/notes/cartocom/cartocom_f.html
Map of the Market
http://www.smartmoney.com/map-of-the-market/
Short (4 Minutes) ESRI Javascript API Tutorial Video http://www.youtube.com/watch?v=PMG-HHaw7-o
Google Javascript code example http://cambria.cgu.edu/IS305/10132008/OnStar.htm Loading a static KML file and Adding and Removing the layer.
Extreme Programming User Story
A good story describes what the system should do from the users perspective
It usually has:
a title
a concise problem statement:
As a [type of user]
I want to [perform some task]
so that I can [reach some goal]
other relevant notes or sketches
______________________________________________________________________
Class Example:
Title: View real-time traffic information across the U.S.
Concise problem statement:
As a road safety analyst
I want to view real-time traffic information across the U.S. in at least three locations simultaneously in a web browser
so that I can monitor patterns of traffic and related traffic incidents
______________________________________________________________________
Group projects can be seen here: http://cambria.cgu.edu/IS305/09292008
General Information:
IBM, in partnership with Dr. Dobb's Journal invites you to this exclusive webinar:
Event: Extending Enterprise Value with Web 2.0
Date: Wednesday September 24, 2008
Time: 3 PM ET / 12 PM PT
Duration: 60 Minutes
https://event.on24.com/eventRegistration/EventLobbyServlet?target=registration.jsp&eventid=118757&sessionid=1&key=54CCFF2140D595050E8979EECACE2310&partnerref=1DDJ1B3&sourcepage=register
Google Streetview Info:
http://www.streetviewfun.com/
http://www.immersivemedia.com/
Google Demo Code:
http://code.google.com/apis/maps/documentation/demogallery.html
OpenLayers Information:
http://openlayers.org/
http://openlayers.org/download/OpenLayers-2.6.zip
__________________________________________________________________________________
Map 1 - OpenLayers KML Layer Example
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="../theme/default/style.css" mce_href="../theme/default/style.css" type="text/css" />
<style type="text/css">
#map {
width: 512px;
height: 512px;
border: 1px solid black;
}
</style>
<script src="../lib/OpenLayers.js" mce_src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var lon = 5;
var lat = 40;
var zoom = 5;
var map, layer;
function init(){
map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer);
map.addLayer(new OpenLayers.Layer.GML("KML", "http://www.saferoadmaps.org/maps/2006_fars_maps/getKML.php?STATE=6&ROAD_FNC=1%2C2%2C3%2C4%2C5%2C6%2C9&SUMMER=1&SPEEDING=0%2C1&DRINKING=1&REST_USE=0&PER_TYP=1&AGE=22%2C23%2C24%2C25%2C26%2C27%2C28%2C29%2C30%2C31%2C32%2C33%2C34%2C35%2C36%2C37%2C38%2C39%2C40%2C41%2C42%2C43%2C44%2C45%2C46%2C47%2C48%2C49%2C50%2C51%2C52%2C53%2C54%2C55%2C56%2C57%2C58%2C59%2C60%2C61%2C62%2C63%2C64%2C65%2C66%2C67%2C68%2C69%2C70%2C71%2C72%2C73%2C74%2C75%2C76%2C77%2C78%2C79%2C80%2C81%2C82%2C83%2C84%2C85%2C86%2C87%2C88%2C89%2C90%2C91%2C92%2C93%2C94%2C95%2C96%2C97&SEX=1&submit=Filter+Results",
{
format: OpenLayers.Format.KML,
formatOptions: {
extractStyles: true,
extractAttributes: true
}
}));
map.zoomToExtent(new OpenLayers.Bounds(-126,42,-112,31));
}
</script>
</head>
<body onload="init()">
<h1 id="title">Map 1 - OpenLayers KML Layer Example</h1>
<div id="tags"></div>
<p id="shortdesc">
Demonstrates loading and displaying a KML file on top of a basemap.
</p>
<div id="map"></div>
<div id="docs"></div>
</body>
</html>
__________________________________________________________________________________
Map 2 - OpenLayers Multiple Maps Example with WMS
<html>
<head>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg" type="text/javascript"></script>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script src="http://clients.multimap.com/API/maps/1.1/metacarta_04"></script>
<script src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers"></script>
<script src="http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js"></script>
<script src="../lib/OpenLayers.js" mce_src="../lib/OpenLayers.js"></script>
</head>
<body>
<h1>OpenLayers: Multiple Providers </h1>
<p>With the click of a button, OpenLayers can change between a half dozen providers.</p>
<div style="width:100%; height:80%" id="map"></div>
<script defer="defer" type="text/javascript">
var map = new OpenLayers.Map( 'map', {controls: [new OpenLayers.Control.PanZoomBar()]} );
map.addControl(new OpenLayers.Control.MouseToolbar());
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.Permalink());
var layer_switcher = new OpenLayers.Control.LayerSwitcher();
map.addControl(layer_switcher);
layer_switcher.maximizeControl();
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
var google = new OpenLayers.Layer.Google("Google");
var googles = new OpenLayers.Layer.Google("Google Satellite", { 'type': G_SATELLITE_MAP });
var googleh = new OpenLayers.Layer.Google("Google Hybrid", { 'type': G_HYBRID_MAP });
var ve = new OpenLayers.Layer.VirtualEarth("Virtual Earth", {'minZoomLevel': 0});
var yahoo = new OpenLayers.Layer.Yahoo("Yahoo");
var weather = new OpenLayers.Layer.WMS( "Weather t",
"http://cambria.cgu.edu/weather_wms/wms.asp",
{layers: "Weather t",transparent:true,format:'image/png'},{isBaseLayer: false, opacity: 0.6});
map.addLayer(weather);
weather.setVisibility(false);
var weather1 = new OpenLayers.Layer.WMS( "Weather t-1",
"http://cambria.cgu.edu/weather_wms/wms.asp",
{layers: "Weather t-1",transparent:true,format:'image/png'},{isBaseLayer: false, opacity: 0.6});
map.addLayer(weather1);
weather1.setVisibility(false);
var weather2 = new OpenLayers.Layer.WMS( "Weather t-2",
"http://cambria.cgu.edu/weather_wms/wms.asp",
{layers: "Weather t-2",transparent:true,format:'image/png'},{isBaseLayer: false, opacity: 0.6});
map.addLayer(weather2);
weather2.setVisibility(false);
map.addLayers([wms, google, googles, googleh, ve, yahoo]);
map.setCenter(new OpenLayers.LonLat(-71,42), 6);
map.events.register("click", map, function(e) {
markers.addMarker(new OpenLayers.Marker(this.getLonLatFromPixel(e.xy)));
});
</script>
</body>
</html>
__________________________________________________________________________________
Map 3 - Google Maps Geocoding
<!DOCTYPE html PUBLIC "-//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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Map 3 - Google Maps Geocoding</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg" type="text/javascript"></script>
<script type="text/javascript">
var map = null;
var geocoder = null;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 1);
map.setMapType(G_HYBRID_MAP);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
geocoder = new GClientGeocoder();
}
}
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 16);
var marker = new GMarker(point, {draggable: true});
map.addOverlay(marker);
GEvent.addListener(marker, "dragend", function() {
marker.openInfoWindowHtml(marker.getLatLng().toUrlValue(6));
});
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(marker.getLatLng().toUrlValue(6));
});
GEvent.trigger(marker, "click");
}
}
);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<form action="#" onsubmit="showAddress(this.address.value); return false">
<p>
<input type="text" style="width:350px" name="address" value="130 East Ninth Street, Claremont, CA" />
<input type="submit" value="Go There!" />
</p>
<div id="map_canvas" style="width: 500px; height: 350px"></div>
</form>
</body>
</html>
__________________________________________________________________________________
Map 4 - Google Maps Streetview
<!DOCTYPE html PUBLIC "-//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>Map 4 - Google Maps Streetview</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg" type="text/javascript"></script>
<script>
var marker;
var overlayInstance = null;
var map;
var client;
var lastMarkerLocation;
var panorama;
var mapT;
function load() {
client = new GStreetviewClient();
var latlng = new GLatLng(34.102407, -117.713798);
map = new GMap2(document.getElementById("map"));
map.setCenter(latlng, 13);
var guyIcon = new GIcon(G_DEFAULT_ICON);
guyIcon.image = "http://maps.google.com/intl/en_us/mapfiles/cb/man_arrow-0.png";
guyIcon.transparent = "http://maps.google.com/intl/en_us/mapfiles/cb/man-pick.png";
guyIcon.imageMap = [
26,13, 30,14, 32,28, 27,28, 28,36, 18,35, 18,27, 16,26,
16,20, 16,14, 19,13, 22,8
];
guyIcon.iconSize = new GSize(49, 52);
guyIcon.iconAnchor = new GPoint(25, 35); // near base of guy's feet
guyIcon.infoWindowAnchor = new GPoint(25, 5); // top of guy's head
marker = new GMarker(latlng, {icon: guyIcon, draggable: true});
map.addOverlay(marker);
lastMarkerLocation = latlng;
GEvent.addListener(marker, "dragend", onDragEnd);
GEvent.addListener(marker, "click", openPanoramaBubble);
toggleOverlay();
}
function openPanoramaBubble() {
var contentNode = document.createElement('div');
contentNode.style.textAlign = 'center';
contentNode.style.width = '500px';
contentNode.style.height = '400px';
contentNode.innerHTML = 'Loading panorama';
marker.openInfoWindow("<div id='pano' style='width:200px;height:200px;'></div>", {maxContent: contentNode, maxTitle: "Full screen"});
panorama = new GStreetviewPanorama(document.getElementById("pano"));
panorama.setLocationAndPOV(marker.getLatLng(), null);
GEvent.addListener(panorama, "newpano", onNewLocation);
GEvent.addListener(panorama, "yawchanged", onYawChange);
var iw = map.getInfoWindow();
GEvent.addListener(iw, "maximizeend", function() {
panorama.setContainer(contentNode);
window.setTimeout("panorama.checkResize()", 5);
});
}
function toggleOverlay() {
if (!overlayInstance) {
overlayInstance = new GStreetviewOverlay();
map.addOverlay(overlayInstance);
} else {
map.removeOverlay(overlayInstance);
overlayInstance = null;
}
}
function onYawChange(newYaw) {
var GUY_NUM_ICONS = 16;
var GUY_ANGULAR_RES = 360/GUY_NUM_ICONS;
if (newYaw < 0) {
newYaw += 360;
}
guyImageNum = Math.round(newYaw/GUY_ANGULAR_RES) % GUY_NUM_ICONS;
guyImageUrl = "http://maps.google.com/intl/en_us/mapfiles/cb/man_arrow-" + guyImageNum + ".png";
marker.setImage(guyImageUrl);
}
function onNewLocation(lat, lng) {
var latlng = new GLatLng(lat, lng);
marker.setLatLng(latlng);
}
function onDragEnd() {
var latlng = marker.getLatLng();
if (panorama) {
client.getNearestPanorama(latlng, onResponse);
}
}
function onResponse(response) {
if (response.code != 200) {
marker.setLatLng(lastMarkerLocation);
} else {
var latlng = new GLatLng(response.Location.lat, response.Location.lng);
marker.setLatLng(latlng);
lastMarkerLocation = latlng;
openPanoramaBubble();
}
}
</script>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 800px; height: 600px"></div>
<br/>
<input type="button" onclick="toggleOverlay()" value="Toggle Streetview Layer"/>
</body>
</html>
__________________________________________________________________________________
Add Elements to Map 4 Above:
Zoom
Pan
Layers
Geocode
Map 1 - Google:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Map1 - Google</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("claremont"));
map.setCenter(new GLatLng(34.102407, -117.713798 ), 14);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
var trafficOptions = {incidents:true};
trafficInfo = new GTrafficOverlay(trafficOptions);
map.addOverlay(trafficInfo);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="claremont" style="width: 500px; height: 300px"></div>
</body>
</html>
_____________________________________________________________________________________________
Map 2 - Virtual Earth:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Map2 - Virtual Earth</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript"
src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1"></script>
<script type="text/javascript">
var map = null;
function GetMap() {
map = new VEMap('myMap');
map.LoadMap(new VELatLong(34.11306, -117.717241), 15 ,'h' ,false);
map.LoadTraffic(true);
}
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
</body>
</html>
_____________________________________________________________________________________________
Map 3 - Virtual Earth with Parameters
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Map3 - VE with input parameters</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1"></script>
<script type="text/javascript">
var map = null;
var selStyle = VEMapStyle.Aerial;
var selMode = VEMapMode.Mode2D;
var zoom = 4;
function GetMap()
{
var latLon = new VELatLong(txtLat.value, txtLong.value);
if (txtZoom.value > 0 && txtZoom.value <= 19)
{
zoom = txtZoom.value;
}
else
{
alert("Enter a value between 1 and 19.");
}
if (chkFixed.checked)
{
fixed=1;
}
else
{
fixed=0;
}
if (chkShowSwitch.checked)
{
showSwitch=1;
}
else
{
showSwitch=0;
}
map = new VEMap('myMap');
map.LoadMap(latLon, zoom, selStyle, fixed, selMode, showSwitch);
map.AttachEvent("onobliqueenter", SetObliqueRadio);
map.AttachEvent("onobliqueleave", SetObliqueRadio);
}
function SetStyle(s)
{
selStyle = s;
}
function SetMode(m)
{
if (modeRadios.mode[0].Checked)
{
selMode = VEMapMode.Mode2D;
}
else
{
selMode = VEMapMode.Mode3D;
}
}
function SetObliqueRadio(event)
{
if (event.eventName == "onobliqueenter")
{
styleRadios.style[3].disabled=null;
}
else if (event.eventName == "onobliqueleave")
{
styleRadios.style[3].disabled="disabled";
}
}
function DisposeMap()
{
if(map != null)
{
map.Dispose();
}
}
</script>
</head>
<body onload="GetMap();" onunload="DisposeMap();" style="font-family:Arial">
<div id='myMap' style="position: relative; width: 400px; height: 400px;">
</div>
<input id="btnLoad" type="button" onclick="GetMap()" value="Load A Map" />
<br />
Lat: <input id="txtLat" value="34.102407" />
<br />
Lon: <input id="txtLong" value="-117.713798" />
<br />
Zoom Level (1-19): <input id="txtZoom" value="9" style="width: 50px" />
<br />
Fixed: <input id="chkFixed" type="checkbox" /> (check to prevent user interaction)
<br />
Show Switch: <input id="chkShowSwitch" type="checkbox" checked="checked"/>
(show the map mode switch on the dashboard control)
<table width="400px">
<tr>
<td align="left" width="60%">
<form id="styleRadios">
Road: <input name="style" type="radio" onclick="SetStyle('r')" /> |
Aerial: <input name="style" type="radio" onclick="SetStyle('a')" checked="checked" />
<br />
Hybrid: <input name="style" type="radio" onclick="SetStyle('h')" /> |
Oblique: <input name="style" type="radio" onclick="SetStyle('o')" disabled="disabled"/>
</form>
</td>
<td align="left">
<form id="modeRadios">
2D: <input name="mode" type="radio" onclick="SetMode()" checked="checked" />
<br />
3D: <input name="mode" type="radio" onclick="SetMode()" />
</form>
</td>
</tr>
</table>
</body>
</html>
_____________________________________________________________________________________________
Map 4 - Google with map parameters
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Map4 - Google with map parameters</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg" type="text/javascript"></script>
<script src="map_parameters.js"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("claremont"));
map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
var trafficOptions = {incidents:true};
trafficInfo = new GTrafficOverlay(trafficOptions);
map.addOverlay(trafficInfo);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="claremont" style="width: 600px; height: 400px"></div>
</body>
</html>
map_parameters.js
var centerLatitude = 39.362651
var centerLongitude = -74.55029
var startZoom = 12
_____________________________________________________________________________________________
Map 5 - Traffic Information System
Los Angeles
Chicago
New York
| << Older | Page 1 of 7 |
