diff --git a/examples/fusiontables.html b/examples/fusiontables.html new file mode 100644 index 0000000000..8c75d6c1a3 --- /dev/null +++ b/examples/fusiontables.html @@ -0,0 +1,32 @@ + + + + OpenLayers Example For Reading Features From Google Fusion Tables + + + + + + + + +

Reading Features From A Google Fusion Tables Table

+
+ protocol, script, fusion tables +
+

+ 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. +

+
+
+

+ 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. +

+

+ View the fusiontables.js + source to see how this is done. Table used +

+
+ + + diff --git a/examples/fusiontables.js b/examples/fusiontables.js new file mode 100644 index 0000000000..0c9ed71764 --- /dev/null +++ b/examples/fusiontables.js @@ -0,0 +1,46 @@ +var map = new OpenLayers.Map({ + div: "map", + layers: [ + new OpenLayers.Layer.OSM(), + new OpenLayers.Layer.Vector("Vectors", { + 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"}, + 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]; + feature = new OpenLayers.Feature.Vector(); + atts = {}; + for (var j = 1; j < row.length; j++) { + // 'location's are json objects, other types are strings + if (typeof row[j] === "object") { + feature.geometry = this.parseGeometry(row[j]); + } else { + atts[cols[j]] = row[j]; + } + } + feature.attributes = atts; + // if no geometry, not much point in continuing with this row + if (feature.geometry) { + features.push(feature); + } + } + return features; + } + }), + callbackKey: "jsonCallback" + }), + eventListeners: { + "featuresadded": function () { + this.map.zoomToExtent(this.getDataExtent()); + } + } + }) + ] +});