@deck.gl/carto 9.0.24 → 9.0.26

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.0.24",
+  "version": "9.0.26",
   "publishConfig": {
     "access": "public"
   },
@@ -72,5 +72,5 @@
     "@deck.gl/layers": "^9.0.0",
     "@loaders.gl/core": "^4.2.0"
   },
-  "gitHead": "0949b9e539222d84d35b1b315e55710106409553"
+  "gitHead": "207f67da86ca13e92eee6b96a934b76f92926d4c"
 }

package/src/layers/raster-layer.ts

@@ -4,7 +4,8 @@ import {
   CompositeLayerProps,
   Layer,
   LayersList,
-  DefaultProps
+  DefaultProps,
+  PickingInfo
 } from '@deck.gl/core';
 import {ColumnLayer, ColumnLayerProps} from '@deck.gl/layers';
 import {quadbinToOffset} from './quadbin-utils';
@@ -83,6 +84,11 @@ export default class RasterLayer<DataT = any, ExtraProps = {}> extends Composite
   static layerName = 'RasterLayer';
   static defaultProps = defaultProps;
 
+  state!: {
+    highlightedObjectIndex: number;
+    highlightColor: number[];
+  };
+
   renderLayers(): Layer | null | LayersList {
     // Rendering props underlying layer
     const {
@@ -102,6 +108,7 @@ export default class RasterLayer<DataT = any, ExtraProps = {}> extends Composite
 
     // Filled Column Layer
     const CellLayer = this.getSubLayerClass('column', RasterColumnLayer);
+    const {highlightedObjectIndex, highlightColor} = this.state;
     return new CellLayer(
       this.props,
       this.getSubLayerProps({
@@ -118,7 +125,9 @@ export default class RasterLayer<DataT = any, ExtraProps = {}> extends Composite
           data, // Pass through data for getSubLayerAccessor()
           length: blockSize * blockSize
         },
-        offset
+        offset,
+        highlightedObjectIndex,
+        highlightColor
       }
     );
   }
@@ -137,4 +146,38 @@ export default class RasterLayer<DataT = any, ExtraProps = {}> extends Composite
       return accessor({properties: proxy}, info);
     };
   }
+
+  getPickingInfo(params: any) {
+    const info = super.getPickingInfo(params);
+
+    if (info.index !== -1) {
+      info.object = this.getSubLayerAccessor((x: any) => x)(undefined, {
+        data: this.props,
+        index: info.index
+      });
+    }
+
+    return info;
+  }
+
+  _updateAutoHighlight(info: PickingInfo) {
+    const {highlightedObjectIndex} = this.state;
+    let newHighlightedObjectIndex: number = -1;
+
+    if (info.index !== -1) {
+      newHighlightedObjectIndex = info.index;
+    }
+
+    if (highlightedObjectIndex !== newHighlightedObjectIndex) {
+      let {highlightColor} = this.props;
+      if (typeof highlightColor === 'function') {
+        highlightColor = highlightColor(info);
+      }
+
+      this.setState({
+        highlightColor,
+        highlightedObjectIndex: newHighlightedObjectIndex
+      });
+    }
+  }
 }

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

@@ -1,10 +1,10 @@
 import {CompositeLayer, CompositeLayerProps, DefaultProps, Layer, LayersList} from '@deck.gl/core';
 import RasterLayer, {RasterLayerProps} from './raster-layer';
 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';
+import {TileLayer, TileLayerProps} from '@deck.gl/geo-layers';
 
 export const renderSubLayers = props => {
   const tileIndex = props.tile?.index?.q;
@@ -23,7 +23,7 @@ export type RasterTileLayerProps<DataT = unknown> = _RasterTileLayerProps<DataT>
 
 /** Properties added by RasterTileLayer. */
 type _RasterTileLayerProps<DataT> = Omit<RasterLayerProps<DataT>, 'data'> &
-  Omit<SpatialIndexTileLayerProps<DataT>, 'data'> & {
+  Omit<TileLayerProps<DataT>, 'data'> & {
     data: null | TilejsonResult | Promise<TilejsonResult>;
   };
 
@@ -48,7 +48,7 @@ export default class RasterTileLayer<
     const {tiles: data, minzoom: minZoom, maxzoom: maxZoom} = tileJSON;
     return [
       // @ts-ignore
-      new SpatialIndexTileLayer(this.props, {
+      new TileLayer(this.props, {
         id: `raster-tile-layer-${this.props.id}`,
         data,
         // TODO: Tileset2D should be generic over TileIndex type

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

@@ -1,5 +1,5 @@
 import {registerLoaders} from '@loaders.gl/core';
-import {DefaultProps} from '@deck.gl/core';
+import {DefaultProps, LayerProps} from '@deck.gl/core';
 import CartoRasterTileLoader from './schema/carto-raster-tile-loader';
 import CartoSpatialTileLoader from './schema/carto-spatial-tile-loader';
 registerLoaders([CartoRasterTileLoader, CartoSpatialTileLoader]);
@@ -57,7 +57,7 @@ export default class SpatialIndexTileLayer<
     }
   }
 
-  getSubLayerPropsByTile(tile: Tile2DHeader) {
+  getSubLayerPropsByTile(tile: Tile2DHeader): Partial<LayerProps> | null {
     return {
       highlightedObjectIndex: this.getHighlightedObjectIndex(tile),
       highlightColor: this.state.highlightColor

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

@@ -134,11 +134,31 @@ export default class VectorTileLayer<
     const tileBbox = props.tile.bbox as any;
     const {west, south, east, north} = tileBbox;
 
+    const extensions = [new ClipExtension(), ...(props.extensions || [])];
+    const clipProps = {
+      clipBounds: [west, south, east, north]
+    };
+
+    const applyClipExtensionToSublayerProps = (subLayerId: string) => {
+      return {
+        [subLayerId]: {
+          ...clipProps,
+          ...props?._subLayerProps?.[subLayerId],
+          extensions: [...extensions, ...(props?._subLayerProps?.[subLayerId]?.extensions || [])]
+        }
+      };
+    };
+
     const subLayerProps = {
       ...props,
       autoHighlight: false,
-      extensions: [new ClipExtension(), ...(props.extensions || [])],
-      clipBounds: [west, south, east, north]
+      // Do not perform clipping on points (#9059)
+      _subLayerProps: {
+        ...props._subLayerProps,
+        ...applyClipExtensionToSublayerProps('polygons-fill'),
+        ...applyClipExtensionToSublayerProps('polygons-stroke'),
+        ...applyClipExtensionToSublayerProps('linestrings')
+      }
     };
 
     const subLayer = new GeoJsonLayer(subLayerProps);

package/src/sources/h3-query-source.ts

@@ -3,13 +3,17 @@ import {DEFAULT_AGGREGATION_RES_LEVEL_H3} from '../constants';
 import {baseSource} from './base-source';
 import type {
   AggregationOptions,
+  FilterOptions,
   QuerySourceOptions,
   SourceOptions,
   SpatialDataType,
   TilejsonResult
 } from './types';
 
-export type H3QuerySourceOptions = SourceOptions & QuerySourceOptions & AggregationOptions;
+export type H3QuerySourceOptions = SourceOptions &
+  QuerySourceOptions &
+  AggregationOptions &
+  FilterOptions;
 type UrlParameters = {
   aggregationExp: string;
   aggregationResLevel?: string;
@@ -17,6 +21,7 @@ type UrlParameters = {
   spatialDataColumn?: string;
   q: string;
   queryParameters?: Record<string, unknown> | unknown[];
+  filters?: Record<string, unknown>;
 };
 
 export const h3QuerySource = async function (
@@ -27,7 +32,8 @@ export const h3QuerySource = async function (
     aggregationResLevel = DEFAULT_AGGREGATION_RES_LEVEL_H3,
     sqlQuery,
     spatialDataColumn = 'h3',
-    queryParameters
+    queryParameters,
+    filters
   } = options;
   const urlParameters: UrlParameters = {
     aggregationExp,
@@ -42,5 +48,8 @@ export const h3QuerySource = async function (
   if (queryParameters) {
     urlParameters.queryParameters = queryParameters;
   }
+  if (filters) {
+    urlParameters.filters = filters;
+  }
   return baseSource<UrlParameters>('query', options, urlParameters) as Promise<TilejsonResult>;
 };

package/src/sources/h3-table-source.ts

@@ -3,13 +3,17 @@ import {DEFAULT_AGGREGATION_RES_LEVEL_H3} from '../constants';
 import {baseSource} from './base-source';
 import type {
   AggregationOptions,
+  FilterOptions,
   SourceOptions,
   SpatialDataType,
   TableSourceOptions,
   TilejsonResult
 } from './types';
 
-export type H3TableSourceOptions = SourceOptions & TableSourceOptions & AggregationOptions;
+export type H3TableSourceOptions = SourceOptions &
+  TableSourceOptions &
+  AggregationOptions &
+  FilterOptions;
 
 type UrlParameters = {
   aggregationExp: string;
@@ -17,6 +21,7 @@ type UrlParameters = {
   spatialDataType: SpatialDataType;
   spatialDataColumn?: string;
   name: string;
+  filters?: Record<string, unknown>;
 };
 
 export const h3TableSource = async function (
@@ -26,7 +31,8 @@ export const h3TableSource = async function (
     aggregationExp,
     aggregationResLevel = DEFAULT_AGGREGATION_RES_LEVEL_H3,
     spatialDataColumn = 'h3',
-    tableName
+    tableName,
+    filters
   } = options;
   const urlParameters: UrlParameters = {
     aggregationExp,
@@ -38,5 +44,8 @@ export const h3TableSource = async function (
   if (aggregationResLevel) {
     urlParameters.aggregationResLevel = String(aggregationResLevel);
   }
+  if (filters) {
+    urlParameters.filters = filters;
+  }
   return baseSource<UrlParameters>('table', options, urlParameters) as Promise<TilejsonResult>;
 };

package/src/sources/quadbin-query-source.ts

@@ -3,13 +3,17 @@ import {DEFAULT_AGGREGATION_RES_LEVEL_QUADBIN} from '../constants';
 import {baseSource} from './base-source';
 import type {
   AggregationOptions,
+  FilterOptions,
   QuerySourceOptions,
   SourceOptions,
   SpatialDataType,
   TilejsonResult
 } from './types';
 
-export type QuadbinQuerySourceOptions = SourceOptions & QuerySourceOptions & AggregationOptions;
+export type QuadbinQuerySourceOptions = SourceOptions &
+  QuerySourceOptions &
+  AggregationOptions &
+  FilterOptions;
 
 type UrlParameters = {
   aggregationExp: string;
@@ -18,6 +22,7 @@ type UrlParameters = {
   spatialDataColumn?: string;
   q: string;
   queryParameters?: Record<string, unknown> | unknown[];
+  filters?: Record<string, unknown>;
 };
 
 export const quadbinQuerySource = async function (
@@ -28,7 +33,8 @@ export const quadbinQuerySource = async function (
     aggregationResLevel = DEFAULT_AGGREGATION_RES_LEVEL_QUADBIN,
     sqlQuery,
     spatialDataColumn = 'quadbin',
-    queryParameters
+    queryParameters,
+    filters
   } = options;
   const urlParameters: UrlParameters = {
     aggregationExp,
@@ -43,5 +49,8 @@ export const quadbinQuerySource = async function (
   if (queryParameters) {
     urlParameters.queryParameters = queryParameters;
   }
+  if (filters) {
+    urlParameters.filters = filters;
+  }
   return baseSource<UrlParameters>('query', options, urlParameters) as Promise<TilejsonResult>;
 };

package/src/sources/quadbin-table-source.ts

@@ -3,13 +3,17 @@ import {DEFAULT_AGGREGATION_RES_LEVEL_QUADBIN} from '../constants';
 import {baseSource} from './base-source';
 import type {
   AggregationOptions,
+  FilterOptions,
   SourceOptions,
   SpatialDataType,
   TableSourceOptions,
   TilejsonResult
 } from './types';
 
-export type QuadbinTableSourceOptions = SourceOptions & TableSourceOptions & AggregationOptions;
+export type QuadbinTableSourceOptions = SourceOptions &
+  TableSourceOptions &
+  AggregationOptions &
+  FilterOptions;
 
 type UrlParameters = {
   aggregationExp: string;
@@ -17,6 +21,7 @@ type UrlParameters = {
   spatialDataType: SpatialDataType;
   spatialDataColumn?: string;
   name: string;
+  filters?: Record<string, unknown>;
 };
 
 export const quadbinTableSource = async function (
@@ -26,7 +31,8 @@ export const quadbinTableSource = async function (
     aggregationExp,
     aggregationResLevel = DEFAULT_AGGREGATION_RES_LEVEL_QUADBIN,
     spatialDataColumn = 'quadbin',
-    tableName
+    tableName,
+    filters
   } = options;
 
   const urlParameters: UrlParameters = {
@@ -39,5 +45,8 @@ export const quadbinTableSource = async function (
   if (aggregationResLevel) {
     urlParameters.aggregationResLevel = String(aggregationResLevel);
   }
+  if (filters) {
+    urlParameters.filters = filters;
+  }
   return baseSource<UrlParameters>('table', options, urlParameters) as Promise<TilejsonResult>;
 };

package/src/utils.ts

@@ -22,6 +22,14 @@ export function createBinaryProxy(
 
     has(target, property) {
       return property in numericProps || property in target;
+    },
+
+    ownKeys(target) {
+      return [...Object.keys(numericProps), ...Reflect.ownKeys(target)];
+    },
+
+    getOwnPropertyDescriptor(target, prop) {
+      return {enumerable: true, configurable: true};
     }
   });
 }