CARTO binary dynamic tiling

by felixp

HTML

<script src="https://unpkg.com/[email protected]/dist/pbf.js"></script>
<script src="https://unpkg.com/@loaders.gl/[email protected]/dist/es5/lib/binary-to-geojson.js"></script>
<!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

// TABLE definition
const apiBaseUrl = 'https://direct-gcp-us-east1-19.dev.api.carto.com';
const connection = 'bigquery';
const table = 'cartodb-gcp-backend-data-team.dynamic_tiling.polygons_3k_usacounty';
const geomType = 'polygons'; // points | lines | polygons
const token = 'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6InlscXg0SVg3ek1oaUR1OFplSUlFSyJ9.eyJodHRwOi8vYXBwLmNhcnRvLmNvbS9lbWFpbCI6ImZwYWxtZXIrY2hyb21lQGNhcnRvZGIuY29tIiwiaHR0cDovL2FwcC5jYXJ0by5jb20vYWNjb3VudF9pZCI6ImFjX2ZrdDF3bGwiLCJpc3MiOiJodHRwczovL2F1dGguZGV2LmNhcnRvLmNvbS8iLCJzdWIiOiJhdXRoMHw2MWEwZDgyMGJkMDA3OTAwNzExNDViYTciLCJhdWQiOlsiY2FydG8tY2xvdWQtbmF0aXZlLWFwaSIsImh0dHBzOi8vY2FydG8tZGVkaWNhdGVkLWVudi51cy5hdXRoMC5jb20vdXNlcmluZm8iXSwiaWF0IjoxNjM4NTIxOTgwLCJleHAiOjE2Mzg2MDgzODAsImF6cCI6IkczcTdsMlVvTXpSWDhvc2htQXVzZWQwcGdRVldySkdQIiwic2NvcGUiOiJvcGVuaWQgcHJvZmlsZSBlbWFpbCByZWFkOmN1cnJlbnRfdXNlciB1cGRhdGU6Y3VycmVudF91c2VyIHJlYWQ6Y29ubmVjdGlvbnMgd3JpdGU6Y29ubmVjdGlvbnMgcmVhZDptYXBzIHdyaXRlOm1hcHMgcmVhZDphY2NvdW50IiwicGVybWlzc2lvbnMiOlsicmVhZDphY2NvdW50IiwicmVhZDphcHBzIiwicmVhZDpjb25uZWN0aW9ucyIsInJlYWQ6Y3VycmVudF91c2VyIiwicmVhZDppbXBvcnRzIiwicmVhZDpsaXN0ZWRfYXBwcyIsInJlYWQ6bWFwcyIsInJlYWQ6dGlsZXNldHMiLCJyZWFkOnRva2VucyIsInVwZGF0ZTpjdXJyZW50X3VzZXIiLCJ3cml0ZTphcHBzIiwid3JpdGU6Y29ubmVjdGlvbnMiLCJ3cml0ZTppbXBvcnRzIiwid3JpdGU6bWFwcyIsIndyaXRlOnRva2VucyJdfQ.ETffbkVvyzDpsYO9D81C8mZkrkJ5CJW-v5ZwEwwcBbsNLx1Uxsqaw7OKk59QgpcTvQZws3VgZxiBGb8txbWlSqHq4wafickNTRsrtOQ3h1MIuebGTBYtAXlFon-v7oEdqFr7jtQuUEuaKnjlqQ_bC8QIdINxY7KdRp8a4NhqsW_uJqn-T4clyPoFJVjOwtLVuqE-8r2yqdP_YJtsUh4pSAl6CTHpZWfm_uzQj_f5bjDixUPkSUdUtyQhSxglKjK9XbPnPY1r3EDn2JcOHAP7OBnx8UwFRIBiFQLWXhj9Fi0L3yrAaGwAUmz3InkVJHV7h1raRHdh6TpKrKBD9wKvIQ';


// Debug options
const clip = true; // Use GPU to clip each rendered tile?
const skipOdd = false; // Only show every other tile (to visualize clipping)
const geojson = true; // Do not use binary format
const wip = false; // Skip protobuf encoding (ignored if geojson=true)

const formatTiles = geojson ?...