D3 Examples - Leaflet with a Carto Layer II

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <!-- cartodb.js comes with Leaflet @0.7 and jQuery -->
  <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>
  <!-- This script makes it easy to use Stamen basemaps   -->
  <script type="text/javascript" src="https://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
​
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    #map {
      height: 100%;
    }
  </style>
</head>
​
<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!
    */
​
    var sql = new cartodb.SQL({ user: 'stamen-builder' });
    sql.execute(query, null, { format: 'geojson' })
    .done(function(data) {
      console.log(data);
      // uncomment this line to watch the browser suffer
      // tornadoLayer.addData(data);
    });
​
    /*
     * 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>
​
    