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 rel="stylesheet" href="http://geosprocket.com/assets/leaflet/L.GeoSearch-master/src/css/l.geosearch.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%;*/ position: absolute; top: 10px; bottom: 0px; background: black; z-index:1;}
      .leaflet-container .leaflet-control-zoom {margin-top:10;}
      div.cartodb-popup div.cartodb-popup-content {max-height:none | inherit}
    </style>
    <script type="infowindow/html" id="infowindow_template">
      <div class="cartodb-popup">
         <a href="#close" class="cartodb-popup-close-button close">x</a>
         <div class="cartodb-popup-content-wrapper">
           <div class="cartodb-popup-content">
             <!-- content.data contains the field info -->
             <h2>{{content.data.name}}</h2><h4 style="color:#222;">{{content.data.newstr}}</h4><hr>
             <em>Zoning: {{content.data.subdistric}}<br>
             Height: {{content.data.height}} meters</em><br>
             <hr>
             <a type="button" class="btn btn-info" href="http://www.burlingtonvt.gov/PropertyDetails.aspx?a=6998" target="_blank"><i class="icon-download icon-white"></i> Go to fact sheet</a>
           </div>
         </div>
         <div class="cartodb-popup-tip-container"></div>
      </div>
    </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-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="brand">Building Zoning: Burlington, VT</a>
          <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 in this view<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>
              <li><a id="downtopojson" href="#">TopoJSON</a></li>
            </ul>
          </li>
        </div>
      </div>
    </div>
  </body>
  <script>
    //Geocoder parameters

    function getURLParameter(name) {
       return decodeURI(
       (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search) || [, ])[1]);
    }

    var regionParameter = getURLParameter('region');
    var region = (regionParameter === 'undefined') ? '' : regionParameter;

      //Wrap the map action
    var map;

    function init() {
    // initiate leaflet map
    map = new L.Map('map', {
      center: [44.4795, -73.2070],
      zoom: 16,
      minZoom: 12,
      maxZoom: 18
    });

    //Geocoder controls
       new L.Control.GeoSearch({
           provider: new L.GeoSearch.Provider.Google({
               region: region
           })
       }).addTo(map);

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

    //Define a reference overlay to place on top of the buildings:
    var reference = L.tileLayer('http://a.tiles.mapbox.com/v3/landplanner.map-50ghoxbt/{z}/{x}/{y}.png');

    //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_041513f/viz.json';
    var layerOptions = {
      query: "SELECT * FROM {{table_name}} order by st_ymax(the_geom) desc",
      tile_style: "Map{buffer-size:512;}#{{table_name}}{[zoom<=16]{line-color: #FFF;line-opacity: 0.5;line-width: 0.3;polygon-opacity: 0.8;[type='Enterprise']{polygon-fill:#f6e03f;}[type='Institutional']{polygon-fill:#adbd06;}[type='Mixed Use']{polygon-fill:#cfc8a2;}[type='RCO']{polygon-fill:#f6f7bd;}[type='Residential']{polygon-fill:#895793;}[type='Urban Reserve']{polygon-fill:#de3f33;}}[zoom>16]{building-height:[height]*1.5;building-fill-opacity:0.8;text-name:[name];text-face-name:'DejaVu Serif Bold';text-size: 10;text-wrap-width:12;text-fill:#222;text-allow-overlap:true;text-halo-fill:rgba(255,255,255,0.7);text-halo-radius:1;text-dy:-10;[type='Enterprise']{building-fill:#f6e03f;}[type='Institutional']{building-fill:#adbd06;}[type='Mixed Use']{building-fill:#cfc8a2;}[type='RCO']{building-fill:#f6f7bd;}[type='Residential']{building-fill:#895793;}[type='Urban Reserve']{building-fill:#de3f33;}}}"
       }
    //Tack the layer on top of the base tiles
    cartodb.createLayer(map, layerUrl, layerOptions)
      .on('done', function (layer) {
      map.addLayer(layer);
      map.addLayer(reference);
      layer.infowindow.set('template', $('#infowindow_template').html());

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

    //Remove the reference overlay if the buildings are 3D (when zoom goes past 15)
    map.on('moveend', function () {
          if (map.getZoom() > 16 && map.hasLayer(reference)) {
              map.removeLayer(reference);
          }
          if (map.getZoom() <= 16 && map.hasLayer(reference) == false) {
              map.addLayer(reference);
          }
      });

    var hash = new L.Hash(map);

    //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_041513f%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%20DESC%20LIMIT%202000&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_041513f%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%20DESC%20LIMIT%202000&format=shp";

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

    //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_041513f%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%20DESC%20LIMIT%202000&format=geojson";

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

      //AND TOPOJSON FORMAT (FOR THE EDGY DATAVIZ TYPES)
    $('#downtopojson').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_041513f%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%20DESC%20LIMIT%202000&format=topojson";

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

    }
  </script>
  <!--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://geosprocket.com/assets/leaflet/leaflet-hash.js"></script>
  <script src="http://geosprocket.com/assets/leaflet/L.GeoSearch-master/src/js/l.control3.geosearch.js"></script>
  <script src="http://geosprocket.com/assets/leaflet/L.GeoSearch-master/src/js/l.geosearch.provider.google.js"></script>
</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 rel="stylesheet" href="http://geosprocket.com/assets/leaflet/L.GeoSearch-master/src/css/l.geosearch.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%;/ position: absolute; top: 10px; bottom: 0px; background: black; z-index:1;}
	.leaflet-container .leaflet-control-zoom {margin-top:10;}
	div.cartodb-popup div.cartodb-popup-content {max-height:none \| inherit}
	</style>
	<script type="infowindow/html" id="infowindow_template">
	<div class="cartodb-popup">
	<a href="#close" class="cartodb-popup-close-button close">x</a>
	<div class="cartodb-popup-content-wrapper">
	<div class="cartodb-popup-content">
	<!-- content.data contains the field info -->
	<h2>{{content.data.name}}</h2><h4 style="color:#222;">{{content.data.newstr}}</h4><hr>
	<em>Zoning: {{content.data.subdistric}}<br>
	Height: {{content.data.height}} meters</em><br>
	<hr>
	<a type="button" class="btn btn-info" href="http://www.burlingtonvt.gov/PropertyDetails.aspx?a=6998" target="_blank"><i class="icon-download icon-white"></i> Go to fact sheet</a>
	</div>
	</div>
	<div class="cartodb-popup-tip-container"></div>
	</div>
	</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-inverse navbar-fixed-top">
	<div class="navbar-inner">
	<div class="container">
	<a class="brand">Building Zoning: Burlington, VT</a>
	<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 in this view<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>
	<li><a id="downtopojson" href="#">TopoJSON</a></li>
	</ul>
	</li>
	</div>
	</div>
	</div>
	</body>
	<script>
	//Geocoder parameters

	function getURLParameter(name) {
	return decodeURI(
	(RegExp(name + '=' + '(.+?)(&\|$)').exec(location.search) \|\| [, ])[1]);
	}

	var regionParameter = getURLParameter('region');
	var region = (regionParameter === 'undefined') ? '' : regionParameter;

	//Wrap the map action
	var map;

	function init() {
	// initiate leaflet map
	map = new L.Map('map', {
	center: [44.4795, -73.2070],
	zoom: 16,
	minZoom: 12,
	maxZoom: 18
	});

	//Geocoder controls
	new L.Control.GeoSearch({
	provider: new L.GeoSearch.Provider.Google({
	region: region
	})
	}).addTo(map);

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

	//Define a reference overlay to place on top of the buildings:
	var reference = L.tileLayer('http://a.tiles.mapbox.com/v3/landplanner.map-50ghoxbt/{z}/{x}/{y}.png');

	//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_041513f/viz.json';
	var layerOptions = {
	query: "SELECT * FROM {{table_name}} order by st_ymax(the_geom) desc",
	tile_style: "Map{buffer-size:512;}#{{table_name}}{[zoom<=16]{line-color: #FFF;line-opacity: 0.5;line-width: 0.3;polygon-opacity: 0.8;[type='Enterprise']{polygon-fill:#f6e03f;}[type='Institutional']{polygon-fill:#adbd06;}[type='Mixed Use']{polygon-fill:#cfc8a2;}[type='RCO']{polygon-fill:#f6f7bd;}[type='Residential']{polygon-fill:#895793;}[type='Urban Reserve']{polygon-fill:#de3f33;}}[zoom>16]{building-height:[height]*1.5;building-fill-opacity:0.8;text-name:[name];text-face-name:'DejaVu Serif Bold';text-size: 10;text-wrap-width:12;text-fill:#222;text-allow-overlap:true;text-halo-fill:rgba(255,255,255,0.7);text-halo-radius:1;text-dy:-10;[type='Enterprise']{building-fill:#f6e03f;}[type='Institutional']{building-fill:#adbd06;}[type='Mixed Use']{building-fill:#cfc8a2;}[type='RCO']{building-fill:#f6f7bd;}[type='Residential']{building-fill:#895793;}[type='Urban Reserve']{building-fill:#de3f33;}}}"
	}
	//Tack the layer on top of the base tiles
	cartodb.createLayer(map, layerUrl, layerOptions)
	.on('done', function (layer) {
	map.addLayer(layer);
	map.addLayer(reference);
	layer.infowindow.set('template', $('#infowindow_template').html());

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

	//Remove the reference overlay if the buildings are 3D (when zoom goes past 15)
	map.on('moveend', function () {
	if (map.getZoom() > 16 && map.hasLayer(reference)) {
	map.removeLayer(reference);
	}
	if (map.getZoom() <= 16 && map.hasLayer(reference) == false) {
	map.addLayer(reference);
	}
	});

	var hash = new L.Hash(map);

	//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_041513f%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%20DESC%20LIMIT%202000&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_041513f%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%20DESC%20LIMIT%202000&format=shp";

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

	//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_041513f%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%20DESC%20LIMIT%202000&format=geojson";

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

	//AND TOPOJSON FORMAT (FOR THE EDGY DATAVIZ TYPES)
	$('#downtopojson').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_041513f%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%20DESC%20LIMIT%202000&format=topojson";

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

	}
	</script>
	<!--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://geosprocket.com/assets/leaflet/leaflet-hash.js"></script>
	<script src="http://geosprocket.com/assets/leaflet/L.GeoSearch-master/src/js/l.control3.geosearch.js"></script>
	<script src="http://geosprocket.com/assets/leaflet/L.GeoSearch-master/src/js/l.geosearch.provider.google.js"></script>
	</html>