ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update Fusion Tables example for latest API version

Browse Source
This commit is contained in:
Peter Robins
2012-10-31 10:18:50 +00:00
parent 7f2ce74dd7
commit 8d36a1d7f7
2 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
examples/fusiontables.html
View File

@@ -20,11 +20,14 @@
<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.
Google Fusion Tables can be used to store features, and access them using SQL-type commands over HTTP. Tables are accessed using an authorization key; create/update/delete of tables requires an OAuth2 token, but tables can be public, in which case a simple apikey is all that's needed to read them. Geometries can be stored in Location columns in KML format, but the default output is 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>
source to see how this is done. You will need to get your own apikey from <a href="https://code.google.com/apis/console">Google's API Console</a> for this to function on your domain.
</p>
<p>
<a href="https://www.google.com/fusiontables/DataSource?docid=1g5DrXcdotCiO_yffkdW0zhuJk0a1i80SPvERHI8">Table used</a>. <a href="https://developers.google.com/fusiontables/docs/v1/using">Fusion Tables Developers Guide</a>
</p>
</div>
<script src="fusiontables.js"></script>

21
examples/fusiontables.js
View File

@@ -1,3 +1,6 @@
// change this to your api key
var apikey = "AIzaSyD_1zzMAoZjuP-m4LyhieuYmqiVJTEajyI";
var map = new OpenLayers.Map({
div: "map",
layers: [
@@ -6,21 +9,24 @@ var map = new OpenLayers.Map({
projection: new OpenLayers.Projection("EPSG:4326"),
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.Script({
url: "https://www.google.com/fusiontables/api/query",
params: {sql: "select * from 1g5DrXcdotCiO_yffkdW0zhuJk0a1i80SPvERHI8"},
url: "https://www.googleapis.com/fusiontables/v1/query",
params: {
sql: "select * from 1g5DrXcdotCiO_yffkdW0zhuJk0a1i80SPvERHI8",
key: apikey
},
format: new OpenLayers.Format.GeoJSON({
ignoreExtraDims: true,
read: function(json) {
var row, feature, atts = {}, features = [];
var cols = json.table.cols; // column names
for (var i = 0; i < json.table.rows.length; i++) {
row = json.table.rows[i];
var cols = json.columns; // column names
for (var i = 0; i < json.rows.length; i++) {
row = json.rows[i];
feature = new OpenLayers.Feature.Vector();
atts = {};
for (var j = 0; j < row.length; j++) {
// 'location's are json objects, other types are strings
if (typeof row[j] === "object") {
feature.geometry = this.parseGeometry(row[j]);
feature.geometry = this.parseGeometry(row[j].geometry);
} else {
atts[cols[j]] = row[j];
}
@@ -33,8 +39,7 @@ var map = new OpenLayers.Map({
}
return features;
}
}),
callbackKey: "jsonCallback"
})
}),
eventListeners: {
"featuresadded": function () {