ÿþ<!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" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="3600" /> <meta name="revisit-after" content="2 days" /> <meta name="robots" content="index,follow" /> <meta name="publisher" content="Your publisher infos here ..." /> <meta name="copyright" content="Your copyright infos here ..." /> <meta name="author" content="Author: Your author infos here ..." /> <meta name="distribution" content="global" /> <meta name="description" content="Your page description here ..." /> <meta name="keywords" content="Your keywords, keywords, keywords, here ..." /> <script src="http://www.google.com/jsapi?key=ABQIAAAAz5obz9abVvAt6vj2dwh0EBQX3e_jiR7nTXRUNoP9vF2m0PqiohSPLxkXUmWyM2EZ2lNPhZGWCIUbng"></script><script src="http://api.thematicmapping.org/tmapi-0.1.js"></script><script src="worldborders.js"></script> <link rel="stylesheet" type="text/css" media="screen,projection,print" href="http://thematicmapping.org/css/global.css" /> <link rel="stylesheet" type="text/css" media="screen,projection,print" href="http://thematicmapping.org/css/layout2_setup.css" /> <link rel="stylesheet" type="text/css" media="screen,projection,print" href="http://thematicmapping.org/css/layout2_text.css" /> <link rel="stylesheet" type="text/css" media="screen,projection,print" href="http://thematicmapping.org/css/thematicmapping.css" /> <link rel="icon" type="image/x-icon" href="./img/favicon.ico" /> <title>Prism map - Thematic Mapping API Examples - thematicmapping.org</title> </head> <!-- Global IE fix to avoid layout crash when single word size wider than column width --> <!--[if IE]><style type="text/css"> body {word-wrap: break-word;}</style><![endif]--> <body onload="init()"> <div class="page-container"> <div class="header"> <div class="header-top"> <div class="sitename"> <h1><a href="http://thematicmapping.org" title="Go to start page">thematic<span style="font-weight:normal;">mapping</span><sup>.org</sup></a></h1> </div> </div> <div class="header-middle"> <div class="sitemessage"> <h1>Thematic Mapping API</h1> <h2>Create KML based thematic maps<br/>with a few lines of JavaScript</h2> <h3><a href="http://thematicmapping.org/api">&rsaquo;&rsaquo;&nbsp;More details</a></h3> </div> </div> <div class="header-bottom"> <!-- Navigation Level 2 (Drop-down menus) --> <div class="nav2"> <ul> <li><a href="http://thematicmapping.org">Home</a></li> </ul> <ul> <li><a href="http://thematicmapping.org/api">API<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="http://thematicmapping.org/api">Introduction</a></li> <li><a href="http://thematicmapping.org/api/docs.php">Documentation</a></li> <li><a href="http://thematicmapping.org/api/examples.php">Examples</a></li> <li><a href="http://groups.google.com/group/thematic-mapping-api">Forum</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <ul> <li><a href="http://thematicmapping.org/engine">Engine</a></li> </ul> <ul> <li><a href="http://thematicmapping.org/techniques">Techniques</a></li> </ul> <ul> <li><a href="http://thematicmapping.org/playground">Playground</a></li> </ul> <ul> <li><a href="http://thematicmapping.org/downloads">Downloads</a></li> </ul> <ul> <li><a href="http://blog.thematicmapping.org">Blog</a></li> </ul> <ul> <li><a href="http://thematicmapping.org/about">About</a></li> </ul> </div> </div> <!-- A.4 HEADER BREADCRUMBS --> <!-- Breadcrumbs --> <div class="header-breadcrumbs"> <ul> <li><a href="http://thematicmapping.org">Home</a></li> <li><a href="http://thematicmapping.org/api">Thematic Mapping API</a></li> <li><a href="http://thematicmapping.org/api/examples.php">Examples</a></li> <li>Prism map</li> </ul> <!-- Search form --> <div class="searchform"> <form action="http://www.google.com/cse" id="cse-search-box" class="form"> <fieldset> <input type="hidden" name="cx" value="008370996709983572748:_odelzthrpq" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="text" name="q" class="field" /> <input type="submit" name="sa" value="GO!" class="button" /> </fieldset> </form> <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script> </div> </div> </div> <div class="main"> <div class="main-navigation"> <div class="round-border-topright"></div> <h1 class="first">Contents</h1> <dl class="nav3-grid"> <dt><a href="./">Introduction</a></dt> <dt><a href="docs.php">Documentation</a></dt> <dd><a href="gvapi.php">Visualization API</a></dd> <dt><a href="examples.php">Examples</a></dt> <dd><a href="choropleth.php">Choropleth map</a></dd> <dd><a href="prism.php">Prism map</a></dd> <dd><a href="symbolimage.php">Proportional symbol</a></dd> <dd><a href="piechart.php">Pie chart map</a></dd> <dt><a href="http://groups.google.com/group/thematic-mapping-api">Forum</a></dt> </dl> </div> <div class="main-content"> <h1 class="pagetitle">Thematic Mapping API Examples</h1> <div class="column1-unit"> <h1>Prism map</h1> <h3>Using Google Visualization API, Google Spreadsheets (<a href="http://spreadsheets.google.com/pub?key=rkXGB7b-USlIGpq824l824Q">view data</a>) and Google Earth API.</h3> </div> <div id='map_container' style='height: 600px; width: 640px;'> <div id='map' style='height: 100%;'></div> </div> <p>Statistics from <a href="http://data.un.org">UNdata</a></p> <pre>var data = response.getDataTable(); var map = new TME.Map.Kml.GoogleViz(); var options = { type: 'prism', title: 'Infant Mortality Rate', maxHeight: 2000000, colorType: 'scale', classification: 'equal', geometry: worldBorders }; var kml = map.draw(data, options); var kmlObject = earth.parseKml(kml); earth.getFeatures().appendChild(kmlObject); </pre> <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('http://spreadsheets.google.com/tq?key=rkXGB7b-USlIGpq824l824Q'); // 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: 'Infant Mortality Rate', 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(15); lookAt.setLongitude(20); lookAt.setRange(12000000); earth.getView().setAbstractView(lookAt); } } function failureCallback(object) { } </script> </div> </div> <div class="footer"> <p>Copyright &copy; 2009 Bjørn Sandvik | All Rights Reserved</p> <p class="credits">Based on design template by <a href="http://www.1-2-3-4.info" title="Designer Homepage">G. Wolfgang</a> | <a href="http://validator.w3.org/check?uri=referer" title="Validate XHTML code">W3C XHTML 1.0</a> | <a href="http://jigsaw.w3.org/css-validator/" title="Validate CSS code">W3C CSS 2.0</a> </p> </div> </div> <script type='text/javascript'> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type='text/javascript'> var pageTracker = _gat._getTracker("UA-1478729-4"); pageTracker._initData(); pageTracker._trackPageview(); </script> </body> </html>