Built with blockbuilder.org
Demonstrates loading a Carto dataset as a tile layer using cartodb.createLayer()
forked from clhenrick's block: Leaflet with a Carto Layer I
Last active
November 1, 2016 22:44
-
-
Save clhenrick/c07d946c3e5f982bc7afadc79b0c5716 to your computer and use it in GitHub Desktop.
Leaflet with a Carto Layer II
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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%; | |
| } | |
| </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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment