Leaflet with a Carto Layer I extended

Demonstrates loading data from a Carto table and creating a GeoJSON vector layer in a Leaflet Map plus adding popups, styling, and filtering data.

Built with blockbuilder.org

forked from clhenrick's block: Leaflet with a Carto Layer I

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  
  <link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
  <script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
  
  <script type="text/javascript" src="https://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>

<body>
  <div id="map"></div>
  <script>
    // necessary for making AJAX calls on Blockbuilder.org as of 2016-11-02
    jQuery.support.cors = true;
    // create a new map centered on the U.S.
    var map = L.map('map').setView([39.69, -99.185], 5);
    // create a tile layer for our toner basemap
    var darkmatterLayer = new L.TileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png');
		// add the tile layer to the map
		map.addLayer(darkmatterLayer);

// function to make our popup-content
    var makePopUpContent = function(props) {
      return '<div class="popup-content">' +
               '<p><strong>Date:</strong> ' + props.date + '</p>' +
               '<p><strong>Magnitude:</strong> ' + props.mag + '</p>' +
               '<p><strong>Injured:</strong> ' + props.inj + '</p>' +
             '</div>'
    }

// color ramp via ColorBrewer: https://colorbrewer2.org/#type=sequential&scheme=Purples&n=5
    var ramp = ['#f2f0f7','#cbc9e2','#9e9ac8','#6a51a3'];

// returns a color based on a value passed, in this case we are using the value for "mag"
    var getColor = function(d) {
      console.log(d);
      return d >= 4  ? ramp[0] :
             d >= 3  ? ramp[1] :
             d >= 2  ? ramp[2] :
             d >= 1  ? ramp[3] :
                      '#333';
    }

// style function for styling the GeoJSON layer, uses getColor function above
    var style = function(feature) {
      return {
        color: getColor(feature.properties.mag),
        weight: 3,
        opacity: 1
      }
    }

// function we can use to filter what data is added to the GeoJSON layer
    // eg try changing the value from 0 to 3 or 4
    var filter = function(feature) {
      return feature.properties.mag > 0;
    }

// this will be called on each of the GeoJSON features and can be used to create Popups
    // for each GeoJSON feature on our map
    var onEachFeature = function(feature, layer) {
      if (feature.properties) {
        var popUpContent = makePopUpContent(feature.properties);
        layer.bindPopup(popUpContent);
      }
    }

// Set up our GeoJSON layer with options: filter, onEachFeature, & style
    // add it to the map, but don't add data just yet
    var tornadoLayer = L.geoJson(null, {
      filter: filter,
      onEachFeature: onEachFeature,
      style: style
    }).addTo(map);

// sample query for our Tornado table
    var query = "SELECT * FROM tornado WHERE \"timestamp\" >= '2012-01-01' and \"timestamp\" < '2013-01-01'";

// load our data asynchronously from Carto
    var sql = new cartodb.SQL({ user: 'stamen-builder' });
    sql.execute(query, null, { format: 'geojson' })
    .done(function(data) {
      console.log(data);
      // add the tornado data to our tornadoLayer
      tornadoLayer.addData(data);
    });

</script>
</body>

Modified http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js to a secure url

Modified http://maps.stamen.com/js/tile.stamen.js?v1.3.0 to a secure url

https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js

https://maps.stamen.com/js/tile.stamen.js?v1.3.0