wboykinm/index.html

## index.html
<!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" />
  <!--<link href="http://geosprocket.com/assets/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">-->
   <!--[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()">

  <div id='map'></div>
  <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

          </button>
          <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 Buildings (KML) <b class="caret"></b></small></a>
                        <ul class="dropdown-menu">
                          <li class="disabled"><a>Select within the current map extent:</a></li>
                          <li class="divider"></li>
                          <li><a id="down10" href="#" target="_blank">10 Tallest</a></li>
                          <li><a id="down50" href="#">50 Tallest</a></li>
                          <li><a id="down100" href="#">100 Tallest</a></li>
                        </ul>
                </li>
            </ul>
          </div>
        </div>
      </div>
    </div>


</body>
<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>

## layers.js
  var map;
  	  function init(){
    // initiate leaflet map
    map = new L.Map('map', {
      center: [44.47960548767, -73.215293884277],
      zoom: 13
    });

   L.tileLayer('http://a.tiles.mapbox.com/v3/landplanner.map-b31zy3ud/{z}/{x}/{y}.png').addTo(map);

    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;}"
    }

    cartodb.createLayer(map, layerUrl, layerOptions)
      .on('done', function(layer) {
        map.addLayer(layer);

      }).on('error', function() {
        //log the error
      });

                  //packages a CSV of the highest-scoring 10,50 and 100 records within the current viewport
            $('#down10').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%2010%3B&format=kml";

                $(this).attr("href", new_sql);
            });

            $('#down50').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%2050%3B&format=kml";

                $(this).attr("href", new_sql);
            });

            $('#bounds100').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%20100%3B&format=kml";

                $(this).attr("href", new_sql);
            });

        }
	<!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" />
	<!--<link href="http://geosprocket.com/assets/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">-->
	<!--[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()">

	<div id='map'></div>
	<div class="navbar navbar-fixed-top">
	<div class="navbar-inner">
	<div class="container">
	<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

	</button>
	<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 Buildings (KML) <b class="caret"></b></small></a>
	<ul class="dropdown-menu">
	<li class="disabled"><a>Select within the current map extent:</a></li>
	<li class="divider"></li>
	<li><a id="down10" href="#" target="_blank">10 Tallest</a></li>
	<li><a id="down50" href="#">50 Tallest</a></li>
	<li><a id="down100" href="#">100 Tallest</a></li>
	</ul>
	</li>
	</ul>
	</div>
	</div>
	</div>
	</div>


	</body>
	<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>
	var map;
	function init(){
	// initiate leaflet map
	map = new L.Map('map', {
	center: [44.47960548767, -73.215293884277],
	zoom: 13
	});

	L.tileLayer('http://a.tiles.mapbox.com/v3/landplanner.map-b31zy3ud/{z}/{x}/{y}.png').addTo(map);

	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;}"
	}

	cartodb.createLayer(map, layerUrl, layerOptions)
	.on('done', function(layer) {
	map.addLayer(layer);

	}).on('error', function() {
	//log the error
	});

	//packages a CSV of the highest-scoring 10,50 and 100 records within the current viewport
	$('#down10').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%2010%3B&format=kml";

	$(this).attr("href", new_sql);
	});

	$('#down50').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%2050%3B&format=kml";

	$(this).attr("href", new_sql);
	});

	$('#bounds100').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%20100%3B&format=kml";

	$(this).attr("href", new_sql);
	});

	}