@deck.gl/carto 8.9.7 → 8.9.8

package/package.json

@@ -2,7 +2,7 @@
   "name": "@deck.gl/carto",
   "description": "CARTO official integration with Deck.gl. Build geospatial applications using CARTO and Deck.gl.",
   "license": "MIT",
-  "version": "8.9.7",
+  "version": "8.9.8",
   "publishConfig": {
     "access": "public"
   },
@@ -46,7 +46,7 @@
     "h3-js": "^3.7.0",
     "moment-timezone": "^0.5.33",
     "pbf": "^3.2.1",
-    "quadbin": "^0.1.2"
+    "quadbin": "^0.1.9"
   },
   "devDependencies": {
     "@loaders.gl/schema": "^3.3.1",
@@ -62,5 +62,5 @@
     "@deck.gl/layers": "^8.0.0",
     "@loaders.gl/core": "^3.0.0"
   },
-  "gitHead": "63e09fa6f5dbfc9111fb8b343444e8c3a7a0702b"
+  "gitHead": "2d98c0893324e1f01c4b5afacc0de800510c15cb"
 }

package/src/api/layer-map.ts

@@ -21,8 +21,9 @@ import {H3HexagonLayer, MVTLayer} from '@deck.gl/geo-layers';
 import CartoTileLayer from '../layers/carto-tile-layer';
 import H3TileLayer from '../layers/h3-tile-layer';
 import QuadbinTileLayer from '../layers/quadbin-tile-layer';
-import {TILE_FORMATS} from './maps-api-common';
-import {assert} from '../utils';
+import RasterTileLayer from '../layers/raster-tile-layer';
+import {MapType, TILE_FORMATS, TileFormat} from './maps-api-common';
+import {assert, createBinaryProxy} from '../utils';
 import {
   CustomMarkersRange,
   MapDataset,
@@ -200,16 +201,20 @@ export function getLayer(
 }
 
 export function layerFromTileDataset(
-  formatTiles: string | null = TILE_FORMATS.MVT,
-  scheme: string
+  formatTiles: TileFormat | null = TILE_FORMATS.MVT,
+  scheme: string,
+  type?: MapType
 ): typeof CartoTileLayer | typeof H3TileLayer | typeof MVTLayer | typeof QuadbinTileLayer {
+  if (type === 'raster') {
+    return RasterTileLayer;
+  }
   if (scheme === 'h3') {
     return H3TileLayer;
   }
   if (scheme === 'quadbin') {
     return QuadbinTileLayer;
   }
-  if (formatTiles === TILE_FORMATS.MVT) {
+  if (formatTiles === 'mvt') {
     return MVTLayer;
   }
 
@@ -227,7 +232,7 @@ function getTileLayer(dataset: MapDataset, basePropMap) {
     }
   } = dataset;
   /* global URL */
-  const formatTiles = new URL(tileUrl).searchParams.get('formatTiles');
+  const formatTiles = new URL(tileUrl).searchParams.get('formatTiles') as TileFormat;
 
   return {
     Layer: layerFromTileDataset(formatTiles, scheme),
@@ -301,19 +306,7 @@ function normalizeAccessor(accessor, data) {
       }
 
       const {data, index} = info;
-      const {properties, numericProps} = data;
-      const proxy = new Proxy(properties[index] || {}, {
-        get(target, property, receiver) {
-          if (property in numericProps) {
-            return numericProps[property as string].value[index];
-          }
-          return target[property as string];
-        },
-
-        has(target, property) {
-          return property in numericProps || property in target;
-        }
-      });
+      const proxy = createBinaryProxy(data, index);
       return accessor(proxy);
     };
   }

package/src/api/maps-api-common.ts

@@ -17,7 +17,8 @@ export const DEFAULT_MAPS_URL_FORMAT = {
 export const MAP_TYPES = {
   QUERY: 'query',
   TABLE: 'table',
-  TILESET: 'tileset'
+  TILESET: 'tileset',
+  RASTER: 'raster'
 } as const;
 export type MapType = ValuesOf<typeof MAP_TYPES>;
 export const COLUMNS_SUPPORT: MapType[] = [MAP_TYPES.TABLE];

package/src/api/maps-v3-client.ts

@@ -89,7 +89,12 @@ async function requestJson<T = unknown>({
   errorContext
 }: RequestParams): Promise<T> {
   const response = await request({method, url, headers, accessToken, body, errorContext});
-  const json = await response.json();
+  let json;
+  try {
+    json = await response.json();
+  } catch (error) {
+    json = {error: ''};
+  }
 
   if (!response.ok) {
     throw new CartoAPIError(json.error, errorContext, response);

package/src/api/parseMap.ts

@@ -217,7 +217,7 @@ function createChannelProps(
     );
   }
 
-  if (heightField) {
+  if (heightField && visConfig.enable3d) {
     result.getElevation = getSizeAccessor(
       heightField,
       // @ts-ignore

package/src/index.ts

@@ -4,6 +4,7 @@ export {default as _CartoTileLayer} from './layers/carto-tile-layer';
 export {default as _H3TileLayer} from './layers/h3-tile-layer';
 export {default as _PointLabelLayer} from './layers/point-label-layer';
 export {default as _QuadbinTileLayer} from './layers/quadbin-tile-layer';
+export {default as _RasterTileLayer} from './layers/raster-tile-layer';
 export {default as BASEMAP} from './basemap';
 export {default as colorBins} from './style/color-bins-style';
 export {default as colorCategories} from './style/color-categories-style';

package/src/layers/carto-layer.ts

@@ -300,7 +300,7 @@ export default class CartoLayer<ExtraProps extends {} = {}> extends CompositeLay
     props.formatTiles =
       props.formatTiles || (tileUrl.searchParams.get('formatTiles') as TileFormat);
 
-    return [layerFromTileDataset(props.formatTiles, data.scheme), props];
+    return [layerFromTileDataset(props.formatTiles, data.scheme, props.type), props];
   }
 
   renderLayers(): Layer | null {

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

@@ -98,9 +98,8 @@ export default class H3TileLayer<DataT = any, ExtraPropsT extends {} = {}> exten
         maxZoom: maxresolution,
         loadOptions: {
           ...this.getLoadOptions(),
-          cartoSpatialTile: {
-            scheme: 'h3'
-          }
+          cartoSpatialTile: {scheme: 'h3'},
+          mimeType: 'application/vnd.carto-spatial-tile'
         }
       })
     ];

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

@@ -71,9 +71,8 @@ export default class QuadbinTileLayer<
         maxZoom,
         loadOptions: {
           ...this.getLoadOptions(),
-          cartoSpatialTile: {
-            scheme: 'quadbin'
-          }
+          cartoSpatialTile: {scheme: 'quadbin'},
+          mimeType: 'application/vnd.carto-spatial-tile'
         }
       })
     ];

package/src/layers/quadbin-utils.ts

@@ -3,13 +3,17 @@ import {cellToTile} from 'quadbin';
 
 const TILE_SIZE = 512;
 
-export function quadbinToWorldBounds(quadbin: bigint, coverage: number): [number[], number[]] {
+export function quadbinToOffset(quadbin: bigint): [number, number, number] {
   const {x, y, z} = cellToTile(quadbin);
-  const mask = 1 << z;
-  const scale = mask / TILE_SIZE;
+  const scale = TILE_SIZE / (1 << z);
+  return [x * scale, TILE_SIZE - y * scale, scale];
+}
+
+export function quadbinToWorldBounds(quadbin: bigint, coverage: number): [number[], number[]] {
+  const [xOffset, yOffset, scale] = quadbinToOffset(quadbin);
   return [
-    [x / scale, TILE_SIZE - y / scale],
-    [(x + coverage) / scale, TILE_SIZE - (y + coverage) / scale]
+    [xOffset, yOffset],
+    [xOffset + coverage * scale, yOffset - coverage * scale]
   ];
 }
 

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

@@ -0,0 +1,98 @@
+export default `\
+#version 300 es
+#define SHADER_NAME raster-layer-vertex-shader
+
+in vec3 positions;
+in vec3 normals;
+
+in float instanceElevations;
+in vec4 instanceFillColors;
+in vec4 instanceLineColors;
+
+in vec3 instancePickingColors;
+
+// Custom uniforms
+uniform float opacity;
+uniform bool extruded;
+uniform bool stroked;
+uniform bool isStroke;
+uniform float coverage;
+uniform float elevationScale;
+uniform float widthScale;
+uniform vec3 offset;
+
+// Result
+out vec4 vColor;
+#ifdef FLAT_SHADING
+out vec4 position_commonspace;
+#endif
+
+void main(void) {
+  // Rather than positioning using attribute, layout pixel grid using gl_InstanceID
+  vec2 common_position = offset.xy;
+  float scale = offset.z;
+
+  int yIndex = - (gl_InstanceID / 256);
+  int xIndex = gl_InstanceID + (yIndex * 256);
+  common_position += scale * vec2(float(xIndex), float(yIndex));
+
+  vec4 color = isStroke ? instanceLineColors : instanceFillColors;
+
+  // if alpha == 0.0 or z < 0.0, do not render element
+  float shouldRender = float(color.a > 0.0 && instanceElevations >= 0.0);
+  float cellWidth = coverage * scale;
+
+  // Get position directly from quadbin, rather than projecting
+  // Important to set geometry.position before using project_ methods below
+  // as geometry.worldPosition is not set (we don't know our lat/long)
+  geometry.position = vec4(common_position, 0.0, 1.0);
+  if (project_uProjectionMode == PROJECTION_MODE_WEB_MERCATOR_AUTO_OFFSET) {
+    geometry.position.xyz -= project_uCommonOrigin;
+  }
+
+  // calculate elevation, if 3d not enabled set to 0
+  // cylindar geometry height are between -1.0 to 1.0, transform it to between 0, 1
+  float elevation = 0.0;
+  // calculate stroke offset
+  float strokeOffsetRatio = 1.0;
+
+  if (extruded) {
+    elevation = instanceElevations * (positions.z + 1.0) / 2.0 * elevationScale;
+  } else if (stroked) {
+    float halfOffset = project_pixel_size(widthScale) / cellWidth;
+    if (isStroke) {
+      strokeOffsetRatio -= sign(positions.z) * halfOffset;
+    } else {
+      strokeOffsetRatio -= halfOffset;
+    }
+  }
+
+  geometry.pickingColor = instancePickingColors;
+
+  // project center of column
+  vec2 offset = (vec2(0.5) + positions.xy * strokeOffsetRatio) * cellWidth * shouldRender;
+  vec3 pos = vec3(offset, project_size(elevation));
+  DECKGL_FILTER_SIZE(pos, geometry);
+
+  geometry.position.xyz += pos;
+  gl_Position = project_common_position_to_clipspace(geometry.position);
+
+  geometry.normal = project_normal(normals);
+  DECKGL_FILTER_GL_POSITION(gl_Position, geometry);
+
+  // Light calculations
+  if (extruded && !isStroke) {
+#ifdef FLAT_SHADING
+    position_commonspace = geometry.position;
+    vColor = vec4(color.rgb, color.a * opacity);
+#else
+    vec3 lightColor = lighting_getLightColor(color.rgb, project_uCameraPosition, geometry.position.xyz, geometry.normal);
+    vColor = vec4(lightColor, color.a * opacity);
+#endif
+  } else {
+    vColor = vec4(color.rgb, color.a * opacity);
+  }
+
+  DECKGL_FILTER_COLOR(vColor, geometry);
+}
+`;

package/src/layers/raster-layer.ts

@@ -0,0 +1,146 @@
+import GL from '@luma.gl/constants';
+import {
+  Accessor,
+  CompositeLayer,
+  CompositeLayerProps,
+  Layer,
+  LayersList,
+  DefaultProps
+} from '@deck.gl/core';
+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';
+
+const defaultProps: DefaultProps<RasterLayerProps> = {
+  ...ColumnLayer.defaultProps,
+  extruded: false,
+  diskResolution: 4,
+  vertices: [
+    [-0.5, -0.5],
+    [0.5, -0.5],
+    [0.5, 0.5],
+    [-0.5, 0.5]
+  ]
+};
+
+// Modified ColumnLayer with custom vertex shader
+class RasterColumnLayer extends ColumnLayer {
+  static layerName = 'RasterColumnLayer';
+
+  getShaders() {
+    const shaders = super.getShaders();
+    return {...shaders, vs};
+  }
+
+  initializeState() {
+    // Only add attributes needed by shader
+    const attributeManager = this.getAttributeManager()!;
+    /* eslint-disable max-len */
+    attributeManager.addInstanced({
+      instanceElevations: {
+        size: 1,
+        transition: true,
+        accessor: 'getElevation'
+      },
+      instanceFillColors: {
+        size: this.props.colorFormat.length,
+        type: GL.UNSIGNED_BYTE,
+        normalized: true,
+        transition: true,
+        accessor: 'getFillColor',
+        defaultValue: [0, 0, 0, 255]
+      },
+      instanceLineColors: {
+        size: this.props.colorFormat.length,
+        type: GL.UNSIGNED_BYTE,
+        normalized: true,
+        transition: true,
+        accessor: 'getLineColor',
+        defaultValue: [255, 255, 255, 255]
+      }
+    });
+  }
+}
+
+/** All properties supported by RasterLayer. */
+export type RasterLayerProps<DataT = any> = _RasterLayerProps &
+  ColumnLayerProps<DataT> &
+  CompositeLayerProps;
+
+/** Properties added by RasterLayer. */
+type _RasterLayerProps = {
+  /**
+   * Quadbin index of tile
+   */
+  tileIndex: bigint;
+};
+
+// Adapter layer around RasterColumnLayer that converts data & accessors into correct format
+export default class RasterLayer<DataT = any, ExtraProps = {}> extends CompositeLayer<
+  Required<RasterLayerProps<DataT>> & ExtraProps
+> {
+  static layerName = 'RasterLayer';
+  static defaultProps = defaultProps;
+
+  renderLayers(): Layer | null | LayersList {
+    // Rendering props underlying layer
+    const {
+      data,
+      getElevation,
+      getFillColor,
+      getLineColor,
+      getLineWidth,
+      tileIndex,
+      updateTriggers
+    } = this.props;
+    if (!data || !tileIndex) return null;
+
+    const {blockWidth, blockHeight} = data as unknown as Raster;
+    assert(
+      blockWidth === blockHeight,
+      `blockWidth (${blockWidth}) must equal blockHeight (${blockHeight})`
+    );
+
+    const [xOffset, yOffset, scale] = quadbinToOffset(tileIndex);
+    const offset = [xOffset, yOffset, scale / blockWidth];
+
+    // Filled Column Layer
+    const CellLayer = this.getSubLayerClass('column', RasterColumnLayer);
+    return new CellLayer(
+      this.props,
+      this.getSubLayerProps({
+        id: 'cell',
+        updateTriggers,
+
+        getElevation: this.getSubLayerAccessor(getElevation),
+        getFillColor: this.getSubLayerAccessor(getFillColor),
+        getLineColor: this.getSubLayerAccessor(getLineColor),
+        getLineWidth: this.getSubLayerAccessor(getLineWidth)
+      }),
+      {
+        data: {
+          data, // Pass through data for getSubLayerAccessor()
+          length: blockWidth * blockHeight
+        },
+        offset
+      }
+    );
+  }
+
+  protected getSubLayerAccessor<In, Out>(accessor: Accessor<In, Out>): Accessor<In, Out> {
+    if (typeof accessor !== 'function') {
+      return super.getSubLayerAccessor(accessor);
+    }
+
+    // Proxy values back in standard feature format
+    return (object, info) => {
+      const {data, index} = info;
+      const binaryData = (data as unknown as {data: Raster}).data;
+      const proxy = createBinaryProxy(binaryData.cells, index);
+      // @ts-ignore (TS2349) accessor is always function
+      return accessor({properties: proxy}, info);
+    };
+  }
+}

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

@@ -0,0 +1,63 @@
+import {
+  CompositeLayer,
+  CompositeLayerProps,
+  Layer,
+  LayersList,
+  UpdateParameters
+} from '@deck.gl/core';
+import RasterLayer, {RasterLayerProps} from './raster-layer';
+import QuadbinTileset2D from './quadbin-tileset-2d';
+import SpatialIndexTileLayer from './spatial-index-tile-layer';
+
+export const renderSubLayers = props => {
+  const tileIndex = props.tile?.index?.q;
+  if (!tileIndex) return null;
+  return new RasterLayer(props, {tileIndex});
+};
+
+/** All properties supported by RasterTileLayer. */
+export type RasterTileLayerProps<DataT = any> = _RasterTileLayerProps<DataT> & CompositeLayerProps;
+
+/** Properties added by RasterTileLayer. */
+type _RasterTileLayerProps<DataT> = RasterLayerProps<DataT> & {
+  data: string;
+};
+
+export default class RasterTileLayer<
+  DataT = any,
+  ExtraProps extends {} = {}
+> extends CompositeLayer<ExtraProps & Required<_RasterTileLayerProps<DataT>>> {
+  static layerName = 'RasterTileLayer';
+  static defaultProps = {};
+
+  state!: {tileJSON: any; data: any};
+  initializeState(): void {
+    this.setState({data: null, tileJSON: null});
+  }
+
+  updateState({changeFlags}: UpdateParameters<this>): void {
+    if (changeFlags.dataChanged) {
+      let {data} = this.props;
+      const tileJSON = data;
+      data = (tileJSON as any).tiles;
+      this.setState({data, tileJSON});
+    }
+  }
+
+  renderLayers(): Layer | null | LayersList {
+    const {data, tileJSON} = this.state;
+    const minZoom = parseInt(tileJSON?.minzoom);
+    const maxZoom = parseInt(tileJSON?.maxzoom);
+    return [
+      new SpatialIndexTileLayer(this.props, {
+        id: `raster-tile-layer-${this.props.id}`,
+        data,
+        // TODO: Tileset2D should be generic over TileIndex type
+        TilesetClass: QuadbinTileset2D as any,
+        renderSubLayers,
+        minZoom,
+        maxZoom
+      })
+    ];
+  }
+}

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

@@ -0,0 +1,42 @@
+import {LoaderOptions, LoaderWithParser} from '@loaders.gl/loader-utils';
+
+import {TileReader} from './carto-raster-tile';
+import {parsePbf} from './tile-loader-utils';
+import {NumericProps, Properties} from './spatialjson-utils';
+
+const CartoRasterTileLoader: LoaderWithParser = {
+  name: 'CARTO Raster Tile',
+  version: '1',
+  id: 'cartoRasterTile',
+  module: 'carto',
+  extensions: ['pbf'],
+  mimeTypes: ['application/vnd.carto-raster-tile'],
+  category: 'geometry',
+  worker: false,
+  parse: async (arrayBuffer, options) => parseCartoRasterTile(arrayBuffer, options),
+  parseSync: parseCartoRasterTile,
+  options: {}
+};
+
+export type Raster = {
+  blockWidth: number;
+  blockHeight: number;
+  cells: {
+    numericProps: NumericProps;
+    properties: Properties[];
+  };
+};
+
+function parseCartoRasterTile(arrayBuffer: ArrayBuffer, options?: LoaderOptions): Raster | null {
+  if (!arrayBuffer) return null;
+  const tile = parsePbf(arrayBuffer, TileReader);
+  const {bands, blockHeight, blockWidth} = tile;
+  const numericProps = {};
+  for (let i = 0; i < bands.length; i++) {
+    const {name, data} = bands[i];
+    numericProps[name] = data;
+  }
+  return {blockWidth, blockHeight, cells: {numericProps, properties: []}};
+}
+
+export default CartoRasterTileLoader;

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

@@ -0,0 +1,46 @@
+import {readPackedTypedArray} from './fast-pbf';
+
+const ARRAY_TYPES = {
+  uint8: Uint8Array,
+  uint16: Uint16Array,
+  uint32: Uint32Array,
+  uint64: BigUint64Array,
+  int8: Int8Array,
+  int16: Int16Array,
+  int32: Int32Array,
+  int64: BigInt64Array,
+  float32: Float32Array,
+  float64: Float64Array
+};
+
+// Band ========================================
+
+export class BandReader {
+  static read(pbf, end?: number) {
+    return pbf.readFields(BandReader._readField, {name: '', type: '', data: null}, end);
+  }
+
+  static _readField(this: void, tag, obj, pbf) {
+    if (tag === 1) obj.name = pbf.readString();
+    else if (tag === 2) obj.type = pbf.readString();
+    else if (tag === 3) {
+      const TypedArray = ARRAY_TYPES[obj.type];
+      if (!TypedArray) {
+        throw Error(`Invalid data type: ${obj.type}`);
+      }
+      obj.data = {};
+      readPackedTypedArray(TypedArray, pbf, obj.data);
+    }
+  }
+}
+
+export class TileReader {
+  static read(pbf, end) {
+    return pbf.readFields(TileReader._readField, {blockWidth: 0, blockHeight: 0, bands: []}, end);
+  }
+  static _readField(this: void, tag, obj, pbf) {
+    if (tag === 1) obj.blockWidth = pbf.readVarint();
+    else if (tag === 2) obj.blockHeight = pbf.readVarint();
+    else if (tag === 3) obj.bands.push(BandReader.read(pbf, pbf.readVarint() + pbf.pos));
+  }
+}

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

@@ -1,4 +1,4 @@
-import {readPackedFixed64} from './fast-pbf';
+import {readPackedTypedArray} from './fast-pbf';
 import {Indices, IndexScheme} from './spatialjson-utils';
 import {NumericProp, NumericPropKeyValueReader, PropertiesReader} from './carto-tile';
 
@@ -9,7 +9,7 @@ export class IndicesReader {
     return pbf.readFields(IndicesReader._readField, {value: []}, end);
   }
   static _readField(this: void, tag: number, obj, pbf) {
-    if (tag === 1) readPackedFixed64(pbf, obj);
+    if (tag === 1) readPackedTypedArray(BigUint64Array, pbf, obj);
   }
 }
 

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

@@ -1,4 +1,4 @@
-import {readPackedDouble} from './fast-pbf';
+import {readPackedTypedArray} from './fast-pbf';
 
 // KeyValueObject ========================================
 interface KeyValueObject {
@@ -43,7 +43,7 @@ class DoublesReader {
     return {value: new Float32Array(value), size};
   }
   static _readField(this: void, tag: number, obj, pbf) {
-    if (tag === 1) readPackedDouble(pbf, obj);
+    if (tag === 1) readPackedTypedArray(Float64Array, pbf, obj);
     else if (tag === 2) obj.size = pbf.readVarint(true);
   }
 }
@@ -92,7 +92,7 @@ class NumericPropReader {
     return pbf.readFields(NumericPropReader._readField, {value: []}, end);
   }
   static _readField(this: void, tag: number, obj: NumericProp, pbf) {
-    if (tag === 1) readPackedDouble(pbf, obj);
+    if (tag === 1) readPackedTypedArray(Float64Array, pbf, obj);
   }
 }
 

package/src/layers/schema/fast-pbf.ts

@@ -1,13 +1,7 @@
-// Optimized (100X speed improvement) reading functions for binary data
-export function readPackedDouble(pbf, obj) {
+// Optimized (100X speed improvement) reading function for binary data
+export function readPackedTypedArray(TypedArray, pbf, obj) {
   const end = pbf.type === 2 ? pbf.readVarint() + pbf.pos : pbf.pos + 1;
-  obj.value = new Float64Array(pbf.buf.buffer.slice(pbf.pos, end));
-  pbf.pos = end;
-  return obj.value;
-}
-export function readPackedFixed64(pbf, obj) {
-  const end = pbf.type === 2 ? pbf.readVarint() + pbf.pos : pbf.pos + 1;
-  obj.value = new BigUint64Array(pbf.buf.buffer.slice(pbf.pos, end));
+  obj.value = new TypedArray(pbf.buf.buffer.slice(pbf.pos, end));
   pbf.pos = end;
   return obj.value;
 }