Added example to retrieve and display data from CartoDB using the SQL…

… API
kochizufan · May 7, 2012 · 81ee952 · 81ee952
1 parent e060b2e
commit 81ee952
Showing 1 changed file with 58 additions and 0 deletions.
diff --git a/examples/cartodb-geojson.html b/examples/cartodb-geojson.html
@@ -0,0 +1,58 @@
+<!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="http://openlayers.org/dev/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>