-
-
Save jgoizueta/1ebed0410bb9751d823ab4455c7b59ef to your computer and use it in GitHub Desktop.
How to display a Raster layer in CARTO
This file contains hidden or 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> | |
| <html> | |
| <head> | |
| <title>How to load a Raster layer in CARTO</title> | |
| <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> | |
| <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" /> | |
| <script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script> | |
| <link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" /> | |
| <style type="text/css"> | |
| html, body, #map { | |
| height: 100%; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <script> | |
| function main() { | |
| // Create map | |
| var map = new L.Map('map', { | |
| zoomControl: true, | |
| center: [40, -1], | |
| zoom: 6 | |
| }); | |
| // Add basemap | |
| L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', { | |
| attribution: '<a href="http://carto.com">CARTO</a> © 2014', | |
| maxZoom: 16 | |
| }).addTo(map); | |
| // Add raster layer | |
| cartodb.createLayer(map, { | |
| user_name: 'jgoizueta-1000x', | |
| type: 'cartodb', | |
| sublayers: [{ | |
| sql: "select * from nyc_roads_2_24", | |
| cartocss: "#layer {raster-opacity: 0.5;}", | |
| raster: true | |
| }] | |
| }) | |
| .addTo(map) | |
| } | |
| window.onload = main; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment