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

71
examples/cartodb-geojson.html
View File

@@ -1,33 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<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>
<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: [
@@ -37,22 +49,23 @@
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"},
params: {
q: "select * from costa_rica_pa LIMIT 50",
format: "geojson"
},
format: new OpenLayers.Format.GeoJSON({
ignoreExtraDims: true
}),
callbackKey: "callback"
}),
eventListeners: {
"featuresadded": function () {
"featuresadded": function() {
this.map.zoomToExtent(this.getDataExtent());
}
}
})
]
});
</script>
</body>
</html>
</script>
</body>
</html>