Leaflet with a Carto Layer II

Demonstrates loading a Carto dataset as a tile layer using cartodb.createLayer()

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>
    // 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 tonerLayer = new L.StamenTileLayer("toner-lite");
		// add the tile layer to the map
		map.addLayer(tonerLayer);

var tornadoLayer = L.geoJson(null).addTo(map);
    var query = "SELECT * FROM tornado ORDER BY date DESC";

/*
     * Our Carto tornado table is actually quite big, if we attempted to bring
     * the entire table in as a GeoJSON layer it would bog down the browser!
    */

/*
     * Instead load the table as a tile layer which will load quickly and won't bog the browser down
    */

// First define a layerSource object which specifies any layers we will be loading
    var cartoLayerSource = {
      user_name: 'stamen-builder',
      type: 'cartodb',
      sublayers: [{
        sql: "SELECT * FROM tornado ORDER BY date DESC",
        cartocss: "#tornado { line-color: red; line-width: 2; line-opacity: 0.8; }",
        interactivity: 'cartodb_id, date, mag, inj, fat'
      }]
    };

// we then use cartodb's createLayer method to load the source
    cartodb.createLayer(map, cartoLayerSource)
      .addTo(map)
      .on('done', function(layer) {
        console.log(layer);
      })
      .on('error', function(error) {
        console.log(error);
      });

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