diff --git a/docs/api-reference/extensions/data-filter-extension.md b/docs/api-reference/extensions/data-filter-extension.md index 96888a628b1..316ace65b01 100644 --- a/docs/api-reference/extensions/data-filter-extension.md +++ b/docs/api-reference/extensions/data-filter-extension.md @@ -13,6 +13,11 @@ The `DataFilterExtension` adds GPU-based data filtering functionalities to layer +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ```js import {GeoJsonLayer} from '@deck.gl/layers'; import {DataFilterExtension} from '@deck.gl/extensions'; @@ -35,6 +40,42 @@ const layer = new GeoJsonLayer({ }); ``` + + + +```ts +import {GeoJsonLayer} from '@deck.gl/layers'; +import {DataFilterExtension, DataFilterExtensionProps} from '@deck.gl/extensions'; +import type {Feature, Geometry} from 'geojson'; + +type PropertiesType = { + timeOfDay: number; +}; + +const layer = new GeoJsonLayer< + PropertiesType, + DataFilterExtensionProps> +>({ + id: 'geojson-layer', + data: GEOJSON, + + // props from GeoJsonLayer + getFillColor: [160, 160, 180], + getLineColor: [0, 0, 0], + getLineWidth: 10, + + // props added by DataFilterExtension + getFilterValue: (f: Feature) => f.properties.timeOfDay, // in seconds + filterRange: [43200, 46800], // 12:00 - 13:00 + + // Define extensions + extensions: [new DataFilterExtension({filterSize: 1})] +}); +``` + + + + ## Installation To install the dependencies from NPM: