1 files changed, 71 insertions, 0 deletions
diff --git a/misc/openlayers/examples/cartodb-geojson.html b/misc/openlayers/examples/cartodb-geojson.html
new file mode 100644
index 0000000..2d78970
--- /dev/null
+++ b/misc/openlayers/examples/cartodb-geojson.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Reading Features From CartoDB using GeoJSON</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 CartoDB using GeoJSON</h1>
+    <div id="tags">
+      protocol, script, cartodb
+    </div>
+    <p id="shortdesc">
+      Demonstrates how to load features on OpenLayers using CartoDB SQL API.
+    </p>
+    <div id="map" class="smallmap"></div>
+    <div id="docs">
+      <p>
+        <a href="http://cartodb.com/">CartoDB</a> is an Open Source
+        Geopatial Database on the cloud. It allows you to import your
+        data in shapefiles, KML, OpenStreeMap files, CSV, etc. and
+        then analyze and visualize it. Internally CartoDB uses PostGIS
+        2.0 so all functionality in PostGIS can be used straight
+        away. CartoDB exposes two APIS. One
+        to <a href="http://developers.cartodb.com/documentation/cartodb-apis.html#maps_api">generate maps</a> 
+	as tiles with interactivity, and another <a href="http://developers.cartodb.com/documentation/cartodb-apis.html#sql_api">SQL API</a> 
+	to retrieve vector data using among other formats, GeoJSON. In
+        this example we do a very simple query to obtain all protected
+        areas in Costa Rica from a public table. You can adapt the SQL
+        to include where clauses or complicate geospatial queries.
+      </p>
+      <p>
+        View the source code of this page to see how this is done. And
+        check the table on CartoDB
+        for <a href="https://examples.cartodb.com/tables/costa_rica_pa/public#/map">Protected Areas in Costa Rica</a>
+      </p>
+    </div>
+    <script>
+        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: "http://examples.cartodb.com/api/v2/sql",
+                        params: {
+			    q: "select * from costa_rica_pa LIMIT 50",
+			    format: "geojson"
+			},
+                        format: new OpenLayers.Format.GeoJSON({
+                            ignoreExtraDims: true
+                        }),
+                        callbackKey: "callback"
+                    }),
+                    eventListeners: {
+                        "featuresadded": function() {
+                            this.map.zoomToExtent(this.getDataExtent());
+                        }
+                    }
+                })
+            ]
+        });
+    </script>
+  </body>
+</html>