Spatial index

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/h3-js"></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

// PROD US GCP
const {CartoLayer, MAP_TYPES, colorBins, setDefaultCredentials, FORMATS} = deck.carto;
const accessToken =   'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IlJYVnRIYUdzaTUxMFZZYml1YjA5ZCJ9.eyJodHRwOi8vYXBwLmNhcnRvLmNvbS9lbWFpbCI6ImN2aWdsaWV0dGFAY2FydG9kYi5jb20iLCJodHRwOi8vYXBwLmNhcnRvLmNvbS9hY2NvdW50X2lkIjoiYWNfYmFyeGdkcmgiLCJpc3MiOiJodHRwczovL2F1dGgubG9jYWwuY2FydG8uY29tLyIsInN1YiI6Imdvb2dsZS1vYXV0aDJ8MTEzNDM2MTA5MTIyNjEyMzYwMjk5IiwiYXVkIjoiY2FydG8tY2xvdWQtbmF0aXZlLWFwaSIsImlhdCI6MTY1MzMwMTg2NiwiZXhwIjoxNjUzMzg4MjY2LCJhenAiOiJGM2tKOVJoUWhFTUFodDFRQllkQUluckRRTXJKVlI4dSIsInNjb3BlIjoicmVhZDpjdXJyZW50X3VzZXIiLCJwZXJtaXNzaW9ucyI6WyJhZG1pbjphY2NvdW50IiwicmVhZDphY2NvdW50IiwicmVhZDphcHBzIiwicmVhZDpjb25uZWN0aW9ucyIsInJlYWQ6Y3VycmVudF91c2VyIiwicmVhZDppbXBvcnRzIiwicmVhZDpsaXN0ZWRfYXBwcyIsInJlYWQ6bWFwcyIsInJlYWQ6dGlsZXNldHMiLCJyZWFkOnRva2VucyIsInVwZGF0ZTpjdXJyZW50X3VzZXIiLCJ3cml0ZTphcHBzIiwid3JpdGU6Y29ubmVjdGlvbnMiLCJ3cml0ZTppbXBvcnRzIiwid3JpdGU6bGlzdGVkX2FwcHMiLCJ3cml0ZTptYXBzIiwid3JpdGU6dG9rZW5zIl19.vH81uqnx9mRF5V-INDV2hooFeRKhOaLc6oIlHLW6W_RV6jR9RTcoYszDO1XSfp1KJIBDTxayURkMGMclkStaXyTGQJ5EJFARqopSNQjOBLTIyrKxPO1twe43t8CmpdcDT1BoivmzfN51v6OPhkVPVnEZTt8HT8DxR-h_ORR3Fq8v0gtW41fC13sAXJNQ8n6aqTbAM2sUpjFR2GASQ8QkFYyIQL7MGcKBbJco2sg7B_3gFyMVEXycLNIIMoUOWCL-LTYoiPZ_1KGs6aLXhRXWEHDb2SOyNcbdDJoxOu5FcUOPwQlRdvvTxvwvndJmF9B291UgoPcAqRPAtXp71gjHwA'


if (!accessToken) {
  alert('Please, define an accessToken')
}

setDefaultCredentials({
  apiBaseUrl: 'http://localhost:8002',
  accessToken,
})
  
// Create Deck.GL map
const deckgl = new deck.DeckGL({
  container: 'map',
  mapStyle: deck.carto.BASEMAP.POSITRON,

  initialViewState: {
  latitude: 40.7306,
  longitude: -73.935242,
    zoom: 2
  },
  controller: true
});

render();

// Function to render the layers. Will be invoked any time the layer changes
function render() {

	const domain = [1e2,1e3,1e4,5e4, 1e5,5e5,1e6];
    
  const layer = new CartoLayer({
    connection: 'dev-redshift',
    format: FORMATS.TILEJSON,
 ...