CARTO dynamic tiling 10k/3M

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://unpkg.com/@deck.gl/[email protected]/dist.min.js"></script>

    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&v=beta&map_ids=fae05836df2dc8bb&callback=initMap" async
    ></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

let {
  data,
  accessToken,
  connection
} = {};
const large = true; // <-- Set to true to use large (dynamically tiled) table

if (large) {
  // 3M points
  connection = 'bigquery';

  data = 'cartodb-gcp-backend-data-team.dynamic_tiling.points_3M_geom';
  accessToken = 'eyJhbGciOiJIUzI1NiJ9.eyJhIjoiYWNfN3hoZnd5bWwiLCJqdGkiOiJlYTZlZGY1NyJ9.Kua6I-4MHKF9UJfsPXgdGvWFUfhY2kdw9XwDx1t1_xo';
} else {
  // 10k points
  connection = 'alasarr';
  data = 'cartobq.testtables.points_10k';
  accessToken =
    'eyJhbGciOiJIUzI1NiJ9.eyJhIjoiYWNfN3hoZnd5bWwiLCJqdGkiOiJkMmYyY2E3YyJ9.SryU75rQZMm1k84enHaoMNLp4M00h5oAIxb_fx62EE0';
}

function createLayer() {
  return new deck.carto.CartoLayer({
    id: 'carto',
    connection: connection,
    data,
    credentials: {
      accessToken
    },

    // Dynamic tiling automatically enabled based on server response
    type: deck.carto.MAP_TYPES.TABLE,

    // Styling
    getFillColor: [133, 71, 251],
    getLineColor: [233, 255, 251],
    opacity: 0.5,
    stroked: true,
    filled: true,
    pointType: 'circle',
    pointRadiusUnits: 'pixels',
    lineWidthMinPixels: 0.5,
    getPointRadius: 2
  });
}


// App
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 40.8,
      lng: -74
    },
    disableDefaultUI: true,
    gestureHandling: 'greedy',
    mapId: 'fae05836df2dc8bb',
    zoom: 9
  });

  const overlay = new deck.GoogleMapsOverlay({
    layers: [createLayer()]
  });
  overlay.setMap(map);
}