Spatial index bug

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} = deck.carto;
const accessToken = 'eyJhbGciOiJIUzI1NiJ9.eyJhIjoiYWNfN3hoZnd5bWwiLCJqdGkiOiI5OTE5MTlmOSJ9.HNk0xPiPlMvUV_oRcV0t4j2hsqfhB7SqFfrH26O3s-E'


if (!accessToken) {
  alert('Please, define an 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: 'bigquery',
    // carto-dev-data.public.derived_spatialfeatures_usa_quadgrid18_v1_yearly_v2_only_pop',
    // carto-dev-data.public.derived_spatialfeatures_che_h3res10_v1_yearly_v2_interpolated
		// carto-dev-data.tilesets.derived_spatialfeatures_usa_quadgrid18_v1_yearly_v2_only_pop_tileset
    // carto-dev-data.tilesets.derived_spatialfeatures_esp_h3res8_v1_yearly_v2_tileset
    data: 'carto-dev-data.tilesets.derived_spatialfeatures_esp_h3res8_v1_yearly_v2_tileset',
    type: MAP_TYPES.TILESET,
    //geoColumn: 'quadint',
    //aggregationExp: 'sum(population) as population, max(population) as max',
    // aggregationResLevel: 6,
    credentials: {accessToken},
    getFillColor:  colorBins({
      attr: 'pop',
      domain,
      colors: 'TealGrn'
    }),
    // extruded: true,
    stroked: true,
    filled: true,
    lineWidthMinPixels: 0.1,
    getLineColor: [0, 0, 200]
  });

  // update layers in deck.gl.
  deckgl.setProps({layers: [layer]});
}