| license: mit |
Built with blockbuilder.org
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"> | |
| <!-- cartodb.js comes with Leaflet @0.7 and jQuery --> | |
| <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" /> | |
| <script src="http://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="http://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%; } | |
| .tool-tip { | |
| position:absolute; | |
| z-index: 1000; | |
| width: auto; | |
| height: 20px; | |
| background: white; | |
| padding: 2px 5px; | |
| margin: 0; | |
| display: none; | |
| } | |
| .tool-tip p { | |
| margin: 0; | |
| padding: 0; | |
| font-family: sans-serif; | |
| } | |
| </style> | |
| </head> | |
| <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); | |
| // http://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> |
