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

examples/cartodb-geojson.html: kill long lines, use local OpenLayers.js

Browse Source
This commit is contained in:
Frederic Junod
2012-05-07 13:06:14 +02:00
parent 81ee9524c7
commit 6e34b048ff
1 changed files with 42 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/cartodb-geojson.html
+42 -29
View File
@@ -1,33 +1,45 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Reading Features From CartoDB using GeoJSON</title> <title>Reading Features From CartoDB using GeoJSON</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <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="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="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="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"> <meta name="apple-mobile-web-app-capable" content="yes">
<script src="http://openlayers.org/dev/OpenLayers.js"></script> <script src="../lib/OpenLayers.js"></script>
</head> </head>
<body> <body>
<h1 id="title">Reading Features From CartoDB using GeoJSON</h1> <h1 id="title">Reading Features From CartoDB using GeoJSON</h1>
<div id="tags"> <div id="tags">
protocol, script, cartodb protocol, script, cartodb
</div> </div>
<p id="shortdesc"> <p id="shortdesc">
Demonstrates how to load features on OpenLayers using CartoDB SQL API. Demonstrates how to load features on OpenLayers using CartoDB SQL API.
</p> </p>
<div id="map" class="smallmap"></div> <div id="map" class="smallmap"></div>
<div id="docs"> <div id="docs">
<p> <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. <a href="http://cartodb.com/">CartoDB</a> is an Open Source
</p> Geopatial Database on the cloud. It allows you to import your
<p> data in shapefiles, KML, OpenStreeMap files, CSV, etc. and
View the then analyze and visualize it. Internally CartoDB uses PostGIS
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> 2.0 so all functionality in PostGIS can be used straight
</p> away. CartoDB exposes two APIS. One
</div> to <a href="http://developers.cartodb.com/documentation/cartodb-apis.html#maps_api">generate maps</a>
<script> 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({ var map = new OpenLayers.Map({
div: "map", div: "map",
layers: [ layers: [
@@ -37,22 +49,23 @@
strategies: [new OpenLayers.Strategy.Fixed()], strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.Script({ protocol: new OpenLayers.Protocol.Script({
url: "http://examples.cartodb.com/api/v2/sql", url: "http://examples.cartodb.com/api/v2/sql",
params: {q: "select * from costa_rica_pa LIMIT 50",format:"geojson"}, params: {
q: "select * from costa_rica_pa LIMIT 50",
format: "geojson"
},
format: new OpenLayers.Format.GeoJSON({ format: new OpenLayers.Format.GeoJSON({
ignoreExtraDims: true ignoreExtraDims: true
}), }),
callbackKey: "callback" callbackKey: "callback"
}), }),
eventListeners: { eventListeners: {
"featuresadded": function () { "featuresadded": function() {
this.map.zoomToExtent(this.getDataExtent()); this.map.zoomToExtent(this.getDataExtent());
} }
} }
}) })
] ]
}); });
</script>
</body>
</script> </html>
</body>
</html>