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

// CARTO 3
    deck.carto.setDefaultCredentials({
      apiBaseUrl: 'https://gcp-us-east1-01.dev.api.carto.com',
      accessToken: 'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6InlscXg0SVg3ek1oaUR1OFplSUlFSyJ9.eyJodHRwOi8vYXBwLmNhcnRvLmNvbS9lbWFpbCI6ImJtdW5veitkZWQwMDFAY2FydG8uY29tIiwiaHR0cDovL2FwcC5jYXJ0by5jb20vYWNjb3VudF9pZCI6ImFjX3h6Z3lrMHI2IiwiaXNzIjoiaHR0cHM6Ly9hdXRoLmRldi5jYXJ0by5jb20vIiwic3ViIjoiYXV0aDB8NjJiYWFmYzAwOWExOWExZWM3YTM0NjRhIiwiYXVkIjpbImNhcnRvLWNsb3VkLW5hdGl2ZS1hcGkiLCJodHRwczovL2NhcnRvLWRlZGljYXRlZC1lbnYudXMuYXV0aDAuY29tL3VzZXJpbmZvIl0sImlhdCI6MTY1NjQwMTk5OSwiZXhwIjoxNjU2NDg4Mzk5LCJhenAiOiJHM3E3bDJVb016Ulg4b3NobUF1c2VkMHBnUVZXckpHUCIsInNjb3BlIjoib3BlbmlkIHByb2ZpbGUgZW1haWwgcmVhZDpjdXJyZW50X3VzZXIgdXBkYXRlOmN1cnJlbnRfdXNlciByZWFkOmNvbm5lY3Rpb25zIHdyaXRlOmNvbm5lY3Rpb25zIHJlYWQ6bWFwcyB3cml0ZTptYXBzIHJlYWQ6YWNjb3VudCBhZG1pbjphY2NvdW50IiwicGVybWlzc2lvbnMiOlsiYWRtaW46YWNjb3VudCIsInJlYWQ6YWNjb3VudCIsInJlYWQ6YXBwcyIsInJlYWQ6Y29ubmVjdGlvbnMiLCJyZWFkOmN1cnJlbnRfdXNlciIsInJlYWQ6aW1wb3J0cyIsInJlYWQ6bGlzdGVkX2FwcHMiLCJyZWFkOm1hcHMiLCJyZWFkOnRpbGVzZXRzIiwicmVhZDp0b2tlbnMiLCJ1cGRhdGU6Y3VycmVudF91c2VyIiwid3JpdGU6YXBwcyIsIndyaXRlOmNvbm5lY3Rpb25zIiwid3JpdGU6aW1wb3J0cyIsIndyaXRlOmxpc3RlZF9hcHBzIiwid3JpdGU6bWFwcyIsIndyaXRlOnRva2VucyJdfQ.R2WEwSLggEbYJsxXjtnis9E1VsM96bX6z5YxlMa1Q8Z5mp3DXa3np_ADLtTlCIOZ6x4izPcN3v9DW366nzWjNu93giqdVsv6iDee_zG2I59Nz-7ADd9H2ZMrF040-h4vusDc2Qu3jjt0o4NUWEXg0PFhkq3UIxbt8uYgxEOT8t9E0L5nol2Uzq-ui9XDoBiavf4beb97McSQ4LZFAtshFkbcCrfh3H2x1liYVh4HtrH7ZqQ_7cY_GFWV5znPNZfty9EShNKFrMiNVLeKkKOe046I8giwgnBCGa1dd5XdvGChlCabrEDyQmrkP7p22KdKESLcxaUbsPKVloYkT-F1yQ'
    });
    console.log('ENTRO')
    const deckgl = new deck.DeckGL({
      container: 'map',
      mapStyle: deck.carto.BASEMAP.VOYAGER,

      initialViewState: {
        latitude: 0,
        longitude: 0,
        zoom: 1,
      },
      controller: true,

      layers: [
        new deck.carto.CartoLayer({
          id: 'prueba',
          connection: 'bqconn',
          type:...