<!DOCTYPE html>
<html>
<head>
<title>OpenLayers Example For Reading Features From Google Fusion Tables</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="../lib/OpenLayers.js"></script>
</head>
<body>
<h1 id="title">Reading Features From A Google Fusion Tables Table</h1>
<div id="tags">
protocol, script, fusion tables
</div>
<p id="shortdesc">
Demonstrates how, with a custom read method, the script protocol and GeoJSON format can be used to read features stored in a table on Google Fusion Tables.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>
Google Fusion Tables can be used to store features, and access them using SQL-type commands over HTTP. Tables can be made public, in which case no authorization is needed to read them. Geometries can be stored in Location columns in KML format. The default output is a CSV dump of each table row/column selected. Multi-line CSV files are not easy to parse in Javascript, but by adding a jsonCallback parameter to the HTTP command, the output will be a JSON object with the geometry as GeoJSON. With a custom read method, this example parses the geometry for each row, storing the other columns as feature attributes. You can of course add a 'where' clause to the SQL statement or change the column names to limit the data retrieved. Point geometries can also be stored in Latitude/Longitude columns, and the script could easily be modified to use those instead.
</p>
<p>
View the <a href="fusiontables.js" target="_blank">fusiontables.js</a>
source to see how this is done. <a href="https://www.google.com/fusiontables/DataSource?docid=1g5DrXcdotCiO_yffkdW0zhuJk0a1i80SPvERHI8">Table used</a>
</p>
</div>
<script src="fusiontables.js"></script>
</body>
</html>
