Create a gist now

Instantly share code, notes, and snippets.

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