commit b76dd60885767c8246b732861f41af5489680d04 Author: Karsten Loesing <karsten.loesing@gmx.net> Date: Tue Mar 15 16:43:22 2011 +0100 Check in Thematic Mapping API prototype. --- task-2762/README | 19 ++ task-2762/css/stylesheet-ltr.css | 522 ++++++++++++++++++++++++++++++++++++++ task-2762/images/favicon.ico | Bin 0 -> 1150 bytes task-2762/images/top-left.png | Bin 0 -> 11137 bytes task-2762/images/top-middle.png | Bin 0 -> 240 bytes task-2762/images/top-right.png | Bin 0 -> 607 bytes task-2762/index.html | 93 +++++++ 7 files changed, 634 insertions(+), 0 deletions(-) diff --git a/task-2762/README b/task-2762/README new file mode 100644 index 0000000..fccd988 --- /dev/null +++ b/task-2762/README @@ -0,0 +1,19 @@ +Thematic Mapping API prototype for Tor metrics data +--------------------------------------------------- + + - Download the Thematic Mapping API JavaScript code from + http://thematicmapping.org/ and place it in this directory. In + particular, you'll need tmapi-0.1.js and worldborders.js. + + - Create your own Google Spreadsheet and replace the link + "https://spreadsheets.google.com/tq?key=0AujpbDQoBXkX..." in index.html + with a link to your spreadsheet. Feel free to use the existing link, + but note that you cannot change the data in it. + + - Register your domain at Google for using the Google Earth Plug-In on + your website. If you don't, the plugin won't load on your website, but + it will tell you where to register. + + - Make your website available via thttpd, Apache, or the web server of + your choice. + diff --git a/task-2762/css/stylesheet-ltr.css b/task-2762/css/stylesheet-ltr.css new file mode 100644 index 0000000..20a6b7f --- /dev/null +++ b/task-2762/css/stylesheet-ltr.css @@ -0,0 +1,522 @@ +body { + background-color: white; + margin-top: 0px; + font-family: Arial, Helvetica, sans-serif; + font-size: 1em; + font-style: normal; + color: #000000; + padding-top: 0px; +} + +/* images */ + +img { + border: 0; +} + + +li { + margin: .2em .2em .2em 1em; +} + +/* this centers the page */ + +.center { + text-align: center; + background-color: white; + margin: 0px auto 0 auto; + width: 85%; +} + +.center table { + margin-left: auto; + margin-right: auto; + text-align: left; +} + +/* for the shadow box */ + +table.shadowbox { + width: 788px; + border-collapse: collapse; + padding: 0; + margin-bottom: 2em; +} + +table.shadowbox td { + margin: 0; + padding: 0; +} + +/* spacer */ + +td.spacer { + width: 110px; +} + +div.banner { + text-align: center; + height: 79px; + margin-bottom: 10px; + width:100%; +} + +table.table-banner { + margin: 0 auto 0 auto; + background-image: url("images/tor_mast.gif"); + background-repeat: no-repeat; +} + +div.bottom { + font-size: 0.8em; + margin-top: 0.5cm; + margin-left: 1em; + margin-right: 1em; + text-align: center; +} + +/* the sidebars */ + +div.sidebar { + -moz-border-radius: 5px; + -khtml-border-radius: 5px; + background-color: #e5e5e5; + float: right; + margin: 0 0 10px 10px; + /* border: 2px solid #666; */ + padding: 10px; + width: 150px; + text-align: center; +} + +div.sidebar-left { + -moz-border-radius: 5px; + -khtml-border-radius: 5px; + background-color: #e5e5e5; + float: right; + margin: 0 0 5px 5px; + /* border: 2px solid #666; */ + padding: 5px; + width: 275px; + text-align: left; +} + +/* The main column (left text) */ + +div.main-column { + padding: 15px 0 10px 10px; + text-indent: 0pt; + font-size: 1em; + direction: ltr; + text-align: left; +} + +/* formatting styles */ + +h1 { + font-size: 1.6em; + margin-bottom: 0.5em; +} + +h2 { + font-size: 1.4em; + margin-bottom: 0em; + font-weight: bold; + margin-top: 0; +} + +h3 { + font-size: 1.2em; + margin-bottom: 0em; + font-weight: bold; + margin-top: 0; +} + +h4 { + font-size: 1.1em; + margin-bottom: 0em; + font-weight: bold; + margin-top: 0; +} + +h5 { + font-size: 1.0em; + margin-bottom: 0em; + font-weight: bold; + margin-top: 0; +} + +p { + margin-top: 0; + margin-bottom: 1em; +} + +a:link { + color: blue; + font-size: 1em; +} + +a:visited { + color: purple; + font-size: 1em; +} + +a.anchor:link { + font-size: 1em; + color: black; + font-weight: bold; + text-decoration: none; +} + +a.anchor:visited { + font-size: 1em; + color: black; + font-weight: bold; + text-decoration: none; +} + +a.anchor { + font-size: 1em; + color: black; + font-weight: bold; + text-decoration: none; +} + +td { + vertical-align: top; +} + +a.smalllink { + font-size: 0.8em; +} + +/* the banner */ + +table.banner { + width: 100%; + height: 79px; + margin-left: auto; + margin-right: auto; +} + +td.banner-left { + /* This is done with an <img> in the HTML so it can be clickable + background-image: url("/images/top-left.png"); + background-repeat: no-repeat; */ + width: 193px; +} + +td.banner-middle { + background-color: #00802B; + background-image: url("/images/top-middle.png"); + background-repeat: repeat-x; + vertical-align: bottom; + padding-bottom: 10px; + color: white; + font-weight: bold; + font-size: 1.2em; +} + +td.banner-middle a, td.banner-middle a:visited { + margin-right: 5px; + color: white; + font-weight: bold; + font-size: 1em; +} + +td.banner-middle a:hover { + color: #FF7F00; + font-weight: bold; + font-size: 1em; +} + +td.banner-right { + background-image: url("/images/top-right.png"); + background-repeat: no-repeat; + width: 15px; + background-position: right; + padding-top: 8px; +} + +.banner-middle a.current { + text-decoration: none; + color: #FF7F00; + font-weight: bold; + font-size: 1em; + width: auto; + left: -50px; +} + +.donatebutton { + width: auto; + text-align: center; +} + +.donatebutton a { + -moz-border-radius: 5px; + -khtml-border-radius: 5px; + margin: 10px 0 0 0; + font-weight: bold; + display: block; + padding: 6px; + background-color: #00802B; + border-top: 1px solid #00A838; + border-left: 1px solid #00A838; + border-bottom: 1px solid #00591E; + border-right: 1px solid #00591E; + color: #FFFFFF; +} + +.donatebutton a:hover { + color: orange; +} + +.donatebutton a:active { + color: orange; +} + +.downloadbutton { + width: auto; + text-align: center; +} + +.downloadbutton a { + -moz-border-radius: 5px; + -khtml-border-radius: 5px; + margin: 10px 0 0 0; + font-weight: bold; + display: block; + padding: 6px; + background-color: orange; + color: #FFFFFF; +} + +.downloadbutton a:hover { + color: green; +} + +.donatebutton a:active { + color: green; +} + +/* these styles are for the menu on the gui contest pages */ + +.guileft { + width: 25%; + float: left; + padding: 0; + margin: 0; +} + +.guimenu { + border: 1px solid #AAA6AB; + background-color: #E2DFE3; + margin: 0 15px 15px 0; + padding: 0; +} + +.guimenuinner a { + display: block; + text-decoration: none; + padding: 2px 0px 0px 12px; + margin: 0 0 0 0px; + color: #333333; +} + +.guimenuinner a:visited { + color: #333333; +} + +.guimenuinner a:hover { + background-image: url(gui/img/arrow.png); + background-repeat: no-repeat; + background-position: left; + color: #EF8012; +} + +.guimenuinner a.on { + background-image: url(gui/img/arrow.png); + background-repeat: no-repeat; + background-position: left; + color: #EF8012; +} + + +.guimenu h1 { + width: 85%; + font-size: 16px; + margin: 0 0 8px 0; + padding: 0; + border-bottom: 1px solid #AAA6AB; +} + +.curveleft { + background-image: url(gui/img/corner-topleft.png); + background-repeat: no-repeat; + background-position: top left; + margin: -1px; +} + +.curveright { + background-image: url(gui/img/corner-topright.png); + background-repeat: no-repeat; + background-position: top right; +} + +.guimenuinner { + + padding: 0 10px 0 10px; +} + + +.curvebottomleft { + background-image: url(gui/img/corner-bottomleft.png); + background-repeat: no-repeat; + background-position: bottom left; + margin: -1px; +} + +.curvebottomright { + background-image: url(gui/img/corner-bottomright.png); + background-repeat: no-repeat; + background-position: bottom right; +} + +table.mirrors { + margin: 0 auto; + border-width: 3px; + border-color: gray; + border-style: ridge; + border-collapse: collapse; +} +table.mirrors th { + border: 1px solid gray; + background-color: #DDDDDD; +} +table.mirrors td { + border: 1px solid gray; + padding: 4px; +} + +acronym { + border-bottom: none; +} + +dt { + font-weight: bolder; + font-style: italic; +} + +.nb { + -moz-border-radius: 5px; + -khtml-border-radius: 5px; + background-color:#EEEEFF; + border:1px solid #000000; + color:black; + font-size:10pt; + font-weight:bold; + margin:10px 0; + padding:15px 20px; + text-align:justify; +} + +.warning { + -moz-border-radius: 5px; + -khtml-border-radius: 5px; + background-color:#FFFFFF; + background-image:url(images/distros/warning.png); + background-position:15px center; + background-repeat:no-repeat; + border:2px solid #FF0000; + color:#1A1A1A; + font-size:10pt; + font-weight:bold; + margin:10px 0; + padding:15px 20px 15px 67px; + text-align:justify; +} + +hr { + background-color:#002200; + color:#666666; + font-size:1px; + height:1px; + line-height:0; + margin:15px 0 5px; +} + +.underline { + border-bottom:1px solid #000022; + margin:10px 0 20px; + padding:5px 0; +} + +div#graphmenu { + float:left; + margin-top:20px; + width:100%; + padding:5px; +} + +#graphmenu div.formrow { + clear:both; +} + +#graphmenu .formrow p { + float:left; +} + +#graphmenu .formrow label { + float:left; + width:100px; + margin:0px 5px 0px 0px; + text-align:right; +} + +#graphmenu .formrow label.graphname { + float:left; + width:100px; + margin:0px; + text-align:right; +} + +#graphmenu .formrow label.startend { + width:50px; + margin:0px 10px 0px 0px; + text-align:right; +} + +#graphmenu .formrow input { + float:left;width:100px; +} + +#graphmenu .formrow input.submit { + width:100px; + margin:0px 0px 0px 10px; +} + +#graphmenu .break { + clear:both; +} + +#graphmenu .note { + float:left; + font-size:.8em; + font-style:italic; +} + +#graphmenu div#torperfopts { + float:left; +} + +#graphmenu div#gettoropts { + float:left; +} + +#graphmenu div#regularopts { + float:left; +} + +.error { + color:red; +} diff --git a/task-2762/images/favicon.ico b/task-2762/images/favicon.ico new file mode 100644 index 0000000..48060b1 Binary files /dev/null and b/task-2762/images/favicon.ico differ diff --git a/task-2762/images/top-left.png b/task-2762/images/top-left.png new file mode 100644 index 0000000..9927355 Binary files /dev/null and b/task-2762/images/top-left.png differ diff --git a/task-2762/images/top-middle.png b/task-2762/images/top-middle.png new file mode 100644 index 0000000..1035dc5 Binary files /dev/null and b/task-2762/images/top-middle.png differ diff --git a/task-2762/images/top-right.png b/task-2762/images/top-right.png new file mode 100644 index 0000000..54623ef Binary files /dev/null and b/task-2762/images/top-right.png differ diff --git a/task-2762/index.html b/task-2762/index.html new file mode 100644 index 0000000..014abf2 --- /dev/null +++ b/task-2762/index.html @@ -0,0 +1,93 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html> +<head> + <title>Tor Daily Users Thematic Mapping API Prototype</title> + <script src="http://www.google.com/jsapi?key=ABQIAAAAgej9iuh3YJNjEPuctrZMehRNZJOGGZ5AJFYnuNGvvgpHXAyWEBRJgywKSq0D3AFCjF17DTpYDdYu-w"></script> + <script src="tmapi-0.1.js"></script> + <script src="worldborders.js"></script> + <link href="/css/stylesheet-ltr.css" type="text/css" rel="stylesheet"> + <link href="/images/favicon.ico" type="image/x-icon" rel="shortcut icon"> +</head> +<body onload="init()"> + <div class="center"> + <table class="banner" border="0" cellpadding="0" cellspacing="0" summary=""> + +<tr> + <td class="banner-left"> + <img src="/images/top-left.png" width="193" height="79"> + </td> + <td class="banner-middle"></td> + <td class="banner-right"></td> +</tr> +</table> + + <div class="main-column"> + <h2>Tor Daily Users Thematic Mapping API Prototype</h2> + <br> + + <p>This website is a prototype of the + <a href="http://thematicmapping.org/">Thematic Mapping API</a> + to display daily Tor users.</p> + + <div id='map_container' style='height: 800px; width: 800px;'> + <div id='map' style='height: 100%;'></div> + </div> + <script type="text/javascript"> + google.load("visualization", "1"); + google.load("earth", "1"); + + var earth = null; + + function init() { + google.earth.createInstance("map", initCallback, failureCallback); + } + + function initCallback(object) { + earth = object; + earth.getWindow().setVisibility(true); + + // Load statistics from Google Spreadsheet. + var query = new google.visualization.Query('https://spreadsheets.google.com/tq?key=0AujpbDQoBXkXdHdrUHhDZTE4cTllWUwtTjdK...'); + // Send the query with a callback function. + query.send(handleQueryResponse); + + // Called when the query response is returned. + function handleQueryResponse(response) { + + var data = response.getDataTable(); + + var map = new TME.Map.Kml.GoogleViz(); + + var options = { + type: 'prism', + title: 'Daily Tor users on March 9, 2011', + maxHeight: 2000000, + colorType: 'scale', + classification: 'equal', + geometry: worldBorders + }; + + var kml = map.draw(data, options); + + var kmlObject = earth.parseKml(kml); + earth.getFeatures().appendChild(kmlObject); + + var lookAt = earth.getView().copyAsLookAt(earth.ALTITUDE_RELATIVE_TO_GROUND); + lookAt.setLatitude(35); + lookAt.setLongitude(-25); + lookAt.setRange(12000000); + earth.getView().setAbstractView(lookAt); + } + } + + function failureCallback(object) { + } + + </script> + + </div> + </div> +</body> +</html> +