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://unpkg.com/h3-js"></script>
    <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

// PROD US GCP
const {CartoLayer, MAP_TYPES, colorBins, setDefaultCredentials, FORMATS} = deck.carto;
const accessToken = 'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6ImRVNGNZTHAwaThjYnVMNkd0LTE0diJ9.eyJodHRwOi8vYXBwLmNhcnRvLmNvbS9lbWFpbCI6ImZwYWxtZXJAY2FydG9kYi5jb20iLCJodHRwOi8vYXBwLmNhcnRvLmNvbS9hY2NvdW50X2lkIjoiYWNfN3hoZnd5bWwiLCJpc3MiOiJodHRwczovL2F1dGguY2FydG8uY29tLyIsInN1YiI6Imdvb2dsZS1vYXV0aDJ8MTA3OTY5NjU1OTI5NjExMjIxNDg2IiwiYXVkIjpbImNhcnRvLWNsb3VkLW5hdGl2ZS1hcGkiLCJodHRwczovL2NhcnRvLXByb2R1Y3Rpb24udXMuYXV0aDAuY29tL3VzZXJpbmZvIl0sImlhdCI6MTY1NTQ1NjgxMCwiZXhwIjoxNjU1NTQzMjEwLCJhenAiOiJqQ1duSEs2RTJLMmFPeTlqTHkzTzdaTXBocUdPOUJQTCIsInNjb3BlIjoib3BlbmlkIHByb2ZpbGUgZW1haWwgcmVhZDpjdXJyZW50X3VzZXIgdXBkYXRlOmN1cnJlbnRfdXNlciByZWFkOmNvbm5lY3Rpb25zIHdyaXRlOmNvbm5lY3Rpb25zIHJlYWQ6bWFwcyB3cml0ZTptYXBzIHJlYWQ6YWNjb3VudCIsInBlcm1pc3Npb25zIjpbInJlYWQ6YWNjb3VudCIsInJlYWQ6YXBwcyIsInJlYWQ6Y29ubmVjdGlvbnMiLCJyZWFkOmN1cnJlbnRfdXNlciIsInJlYWQ6aW1wb3J0cyIsInJlYWQ6bGlzdGVkX2FwcHMiLCJyZWFkOm1hcHMiLCJyZWFkOnRpbGVzZXRzIiwicmVhZDp0b2tlbnMiLCJ1cGRhdGU6Y3VycmVudF91c2VyIiwid3JpdGU6YXBwcyIsIndyaXRlOmNvbm5lY3Rpb25zIiwid3JpdGU6aW1wb3J0cyIsIndyaXRlOm1hcHMiLCJ3cml0ZTp0b2tlbnMiXX0.MMwSvCyrHCo5tbPRyg9mtZtL_4yRdwOwSoJn6tS-VoyA7lEqeIX9n88I2O9ro0LdlhK26Gr4c7q7PEWe1XvWsFCMMsISOxBrLbgjoQWx1Qk5DY3RR4KHNyHKIgAs7pPyfmt71AUOJnaB4dsqjFnxCbi3OLPR5W_BMwI_q73YDoq4YKOIIHbGeJay9_vcGCSPghQEw7cSkQmK_YqOyWRh2obko6XfTNl6Z9lULA6QWWfCxCpGQ0mzX2eS6phKRjtZ_ieV5t8ypl77roeh-JpQ-5NeaGuz9iC_SWwRgca982G3GasEIZSw9tfMHlLeOj0TwHegCGfsE3z-LI8M5bwQ9w'


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

setDefaultCredentials({
  apiBaseUrl: 'https://gcp-us-east1.api.carto.com',
  accessToken,
})
  
// Create Deck.GL map
const deckgl = new deck.DeckGL({
  container: 'map',
  mapStyle: deck.carto.BASEMAP.VOYAGER,

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

render();

// Function to render the layers. Will be invoked any time the layer...