CARTO dynamic tiling

by felixp

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>deck.gl+dynamictiling</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>
    <!-- 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

// Skip CDN
const apiBaseUrl = 'https://direct-gcp-us-east1.api.carto.com';
// PROD US GCP
// const apiBaseUrl = 'https://gcp-us-east1.api.carto.com';
// Localhost
// const apiBaseUrl = 'http://localhost:8002'

const config = {
  bigquery: {
    points_1M: 'cartodb-gcp-backend-data-team.dynamic_tiling.points_1M',
    points_5M: 'cartodb-gcp-backend-data-team.dynamic_tiling.points_5M',
    censustract: 'carto-do-public-data.carto.geography_usa_censustract_2019',
    blockgroup: 'carto-do-public-data.carto.geography_usa_blockgroup_2019',
    zipcodes: 'carto-do-public-data.carto.geography_usa_zcta5_2019',
    h3: 'carto-do-public-data.carto.geography_usa_h3res8_v1',
    block: 'carto-do-public-data.carto.geography_usa_block_2019'
  },
  snowflake: {
    points_1M: 'carto_backend_data_team.dynamic_tiling.points_1M',
    points_5M: 'carto_backend_data_team.dynamic_tiling.points_5M',
    censustract: 'carto_backend_data_team.dynamic_tiling.usa_censustract_2019',
    blockgroup: 'carto_backend_data_team.dynamic_tiling.usa_blockgroup_2019',
    zipcodes: 'carto_backend_data_team.dynamic_tiling.usa_zcta5_2019',
    h3: 'carto_backend_data_team.dynamic_tiling.usa_h3res8_v1',
    block: 'carto_backend_data_team.dynamic_tiling.usa_block_2019'
  },
  redshift: {
    points_1M: 'carto_backend_data_team.dynamic_tiling.points_1m',
    points_5M: 'carto_backend_data_team.dynamic_tiling.points_5m',
    censustract: 'carto_backend_data_team.dynamic_tiling.usa_censustract_2019',
    blockgroup: 'carto_backend_data_team.dynamic_tiling.usa_blockgroup_2019',
    zipcodes: 'carto_backend_data_team.dynamic_tiling.usa_zcta5_2019',
    h3: 'carto_backend_data_team.dynamic_tiling.usa_h3res8_v1',
    block: 'carto_backend_data_team.dynamic_tiling.usa_block_2019'
  }
};

const connection = 'bigquery';
const table = config[connection]['blockgroup'];
const accessToken = 'eyJhbGciOiJIUzI1NiJ9.eyJhIjoiYWNfN3hoZnd5bWwiLCJqdGkiOiI2NWVlOTNmNSJ9.5WZ1mwlPJBEIMOmOmMQTBhDx93RBqr6VCmcY6Uaw0wM';


//...