1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
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>
|
