deck+Google Extrusions

by felixp

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>deck.gl+Google</title>
    <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://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&v=beta&map_ids=716bc8b1cc71ef3b"
    ></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

/* Always set the map height explicitly to define the size of the div element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

const AIR_PORTS =
  'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson';

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 40.7368521,
      lng: -73.9936065
    },
    zoom: 12,
    tilt: 70,
    mapId: '716bc8b1cc71ef3b',
    fullscreenControl: false,
    streetViewControl: false,
    zoomControlOptions: {
      position: google.maps.ControlPosition.LEFT_BOTTOM,
    },
  });

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

  const POLYGON_COLORS = [
    [128, 0, 32],
    [190, 1, 31],
    [255, 77, 32],
    [255, 142, 54],
    [255, 179, 66],
    [254, 239, 157],
    [253, 255, 208],
  ];

  const deckOverlay = new deck.GoogleMapsOverlay({
    layers: [
      new deck.carto.CartoLayer({
        id: 'mrli',
        connection: 'bqconn',
        type: deck.carto.MAP_TYPES.QUERY,
        data: `SELECT geom, index FROM cartobq.public_account.mrli_ny_jan`,
        getFillColor: deck.carto.colorBins({
          attr: 'index',
          domain: [0, 50, 150, 300, 600, 1000],
          colors: POLYGON_COLORS
        }),
        getLineColor: [0, 0, 0, 0],
        lineWidthMinPixels: 0,
        filled: true,
        extruded: true,
        wireframe: true,
        getElevation: (f) => {
          return f.properties.index ? f.properties.index : 0
        }
      }),
    ]
  });

  deckOverlay.setMap(map);
}

initMap();