A demo of a minimalist "geoportal", tapping the CartoDB data API. This sucker is for one purpose: to deliver building footprints to a user who wants them. Shapefile, KML or GeoJSON. Fast and fluffy, in pure javascript.
Data generously provided by the city of Burlington to the Public Domain, but if you use it toss 'em some props; they do great work.
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <link rel="stylesheet" href="http://geosprocket.com/assets/cartodb/2.0.24/cartodb.css" /> | |
| <link rel="stylesheet" href="http://geosprocket.com/assets/bootstrap/css/bootstrap-cosmo.css" /> | |
| <!--[if lte IE 8]> | |
| <link rel="stylesheet"http://geosprocket.com/assets/cartodb/2.0.24/cartodb.ie.css" /> | |
| <![endif]--> | |
| <style> | |
| html, body {width:100%; height:100%; padding: 0; margin: 0;} | |
| #map {width: 100%; height:100%; background: black; z-index:1;} | |
| .leaflet-container .leaflet-control-zoom {margin-top:55;} | |
| div.cartodb-popup div.cartodb-popup-content {max-height:none | inherit} | |
| </style> | |
| <script src="layers.js"></script> | |
| </head> | |
| <body onload="init()"> | |
| <!--Add the map element--> | |
| <div id='map'></div> | |
| <!--Some bootstrap nav boilerplate to make things simple and appealing--> | |
| <div class="navbar navbar-fixed-top"> | |
| <div class="navbar-inner"> | |
| <div class="container"> | |
| <a class="brand" href="../">CartoDB Data Portal Demo</a> | |
| <div class="nav-collapse collapse"> | |
| <ul class="nav pull-right"> | |
| <li class="dropdown"> | |
| <a href="#" class="dropdown-toggle" data-toggle="dropdown"><small><i class="icon-download icon-white"></i> Download the buildings you see<b class="caret"></b></small></a> | |
| <ul class="dropdown-menu"> | |
| <li><a id="downkml" href="#" target="_blank">KML</a></li> | |
| <li><a id="downshp" href="#">Shapefile</a></li> | |
| <li><a id="downgeojson" href="#">GeoJSON</a></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| <!--libraries kept to a minimum. Bootstrap could be used a la carte here, but I'm being lazy--> | |
| <script src="http://geosprocket.com/assets/cartodb/2.0.24/cartodb.js"></script> | |
| <script src="http://geosprocket.com/assets/bootstrap/js/bootstrap.min.js"></script> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> | |
| </html> |
| //Wrap the map action | |
| var map; | |
| function init(){ | |
| // initiate leaflet map | |
| map = new L.Map('map', { | |
| center: [44.47960548767, -73.215293884277], | |
| zoom: 15 | |
| }); | |
| //Call some attractive Mapbox tiles as a base | |
| L.tileLayer('http://a.tiles.mapbox.com/v3/landplanner.map-b31zy3ud/{z}/{x}/{y}.png', { | |
| attribution:'<a href="http://mapbox.com/about/maps/" target="_blank">w/ Mapbox</a>' | |
| }).addTo(map); | |
| //Give CartoDB the parameters of your table by viz.json - | |
| //throw in some CartoCSS at "tile_style" to tie the rendered building height to a data field | |
| var layerUrl = 'http://geosprocket.cartodb.com/api/v1/viz/btv_prints_011813/viz.json'; | |
| var layerOptions = { | |
| query: "SELECT * FROM {{table_name}};", | |
| tile_style: "Map{buffer-size:512;}#{{table_name}}{building-height:[height]*0.4;building-fill:orange;building-fill-opacity:0.5;}" | |
| } | |
| //Tack the layer on top of the base tiles | |
| cartodb.createLayer(map, layerUrl, layerOptions) | |
| .on('done', function(layer) { | |
| map.addLayer(layer); | |
| }).on('error', function() { | |
| //log the error | |
| }); | |
| //Some jquery packages up to 500 buildings within the current viewport, in | |
| //KML FORMAT, | |
| $('#downkml').click(function() { | |
| var nwlat = map.getBounds().getNorthWest().lat, | |
| nwlon = map.getBounds().getNorthWest().lng, | |
| selat = map.getBounds().getSouthEast().lat, | |
| selon = map.getBounds().getSouthEast().lng; | |
| var new_sql = "http://geosprocket.cartodb.com/api/v2/sql?q=SELECT%20*%20FROM%20btv_prints_011813%20WHERE%20the_geom%20%26%26%20ST_SetSRID(ST_MakeBox2D(ST_Point(" + nwlon + "%2C%20" + nwlat + ")%2C%20ST_Point(" + selon + "%2C%20" + selat + "))%2C4326)%20ORDER%20BY%20height_real%20DESC%20LIMIT%20500&format=kml"; | |
| $(this).attr("href", new_sql); | |
| }); | |
| //SHAPEFILE FORMAT, | |
| $('#downshp').click(function() { | |
| var nwlat = map.getBounds().getNorthWest().lat, | |
| nwlon = map.getBounds().getNorthWest().lng, | |
| selat = map.getBounds().getSouthEast().lat, | |
| selon = map.getBounds().getSouthEast().lng; | |
| var new_sql = "http://geosprocket.cartodb.com/api/v2/sql?q=SELECT%20*%20FROM%20btv_prints_011813%20WHERE%20the_geom%20%26%26%20ST_SetSRID(ST_MakeBox2D(ST_Point(" + nwlon + "%2C%20" + nwlat + ")%2C%20ST_Point(" + selon + "%2C%20" + selat + "))%2C4326)%20ORDER%20BY%20height_real%20DESC%20LIMIT%20500&format=shp"; | |
| $(this).attr("href", new_sql); | |
| }); | |
| //AND GEOJSON FORMAT | |
| $('#downgeojson').click(function() { | |
| var nwlat = map.getBounds().getNorthWest().lat, | |
| nwlon = map.getBounds().getNorthWest().lng, | |
| selat = map.getBounds().getSouthEast().lat, | |
| selon = map.getBounds().getSouthEast().lng; | |
| var new_sql = "http://geosprocket.cartodb.com/api/v2/sql?q=SELECT%20*%20FROM%20btv_prints_011813%20WHERE%20the_geom%20%26%26%20ST_SetSRID(ST_MakeBox2D(ST_Point(" + nwlon + "%2C%20" + nwlat + ")%2C%20ST_Point(" + selon + "%2C%20" + selat + "))%2C4326)%20ORDER%20BY%20height_real%20DESC%20LIMIT%20500&format=geojson"; | |
| $(this).attr("href", new_sql); | |
| }); | |
| } |