GeoPortal Template

<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" href="https://geosprocket.com/assets/cartodb/2.0.24/cartodb.css" />
    <link rel="stylesheet" href="https://geosprocket.com/assets/bootstrap/css/bootstrap-cosmo.css" />
    <link rel="stylesheet" href="https://geosprocket.com/assets/leaflet/L.GeoSearch-master/src/css/l.geosearch.css" />
      
    <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">
             
             <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="https://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()">
    
    <div id='map'></div>
    
    <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('https://a.tiles.mapbox.com/v3/landplanner.map-b31zy3ud/{z}/{x}/{y}.png', {
      attribution: '<a href="https://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('https://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 = 'https://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 = "https://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 = "https://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 = "https://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 = "https://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>
  
  <script src="https://geosprocket.com/assets/cartodb/2.0.24/cartodb.js"></script>
  <script src="https://geosprocket.com/assets/bootstrap/js/bootstrap.min.js"></script>
  <script src="https://geosprocket.com/assets/leaflet/leaflet-hash.js"></script>
  <script src="https://geosprocket.com/assets/leaflet/l.geosearch-master/src/js/l.control3.geosearch.js"></script>
  <script src="https://geosprocket.com/assets/leaflet/l.geosearch-master/src/js/l.geosearch.provider.google.js"></script>
</html>

Modified http://geosprocket.com/assets/cartodb/2.0.24/cartodb.js to a secure url

Modified http://geosprocket.com/assets/bootstrap/js/bootstrap.min.js to a secure url

Modified http://geosprocket.com/assets/leaflet/leaflet-hash.js to a secure url

Modified http://geosprocket.com/assets/leaflet/L.GeoSearch-master/src/js/l.control3.geosearch.js to a secure url

Modified http://geosprocket.com/assets/leaflet/L.GeoSearch-master/src/js/l.geosearch.provider.google.js to a secure url

https://geosprocket.com/assets/cartodb/2.0.24/cartodb.js

https://geosprocket.com/assets/bootstrap/js/bootstrap.min.js

https://geosprocket.com/assets/leaflet/leaflet-hash.js

https://geosprocket.com/assets/leaflet/L.GeoSearch-master/src/js/l.control3.geosearch.js

https://geosprocket.com/assets/leaflet/L.GeoSearch-master/src/js/l.geosearch.provider.google.js