Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
loads geocouch datasets and visualizes them on an openlayers map. see it in action at http://pdxapi.com/preview.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css" />
<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAUXDSXET8IRGdgHP9FpGw5BT-fVzUWGS_eJ2ZLPBO_6yPqTi0vhQKAzahOrduDq0xQk09GR-UP3Jgcg'></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="http://www.google.com/jsapi?key=ABQIAAAAUXDSXET8IRGdgHP9FpGw5BT-fVzUWGS_eJ2ZLPBO_6yPqTi0vhQKAzahOrduDq0xQk09GR-UP3Jgcg"></script>
<script type="text/javascript">
google.load("jquery", '1.4');
google.load("maps", "2.x");
</script>
<link rel="stylesheet" href="http://jashkenas.github.com/docco/resources/docco.css">
<style type="text/css">
#map { float:left; width:75%; height:100%; }
#message { position:absolute; padding:10px; background:#555; color:#fff; width:75px; }
#list { float:left; width:200px; background:#eee; list-style:none; padding:0; }
#list li { padding:10px; }
#list li:hover { background:#555; color:#fff; cursor:pointer; cursor:hand; }
#OpenLayers.Control.PanZoom_5_zoomworld {display:none;}
#menu {width: 25%; height: 100%; float: right; overflow: auto;}
#databases { list-style-type: none;}
#databases li:hover { font-weight: bold; cursor: pointer; cursor: hand;}
#loader {
position: absolute;
display: none;
z-index: 666;
}
.selected {font-weight: bold;}
h1 { margin: 40px 35px 15px;}
</style>
<script type="text/javascript">
var GeoJSONHelper = function() {
return {
// map borrowed from http://github.com/janl/mustache.js/blob/master/mustache.js
map : function(array, fn) {
if (typeof array.map == "function") {
return array.map(fn);
} else {
var r = [];
var l = array.length;
for(var i = 0; i < l; i++) {
r.push(fn(array[i]));
}
return r;
}
},
collect_geometries : function(geometries) {
if (geometries.type == 'GeometryCollection')
return geometries;
return [{"type" : "GeometryCollection", "geometries" : geometries }]
},
collect_features : function(features){
if (features.type == 'FeatureCollection')
return features;
return { "type" : "FeatureCollection", "features" : GeoJSONHelper.map(features, function(feature){return {"geometry" : feature};})}
},
feature_collection_for : function(geojson) {
return this.collect_features(this.collect_geometries(geojson));
}
};
}();
var Map = function() {
return {
currentDataset: "",
lon: -122.442429131298411,
lat: 45.546590674495434,
zoom: 17,
fetchFeatures: function() {
Indicator.show();
$.ajax({
url: "http://maxogden.couchone.com/" + Map.currentDataset + "/_design/geojson/_spatial/points",
dataType: 'jsonp',
data: {
"bbox": Map.container.getExtent().transform( proj900913, proj4326 ).toBBOX()
},
success: function(data){
var geometries = GeoJSONHelper.map(data.rows, function(row){return row.value.geometry});
Indicator.hide();
Map.drawFeature(Map.geojson_format.read(GeoJSONHelper.feature_collection_for(geometries)));
}
})
},
drawFeature: function(feature) {
feature[0].geometry.transform(proj4326, proj900913);
Map.vector_layer.destroyFeatures();
Map.vector_layer.addFeatures(feature);
}
}
}();
var Indicator = {
show: function(text) {
var top = $('#map').height() / 2 - 50;
var left = $('#map').width() / 2 - 50;
$('#loader').show().css({'top': top, 'left': left});
},
hide: function() {
$('#loader').hide();
}
}
var showing_layers = [];
$(function() {
$.ajax({
url: "http://maxogden.couchone.com/_all_dbs",
dataType: 'jsonp',
success: function(databases){
var dbList = $('#databases');
$.each(databases.sort(), function(index, database){
if (database !== "_users") {
dbList.append('<li>' + database + '</li>');
}
$('#databases li:first').click();
});
}
});
proj900913 = new OpenLayers.Projection("EPSG:900913"); //Spherical mercator used for google maps
proj4326 = new OpenLayers.Projection("EPSG:4326");
var pdxLL = new OpenLayers.LonLat(-122.69256591796875,45.4947963896697);
var pdxUR = new OpenLayers.LonLat(-122.552490234375,45.58136746810096);
pdxLL.transform( proj4326, proj900913 );
pdxUR.transform( proj4326, proj900913 );
Map.options = {
maxExtent: new OpenLayers.Bounds(pdxLL.lon,pdxLL.lat, pdxUR.lon,pdxUR.lat),
restrictedExtent: new OpenLayers.Bounds(pdxLL.lon,pdxLL.lat, pdxUR.lon,pdxUR.lat),
numZoomLevels: 20,
maxResolution: 156543.0339,
projection: proj900913,
displayProjection: proj4326,
tileSize: new OpenLayers.Size(256, 256)
};
Map.container = new OpenLayers.Map('map', Map.options);
Map.gmap = new OpenLayers.Layer.Google("Google Streets", {"sphericalMercator": true ,numZoomLevels: 20});
Map.container.addLayer(Map.gmap);
Map.styleMap = new OpenLayers.StyleMap(OpenLayers.Util.applyDefaults(
{fillOpacity: 0.2, strokeColor: "black", strokeWidth: 3},
OpenLayers.Feature.Vector.style["default"]));
Map.vector_layer = new OpenLayers.Layer.Vector("GeoJSON", {
projection: proj4326,
styleMap: Map.styleMap
});
Map.geojson_format = new OpenLayers.Format.GeoJSON();
Map.container.addLayer(Map.vector_layer);
Map.container.setCenter(new OpenLayers.LonLat(-122.6762071,45.5234515), Map.zoom);
Map.container.events.register( 'moveend', this, function(){ Map.fetchFeatures() });
$('#databases li').live('click', function(){
var dataset = $(this).text();
$('.selected').removeClass('selected');
$(this).addClass('selected');
Map.currentDataset = dataset;
Map.fetchFeatures();
});
});
</script>
</head>
<body>
<div id="loader"><img src='http://imgur.com/yQjd8.gif'></div>
<div id="map" class="smallmap"></div>
<div id ="menu"><div style='padding: 5px;' id='notice'><span style="font-size: 12px; font-style: italic">Loading may take a moment or two if you are the first person to ever request a visualization of a particular dataset.</span></div><h1>Datasets</h1><ul id="databases"></ul></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.