@deck.gl/carto 9.0.0-alpha.7 → 9.0.0-beta.10

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-alpha.7",
+  "type": "module",
+  "version": "9.0.0-beta.10",
   "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.53",
-    "@luma.gl/core": "9.0.0-alpha.53",
+    "@loaders.gl/gis": "^4.1.4",
+    "@loaders.gl/loader-utils": "^4.1.4",
+    "@loaders.gl/mvt": "^4.1.4",
+    "@loaders.gl/schema": "^4.1.4",
+    "@loaders.gl/tiles": "^4.1.4",
+    "@luma.gl/constants": "^9.0.4",
     "@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.1.4",
+    "@luma.gl/core": "^9.0.4"
   },
-  "gitHead": "de061268077ab74e163792162efbc07be95d10f5"
+  "gitHead": "6c44f602069374cd21268ff279c5bf818c905ff7"
 }

package/src/api/common.ts

@@ -1,10 +1,9 @@
 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
 };
 

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,7 +9,7 @@ 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,
@@ -23,46 +23,59 @@ export async function requestWithParameters<T = any>({
   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(url, {method: 'POST', body: JSON.stringify(parameters), headers});
-    } else {
-      response = await fetch(url, {headers});
-    }
-    let json: any;
-    try {
-      json = await response.json();
+
+  /* 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);
+      }
       if (accessToken) {
         json.accessToken = accessToken;
       }
-    } 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. */

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;

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

@@ -36,11 +36,10 @@ export class BandReader {
 
 export class TileReader {
   static read(pbf, end) {
-    return pbf.readFields(TileReader._readField, {blockWidth: 0, blockHeight: 0, bands: []}, end);
+    return pbf.readFields(TileReader._readField, {blockSize: 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));
+    if (tag === 1) obj.blockSize = pbf.readVarint();
+    else if (tag === 2) obj.bands.push(BandReader.read(pbf, pbf.readVarint() + pbf.pos));
   }
 }

package/src/layers/spatial-index-tile-layer.ts

@@ -6,12 +6,15 @@ registerLoaders([CartoRasterTileLoader, CartoSpatialTileLoader]);
 
 import {PickingInfo} from '@deck.gl/core';
 import {TileLayer, _Tile2DHeader as Tile2DHeader, TileLayerProps} from '@deck.gl/geo-layers';
+import {DEFAULT_TILE_SIZE} from '../constants';
 
 function isFeatureIdDefined(value: unknown): boolean {
   return value !== undefined && value !== null && value !== '';
 }
 
-const defaultProps: DefaultProps<SpatialIndexTileLayerProps> = {};
+const defaultProps: DefaultProps<SpatialIndexTileLayerProps> = {
+  tileSize: DEFAULT_TILE_SIZE
+};
 
 /** All properties supported by SpatialIndexTileLayer. */
 export type SpatialIndexTileLayerProps<DataT = unknown> = _SpatialIndexTileLayerProps &
@@ -28,14 +31,14 @@ export default class SpatialIndexTileLayer<
   static defaultProps = defaultProps;
 
   state!: TileLayer<DataT>['state'] & {
-    hoveredFeatureId: number | null;
+    hoveredFeatureId: BigInt | number | null;
     highlightColor: number[];
   };
 
   protected _updateAutoHighlight(info: PickingInfo): void {
     const {hoveredFeatureId} = this.state;
     const hoveredFeature = info.object;
-    let newHoveredFeatureId;
+    let newHoveredFeatureId: BigInt | number | null = null;
 
     if (hoveredFeature) {
       newHoveredFeatureId = hoveredFeature.id;
@@ -79,6 +82,7 @@ export default class SpatialIndexTileLayer<
   }
 
   _featureInTile(tile: Tile2DHeader, featureId: BigInt | number) {
+    // TODO: Tile2DHeader index should be generic for H3TileIndex or QuadbinTileIndex
     const tileset = this.state.tileset!;
     const tileZoom = tileset.getTileZoom(tile.index);
     // @ts-ignore

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

@@ -16,30 +16,33 @@ import {
 import {GeoJsonLayer} from '@deck.gl/layers';
 import {binaryToGeojson} from '@loaders.gl/gis';
 import type {BinaryFeatureCollection} from '@loaders.gl/schema';
-import type {Feature} from 'geojson';
+import type {Feature, Geometry} from 'geojson';
 
 import type {TilejsonResult} from '../sources/types';
 import {TilejsonPropType, injectAccessToken, mergeBoundaryData} from './utils';
+import {DEFAULT_TILE_SIZE} from '../constants';
 
 const defaultProps: DefaultProps<VectorTileLayerProps> = {
   ...MVTLayer.defaultProps,
   data: TilejsonPropType,
-  dataComparator: TilejsonPropType.equal
+  dataComparator: TilejsonPropType.equal,
+  tileSize: DEFAULT_TILE_SIZE
 };
 
 /** All properties supported by VectorTileLayer. */
-export type VectorTileLayerProps = _VectorTileLayerProps & Omit<MVTLayerProps, 'data'>;
+export type VectorTileLayerProps<FeaturePropertiesT = unknown> = _VectorTileLayerProps &
+  Omit<MVTLayerProps<FeaturePropertiesT>, 'data'>;
 
 /** Properties added by VectorTileLayer. */
 type _VectorTileLayerProps = {
   data: null | TilejsonResult | Promise<TilejsonResult>;
 };
 
-// TODO Perhaps we can't subclass MVTLayer and keep types. Better to subclass TileLayer instead?
 // @ts-ignore
-export default class VectorTileLayer<ExtraProps extends {} = {}> extends MVTLayer<
-  Required<_VectorTileLayerProps> & ExtraProps
-> {
+export default class VectorTileLayer<
+  FeaturePropertiesT = any,
+  ExtraProps extends {} = {}
+> extends MVTLayer<FeaturePropertiesT, Required<_VectorTileLayerProps> & ExtraProps> {
   static layerName = 'VectorTileLayer';
   static defaultProps = defaultProps;
 
@@ -47,6 +50,12 @@ export default class VectorTileLayer<ExtraProps extends {} = {}> extends MVTLaye
     mvt: boolean;
   };
 
+  constructor(...propObjects: VectorTileLayerProps<FeaturePropertiesT>[]) {
+    // Force externally visible props type, as it is not possible modify via extension
+    // @ts-ignore
+    super(...propObjects);
+  }
+
   initializeState(): void {
     super.initializeState();
     this.setState({binary: true});
@@ -144,7 +153,7 @@ export default class VectorTileLayer<ExtraProps extends {} = {}> extends MVTLaye
       const {data} = params.sourceLayer!.props;
       info.object = binaryToGeojson(data as BinaryFeatureCollection, {
         globalFeatureId: info.index
-      }) as Feature;
+      }) as Feature<Geometry, FeaturePropertiesT>;
     }
 
     return info;

package/src/sources/base-source.ts

@@ -32,18 +32,19 @@ export async function baseSource<UrlParameters extends Record<string, string>>(
     }
   }
   const baseUrl = buildSourceUrl(mergedOptions);
-  const {format} = mergedOptions;
+  const {clientId, format} = mergedOptions;
   const headers = {Authorization: `Bearer ${options.accessToken}`, ...options.headers};
+  const parameters = {client: clientId, ...urlParameters};
 
   const errorContext: APIErrorContext = {
     requestType: 'Map instantiation',
     connection: options.connectionName,
     type: endpoint,
-    source: JSON.stringify(urlParameters, undefined, 2)
+    source: JSON.stringify(parameters, undefined, 2)
   };
   const mapInstantiation = await requestWithParameters<TilejsonMapInstantiation>({
     baseUrl,
-    parameters: urlParameters,
+    parameters,
     headers,
     errorContext
   });