@deck.gl/carto 9.1.8 → 9.1.10

package/package.json

@@ -3,7 +3,7 @@
   "description": "CARTO official integration with Deck.gl. Build geospatial applications using CARTO and Deck.gl.",
   "license": "MIT",
   "type": "module",
-  "version": "9.1.8",
+  "version": "9.1.10",
   "publishConfig": {
     "access": "public"
   },
@@ -75,5 +75,5 @@
     "@loaders.gl/core": "^4.2.0",
     "@luma.gl/core": "^9.1.5"
   },
-  "gitHead": "00a1cd81ed7ce2b7c14598e1e599b2cb3d8a015f"
+  "gitHead": "f0dc529ad3196bcdbf4acb842c7aa81ca13cb689"
 }

package/src/api/fetch-map.ts

@@ -2,6 +2,8 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
+/* eslint-disable @typescript-eslint/no-shadow */
+
 import {
   DEFAULT_API_BASE_URL,
   APIErrorContext,

package/src/api/parse-map.ts

@@ -2,6 +2,8 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
+/* eslint-disable no-shadow */
+
 import {ColorParameters} from '@luma.gl/core';
 import {Layer, log} from '@deck.gl/core';
 import {

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

@@ -2,6 +2,8 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
+/* eslint-disable no-shadow */
+
 import {GeoJsonLayer, GeoJsonLayerProps} from '@deck.gl/layers';
 import {
   TileLayer,
@@ -38,7 +40,7 @@ import {DEFAULT_TILE_SIZE} from '../constants';
 import QuadbinTileset2D from './quadbin-tileset-2d';
 import {getQuadbinPolygon} from './quadbin-utils';
 import CartoSpatialTileLoader from './schema/carto-spatial-tile-loader';
-import {injectAccessToken, TilejsonPropType} from './utils';
+import {TilejsonPropType, mergeLoadOptions} from './utils';
 import type {TilejsonResult} from '@carto/api-client';
 
 registerLoaders([CartoSpatialTileLoader]);
@@ -216,11 +218,11 @@ export default class ClusterTileLayer<
   static defaultProps = defaultProps;
 
   getLoadOptions(): any {
-    const loadOptions = super.getLoadOptions() || {};
     const tileJSON = this.props.data as TilejsonResult;
-    injectAccessToken(loadOptions, tileJSON.accessToken);
-    loadOptions.cartoSpatialTile = {...loadOptions.cartoSpatialTile, scheme: 'quadbin'};
-    return loadOptions;
+    return mergeLoadOptions(super.getLoadOptions(), {
+      fetch: {headers: {Authorization: `Bearer ${tileJSON.accessToken}`}},
+      cartoSpatialTile: {scheme: 'quadbin'}
+    });
   }
 
   renderLayers(): Layer | null | LayersList {

package/src/layers/cluster-utils.ts

@@ -6,6 +6,7 @@ import {cellToParent} from 'quadbin';
 import {_Tile2DHeader as Tile2DHeader} from '@deck.gl/geo-layers';
 import {Accessor, log} from '@deck.gl/core';
 import {BinaryFeatureCollection} from '@loaders.gl/schema';
+import {createBinaryPointFeature, createEmptyBinary} from '../utils';
 
 export type Aggregation = 'any' | 'average' | 'count' | 'min' | 'max' | 'sum';
 export type AggregationProperties<FeaturePropertiesT> = {
@@ -137,15 +138,6 @@ export function computeAggregationStats<FeaturePropertiesT>(
   return stats;
 }
 
-const EMPTY_UINT16ARRAY = new Uint16Array();
-const EMPTY_BINARY_PROPS = {
-  positions: {value: new Float32Array(), size: 2},
-  properties: [],
-  numericProps: {},
-  featureIds: {value: EMPTY_UINT16ARRAY, size: 1},
-  globalFeatureIds: {value: EMPTY_UINT16ARRAY, size: 1}
-};
-
 type BinaryFeatureCollectionWithStats<FeaturePropertiesT> = Omit<
   BinaryFeatureCollection,
   'points'
@@ -168,25 +160,7 @@ export function clustersToBinary<FeaturePropertiesT>(
   }
 
   return {
-    shape: 'binary-feature-collection',
-    points: {
-      type: 'Point',
-      positions: {value: positions, size: 2},
-      properties: data,
-      numericProps: {},
-      featureIds: {value: featureIds, size: 1},
-      globalFeatureIds: {value: featureIds, size: 1}
-    },
-    lines: {
-      type: 'LineString',
-      pathIndices: {value: EMPTY_UINT16ARRAY, size: 1},
-      ...EMPTY_BINARY_PROPS
-    },
-    polygons: {
-      type: 'Polygon',
-      polygonIndices: {value: EMPTY_UINT16ARRAY, size: 1},
-      primitivePolygonIndices: {value: EMPTY_UINT16ARRAY, size: 1},
-      ...EMPTY_BINARY_PROPS
-    }
+    ...createEmptyBinary(),
+    points: createBinaryPointFeature(positions, featureIds, featureIds, {}, data)
   };
 }

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

@@ -2,12 +2,12 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {CompositeLayer, CompositeLayerProps, Layer, LayersList, DefaultProps} from '@deck.gl/core';
+import {CompositeLayer, CompositeLayerProps, DefaultProps} from '@deck.gl/core';
 import {H3HexagonLayer, H3HexagonLayerProps} from '@deck.gl/geo-layers';
 import H3Tileset2D, {getHexagonResolution} from './h3-tileset-2d';
 import SpatialIndexTileLayer, {SpatialIndexTileLayerProps} from './spatial-index-tile-layer';
 import type {TilejsonResult} from '@carto/api-client';
-import {injectAccessToken, TilejsonPropType} from './utils';
+import {TilejsonPropType, mergeLoadOptions} from './utils';
 import {DEFAULT_TILE_SIZE} from '../constants';
 
 export const renderSubLayers = props => {
@@ -47,11 +47,11 @@ export default class H3TileLayer<DataT = any, ExtraPropsT extends {} = {}> exten
   }
 
   getLoadOptions(): any {
-    const loadOptions = super.getLoadOptions() || {};
     const tileJSON = this.props.data as TilejsonResult;
-    injectAccessToken(loadOptions, tileJSON.accessToken);
-    loadOptions.cartoSpatialTile = {...loadOptions.cartoSpatialTile, scheme: 'h3'};
-    return loadOptions;
+    return mergeLoadOptions(super.getLoadOptions(), {
+      fetch: {headers: {Authorization: `Bearer ${tileJSON.accessToken}`}},
+      cartoSpatialTile: {scheme: 'h3'}
+    });
   }
 
   renderLayers(): SpatialIndexTileLayer | null {

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

@@ -2,6 +2,8 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
+/* eslint-disable @typescript-eslint/no-shadow */
+
 import type {ShaderModule} from '@luma.gl/shadertools';
 import {getResolution} from 'quadbin';
 
@@ -235,7 +237,13 @@ class HeatmapTileLayer<DataT = any, ExtraProps extends {} = {}> extends Composit
 
     let tileZ = 0;
     let maxDensity = 0;
-    const tiles = [...this.state.tiles].filter(t => t.isVisible && t.content);
+    const loadedTiles = [...this.state.tiles].filter(t => t.content);
+    const visibleTiles = loadedTiles.filter(t => t.isVisible);
+
+    // As deck.gl initially marks tiles as hidden, use hidden tiles as fallback for calculation.
+    // This avoids an ugly flash/glitch at startup when layer is first rendered
+    const tiles = visibleTiles.length ? visibleTiles : loadedTiles;
+
     for (const tile of tiles) {
       const cell = tile.content[0];
       const unitDensity = unitDensityForCell(cell.id);

package/src/layers/label-utils.ts

@@ -0,0 +1,304 @@
+import {GeoBoundingBox} from '@deck.gl/geo-layers';
+import {TypedArray} from '@loaders.gl/loader-utils';
+import {BinaryPointFeature, BinaryLineFeature, BinaryPolygonFeature} from '@loaders.gl/schema';
+import {copyNumericProps, createBinaryPointFeature, initializeNumericProps} from '../utils';
+
+type Vec2 = [number, number] | TypedArray;
+type TileBBox = GeoBoundingBox;
+type Properties = BinaryPointFeature['properties'];
+type LineInfo = {index: number; length: number};
+
+export function createPointsFromLines(
+  lines: BinaryLineFeature,
+  uniqueIdProperty?: string
+): BinaryPointFeature | null {
+  const hasNumericUniqueId = uniqueIdProperty ? uniqueIdProperty in lines.numericProps : false;
+  const idToLineInfo = new Map<string | number | undefined, LineInfo>();
+
+  // First pass: find the longest line for each unique ID
+  // If we don't have a uniqueIdProperty, treat each line as unique
+  for (let i = 0; i < lines.pathIndices.value.length - 1; i++) {
+    const pathIndex = lines.pathIndices.value[i];
+    const featureId = lines.featureIds.value[pathIndex];
+    let uniqueId: string | number | undefined;
+
+    if (uniqueIdProperty === undefined) {
+      uniqueId = featureId;
+    } else if (hasNumericUniqueId) {
+      uniqueId = lines.numericProps[uniqueIdProperty].value[pathIndex];
+    } else if (lines.properties[featureId] && uniqueIdProperty in lines.properties[featureId]) {
+      uniqueId = lines.properties[featureId][uniqueIdProperty];
+    } else {
+      uniqueId = undefined;
+    }
+    const length = getLineLength(lines, i);
+    if (!idToLineInfo.has(uniqueId) || length > idToLineInfo.get(uniqueId)!.length) {
+      idToLineInfo.set(uniqueId, {index: i, length});
+    }
+  }
+
+  const positions: number[] = [];
+  const properties: Properties = [];
+  const featureIds: number[] = [];
+  const globalFeatureIds: number[] = [];
+  const numericProps = initializeNumericProps(idToLineInfo.size, lines.numericProps);
+
+  // Second pass: create points for the longest line of each unique ID
+  let pointIndex = 0;
+  for (const [_, {index}] of idToLineInfo) {
+    const midpoint = getLineMidpoint(lines, index);
+    positions.push(...midpoint);
+
+    const pathIndex = lines.pathIndices.value[index];
+    const featureId = lines.featureIds.value[pathIndex];
+    featureIds.push(pointIndex);
+    properties.push(lines.properties[featureId]);
+    globalFeatureIds.push(lines.globalFeatureIds.value[pathIndex]);
+    copyNumericProps(lines.numericProps, numericProps, pathIndex, pointIndex);
+    pointIndex++;
+  }
+
+  return createBinaryPointFeature(
+    positions,
+    featureIds,
+    globalFeatureIds,
+    numericProps,
+    properties
+  );
+}
+
+export function createPointsFromPolygons(
+  polygons: Required<BinaryPolygonFeature>,
+  tileBbox: TileBBox,
+  props: any
+): BinaryPointFeature {
+  const {west, south, east, north} = tileBbox;
+  const tileArea = (east - west) * (north - south);
+  const minPolygonArea = tileArea * 0.0001; // 0.1% threshold
+
+  const positions: number[] = [];
+  const properties: Properties = [];
+  const featureIds: number[] = [];
+  const globalFeatureIds: number[] = [];
+  const numericProps = initializeNumericProps(
+    polygons.polygonIndices.value.length - 1,
+    polygons.numericProps
+  );
+
+  // Process each polygon
+  let pointIndex = 0;
+  let triangleIndex = 0;
+  const {extruded} = props;
+  for (let i = 0; i < polygons.polygonIndices.value.length - 1; i++) {
+    const startIndex = polygons.polygonIndices.value[i];
+    const endIndex = polygons.polygonIndices.value[i + 1];
+
+    // Skip small polygons
+    if (getPolygonArea(polygons, i) < minPolygonArea) {
+      continue;
+    }
+
+    const centroid = getPolygonCentroid(polygons, i);
+    let maxArea = -1;
+    let largestTriangleCenter: [number, number] = [0, 0];
+    let centroidIsInside = false;
+
+    // Scan triangles until we find ones that don't belong to this polygon
+    while (triangleIndex < polygons.triangles.value.length) {
+      const i1 = polygons.triangles.value[triangleIndex];
+
+      // If we've moved past the current polygon's triangles, break
+      if (i1 >= endIndex) {
+        break;
+      }
+
+      // If we've already found a triangle containing the centroid, skip the rest
+      if (centroidIsInside) {
+        triangleIndex += 3;
+        continue;
+      }
+
+      const i2 = polygons.triangles.value[triangleIndex + 1];
+      const i3 = polygons.triangles.value[triangleIndex + 2];
+      const v1 = polygons.positions.value.subarray(
+        i1 * polygons.positions.size,
+        i1 * polygons.positions.size + polygons.positions.size
+      );
+      const v2 = polygons.positions.value.subarray(
+        i2 * polygons.positions.size,
+        i2 * polygons.positions.size + polygons.positions.size
+      );
+      const v3 = polygons.positions.value.subarray(
+        i3 * polygons.positions.size,
+        i3 * polygons.positions.size + polygons.positions.size
+      );
+
+      if (isPointInTriangle(centroid, v1, v2, v3)) {
+        centroidIsInside = true;
+      } else {
+        const area = getTriangleArea(v1, v2, v3);
+        if (area > maxArea) {
+          maxArea = area;
+          largestTriangleCenter = [(v1[0] + v2[0] + v3[0]) / 3, (v1[1] + v2[1] + v3[1]) / 3];
+        }
+      }
+
+      triangleIndex += 3;
+    }
+
+    const labelPoint = centroidIsInside ? centroid : largestTriangleCenter;
+    if (isPointInBounds(labelPoint, tileBbox)) {
+      positions.push(...labelPoint);
+      const featureId = polygons.featureIds.value[startIndex];
+      if (extruded) {
+        const elevation = props.getElevation(undefined, {
+          data: polygons,
+          index: featureId
+        });
+        positions.push(elevation * props.elevationScale);
+      }
+      properties.push(polygons.properties[featureId]);
+      featureIds.push(pointIndex);
+      globalFeatureIds.push(polygons.globalFeatureIds.value[startIndex]);
+      copyNumericProps(polygons.numericProps, numericProps, startIndex, pointIndex);
+      pointIndex++;
+    }
+  }
+
+  // Trim numeric properties arrays to actual size
+  if (polygons.numericProps) {
+    Object.keys(numericProps).forEach(prop => {
+      numericProps[prop].value = numericProps[prop].value.slice(0, pointIndex);
+    });
+  }
+
+  return createBinaryPointFeature(
+    positions,
+    featureIds,
+    globalFeatureIds,
+    numericProps,
+    properties,
+    extruded ? 3 : 2
+  );
+}
+
+// Helper functions
+function getPolygonArea(polygons: Required<BinaryPolygonFeature>, index: number): number {
+  const {
+    positions: {value: positions, size},
+    polygonIndices: {value: indices},
+    triangles: {value: triangles}
+  } = polygons;
+
+  const startIndex = indices[index];
+  const endIndex = indices[index + 1];
+  let area = 0;
+  let triangleIndex = 0;
+
+  // Find first triangle of this polygon
+  // Note: this assumes tirnagles and polygon indices are sorted.
+  // This is true for the current implementation of geojsonToBinary
+  while (triangleIndex < triangles.length) {
+    const i1 = triangles[triangleIndex];
+    if (i1 >= startIndex) break;
+    triangleIndex += 3;
+  }
+
+  // Process triangles until we hit the next polygon
+  while (triangleIndex < triangles.length) {
+    const i1 = triangles[triangleIndex];
+    if (i1 >= endIndex) break;
+
+    const i2 = triangles[triangleIndex + 1];
+    const i3 = triangles[triangleIndex + 2];
+    const v1 = positions.subarray(i1 * size, i1 * size + size);
+    const v2 = positions.subarray(i2 * size, i2 * size + size);
+    const v3 = positions.subarray(i3 * size, i3 * size + size);
+
+    area += getTriangleArea(v1, v2, v3);
+    triangleIndex += 3;
+  }
+
+  return area;
+}
+
+function isPointInBounds([x, y]: [number, number], {west, east, south, north}: TileBBox): boolean {
+  return x >= west && x < east && y >= south && y < north;
+}
+
+function isPointInTriangle(p: Vec2, v1: Vec2, v2: Vec2, v3: Vec2): boolean {
+  const area = Math.abs((v2[0] - v1[0]) * (v3[1] - v1[1]) - (v3[0] - v1[0]) * (v2[1] - v1[1])) / 2;
+  const area1 = Math.abs((v1[0] - p[0]) * (v2[1] - p[1]) - (v2[0] - p[0]) * (v1[1] - p[1])) / 2;
+  const area2 = Math.abs((v2[0] - p[0]) * (v3[1] - p[1]) - (v3[0] - p[0]) * (v2[1] - p[1])) / 2;
+  const area3 = Math.abs((v3[0] - p[0]) * (v1[1] - p[1]) - (v1[0] - p[0]) * (v3[1] - p[1])) / 2;
+
+  // Account for floating point precision
+  return Math.abs(area - (area1 + area2 + area3)) < 1e-10;
+}
+
+function getTriangleArea([x1, y1]: Vec2, [x2, y2]: Vec2, [x3, y3]: Vec2): number {
+  return Math.abs((x1 * (y2 - y3) + x2 * (y3 - y1) + x3 * (y1 - y2)) / 2);
+}
+
+function getPolygonCentroid(polygons: BinaryPolygonFeature, index: number): [number, number] {
+  const {
+    positions: {value: positions, size}
+  } = polygons;
+  const startIndex = size * polygons.polygonIndices.value[index];
+  const endIndex = size * polygons.polygonIndices.value[index + 1];
+
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+
+  for (let i = startIndex; i < endIndex; i += size) {
+    const [x, y] = positions.subarray(i, i + 2);
+    minX = Math.min(minX, x);
+    minY = Math.min(minY, y);
+    maxX = Math.max(maxX, x);
+    maxY = Math.max(maxY, y);
+  }
+
+  return [(minX + maxX) / 2, (minY + maxY) / 2];
+}
+
+function getSegmentLength(lines: BinaryLineFeature, index: number): number {
+  const {
+    positions: {value}
+  } = lines;
+  const [x1, y1, x2, y2] = value.subarray(index, index + 4);
+  return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
+}
+
+function getLineLength(lines: BinaryLineFeature, index: number): number {
+  const {
+    positions: {size}
+  } = lines;
+  const startIndex = size * lines.pathIndices.value[index];
+  const endIndex = size * lines.pathIndices.value[index + 1];
+  let length = 0;
+  for (let j = startIndex; j < endIndex; j += size) {
+    length += getSegmentLength(lines, j);
+  }
+  return length;
+}
+
+function getLineMidpoint(lines: BinaryLineFeature, index: number): [number, number] {
+  const {
+    positions: {value: positions},
+    pathIndices: {value: pathIndices}
+  } = lines;
+  const startIndex = pathIndices[index] * 2;
+  const endIndex = pathIndices[index + 1] * 2;
+  const numPoints = (endIndex - startIndex) / 2;
+
+  if (numPoints === 2) {
+    // For lines with only two vertices, interpolate between them
+    const [x1, y1, x2, y2] = positions.subarray(startIndex, startIndex + 4);
+    return [(x1 + x2) / 2, (y1 + y2) / 2];
+  }
+  // For lines with multiple vertices, use the middle vertex
+  const midPointIndex = startIndex + Math.floor(numPoints / 2) * 2;
+  return [positions[midPointIndex], positions[midPointIndex + 1]];
+}

package/src/layers/point-label-layer.ts

@@ -9,13 +9,15 @@ import {
   CompositeLayerProps,
   DefaultProps,
   Layer,
-  LayersList
+  LayersList,
+  log
 } from '@deck.gl/core';
 import {
   TextLayer,
   TextLayerProps,
   _TextBackgroundLayer as TextBackgroundLayer
 } from '@deck.gl/layers';
+import VectorTileLayer from './vector-tile-layer';
 
 const [LEFT, TOP, RIGHT, BOTTOM] = [0, 1, 2, 3];
 
@@ -97,6 +99,12 @@ type _PointLabelLayerProps<DataT> = TextLayerProps<DataT> & {
   secondarySizeScale?: number;
 };
 
+/**
+ * PointLabelLayer is a layer that renders point labels.
+ * It is a composite layer that renders a primary and secondary label.
+ * It behaves like a TextLayer except that getTextSize is **not supported**
+ * and the text size for the primary label must be set with **sizeScale**.
+ */
 export default class PointLabelLayer<
   DataT = any,
   ExtraProps extends {} = {}
@@ -194,6 +202,15 @@ export default class PointLabelLayer<
       updateTriggers
     } = this.props;
 
+    if (sizeScale < 2) {
+      const propName = (this.parent as VectorTileLayer)?.props?.textSizeScale
+        ? 'textSizeScale'
+        : 'sizeScale';
+      log.warn(
+        `${propName} has small value (${sizeScale}). Note getTextSize is not supported on PointLabelLayer`
+      )();
+    }
+
     return new EnhancedTextLayer(
       this.getSubLayerProps({
         id,

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

@@ -2,13 +2,13 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {CompositeLayer, CompositeLayerProps, Layer, LayersList, DefaultProps} from '@deck.gl/core';
+import {CompositeLayer, CompositeLayerProps, DefaultProps} from '@deck.gl/core';
 import QuadbinLayer, {QuadbinLayerProps} from './quadbin-layer';
 import QuadbinTileset2D from './quadbin-tileset-2d';
 import SpatialIndexTileLayer, {SpatialIndexTileLayerProps} from './spatial-index-tile-layer';
 import {hexToBigInt} from 'quadbin';
 import type {TilejsonResult} from '@carto/api-client';
-import {injectAccessToken, TilejsonPropType} from './utils';
+import {TilejsonPropType, mergeLoadOptions} from './utils';
 import {DEFAULT_TILE_SIZE} from '../constants';
 
 export const renderSubLayers = props => {
@@ -43,11 +43,11 @@ export default class QuadbinTileLayer<
   static defaultProps = defaultProps;
 
   getLoadOptions(): any {
-    const loadOptions = super.getLoadOptions() || {};
     const tileJSON = this.props.data as TilejsonResult;
-    injectAccessToken(loadOptions, tileJSON.accessToken);
-    loadOptions.cartoSpatialTile = {...loadOptions.cartoSpatialTile, scheme: 'quadbin'};
-    return loadOptions;
+    return mergeLoadOptions(super.getLoadOptions(), {
+      fetch: {headers: {Authorization: `Bearer ${tileJSON.accessToken}`}},
+      cartoSpatialTile: {scheme: 'quadbin'}
+    });
   }
 
   renderLayers(): SpatialIndexTileLayer | null {

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

@@ -13,7 +13,7 @@ import {
 import RasterLayer, {RasterLayerProps} from './raster-layer';
 import QuadbinTileset2D from './quadbin-tileset-2d';
 import type {TilejsonResult} from '@carto/api-client';
-import {injectAccessToken, TilejsonPropType} from './utils';
+import {TilejsonPropType, mergeLoadOptions} from './utils';
 import {DEFAULT_TILE_SIZE} from '../constants';
 import {TileLayer, TileLayerProps} from '@deck.gl/geo-layers';
 import {copy, PostProcessModifier} from './post-process-utils';
@@ -62,10 +62,10 @@ export default class RasterTileLayer<
   static defaultProps = defaultProps;
 
   getLoadOptions(): any {
-    const loadOptions = super.getLoadOptions() || {};
     const tileJSON = this.props.data as TilejsonResult;
-    injectAccessToken(loadOptions, tileJSON.accessToken);
-    return loadOptions;
+    return mergeLoadOptions(super.getLoadOptions(), {
+      fetch: {headers: {Authorization: `Bearer ${tileJSON.accessToken}`}}
+    });
   }
 
   renderLayers(): Layer | null | LayersList {
@@ -74,6 +74,7 @@ export default class RasterTileLayer<
 
     const {tiles: data, minzoom: minZoom, maxzoom: maxZoom, raster_metadata: metadata} = tileJSON;
     const SubLayerClass = this.getSubLayerClass('tile', PostProcessTileLayer);
+    const loadOptions = this.getLoadOptions();
     return new SubLayerClass(this.props, {
       id: `raster-tile-layer-${this.props.id}`,
       data,
@@ -83,8 +84,8 @@ export default class RasterTileLayer<
       minZoom,
       maxZoom,
       loadOptions: {
-        cartoRasterTile: {metadata},
-        ...this.getLoadOptions()
+        ...loadOptions,
+        cartoRasterTile: {...loadOptions?.cartoRasterTile, metadata}
       }
     });
   }

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

@@ -3,6 +3,7 @@
 // Copyright (c) vis.gl contributors
 
 import {readPackedTypedArray} from './fast-pbf';
+import {TypedArray} from '@loaders.gl/loader-utils';
 
 // KeyValueObject ========================================
 interface KeyValueObject {
@@ -88,7 +89,8 @@ class FieldsReader {
 // NumericProp ========================================
 
 export interface NumericProp {
-  value: number[];
+  value: TypedArray;
+  size: number;
 }
 
 class NumericPropReader {

package/src/layers/schema/spatialjson-utils.ts

@@ -3,17 +3,18 @@
 // Copyright (c) vis.gl contributors
 
 import {bigIntToHex} from 'quadbin';
+import {BinaryPointFeature} from '@loaders.gl/schema';
 
 export type IndexScheme = 'h3' | 'quadbin';
 type TypedArray = Float32Array | Float64Array;
 
 export type Indices = {value: BigUint64Array};
-export type NumericProps = Record<string, {value: number[] | TypedArray}>;
-export type Properties = Record<string, string | number | boolean | null>;
+export type NumericProps = BinaryPointFeature['numericProps'];
+export type Properties = BinaryPointFeature['properties'];
 export type Cells = {
   indices: Indices;
   numericProps: NumericProps;
-  properties: Properties[];
+  properties: Properties;
 };
 export type SpatialBinary = {scheme?: IndexScheme; cells: Cells};
 export type SpatialJson = {