Madrid

by felixp

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>deck.gl+Google</title>
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.0/mapbox-gl.js"></script>
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.0/mapbox-gl.css" rel="stylesheet" />

    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://unpkg.com/[email protected]/dist.min.js"></script>
    <script src="https://unpkg.com/deck.gl/[email protected]/dist.min.js"></script>

    <script src="https://unpkg.com/@deck.gl/[email protected]/dist.min.js"></script>

    <!-- jsFiddle will insert css and js -->
  </head>

  <body>
    <div id="map"></div>
  </body>

</html>

CSS

body {
  margin: 0;
  padding: 0; 
}
#map{
  width: 100vw;
  height: 100vh;
}

JavaScript

let map;
const lng = -3.7082998;
const lat = 40.4205556;

deck.carto.setDefaultCredentials({
  apiBaseUrl: 'https://gcp-us-east1.api.carto.com',
  apiVersion: deck.carto.API_VERSIONS.V3,
  accessToken: 'eyJhbGciOiJIUzI1NiJ9.eyJhIjoiYWNfN3hoZnd5bWwiLCJqdGkiOiJhMjQyNDM4MSJ9.5bAXb8y7PyIOB__X7i-iQUWCZgLkedtGoqRI25HuQxc'
});

const POLYGON_COLORS = [
  '#fcde9c', '#faa476', '#f0746e', '#e34f6f', '#dc3977', '#b9257a', '#7c1d6f'
].map(hex2rgb);

// Create Deck.GL map
const deckgl = new deck.DeckGL({
  container: 'map',
  mapStyle: deck.carto.BASEMAP.DARK_MATTER_NOLABELS,

  initialViewState: {
    latitude: lat,
    longitude: lng,
    zoom: 15,
    pitch: 60
  },
  controller: {scrollZoom: false, touchZoom: false, dragPan: false, dragRotate: false, keyboard: false, doubleClickZoom: false}
});

function colorForBuilding(d, alpha) {
  const rgb = deck.carto.colorBins({
    attr: 'grossFloorAreaM2',
    domain: [0, 200, 400, 1000, 2000, 5000],
    colors: POLYGON_COLORS
  })(d);
  return [...rgb, alpha || 255];
}

// SVG CARTO logo
const logo = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='%23162945' fill-rule='evenodd'%3E%3Ccircle cx='90' cy='90' r='90' fill-opacity='.1'/%3E%3Ccircle cx='90' cy='90' r='30'/%3E%3C/g%3E%3C/svg%3E";

let rangeMax = 0;
const animationSpeed = 1.8;

function render() {
  rangeMax += animationSpeed;
  const buildingsLayer = new deck.carto.CartoLayer({
    id: 'mrli',
    connection: 'bigquery',
    type: deck.carto.MAP_TYPES.TABLE,
    data: 'cartodb-on-gcp-backend-team.alasarr.madrid_buildings',

    // Fill
    filled: true,
    getFillColor: colorForBuilding,

    // Line
    // wireframe: true,
    getLineColor: [0, 0, 0, 180],
    lineWidthMinPixels: 0,

    // Extrusion
    extruded: true,
    getElevation: d => 15 + 30 * Math.random(), // Random heights

    // Data filter to fade in buildings
    extensions: [new deck.DataFilterExtension({
      filterSize: 1
  ...