@deck.gl/carto 9.0.0-beta.1 → 9.0.0-beta.11

package/package.json

@@ -2,7 +2,8 @@
   "name": "@deck.gl/carto",
   "description": "CARTO official integration with Deck.gl. Build geospatial applications using CARTO and Deck.gl.",
   "license": "MIT",
-  "version": "9.0.0-beta.1",
+  "type": "module",
+  "version": "9.0.0-beta.11",
   "publishConfig": {
     "access": "public"
   },
@@ -18,13 +19,19 @@
     "type": "git",
     "url": "https://github.com/visgl/deck.gl.git"
   },
-  "main": "dist/es5/index.js",
-  "module": "dist/esm/index.js",
-  "types": "typed/index.d.ts",
+  "types": "dist/index.d.ts",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
   "files": [
     "dist",
     "src",
-    "typed",
     "dist.min.js"
   ],
   "sideEffects": false,
@@ -35,37 +42,35 @@
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env=dev"
   },
   "dependencies": {
-    "@babel/runtime": "^7.0.0",
-    "@loaders.gl/gis": "4.1.0-alpha.9",
-    "@loaders.gl/loader-utils": "4.1.0-alpha.9",
-    "@loaders.gl/mvt": "4.1.0-alpha.9",
-    "@loaders.gl/tiles": "4.1.0-alpha.9",
-    "@luma.gl/constants": "9.0.0-alpha.54",
-    "@luma.gl/core": "9.0.0-alpha.54",
+    "@loaders.gl/gis": "^4.2.0",
+    "@loaders.gl/loader-utils": "^4.2.0",
+    "@loaders.gl/mvt": "^4.2.0",
+    "@loaders.gl/schema": "^4.2.0",
+    "@loaders.gl/tiles": "^4.2.0",
+    "@luma.gl/constants": "^9.0.11",
     "@math.gl/web-mercator": "^4.0.0",
+    "@types/d3-array": "^3.0.2",
+    "@types/d3-color": "^1.4.2",
+    "@types/d3-scale": "^3.0.0",
     "cartocolor": "^4.0.2",
     "d3-array": "^3.2.0",
     "d3-color": "^3.1.0",
     "d3-format": "^3.1.0",
     "d3-scale": "^4.0.0",
+    "earcut": "^2.2.4",
     "h3-js": "^4.1.0",
     "moment-timezone": "^0.5.33",
     "pbf": "^3.2.1",
-    "quadbin": "^0.1.9"
-  },
-  "devDependencies": {
-    "@loaders.gl/schema": "4.1.0-alpha.9",
-    "@types/d3-array": "^3.0.2",
-    "@types/d3-color": "^1.4.2",
-    "@types/d3-scale": "^3.0.0"
+    "quadbin": "^0.2.0"
   },
   "peerDependencies": {
-    "@deck.gl/aggregation-layers": "^9.0.0-alpha",
-    "@deck.gl/core": "^9.0.0-alpha",
-    "@deck.gl/extensions": "^9.0.0-alpha",
-    "@deck.gl/geo-layers": "^9.0.0-alpha",
-    "@deck.gl/layers": "^9.0.0-alpha",
-    "@loaders.gl/core": "4.1.0-alpha.9"
+    "@deck.gl/aggregation-layers": "^9.0.0-beta",
+    "@deck.gl/core": "^9.0.0-beta",
+    "@deck.gl/extensions": "^9.0.0-beta",
+    "@deck.gl/geo-layers": "^9.0.0-beta",
+    "@deck.gl/layers": "^9.0.0-beta",
+    "@loaders.gl/core": "^4.2.0",
+    "@luma.gl/core": "^9.0.0"
   },
-  "gitHead": "9628417918bec5cc73c1345bfcd2f2be575741f1"
+  "gitHead": "d8a3f5bdb644f85caba9d5c1e74baff8f8a3d439"
 }

package/src/api/common.ts

@@ -1,11 +1,13 @@
+import {VERSION} from '@deck.gl/core';
+
 export const DEFAULT_API_BASE_URL = 'https://gcp-us-east1.api.carto.com';
 export const DEFAULT_CLIENT = 'deck-gl-carto';
-export const V3_MINOR_VERSION = '3.3';
+export const V3_MINOR_VERSION = '3.4';
 export const MAX_GET_LENGTH = 8192;
 
 export const DEFAULT_PARAMETERS = {
-  client: DEFAULT_CLIENT,
-  v: V3_MINOR_VERSION
+  v: V3_MINOR_VERSION,
+  deckglVersion: VERSION
 };
 
 export const DEFAULT_HEADERS = {

package/src/api/fetch-map.ts

@@ -16,7 +16,7 @@ import {
   vectorQuerySource,
   vectorTableSource,
   vectorTilesetSource
-} from '../sources';
+} from '../sources/index';
 import {parseMap} from './parse-map';
 import {requestWithParameters} from './request-with-parameters';
 import {assert} from '../utils';
@@ -80,19 +80,24 @@ async function _fetchMapDataset(
       if (type === 'table') {
         dataset.data = await vectorTableSource({...options, columns, tableName: source});
       } else if (type === 'query') {
-        dataset.data = await vectorQuerySource({...options, sqlQuery: source, queryParameters});
+        dataset.data = await vectorQuerySource({
+          ...options,
+          columns,
+          sqlQuery: source,
+          queryParameters
+        });
       }
     } else if (spatialDataType === 'h3') {
       const options = {...globalOptions, aggregationExp, aggregationResLevel, spatialDataColumn};
       if (type === 'table') {
-        dataset.data = await h3TableSource({...options, columns, tableName: source});
+        dataset.data = await h3TableSource({...options, tableName: source});
       } else if (type === 'query') {
         dataset.data = await h3QuerySource({...options, sqlQuery: source, queryParameters});
       }
     } else if (spatialDataType === 'quadbin') {
       const options = {...globalOptions, aggregationExp, aggregationResLevel, spatialDataColumn};
       if (type === 'table') {
-        dataset.data = await quadbinTableSource({...options, columns, tableName: source});
+        dataset.data = await quadbinTableSource({...options, tableName: source});
       } else if (type === 'query') {
         dataset.data = await quadbinQuerySource({...options, sqlQuery: source, queryParameters});
       }
@@ -125,8 +130,12 @@ async function _fetchTilestats(
   }
 
   const baseUrl = buildStatsUrl({attribute, apiBaseUrl, ...dataset});
+  const client = new URLSearchParams(data.tiles[0]).get('client');
   const headers = {Authorization: `Bearer ${accessToken}`};
   const parameters: Record<string, string> = {};
+  if (client) {
+    parameters.client = client;
+  }
   if (type === 'query') {
     parameters.q = source;
     if (queryParameters) {

package/src/api/query.ts

@@ -1,4 +1,4 @@
-import {SOURCE_DEFAULTS} from '../sources';
+import {SOURCE_DEFAULTS} from '../sources/index';
 import type {SourceOptions, QuerySourceOptions, QueryResult} from '../sources/types';
 import {buildQueryUrl} from './endpoints';
 import {requestWithParameters} from './request-with-parameters';

package/src/api/request-with-parameters.ts

@@ -9,60 +9,68 @@ function encodeParameter(name: string, value: string | boolean | number): string
   return `${name}=${encodeURIComponent(value)}`;
 }
 
-const REQUEST_CACHE = new Map();
+const REQUEST_CACHE = new Map<string, Promise<unknown>>();
 export async function requestWithParameters<T = any>({
-  accessToken,
   baseUrl,
   parameters,
   headers: customHeaders,
   errorContext
 }: {
-  accessToken?: string;
   baseUrl: string;
   parameters?: Record<string, string>;
   headers: Record<string, string>;
   errorContext: APIErrorContext;
 }): Promise<T> {
-  const key = JSON.stringify({baseUrl, parameters, customHeaders});
+  const key = createCacheKey(baseUrl, parameters || {}, customHeaders || {});
   if (REQUEST_CACHE.has(key)) {
-    return REQUEST_CACHE.get(key);
-  }
-
-  let url = baseUrl;
-  if (parameters) {
-    const allParameters = {...DEFAULT_PARAMETERS, ...parameters};
-    const encodedParameters = Object.entries(allParameters).map(([key, value]) => {
-      return encodeParameter(key, value);
-    });
-    url += `?${encodedParameters.join('&')}`;
+    return REQUEST_CACHE.get(key) as Promise<T>;
   }
 
+  const url = parameters ? createURLWithParameters(baseUrl, parameters) : baseUrl;
   const headers = {...DEFAULT_HEADERS, ...customHeaders};
-  try {
-    /* global fetch */
-    let response: Response;
-    if (url.length > MAX_GET_LENGTH) {
-      response = await fetch(baseUrl, {method: 'POST', body: JSON.stringify(parameters), headers});
-    } else {
-      response = await fetch(url, {headers});
-    }
-    let json: any;
-    try {
-      json = await response.json();
-      if (accessToken) {
-        json.accessToken = accessToken;
+
+  /* global fetch */
+  const fetchPromise =
+    url.length > MAX_GET_LENGTH
+      ? fetch(baseUrl, {method: 'POST', body: JSON.stringify(parameters), headers})
+      : fetch(url, {headers});
+
+  let response: Response | undefined;
+  const jsonPromise: Promise<T> = fetchPromise
+    .then((_response: Response) => {
+      response = _response;
+      return response.json();
+    })
+    .then((json: any) => {
+      if (!response || !response.ok) {
+        throw new Error(json.error);
       }
-    } catch {
-      json = {error: ''};
-    }
-    if (!response.ok) {
+      return json;
+    })
+    .catch((error: Error) => {
       REQUEST_CACHE.delete(key);
-      throw new CartoAPIError(json.error, errorContext, response);
-    }
+      throw new CartoAPIError(error, errorContext, response);
+    });
 
-    REQUEST_CACHE.set(key, json);
-    return json;
-  } catch (error) {
-    throw new CartoAPIError(error as Error, errorContext);
-  }
+  REQUEST_CACHE.set(key, jsonPromise);
+  return jsonPromise;
+}
+
+function createCacheKey(
+  baseUrl: string,
+  parameters: Record<string, string>,
+  headers: Record<string, string>
+): string {
+  const parameterEntries = Object.entries(parameters).sort(([a], [b]) => (a > b ? 1 : -1));
+  const headerEntries = Object.entries(headers).sort(([a], [b]) => (a > b ? 1 : -1));
+  return JSON.stringify({baseUrl, parameters: parameterEntries, headers: headerEntries});
+}
+
+function createURLWithParameters(baseUrl: string, parameters: Record<string, string>): string {
+  const encodedParameters = Object.entries({...DEFAULT_PARAMETERS, ...parameters}).map(
+    ([key, value]) => {
+      return encodeParameter(key, value);
+    }
+  );
+  return `${baseUrl}?${encodedParameters.join('&')}`;
 }

package/src/api/types.ts

@@ -54,6 +54,26 @@ export type VisualChannelField = {
   colorColumn?: string;
 };
 
+export interface Filters {
+  [column: string]: Filter;
+}
+
+interface Filter {
+  [FilterTypes.In]: number[];
+  [FilterTypes.Between]: number[][];
+  [FilterTypes.ClosedOpen]: number[][];
+  [FilterTypes.Time]: number[][];
+  [FilterTypes.StringSearch]: string[];
+}
+
+export enum FilterTypes {
+  In = 'in',
+  Between = 'between', // [a, b] both are included
+  ClosedOpen = 'closed_open', // [a, b) a is included, b is not
+  Time = 'time',
+  StringSearch = 'stringSearch'
+}
+
 export type VisualChannels = {
   colorField?: VisualChannelField;
   colorScale?: SCALE_TYPE;

package/src/constants.ts

@@ -0,0 +1,5 @@
+export const DEFAULT_TILE_SIZE = 512;
+export const DEFAULT_TILE_RESOLUTION = 0.5;
+
+export const DEFAULT_AGGREGATION_RES_LEVEL_H3 = 4;
+export const DEFAULT_AGGREGATION_RES_LEVEL_QUADBIN = 6;

package/src/index.ts

@@ -23,7 +23,7 @@ export {default as BASEMAP} from './basemap';
 export {default as colorBins} from './style/color-bins-style';
 export {default as colorCategories} from './style/color-categories-style';
 export {default as colorContinuous} from './style/color-continuous-style';
-export {CartoAPIError, fetchMap, query} from './api';
+export {CartoAPIError, fetchMap, query} from './api/index';
 export type {
   APIErrorContext,
   FetchMapOptions,
@@ -32,7 +32,7 @@ export type {
   RequestType,
   QueryParameters,
   QueryOptions
-} from './api';
+} from './api/index';
 
 import {
   boundaryQuerySource,
@@ -48,7 +48,7 @@ import {
   vectorTableSource,
   vectorTilesetSource,
   SOURCE_DEFAULTS
-} from './sources';
+} from './sources/index';
 
 const CARTO_SOURCES = {
   boundaryQuerySource,
@@ -83,7 +83,13 @@ export {
 };
 
 export type {
+  GeojsonResult,
+  JsonResult,
   TilejsonResult,
+  SourceOptions,
+  QuerySourceOptions,
+  TableSourceOptions,
+  TilesetSourceOptions,
   BoundaryQuerySourceOptions,
   BoundaryTableSourceOptions,
   H3QuerySourceOptions,
@@ -95,7 +101,5 @@ export type {
   QuadbinTilesetSourceOptions,
   VectorQuerySourceOptions,
   VectorTableSourceOptions,
-  VectorTilesetSourceOptions,
-  GeojsonResult,
-  JsonResult
-} from './sources';
+  VectorTilesetSourceOptions
+} from './sources/index';

package/src/layers/h3-tile-layer.ts

@@ -4,6 +4,7 @@ import H3Tileset2D, {getHexagonResolution} from './h3-tileset-2d';
 import SpatialIndexTileLayer, {SpatialIndexTileLayerProps} from './spatial-index-tile-layer';
 import type {TilejsonResult} from '../sources/types';
 import {injectAccessToken, TilejsonPropType} from './utils';
+import {DEFAULT_TILE_SIZE} from '../constants';
 
 export const renderSubLayers = props => {
   const {data} = props;
@@ -18,7 +19,8 @@ export const renderSubLayers = props => {
 };
 
 const defaultProps: DefaultProps<H3TileLayerProps> = {
-  data: TilejsonPropType
+  data: TilejsonPropType,
+  tileSize: DEFAULT_TILE_SIZE
 };
 
 /** All properties supported by H3TileLayer. */
@@ -59,13 +61,13 @@ export default class H3TileLayer<DataT = any, ExtraPropsT extends {} = {}> exten
     if (this.props.minZoom) {
       minresolution = Math.max(
         minresolution,
-        getHexagonResolution({zoom: this.props.minZoom, latitude: 0})
+        getHexagonResolution({zoom: this.props.minZoom, latitude: 0}, this.props.tileSize)
       );
     }
     if (this.props.maxZoom) {
       maxresolution = Math.min(
         maxresolution,
-        getHexagonResolution({zoom: this.props.maxZoom, latitude: 0})
+        getHexagonResolution({zoom: this.props.maxZoom, latitude: 0}, this.props.tileSize)
       );
     }
 

package/src/layers/h3-tileset-2d.ts

@@ -5,11 +5,43 @@ import {
   getResolution,
   cellToBoundary,
   cellToParent,
-  gridDisk
+  gridDisk,
+  edgeLength,
+  UNITS,
+  originToDirectedEdges
 } from 'h3-js';
 
 export type H3TileIndex = {i: string};
 
+const MAX_LATITUDE = 85.051128;
+
+// `polygonToCells()` fills based on hexagon center, this function will
+// pad the bounds such that all cells that overlap the bounds will be included
+function padBoundingBox(
+  {west, north, east, south}: GeoBoundingBox,
+  resolution: number
+): GeoBoundingBox {
+  const corners = [
+    [north, east],
+    [south, east],
+    [south, west],
+    [north, west]
+  ];
+  const cornerCells = corners.map(c => latLngToCell(c[0], c[1], resolution));
+  const cornerEdgeLengths = cornerCells.map(
+    c => (Math.max(...originToDirectedEdges(c).map(e => edgeLength(e, UNITS.rads))) * 180) / Math.PI
+  );
+  const bufferLat = Math.max(...cornerEdgeLengths);
+  const bufferLon = Math.min(180, bufferLat / Math.cos((((north + south) / 2) * Math.PI) / 180));
+
+  return {
+    north: Math.min(north + bufferLat, MAX_LATITUDE),
+    east: east + bufferLon,
+    south: Math.max(south - bufferLat, -MAX_LATITUDE),
+    west: west - bufferLon
+  };
+}
+
 function getHexagonsInBoundingBox(
   {west, north, east, south}: GeoBoundingBox,
   resolution: number
@@ -21,8 +53,8 @@ function getHexagonsInBoundingBox(
     const nSegments = Math.ceil(longitudeSpan / 180);
     let h3Indices: string[] = [];
     for (let s = 0; s < nSegments; s++) {
-      const segmentEast = east + s * 180;
-      const segmentWest = Math.min(segmentEast + 179.9999999, west);
+      const segmentWest = west + s * 180;
+      const segmentEast = Math.min(segmentWest + 179.9999999, east);
       h3Indices = h3Indices.concat(
         getHexagonsInBoundingBox({west: segmentWest, north, east: segmentEast, south}, resolution)
       );
@@ -30,24 +62,14 @@ function getHexagonsInBoundingBox(
     return [...new Set(h3Indices)];
   }
 
-  // `polygonToCells()` fills based on hexagon center, which means tiles vanish
-  // prematurely. Get more accurate coverage by oversampling
-  const oversample = 2;
-  const h3Indices = polygonToCells(
-    [
-      [
-        [west, north],
-        [west, south],
-        [east, south],
-        [east, north],
-        [west, north]
-      ]
-    ],
-    resolution + oversample,
-    true
-  );
-
-  return oversample ? [...new Set(h3Indices.map(i => cellToParent(i, resolution)))] : h3Indices;
+  const polygon = [
+    [north, east],
+    [south, east],
+    [south, west],
+    [north, west],
+    [north, east]
+  ];
+  return polygonToCells(polygon, resolution);
 }
 
 function tileToBoundingBox(index: string): GeoBoundingBox {
@@ -66,8 +88,14 @@ function tileToBoundingBox(index: string): GeoBoundingBox {
 // similar
 // Relative scale factor (0 = no biasing, 2 = a few hexagons cover view)
 const BIAS = 2;
-export function getHexagonResolution(viewport): number {
-  const hexagonScaleFactor = (2 / 3) * viewport.zoom;
+export function getHexagonResolution(
+  viewport: {zoom: number; latitude: number},
+  tileSize: number
+): number {
+  // Difference in given tile size compared to deck's internal 512px tile size,
+  // expressed as an offset to the viewport zoom.
+  const zoomOffset = Math.log2(tileSize / 512);
+  const hexagonScaleFactor = (2 / 3) * (viewport.zoom - zoomOffset);
   const latitudeScaleFactor = Math.log(1 / Math.cos((Math.PI * viewport.latitude) / 180));
 
   // Clip and bias
@@ -83,9 +111,10 @@ export default class H3Tileset2D extends Tileset2D {
   // @ts-expect-error Tileset2D should be generic over TileIndex
   getTileIndices({viewport, minZoom, maxZoom}): H3TileIndex[] {
     if (viewport.latitude === undefined) return [];
-    const [east, south, west, north] = viewport.getBounds();
+    const [west, south, east, north] = viewport.getBounds();
+    const {tileSize} = this.opts;
 
-    let z = getHexagonResolution(viewport);
+    let z = getHexagonResolution(viewport, tileSize);
     let indices: string[];
     if (typeof minZoom === 'number' && Number.isFinite(minZoom) && z < minZoom) {
       // TODO support `extent` prop
@@ -99,7 +128,8 @@ export default class H3Tileset2D extends Tileset2D {
       const center = latLngToCell(viewport.latitude, viewport.longitude, maxZoom);
       indices = gridDisk(center, 1);
     } else {
-      indices = getHexagonsInBoundingBox({west, north, east, south}, z);
+      const paddedBounds = padBoundingBox({west, north, east, south}, z);
+      indices = getHexagonsInBoundingBox(paddedBounds, z);
     }
 
     return indices.map(i => ({i}));

package/src/layers/quadbin-tile-layer.ts

@@ -5,6 +5,7 @@ import SpatialIndexTileLayer, {SpatialIndexTileLayerProps} from './spatial-index
 import {hexToBigInt} from 'quadbin';
 import type {TilejsonResult} from '../sources/types';
 import {injectAccessToken, TilejsonPropType} from './utils';
+import {DEFAULT_TILE_SIZE} from '../constants';
 
 export const renderSubLayers = props => {
   const {data} = props;
@@ -16,7 +17,8 @@ export const renderSubLayers = props => {
 };
 
 const defaultProps: DefaultProps<QuadbinTileLayerProps> = {
-  data: TilejsonPropType
+  data: TilejsonPropType,
+  tileSize: DEFAULT_TILE_SIZE
 };
 
 /** All properties supported by QuadbinTileLayer. */

package/src/layers/raster-layer-vertex.glsl.ts

@@ -32,8 +32,8 @@ void main(void) {
   vec2 common_position = offset.xy;
   float scale = offset.z;
 
-  int yIndex = - (gl_InstanceID / 256);
-  int xIndex = gl_InstanceID + (yIndex * 256);
+  int yIndex = - (gl_InstanceID / BLOCK_WIDTH);
+  int xIndex = gl_InstanceID + (yIndex * BLOCK_WIDTH);
   common_position += scale * vec2(float(xIndex), float(yIndex));
 
   vec4 color = isStroke ? instanceLineColors : instanceFillColors;

package/src/layers/raster-layer.ts

@@ -1,4 +1,3 @@
-import {GL} from '@luma.gl/constants';
 import {
   Accessor,
   CompositeLayer,
@@ -11,7 +10,7 @@ import {ColumnLayer, ColumnLayerProps} from '@deck.gl/layers';
 import {quadbinToOffset} from './quadbin-utils';
 import {Raster} from './schema/carto-raster-tile-loader';
 import vs from './raster-layer-vertex.glsl';
-import {assert, createBinaryProxy} from '../utils';
+import {createBinaryProxy} from '../utils';
 
 const defaultProps: DefaultProps<RasterLayerProps> = {
   ...ColumnLayer.defaultProps,
@@ -31,7 +30,9 @@ class RasterColumnLayer extends ColumnLayer {
 
   getShaders() {
     const shaders = super.getShaders();
-    return {...shaders, vs};
+    const data = this.props.data as unknown as {data: Raster; length: number};
+    const BLOCK_WIDTH = data.data.blockSize ?? Math.sqrt(data.length);
+    return {...shaders, defines: {...shaders.defines, BLOCK_WIDTH}, vs};
   }
 
   initializeState() {
@@ -46,16 +47,14 @@ class RasterColumnLayer extends ColumnLayer {
       },
       instanceFillColors: {
         size: this.props.colorFormat.length,
-        type: GL.UNSIGNED_BYTE,
-        normalized: true,
+        type: 'unorm8',
         transition: true,
         accessor: 'getFillColor',
         defaultValue: [0, 0, 0, 255]
       },
       instanceLineColors: {
         size: this.props.colorFormat.length,
-        type: GL.UNSIGNED_BYTE,
-        normalized: true,
+        type: 'unorm8',
         transition: true,
         accessor: 'getLineColor',
         defaultValue: [255, 255, 255, 255]
@@ -94,17 +93,12 @@ export default class RasterLayer<DataT = any, ExtraProps = {}> extends Composite
       getLineWidth,
       tileIndex,
       updateTriggers
-    } = this.props;
+    } = this.props as typeof this.props & {data: Raster};
     if (!data || !tileIndex) return null;
 
-    const {blockWidth, blockHeight} = data as unknown as Raster;
-    assert(
-      blockWidth === blockHeight,
-      `blockWidth (${blockWidth}) must equal blockHeight (${blockHeight})`
-    );
-
+    const blockSize = data.blockSize ?? 0;
     const [xOffset, yOffset, scale] = quadbinToOffset(tileIndex);
-    const offset = [xOffset, yOffset, scale / blockWidth];
+    const offset = [xOffset, yOffset, scale / blockSize];
 
     // Filled Column Layer
     const CellLayer = this.getSubLayerClass('column', RasterColumnLayer);
@@ -122,7 +116,7 @@ export default class RasterLayer<DataT = any, ExtraProps = {}> extends Composite
       {
         data: {
           data, // Pass through data for getSubLayerAccessor()
-          length: blockWidth * blockHeight
+          length: blockSize * blockSize
         },
         offset
       }

package/src/layers/raster-tile-layer.ts

@@ -4,6 +4,7 @@ import QuadbinTileset2D from './quadbin-tileset-2d';
 import SpatialIndexTileLayer, {SpatialIndexTileLayerProps} from './spatial-index-tile-layer';
 import type {TilejsonResult} from '../sources/types';
 import {injectAccessToken, TilejsonPropType} from './utils';
+import {DEFAULT_TILE_SIZE} from '../constants';
 
 export const renderSubLayers = props => {
   const tileIndex = props.tile?.index?.q;
@@ -12,7 +13,8 @@ export const renderSubLayers = props => {
 };
 
 const defaultProps: DefaultProps<RasterTileLayerProps> = {
-  data: TilejsonPropType
+  data: TilejsonPropType,
+  tileSize: DEFAULT_TILE_SIZE
 };
 
 /** All properties supported by RasterTileLayer. */

package/src/layers/schema/carto-raster-tile-loader.ts

@@ -36,8 +36,8 @@ const CartoRasterTileLoader: LoaderWithParser = {
 };
 
 export type Raster = {
-  blockWidth: number;
-  blockHeight: number;
+  /** Raster tiles are square, with 'blockSize' width and height in pixels. */
+  blockSize: number;
   cells: {
     numericProps: NumericProps;
     properties: Properties[];
@@ -49,14 +49,14 @@ function parseCartoRasterTile(
   options?: CartoRasterTileLoaderOptions
 ): Raster | null {
   if (!arrayBuffer) return null;
-  const tile = parsePbf(arrayBuffer, TileReader);
-  const {bands, blockHeight, blockWidth} = tile;
+  const {bands, blockSize} = parsePbf(arrayBuffer, TileReader);
+
   const numericProps = {};
   for (let i = 0; i < bands.length; i++) {
     const {name, data} = bands[i];
     numericProps[name] = data;
   }
-  return {blockWidth, blockHeight, cells: {numericProps, properties: []}};
+  return {blockSize, cells: {numericProps, properties: []}};
 }
 
 export default CartoRasterTileLoader;