Created
March 1, 2018 12:00
-
-
Save ramiroaznar/d001a2976a888ec546a62ec3ea189079 to your computer and use it in GitHub Desktop.
Buildings 2.5D | CARTO.js v4
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>Buildings 2.5D | CARTO.js v4</title> | |
| <meta name="viewport" content="initial-scale=1.0"> | |
| <meta charset="utf-8"> | |
| <link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600" rel="stylesheet"> | |
| <!-- Include Leaflet --> | |
| <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> | |
| <link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet"> | |
| <!-- Include CARTO.js --> | |
| <script src="https://cartodb-libs.global.ssl.fastly.net/carto.js/v4.0.0-beta.20/carto.min.js"></script> | |
| <style> | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body, *{ margin: 0; padding: 0; } | |
| #map { | |
| position: absolute; | |
| height: 100%; | |
| width: 100%; | |
| z-index: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <script> | |
| const map = L.map('map').setView([41.383333, 2.183333], 16); | |
| L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/dark_nolabels/{z}/{x}/{y}.png', { | |
| maxZoom: 18 | |
| }).addTo(map); | |
| const client = new carto.Client({ | |
| apiKey: 'YOUR_API_KEY', | |
| username: 'builder-demo' | |
| }); | |
| const citySource = new carto.source.SQL(` | |
| SELECT | |
| * | |
| FROM | |
| bcn_buildings | |
| WHERE | |
| sobre_rasa > 0 | |
| ORDER BY | |
| ST_YMax(the_geom) DESC | |
| `); | |
| const cityStyle = new carto.style.CartoCSS(` | |
| #layer { | |
| line-width: 0.25; | |
| line-color: #FFF; | |
| line-opacity: 0.5; | |
| building-fill: ramp([sobre_rasa], (#ffffcc, #c7e9b4, #7fcdbb, #41b6c4, #1d91c0, #225ea8, #0c2c84), jenks); | |
| building-fill-opacity: 0.7; | |
| building-height: [sobre_rasa]*2; | |
| } | |
| `); | |
| const cityLayer = new carto.layer.Layer(citySource, cityStyle); | |
| client.addLayers([cityLayer]); | |
| client.getLeafletLayer().addTo(map); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment