Created
August 19, 2010 03:46
-
-
Save max-mapper/536970 to your computer and use it in GitHub Desktop.
loads geocouch datasets and visualizes them on an openlayers map. see it in action at http://pdxapi.com/preview.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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&v=2&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