Leaflet/CARTO Parcel Flooding Map Demonstrating CARTO PostGIS Queries. Files for workshop available here: http://duspviz.mit.edu/resources/carto_demo_s19.zip

floodingmap.js

var nwCorner = L.latLng(42.341055,-71.07289),
seCorner = L.latLng(42.398887,-70.948951),
bounds = L.latLngBounds(nwCorner, seCorner)

// Create Leaflet map object
var map = L.map('parcelMap',{
  center: [42.371353, -71.034150],
  zoom: 15,
  minZoom: 14,
  maxZoom: 17,
  maxBounds: bounds
});

// Add Tile Layer basemap
L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png', {
  attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Basemap Data by <a href="http://mass.gov/mgis">MassGIS</a>. Parcel and Assessors Data from <a href="https://data.boston.gov/">Analyze Boston</a>. Map by Eric Huntley.</a>',
  maxZoom: 17,
  minZoom: 9
}).addTo(map);

dataLayers = L.layerGroup().addTo(map);

// Global Variables
// Will go here

function parcelStyle(feature) {
    return {
        fillColor: 'red',
        weight: 0.75,
        opacity: 1,
        color: 'white',
        fillOpacity: 0.3
    };
}

var cartoUserName = "ehuntley-mit";

function allParcels() {

  dataLayers.clearLayers();

  var allQuery = "SELECT the_geom, CONCAT(st_num, ' ', st_name, ' ', st_name_su) AS street, owner FROM ebos_parcels16";
  var apiCall = "https://"+cartoUserName+".carto.com/api/v2/sql?format=GeoJSON&q="+allQuery

  $.getJSON(apiCall).done(function(data) {
    eastBosParcels = L.geoJson(data,{
        style: parcelStyle,
        onEachFeature: function (feature, layer) {
            layer.bindPopup('<h3>' + feature.properties.street + '</h3><br>Owner: ' + feature.properties.owner);
        }
    });
    dataLayers.addLayer(eastBosParcels);
  });
}

// Run showAll function automatically when document loads
$( document ).ready(function() {
  allParcels();
});

function closestParcels(ll) {

  dataLayers.clearLayers();

  locationMarker = L.marker(ll);
  dataLayers.addLayer(locationMarker);

  var parcelCount = 20;
  // Set SQL Query that will return ten closest parcels
  var closestQuery = "SELECT the_geom, CONCAT(st_num, ' ', st_name, ' ', st_name_su) AS street, owner FROM ebos_parcels16 ORDER BY the_geom <-> ST_SetSRID(ST_MakePoint("+ll.lng+","+ll.lat+"), 4326) LIMIT " + parcelCount;
  var closestAPICall = "https://"+cartoUserName+".carto.com/api/v2/sql?format=GeoJSON&q="+closestQuery;
  $.getJSON(closestAPICall).done(function(data) {
      close = L.geoJson(data,{
          style: parcelStyle,
          onEachFeature: function (feature, layer) {
              layer.bindPopup('<h3>' + feature.properties.street + '</h3><br>Land Use: ' + feature.properties.lu + '<br>Owner: ' + feature.properties.owner);
          }
      });
      dataLayers.addLayer(close)
      console.log()
  })
}

map.on('click', function(e) {
  clickLatLng = e.latlng;
  closestParcels(clickLatLng);
});

function waterStyle(feature) {
    return {
        fillColor: 'blue',
        weight: 0.75,
        opacity: 1,
        color: 'white',
        fillOpacity: 0.3
    };
}

function floodedParcels() {

  dataLayers.clearLayers();
  // Set SQL Query that will return ten closest parcels
  var floodedQuery = "SELECT p.the_geom, p.st_num, p.st_name, p.st_name_su, p.owner FROM ebos_parcels16 AS p, bhfrm_9in_1pct AS f WHERE ST_Intersects(p.the_geom, f.the_geom)";
  var waterQuery = "SELECT the_geom FROM bhfrm_9in_1pct";
  var floodedAPICall = "https://"+cartoUserName+".carto.com/api/v2/sql?format=GeoJSON&q="+floodedQuery;
  var waterAPICall = "https://"+cartoUserName+".carto.com/api/v2/sql?format=GeoJSON&q="+waterQuery;

  $.getJSON(waterAPICall).done(function(data) {
    water = L.geoJson(data, {style: waterStyle});
    dataLayers.addLayer(water);
  })

  $.getJSON(floodedAPICall).done(function(data) {
      flooded = L.geoJson(data,{
          style: parcelStyle,
          onEachFeature: function (feature, layer) {
              layer.bindPopup('<h3>' + feature.properties.street + '</h3><br>Land Use: ' + feature.properties.lu + '<br>Owner: ' + feature.properties.owner);
          }
      });
      dataLayers.addLayer(flooded);
  })
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Flooding in East Boston</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
    <link rel="stylesheet" type="text/css" href="style.css"/>
  </head>
  <body>
      <div id="header">
        <h1>East Boston Parcels, 2016</h1>
        <p>Click on the map to find the ten parcels closest to that location.</p>
      </div>
      <div id="parcelMap"></div>
      <div id="footer">
        <input type="button" onclick="allParcels()" value="Reset Map">
        <input type="button" onclick="floodedParcels()" value="Parcels Prone to Flooding in a 100-Year Flood Event Under a 9-Inch SLR Scenario">
      </div>
    <!-- include leaflet.js library -->
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    <!-- include jquery library -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- to read in the completed map -->
    <!-- <script src="./floodingmap.js"></script> -->
  </body>
</html>

style.css

body {
  margin: 0px;
  font-family: 'Open Sans', Helvetica, sans-serif;
}

#parcelMap {
  width: 100%;
  margin: 0 auto;
  height: 700px;
}

#header, #footer {
  margin: 15px 50px;
}