Leaflet with a Carto Layer II extended

Demonstrates loading, styling, and adding interactivity to a Carto tile layer using cartodb.createLayer()

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

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

<!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>
  <div class="tool-tip"></div>
  <script type="cartocss/text" id='cartocss'>
  	/* this is an easier way write out your cartocss in the browser
    	 then doing string concatenation
       example styling tornado data by mag value
    */
    #tornado {
      line-width: 1;
      line-color: #3EBCAE;
      line-opacity: 1;
      [mag >=0] { line-color: lighten(red, 50%); }
      [mag >=1] { line-color: lighten(red, 40%); }
      [mag >=2] { line-color: lighten(red, 30%); }
      [mag >=3] { line-color: lighten(red, 20%); }
      [mag >=4] { line-color: lighten(red, 10%); }
      [mag >=5] { line-color: lighten(red, 0%); }
    }
  </script>
  <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);
    
    // https://colorbrewer2.org/#type=sequential&scheme=OrRd&n=5
    var orRd = ['#fef0d9','#fdcc8a','#fc8d59','#e34a33','#b30000'];
    
    // this will determine the styling for our Carto tile layer
    var cartoCSS = "#tornado { " + 
        "line-color: #fef0d9; line-width: 2; line-opacity: 0.8;" + 
        "[mag >= 0] { line-color: " + orRd[0]  + " } " +
        "[mag >= 1] { line-color: " + orRd[1]  + " } " +
        "[mag >= 2] { line-color: " + orRd[2]  + " } " +
        "[mag >= 3] { line-color: " + orRd[3]  + " } " +
        "[mag >= 4] { line-color: " + orRd[4]  + " } " +
       " }";
 
    // Define a "layerSource" object which specifies any (sub)layers we will be loading,
    // hint: you may have multiple sublayers! 
    // They will be displayed in the order you list them in
    var cartoLayerSource = {
      user_name: 'stamen-builder',
      type: 'cartodb',
      sublayers: [{
        sql: "SELECT * FROM tornado ORDER BY mag ASC",
        cartocss: cartoCSS,
        // cartocss: $('#cartocss').text(), // we can add our cartocss from the script tag above like this
        interactivity: ['cartodb_id', 'date', 'mag', 'inj', 'len']
      }]
    };

// we then use cartodb's createLayer method to load the source
    cartodb.createLayer(map, cartoLayerSource)
      .addTo(map)
      .on('done', function(layer) {
      	// the 'done' callback is where we set interactivtiy with a Carto tile layer
        console.log(layer);
      	
      	// the map layers we want to interact with are actually "sublayers"
      	var sublayer = layer.getSubLayer(0);
      	console.log(layer.getSubLayerCount(), sublayer);
        
        // necessary to allow interaction on our sublayer
      	sublayer.setInteraction(true);
      
      	// set the column names we want to have interactive
      	sublayer.setInteractivity('cartodb_id, date');
      	
      	// sublayers have events we can subscribe to so that we can implement 
        // features like a tool-tip that will display when a user hovers over a feature
      	sublayer
          .on('featureOver', function (e, latlon, pos, data, idx) {
          	console.log(pos, data);
          
          	// use jQuery to add content to and position our tool tip
          	$('.tool-tip')
              .html('<p><strong>Date:</strong> ' + data.date + '</p>')
              .css({
              	'display': 'block',
              	'top': pos.y,
              	'left': pos.x + 15
            	});
          
        	})
        	.on('featureOut', function () {
          		// when the user hovers away from a feature hide the tool tip
          	$('.tool-tip')
            	.css('display', 'none');
        	})
        	.on('error', function(err) {
          	// if there are any errors we can log / handle them
		        console.log('error: ' + err);
    		  });
      	
      	// we can also create an "info-window", similar to Leaflet's popups
        // the easiest way is as follows:
        cartodb.vis.Vis.addInfowindow(map, sublayer, ['mag', 'inj', 'len']);
      
      	// but you can also customize the layout and styling of your info windows 
        // see: https://carto.com/docs/faqs/infowindows/#how-can-i-use-cartojs-to-create-and-style-infowindows
      
      })
      .on('error', function(error) {
        // this will log an error if our carto layer fails to load
        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