block by wboykinm 5351491

Buildings. Several Flavors.

Full Screen

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.

index.html

<!DOCTYPE HTML>
<html>
<head>
  <link rel="stylesheet" href="//geosprocket.com/assets/cartodb/2.0.24/cartodb.css" />
  <link rel="stylesheet" href="//geosprocket.com/assets/bootstrap/css/bootstrap-cosmo.css" />
   <!--[if lte IE 8]>
        <link rel="stylesheet"//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="//geosprocket.com/assets/cartodb/2.0.24/cartodb.js"></script>
<script src="//geosprocket.com/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

</html>

layers.js

//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);
            });

        }