@deck.gl/carto 8.8.0-alpha.4 → 8.8.0-alpha.5

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.8.0-alpha.4",
+  "version": "8.8.0-alpha.5",
   "publishConfig": {
     "access": "public"
   },
@@ -23,6 +23,7 @@
   "files": [
     "dist",
     "src",
+    "typed",
     "dist.min.js"
   ],
   "sideEffects": false,
@@ -35,7 +36,7 @@
     "@loaders.gl/loader-utils": "^3.2.0-alpha.4",
     "@loaders.gl/mvt": "^3.2.0-alpha.4",
     "@loaders.gl/tiles": "^3.2.0-alpha.4",
-    "@luma.gl/constants": "^8.5.10",
+    "@luma.gl/constants": "^8.5.13",
     "@math.gl/web-mercator": "3.6.0-alpha.5",
     "cartocolor": "^4.0.2",
     "d3-array": "^2.8.0",
@@ -46,6 +47,7 @@
     "pbf": "^3.2.1"
   },
   "devDependencies": {
+    "@loaders.gl/schema": "^3.2.0-alpha.4",
     "@types/d3-array": "^3.0.2",
     "@types/d3-color": "^1.4.2",
     "@types/d3-scale": "^3.0.0"
@@ -58,5 +60,5 @@
     "@deck.gl/layers": "^8.0.0",
     "@loaders.gl/core": "^3.0.0"
   },
-  "gitHead": "608c74fff3c955142c4e1f5e77b9e21ebbf690f7"
+  "gitHead": "a5e210f62321ab78b7cacbcd0614e0ffcdf6bca7"
 }

package/src/layers/{carto-tile-layer.js → carto-tile-layer.ts}

@@ -1,29 +1,39 @@
 /* global TextDecoder */
 import Protobuf from 'pbf';
-import {log} from '@deck.gl/core';
+import {Layer, LayersList, log} from '@deck.gl/core';
 import {ClipExtension} from '@deck.gl/extensions';
-import {MVTLayer, _getURLFromTemplate} from '@deck.gl/geo-layers';
+import {
+  MVTLayer,
+  MVTLayerProps,
+  TileLayer,
+  _getURLFromTemplate,
+  _Tile2DHeader,
+  _TileLoadProps as TileLoadProps
+} from '@deck.gl/geo-layers';
 import {GeoJsonLayer} from '@deck.gl/layers';
 import {geojsonToBinary} from '@loaders.gl/gis';
-import {Tile} from './schema/carto-tile';
-import {TILE_FORMATS} from '../api/maps-api-common';
+import {Properties, Tile, TileReader} from './schema/carto-tile';
+import {TileFormat, TILE_FORMATS} from '../api/maps-api-common';
+import {LoaderOptions, LoaderWithParser} from '@loaders.gl/loader-utils';
+import type {BinaryFeatures} from '@loaders.gl/schema';
+import type {Feature} from 'geojson';
 
-function parseJSON(arrayBuffer) {
+function parseJSON(arrayBuffer: ArrayBuffer): any {
   return JSON.parse(new TextDecoder().decode(arrayBuffer));
 }
 
-function parsePbf(buffer) {
+function parsePbf(buffer: ArrayBuffer): Tile {
   const pbf = new Protobuf(buffer);
-  const tile = Tile.read(pbf);
+  const tile = TileReader.read(pbf);
   return tile;
 }
 
-function unpackProperties(properties) {
+function unpackProperties(properties: Properties[]) {
   if (!properties || !properties.length) {
     return [];
   }
   return properties.map(item => {
-    const currentRecord = {};
+    const currentRecord: Record<string, unknown> = {};
     item.data.forEach(({key, value}) => {
       currentRecord[key] = value;
     });
@@ -31,7 +41,7 @@ function unpackProperties(properties) {
   });
 }
 
-function parseCartoTile(arrayBuffer, options) {
+function parseCartoTile(arrayBuffer: ArrayBuffer, options?: LoaderOptions): BinaryFeatures | null {
   if (!arrayBuffer) return null;
   const formatTiles = options && options.cartoTile && options.cartoTile.formatTiles;
   if (formatTiles === TILE_FORMATS.GEOJSON) return geojsonToBinary(parseJSON(arrayBuffer).features);
@@ -45,13 +55,15 @@ function parseCartoTile(arrayBuffer, options) {
     polygons: {...polygons, properties: unpackProperties(polygons.properties)}
   };
 
-  return data;
+  // Note: there is slight, difference in `numericProps` type, however geojson/mvtlayer can cope with this
+  return data as unknown as BinaryFeatures;
 }
 
 const defaultTileFormat = TILE_FORMATS.BINARY;
 
-const CartoTileLoader = {
+const CartoTileLoader: LoaderWithParser = {
   name: 'CARTO Tile',
+  version: '1',
   id: 'cartoTile',
   module: 'carto',
   extensions: ['pbf'],
@@ -73,8 +85,29 @@ const defaultProps = {
   loaders: [CartoTileLoader]
 };
 
-export default class CartoTileLayer extends MVTLayer {
-  getTileData(tile) {
+/** All properties supported by CartoTileLayer. */
+export type CartoTileLayerProps<DataT extends Feature = Feature> = _CartoTileLayerProps &
+  MVTLayerProps<DataT>;
+
+/** Properties added by CartoTileLayer. */
+type _CartoTileLayerProps = {
+  /** Use to override the default tile data format.
+   *
+   * Possible values are: `TILE_FORMATS.BINARY`, `TILE_FORMATS.GEOJSON` and `TILE_FORMATS.MVT`.
+   *
+   * Only supported when `apiVersion` is `API_VERSIONS.V3` and `format` is `FORMATS.TILEJSON`.
+   * */
+  formatTiles?: TileFormat;
+};
+
+export default class CartoTileLayer<
+  DataT extends Feature = Feature,
+  ExtraProps = {}
+> extends MVTLayer<DataT, Required<_CartoTileLayerProps> & ExtraProps> {
+  static layerName = 'CartoTileLayer';
+  static defaultProps = defaultProps;
+
+  getTileData(tile: TileLoadProps) {
     const url = _getURLFromTemplate(this.state.data, tile);
     if (!url) {
       return Promise.reject('Invalid URL');
@@ -100,25 +133,29 @@ export default class CartoTileLayer extends MVTLayer {
     return fetch(url, {propName: 'data', layer: this, loadOptions, signal});
   }
 
-  renderSubLayers(props) {
+  renderSubLayers(
+    props: TileLayer['props'] & {
+      id: string;
+      data: any;
+      _offset: number;
+      tile: _Tile2DHeader;
+    }
+  ): GeoJsonLayer | null {
     if (props.data === null) {
       return null;
     }
 
-    props.autoHighlight = false;
+    const tileBbox = props.tile.bbox as any;
+    const {west, south, east, north} = tileBbox;
 
-    const {
-      bbox: {west, south, east, north}
-    } = props.tile;
-    props.extensions = [new ClipExtension(), ...(props.extensions || [])];
-    props.clipBounds = [west, south, east, north];
+    const subLayerProps = {
+      ...props,
+      autoHighlight: false,
+      extensions: [new ClipExtension(), ...(props.extensions || [])],
+      clipBounds: [west, south, east, north]
+    };
 
-    const subLayer = new GeoJsonLayer({
-      ...props
-    });
+    const subLayer = new GeoJsonLayer(subLayerProps);
     return subLayer;
   }
 }
-
-CartoTileLayer.layerName = 'CartoTileLayer';
-CartoTileLayer.defaultProps = defaultProps;

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

@@ -37,7 +37,7 @@ export default class H3TileLayer extends CompositeLayer {
     const maxZoom = parseInt(tileJSON.maxresolution);
     return [
       new SpatialIndexTileLayer(this.props, {
-        id: 'h3-tile-layer',
+        id: `h3-tile-layer-${this.props.id}`,
         data,
         getHexagon: d => d.id,
         TilesetClass: H3Tileset2D,

package/src/layers/quadkey-tile-layer.js

@@ -32,7 +32,7 @@ export default class QuadkeyTileLayer extends CompositeLayer {
     const maxZoom = parseInt(tileJSON.maxresolution);
     return [
       new SpatialIndexTileLayer(this.props, {
-        id: 'quadkey-tile-layer',
+        id: `quadkey-tile-layer-${this.props.id}`,
         data,
         getQuadkey: d => d.id,
         TilesetClass: QuadkeyTileset2D,

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

@@ -0,0 +1,221 @@
+// KeyValueObject ========================================
+interface KeyValueObject {
+  key: string;
+  value: string;
+}
+
+class KeyValueObjectReader {
+  static read(pbf, end?: number): KeyValueObject {
+    return pbf.readFields(KeyValueObjectReader._readField, {key: '', value: ''}, end);
+  }
+  static _readField(this: void, tag: number, obj: KeyValueObject, pbf) {
+    if (tag === 1) obj.key = pbf.readString();
+    else if (tag === 2) obj.value = pbf.readString();
+  }
+}
+
+// Properties ========================================
+
+export interface Properties {
+  data: KeyValueObject[];
+}
+
+class PropertiesReader {
+  static read(pbf, end?: number) {
+    return pbf.readFields(PropertiesReader._readField, {data: []}, end);
+  }
+  static _readField(this: void, tag: number, obj: Properties, pbf) {
+    if (tag === 1) obj.data.push(KeyValueObjectReader.read(pbf, pbf.readVarint() + pbf.pos));
+  }
+}
+
+// Doubles ========================================
+
+interface Doubles {
+  value: Float32Array;
+  size: number;
+}
+
+class DoublesReader {
+  static read(pbf, end?: number): Doubles {
+    // TODO perhaps we can do better and directly map from the source
+    // ArrayBuffer using ArrayBuffer.slice()
+    const {value, size} = pbf.readFields(DoublesReader._readField, {value: [], size: 0}, end);
+    return {value: new Float32Array(value), size};
+  }
+  static _readField(this: void, tag: number, obj, pbf) {
+    if (tag === 1) pbf.readPackedDouble(obj.value);
+    else if (tag === 2) obj.size = pbf.readVarint(true);
+  }
+}
+
+// Ints ========================================
+
+interface Ints {
+  value: Uint32Array;
+  size: number;
+}
+
+class IntsReader {
+  static read(pbf, end?: number): Ints {
+    const {value, size} = pbf.readFields(IntsReader._readField, {value: [], size: 0}, end);
+    return {value: new Uint32Array(value), size};
+  }
+  static _readField(this: void, tag: number, obj, pbf) {
+    if (tag === 1) pbf.readPackedVarint(obj.value);
+    else if (tag === 2) obj.size = pbf.readVarint(true);
+  }
+}
+
+// NumericProp ========================================
+
+interface NumericProp {
+  value: number[];
+}
+
+class NumericPropReader {
+  static read(pbf, end?: number): NumericProp {
+    return pbf.readFields(NumericPropReader._readField, {value: []}, end);
+  }
+  static _readField(this: void, tag: number, obj: NumericProp, pbf) {
+    if (tag === 1) pbf.readPackedDouble(obj.value);
+  }
+}
+
+// NumericPropKeyValue ========================================
+interface NumbericPropKeyValue {
+  key: string;
+  value: NumericProp;
+}
+
+class NumericPropKeyValueReader {
+  static read(pbf, end?: number): NumbericPropKeyValue {
+    return pbf.readFields(NumericPropKeyValueReader._readField, {key: '', value: null}, end);
+  }
+  static _readField(this: void, tag: number, obj: NumbericPropKeyValue, pbf) {
+    if (tag === 1) obj.key = pbf.readString();
+    else if (tag === 2) obj.value = NumericPropReader.read(pbf, pbf.readVarint() + pbf.pos);
+  }
+}
+
+// Points ========================================
+
+interface Points {
+  positions: Doubles;
+  globalFeatureIds: Ints;
+  featureIds: Ints;
+  properties: Properties[];
+  numericProps: Record<string, NumericProp>;
+}
+
+class PointsReader {
+  static read(pbf, end?: number): Points {
+    return pbf.readFields(
+      PointsReader._readField,
+      {positions: null, globalFeatureIds: null, featureIds: null, properties: [], numericProps: {}},
+      end
+    );
+  }
+  static _readField(this: void, tag: number, obj: Points, pbf) {
+    if (tag === 1) obj.positions = DoublesReader.read(pbf, pbf.readVarint() + pbf.pos);
+    else if (tag === 2) obj.globalFeatureIds = IntsReader.read(pbf, pbf.readVarint() + pbf.pos);
+    else if (tag === 3) obj.featureIds = IntsReader.read(pbf, pbf.readVarint() + pbf.pos);
+    else if (tag === 4) obj.properties.push(PropertiesReader.read(pbf, pbf.readVarint() + pbf.pos));
+    else if (tag === 5) {
+      const entry = NumericPropKeyValueReader.read(pbf, pbf.readVarint() + pbf.pos);
+      obj.numericProps[entry.key] = entry.value;
+    }
+  }
+}
+
+interface Lines extends Points {
+  pathIndices: Ints;
+}
+// Lines ========================================
+
+class LinesReader {
+  static read(pbf, end?: number): Lines {
+    return pbf.readFields(
+      LinesReader._readField,
+      {
+        positions: null,
+        pathIndices: null,
+        globalFeatureIds: null,
+        featureIds: null,
+        properties: [],
+        numericProps: {}
+      },
+      end
+    );
+  }
+  static _readField(this: void, tag: number, obj: Lines, pbf) {
+    if (tag === 1) obj.positions = DoublesReader.read(pbf, pbf.readVarint() + pbf.pos);
+    else if (tag === 2) obj.pathIndices = IntsReader.read(pbf, pbf.readVarint() + pbf.pos);
+    else if (tag === 3) obj.globalFeatureIds = IntsReader.read(pbf, pbf.readVarint() + pbf.pos);
+    else if (tag === 4) obj.featureIds = IntsReader.read(pbf, pbf.readVarint() + pbf.pos);
+    else if (tag === 5) obj.properties.push(PropertiesReader.read(pbf, pbf.readVarint() + pbf.pos));
+    else if (tag === 6) {
+      const entry = NumericPropKeyValueReader.read(pbf, pbf.readVarint() + pbf.pos);
+      obj.numericProps[entry.key] = entry.value;
+    }
+  }
+}
+// Polygons ========================================
+
+interface Polygons extends Points {
+  polygonIndices: Ints;
+  primitivePolygonIndices: Ints;
+  triangles: Ints;
+}
+
+class PolygonsReader {
+  static read(pbf, end?: number): Polygons {
+    return pbf.readFields(
+      PolygonsReader._readField,
+      {
+        positions: null,
+        polygonIndices: null,
+        globalFeatureIds: null,
+        featureIds: null,
+        primitivePolygonIndices: null,
+        triangles: null,
+        properties: [],
+        numericProps: {}
+      },
+      end
+    );
+  }
+  static _readField(this: void, tag: number, obj: Polygons, pbf) {
+    if (tag === 1) obj.positions = DoublesReader.read(pbf, pbf.readVarint() + pbf.pos);
+    else if (tag === 2) obj.polygonIndices = IntsReader.read(pbf, pbf.readVarint() + pbf.pos);
+    else if (tag === 3) obj.globalFeatureIds = IntsReader.read(pbf, pbf.readVarint() + pbf.pos);
+    else if (tag === 4) obj.featureIds = IntsReader.read(pbf, pbf.readVarint() + pbf.pos);
+    else if (tag === 5)
+      obj.primitivePolygonIndices = IntsReader.read(pbf, pbf.readVarint() + pbf.pos);
+    else if (tag === 6) obj.triangles = IntsReader.read(pbf, pbf.readVarint() + pbf.pos);
+    else if (tag === 7) obj.properties.push(PropertiesReader.read(pbf, pbf.readVarint() + pbf.pos));
+    else if (tag === 8) {
+      const entry = NumericPropKeyValueReader.read(pbf, pbf.readVarint() + pbf.pos);
+      obj.numericProps[entry.key] = entry.value;
+    }
+  }
+}
+
+// Tile ========================================
+
+export interface Tile {
+  points: Points;
+  lines: Lines;
+  polygons: Polygons;
+}
+
+export class TileReader {
+  static read(pbf, end?: number): Tile {
+    return pbf.readFields(TileReader._readField, {points: null, lines: null, polygons: null}, end);
+  }
+  static _readField(this: void, tag: number, obj: Tile, pbf) {
+    if (tag === 1) obj.points = PointsReader.read(pbf, pbf.readVarint() + pbf.pos);
+    else if (tag === 2) obj.lines = LinesReader.read(pbf, pbf.readVarint() + pbf.pos);
+    else if (tag === 3) obj.polygons = PolygonsReader.read(pbf, pbf.readVarint() + pbf.pos);
+  }
+}

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

@@ -1,195 +0,0 @@
-// KeyValueObject ========================================
-
-const KeyValueObject = {};
-
-KeyValueObject.read = function (pbf, end) {
-  return pbf.readFields(KeyValueObject._readField, {key: '', value: ''}, end);
-};
-KeyValueObject._readField = function (tag, obj, pbf) {
-  if (tag === 1) obj.key = pbf.readString();
-  else if (tag === 2) obj.value = pbf.readString();
-};
-
-// Properties ========================================
-
-const Properties = {};
-
-Properties.read = function (pbf, end) {
-  return pbf.readFields(Properties._readField, {data: []}, end);
-};
-Properties._readField = function (tag, obj, pbf) {
-  if (tag === 1) obj.data.push(KeyValueObject.read(pbf, pbf.readVarint() + pbf.pos));
-};
-
-// Doubles ========================================
-
-const Doubles = {};
-
-Doubles.read = function (pbf, end) {
-  // TODO perhaps we can do better and directly map from the source
-  // ArrayBuffer using ArrayBuffer.slice()
-  const {value, size} = pbf.readFields(Doubles._readField, {value: [], size: 0}, end);
-  return {value: new Float32Array(value), size};
-};
-Doubles._readField = function (tag, obj, pbf) {
-  if (tag === 1) pbf.readPackedDouble(obj.value);
-  else if (tag === 2) obj.size = pbf.readVarint(true);
-};
-
-// Ints ========================================
-
-const Ints = {};
-
-Ints.read = function (pbf, end) {
-  const {value, size} = pbf.readFields(Ints._readField, {value: [], size: 0}, end);
-  return {value: new Uint32Array(value), size};
-};
-Ints._readField = function (tag, obj, pbf) {
-  if (tag === 1) pbf.readPackedVarint(obj.value);
-  else if (tag === 2) obj.size = pbf.readVarint(true);
-};
-
-// NumericProp ========================================
-
-const NumericProp = {};
-
-NumericProp.read = function (pbf, end) {
-  return pbf.readFields(NumericProp._readField, {value: []}, end);
-};
-NumericProp._readField = function (tag, obj, pbf) {
-  if (tag === 1) pbf.readPackedDouble(obj.value);
-};
-
-// NumericPropKeyValue ========================================
-
-const NumericPropKeyValue = {};
-
-NumericPropKeyValue.read = function (pbf, end) {
-  return pbf.readFields(NumericPropKeyValue._readField, {key: '', value: null}, end);
-};
-NumericPropKeyValue._readField = function (tag, obj, pbf) {
-  if (tag === 1) obj.key = pbf.readString();
-  else if (tag === 2) obj.value = NumericProp.read(pbf, pbf.readVarint() + pbf.pos);
-};
-
-// NumericProp._FieldEntry1 ========================================
-
-NumericProp._FieldEntry1 = {};
-
-NumericProp._FieldEntry1.read = function (pbf, end) {
-  return pbf.readFields(NumericProp._FieldEntry1._readField, {key: '', value: 0}, end);
-};
-NumericProp._FieldEntry1._readField = function (tag, obj, pbf) {
-  if (tag === 1) obj.key = pbf.readString();
-  else if (tag === 2) obj.value = pbf.readDouble();
-};
-
-// StringProp ========================================
-
-const StringProp = {};
-
-StringProp.read = function (pbf, end) {
-  return pbf.readFields(StringProp._readField, {value: []}, end);
-};
-StringProp._readField = function (tag, obj, pbf) {
-  if (tag === 1) obj.value.push(pbf.readString());
-};
-
-// Points ========================================
-
-const Points = {};
-
-Points.read = function (pbf, end) {
-  return pbf.readFields(
-    Points._readField,
-    {positions: null, globalFeatureIds: null, featureIds: null, properties: [], numericProps: {}},
-    end
-  );
-};
-Points._readField = function (tag, obj, pbf) {
-  if (tag === 1) obj.positions = Doubles.read(pbf, pbf.readVarint() + pbf.pos);
-  else if (tag === 2) obj.globalFeatureIds = Ints.read(pbf, pbf.readVarint() + pbf.pos);
-  else if (tag === 3) obj.featureIds = Ints.read(pbf, pbf.readVarint() + pbf.pos);
-  else if (tag === 4) obj.properties.push(Properties.read(pbf, pbf.readVarint() + pbf.pos));
-  else if (tag === 5) {
-    const entry = NumericPropKeyValue.read(pbf, pbf.readVarint() + pbf.pos);
-    obj.numericProps[entry.key] = entry.value;
-  }
-};
-
-// Lines ========================================
-
-const Lines = {};
-
-Lines.read = function (pbf, end) {
-  return pbf.readFields(
-    Lines._readField,
-    {
-      positions: null,
-      pathIndices: null,
-      globalFeatureIds: null,
-      featureIds: null,
-      properties: [],
-      numericProps: {}
-    },
-    end
-  );
-};
-Lines._readField = function (tag, obj, pbf) {
-  if (tag === 1) obj.positions = Doubles.read(pbf, pbf.readVarint() + pbf.pos);
-  else if (tag === 2) obj.pathIndices = Ints.read(pbf, pbf.readVarint() + pbf.pos);
-  else if (tag === 3) obj.globalFeatureIds = Ints.read(pbf, pbf.readVarint() + pbf.pos);
-  else if (tag === 4) obj.featureIds = Ints.read(pbf, pbf.readVarint() + pbf.pos);
-  else if (tag === 5) obj.properties.push(Properties.read(pbf, pbf.readVarint() + pbf.pos));
-  else if (tag === 6) {
-    const entry = NumericPropKeyValue.read(pbf, pbf.readVarint() + pbf.pos);
-    obj.numericProps[entry.key] = entry.value;
-  }
-};
-
-// Polygons ========================================
-
-const Polygons = {};
-
-Polygons.read = function (pbf, end) {
-  return pbf.readFields(
-    Polygons._readField,
-    {
-      positions: null,
-      polygonIndices: null,
-      globalFeatureIds: null,
-      featureIds: null,
-      primitivePolygonIndices: null,
-      triangles: null,
-      properties: [],
-      numericProps: {}
-    },
-    end
-  );
-};
-Polygons._readField = function (tag, obj, pbf) {
-  if (tag === 1) obj.positions = Doubles.read(pbf, pbf.readVarint() + pbf.pos);
-  else if (tag === 2) obj.polygonIndices = Ints.read(pbf, pbf.readVarint() + pbf.pos);
-  else if (tag === 3) obj.globalFeatureIds = Ints.read(pbf, pbf.readVarint() + pbf.pos);
-  else if (tag === 4) obj.featureIds = Ints.read(pbf, pbf.readVarint() + pbf.pos);
-  else if (tag === 5) obj.primitivePolygonIndices = Ints.read(pbf, pbf.readVarint() + pbf.pos);
-  else if (tag === 6) obj.triangles = Ints.read(pbf, pbf.readVarint() + pbf.pos);
-  else if (tag === 7) obj.properties.push(Properties.read(pbf, pbf.readVarint() + pbf.pos));
-  else if (tag === 8) {
-    const entry = NumericPropKeyValue.read(pbf, pbf.readVarint() + pbf.pos);
-    obj.numericProps[entry.key] = entry.value;
-  }
-};
-
-// Tile ========================================
-
-export const Tile = {};
-
-Tile.read = function (pbf, end) {
-  return pbf.readFields(Tile._readField, {points: null, lines: null, polygons: null}, end);
-};
-Tile._readField = function (tag, obj, pbf) {
-  if (tag === 1) obj.points = Points.read(pbf, pbf.readVarint() + pbf.pos);
-  else if (tag === 2) obj.lines = Lines.read(pbf, pbf.readVarint() + pbf.pos);
-  else if (tag === 3) obj.polygons = Polygons.read(pbf, pbf.readVarint() + pbf.pos);
-};