diff --git a/docs/api-reference/core/widget.md b/docs/api-reference/core/widget.md index 42de7b7fbbd..8a44f3a8390 100644 --- a/docs/api-reference/core/widget.md +++ b/docs/api-reference/core/widget.md @@ -9,11 +9,11 @@ The `Widget` class is a base class used to define new widgets and should not be ## Types -#### `WidgetProps` (object) {#props} +#### `WidgetProps` (object) {#widgetprops} Options for the widget, as passed into the constructor and can be updated with `setProps`. -#### `id` {#id} +#### `id` (string) {#id} The `id` string must be unique among all your widgets at a given time. While a default `id` is provided, it is recommended to set `id` explicitly if you have multiple widgets of the same type. @@ -41,25 +41,25 @@ Widget positioning within the view. One of: - `'bottom-right'` - `'fill'` -#### `style` +#### `style` (object, optional) {#style} -CSS inline style overrides. +Additional inline CSS styles on the top HTML element. ```ts style?: Partial; ``` -#### `className` +* Default: `{}` -Additional CSS classnames for interaction with custom stylesheets. +#### `className` (string, optional) {#classname} + +Additional CSS classnames on the top HTML element. -```ts - className?: string; -``` +* Default: `''` ### Methods for Widget Writers -#### `constructor` +#### `constructor` {#constructor} Supply the props and default props to the base class. @@ -71,7 +71,7 @@ Called to update widget options. Updates the widget. Called by the specific widget when state has changed. Calls `onRenderHTML()` -#### `onRenderHTML` +#### `onRenderHTML` {#onrenderhtml} This function is implemented by the specific widget subclass to update the HTML for the widget diff --git a/docs/api-reference/layers/line-layer.md b/docs/api-reference/layers/line-layer.md index c61ff8e974d..1865be02ccc 100644 --- a/docs/api-reference/layers/line-layer.md +++ b/docs/api-reference/layers/line-layer.md @@ -1,4 +1,5 @@ # LineLayer +![webgpu](https://img.shields.io/badge/webgpu-supported-blue.svg?style=flat-square) import {LineLayerDemo} from '@site/src/doc-demos/layers'; diff --git a/docs/api-reference/layers/point-cloud-layer.md b/docs/api-reference/layers/point-cloud-layer.md index b23794ac3cf..b3bab0a0e99 100644 --- a/docs/api-reference/layers/point-cloud-layer.md +++ b/docs/api-reference/layers/point-cloud-layer.md @@ -1,4 +1,5 @@ # PointCloudLayer +[webgpu](https://img.shields.io/badge/webgpu-supported-blue.svg?style=flat-square) import {PointCloudLayerDemo} from '@site/src/doc-demos/layers'; diff --git a/docs/api-reference/layers/scatterplot-layer.md b/docs/api-reference/layers/scatterplot-layer.md index 72ca3dcca02..9cc8d7ebbf3 100644 --- a/docs/api-reference/layers/scatterplot-layer.md +++ b/docs/api-reference/layers/scatterplot-layer.md @@ -1,4 +1,5 @@ # ScatterplotLayer +![webgpu](https://img.shields.io/badge/webgpu-supported-blue.svg?style=flat-square) import {ScatterplotLayerDemo} from '@site/src/doc-demos/layers'; diff --git a/docs/api-reference/layers/text-layer.md b/docs/api-reference/layers/text-layer.md index bfc29b22085..f0684bb1262 100644 --- a/docs/api-reference/layers/text-layer.md +++ b/docs/api-reference/layers/text-layer.md @@ -198,7 +198,7 @@ If `true`, the text always faces camera. Otherwise the text faces up (z). Whether to render background for the text blocks. -#### `backgroundBorderRadius` (number | number[4], optional) {#backgroundBorderRadius} +#### `backgroundBorderRadius` (number | number[4], optional) {#backgroundborderradius} - Default `0` diff --git a/docs/api-reference/widgets/compass-widget.md b/docs/api-reference/widgets/compass-widget.md index cc6236c4b07..1dea1315df4 100644 --- a/docs/api-reference/widgets/compass-widget.md +++ b/docs/api-reference/widgets/compass-widget.md @@ -18,9 +18,9 @@ const deck = new Deck({ ## Types -### `CompassWidgetProps` +### `CompassWidgetProps` {#compasswidgetprops} -The `CompassWidget` accepts the generic [`WidgetProps`](../core/widget.md#props): +The `CompassWidget` accepts the generic [`WidgetProps`](../core/widget.md#widgetprops): - `id` (default `'compass'`) - Unique id for this widget - `placement` (default `'top-left'`) - Widget position within the view relative to the map container diff --git a/docs/api-reference/widgets/context-menu-widget.md b/docs/api-reference/widgets/context-menu-widget.md new file mode 100644 index 00000000000..34bb2a32dca --- /dev/null +++ b/docs/api-reference/widgets/context-menu-widget.md @@ -0,0 +1,61 @@ +import {WidgetPreview} from '@site/src/doc-demos/widgets'; +import {_ContextMenuWidget as ContextMenuWidget} from '@deck.gl/widgets'; + +# ContextMenuWidget (Experimental) + +Displays a context menu on right-click events with customizable menu items based on picked objects. + + + +```ts +import {Deck} from '@deck.gl/core'; +import {_ContextMenuWidget as ContextMenuWidget} from '@deck.gl/widgets'; + +const deck = new Deck({ + widgets: [ + new ContextMenuWidget({ + getMenuItems: (info, widget) => { + if (info.object) { + const name = info.object.properties.name; + return [ + {key: 'name', label: name}, + {key: 'delete', label: 'Delete'} + ]; + } + return [{label: 'Add Point', key: 'add'}]; + }, + onMenuItemSelected: (key, pickInfo) => { + if (key === 'add') addPoint(pickInfo); + if (key === 'delete') deletePoint(pickInfo); + } + }) + ] +}); +``` + +## Types + +### `ContextMenuWidgetProps` {#contextmenuwidgetprops} + +The `ContextMenuWidget` accepts the generic [`WidgetProps`](../core/widget.md#widgetprops) and: + +- `id` (string, default: `'context'`) - **Required.** Unique id for this widget +- `getMenuItems` (function) - **Required.** Function that returns menu items based on the picked object. Receives `PickingInfo` and returns an array of `ContextWidgetMenuItem` objects or `null`. +- `onMenuItemSelected` (function, optional) - Callback invoked when a menu item is selected. Receives the selected item key and `PickingInfo`. +- `visible` (boolean, default `false`) - Controls visibility of the context menu. +- `position` (object, default `{x: 0, y: 0}`) - Screen position where the menu appears. +- `menuItems` (array, default `[]`) - Current menu items to display. + +### `ContextWidgetMenuItem` {#contextwidgetmenuitem} + +Menu item definition: + +- `label` (string) - Display text for the menu item +- `key` (string) - Unique identifier for the menu item + +## Behavior + +- Right-click events trigger the context menu +- Menu items are dynamically generated based on what was clicked +- Click elsewhere to hide the menu +- Menu automatically positions itself at the cursor location diff --git a/docs/api-reference/widgets/fps-widget.md b/docs/api-reference/widgets/fps-widget.md index a8e30e33d1d..87edbadc48a 100644 --- a/docs/api-reference/widgets/fps-widget.md +++ b/docs/api-reference/widgets/fps-widget.md @@ -17,9 +17,9 @@ new Deck({ ## Types -### `FpsWidgetProps` +### `FpsWidgetProps` {#fpswidgetprops} -The `FpsWidget` accepts the generic [`WidgetProps`](../core/widget.md#props): +The `FpsWidget` accepts the generic [`WidgetProps`](../core/widget.md#widgetprops): - `id` (default `'fps'`) - Unique id for this widget - `placement` (default `'top-left'`) - Widget position within the view relative to the map container diff --git a/docs/api-reference/widgets/fullscreen-widget.md b/docs/api-reference/widgets/fullscreen-widget.md index 2edf62e76cd..c64d2eb999e 100644 --- a/docs/api-reference/widgets/fullscreen-widget.md +++ b/docs/api-reference/widgets/fullscreen-widget.md @@ -18,9 +18,9 @@ const deck = new Deck({ ## Types -### `FullscreenWidgetProps` +### `FullscreenWidgetProps` {#fullscreenwidgetprops} -The `FullscreenWidget` accepts the generic [`WidgetProps`](../core/widget.md#props): +The `FullscreenWidget` accepts the generic [`WidgetProps`](../core/widget.md#widgetprops): - `id` (default `'fullscreen'`) - Unique id for this widget - `placement` (default `'top-left'`) - Widget position within the view relative to the map container diff --git a/docs/api-reference/widgets/geocoder-widget.md b/docs/api-reference/widgets/geocoder-widget.md index c31e02fba7c..59f4d829979 100644 --- a/docs/api-reference/widgets/geocoder-widget.md +++ b/docs/api-reference/widgets/geocoder-widget.md @@ -1,3 +1,6 @@ +import {WidgetPreview} from '@site/src/doc-demos/widgets'; +import {GeocoderWidget} from '@deck.gl/widgets'; + # GeocoderWidget The GeocoderWidget helps the user find positions on the map. @@ -8,7 +11,7 @@ The user types an address or coordinates into the text field and press **Go** to Addresses that return a valid location are stored in browser local storage (up to five entries). They will appear in the drop-down for quick re-use during later visits. -## Usage + ```ts import {GeocoderWidget} from '@deck.gl/widgets'; @@ -19,9 +22,23 @@ new Deck({ }); ``` -## Props +## Types + +### `GeocoderWidgetProps` {#geocoderwidgetprops} + +The `GeocoderWidgetProps` accepts the generic [`WidgetProps`](../core/widget.md#widgetprops): + +- `id` (default `'geocoder'`) - Unique id for this widget +- `placement` (default `'top-left'`) - Widget position within the view relative to the map container +- `viewId` (default `null`) - The `viewId` prop controls how a widget interacts with views. +- `style` (default `{}`) - Additional inline styles on the top HTML element. +- `className` (default `''`) - Additional classnames on the top HTML element. -The `GeocoderWidget` shares the base properties listed on the [widget overview page](./overview.md). Additional options are listed below. +#### `label` (string, optional) {#label} + +Tooltip message displayed while hovering a mouse over the widget. + +Default: `'Geocoder'` #### `geocoder` (string, optional) {#geocoder} @@ -29,15 +46,21 @@ Default: `'coordinates'` Which geocoding service to use. Supported values are `'coordinates'`, `'google'`, `'mapbox'`, `'opencage'`, or `'custom'`. -#### `apiKey` (string, optional) {#apiKey} +#### `apiKey` (string, optional) {#apikey} Required if `geocoder` is set to a third party provider. For quick testing, applications can use the `coordinates` geocode does not require an api key. -#### `customGeocoder` (optional) {#customGeocoder} +#### `customGeocoder` (optional) {#customgeocoder} Only used when `geocoder` is `'custom'`. A function that receives the entered text and an API key, and resolves to a `{longitude, latitude}` object when successful. -#### `_geolocation` (optional) {#geolocation} +#### `transitionDuration` (number, optional) {#transitionduration} + +Default: `200` + +View state transition duration in milliseconds. + +#### `_geolocation` (optional) {#_geolocation} In addition to addresses / coordinates, one position of obvious interest is the user's own current position. This experimental option adds a `current` menu item that calls the browser's geolocation API and navigates to the user's current position. Note that this requires the user to enable geolocation in the browser. diff --git a/docs/api-reference/widgets/info-widget.md b/docs/api-reference/widgets/info-widget.md index de9d775a70f..d641390063c 100644 --- a/docs/api-reference/widgets/info-widget.md +++ b/docs/api-reference/widgets/info-widget.md @@ -32,9 +32,9 @@ const deck = new Deck({ ## Types -### `InfoWidgetProps` +### `InfoWidgetProps` {#infowidgetprops} -The `InfoWidget` accepts the generic [`WidgetProps`](../core/widget.md#props): +The `InfoWidget` accepts the generic [`WidgetProps`](../core/widget.md#widgetprops): - `id` (default `'info'`) - Unique id for this widget - `placement` (default `'top-left'`) - Widget position within the view relative to the map container diff --git a/docs/api-reference/widgets/loading-widget.md b/docs/api-reference/widgets/loading-widget.md index ff8c1ff6f3a..5cfc926b4d7 100644 --- a/docs/api-reference/widgets/loading-widget.md +++ b/docs/api-reference/widgets/loading-widget.md @@ -20,9 +20,9 @@ const deck = new Deck({ ## Types -### `LoadingnWidgetProps` +### `LoadingWidgetProps` {#loadingwidgetprops} -The `LoadingnWidget` accepts the generic [`WidgetProps`](../core/widget.md#props): +The `LoadingWidget` accepts the generic [`WidgetProps`](../core/widget.md#widgetprops): - `id` (default `'loading'`) - Unique id for this widget - `placement` (default `'top-left'`) - Widget position within the view relative to the map container @@ -54,4 +54,4 @@ Default: `'Loading data'` ## Source -[modules/widgets/src/loading-widget.tsx](https://github.com/visgl/deck.gl/tree/master/modules/widgets/src/loading-widget.tsx) \ No newline at end of file +[modules/widgets/src/loading-widget.tsx](https://github.com/visgl/deck.gl/tree/master/modules/widgets/src/loading-widget.tsx) diff --git a/docs/api-reference/widgets/reset-view-widget.md b/docs/api-reference/widgets/reset-view-widget.md index 94e55df76f7..84fbc75d90a 100644 --- a/docs/api-reference/widgets/reset-view-widget.md +++ b/docs/api-reference/widgets/reset-view-widget.md @@ -20,9 +20,9 @@ const deck = new Deck({ ## Types -### `ResetViewWidgetProps` +### `ResetViewWidgetProps` {#resetviewwidgetprops} -The `ResetViewWidget` accepts the generic [`WidgetProps`](../core/widget.md#props): +The `ResetViewWidget` accepts the generic [`WidgetProps`](../core/widget.md#widgetprops): - `id` (default `'reset-view'`) - Unique id for this widget - `placement` (default `'top-left'`) - Widget position within the view relative to the map container diff --git a/docs/api-reference/widgets/scale-widget.md b/docs/api-reference/widgets/scale-widget.md index 0a9b371e60b..567df88b109 100644 --- a/docs/api-reference/widgets/scale-widget.md +++ b/docs/api-reference/widgets/scale-widget.md @@ -20,9 +20,9 @@ const deck = new Deck({ # Types -### `ResetViewWidgetProps` +### `ResetViewWidgetProps` {#resetviewwidgetprops} -The `ResetViewWidget` accepts the generic [`WidgetProps`](../core/widget.md#props): +The `ResetViewWidget` accepts the generic [`WidgetProps`](../core/widget.md#widgetprops): - `id` (default `'scale'`) - Unique id for this widget - `placement` (default `'top-left'`) - Widget position within the view relative to the map container diff --git a/docs/api-reference/widgets/screenshot-widget.md b/docs/api-reference/widgets/screenshot-widget.md index 3c5936a02c4..2c34c6df188 100644 --- a/docs/api-reference/widgets/screenshot-widget.md +++ b/docs/api-reference/widgets/screenshot-widget.md @@ -23,9 +23,9 @@ const deck = new Deck({ }); ``` -### `ScreenshotWidgetProps` +### `ScreenshotWidgetProps` {#screenshotwidgetprops} -The `ScreenshotWidget` accepts the generic [`WidgetProps`](../core/widget.md#props): +The `ScreenshotWidget` accepts the generic [`WidgetProps`](../core/widget.md#widgetprops): - `id` (default `'screenshot'`) - Unique id for this widget - `placement` (default `'top-left'`) - Widget position within the view relative to the map container @@ -39,7 +39,7 @@ Tooltip message displayed while hovering a mouse over the widget. Default: `'Screenshot'` -#### `imageFormat` (string, optional) {#imageFormat} +#### `imageFormat` (string, optional) {#imageformat} Format of the downloaded image. Browser dependent, may support `image/jpeg`, `image/webp`, `image/avif` diff --git a/docs/api-reference/widgets/splitter-widget.md b/docs/api-reference/widgets/splitter-widget.md index 6fdbe7dc857..e0bb84c01c1 100644 --- a/docs/api-reference/widgets/splitter-widget.md +++ b/docs/api-reference/widgets/splitter-widget.md @@ -39,9 +39,9 @@ const deck = new Deck({ }); ``` -### `SplitterWidgetProps` +### `SplitterWidgetProps` {#splitterwidgetprops} -The `SplitterWidget` accepts the generic [`WidgetProps`](../core/widget.md#props): +The `SplitterWidget` accepts the generic [`WidgetProps`](../core/widget.md#widgetprops): - `id` (default `'splitter'`) - Unique id for this widget - `placement` (default `'top-left'`) - Widget position within the view relative to the map container diff --git a/docs/api-reference/widgets/stats-widget.md b/docs/api-reference/widgets/stats-widget.md new file mode 100644 index 00000000000..54bdd4e651f --- /dev/null +++ b/docs/api-reference/widgets/stats-widget.md @@ -0,0 +1,56 @@ +import {WidgetPreview} from '@site/src/doc-demos/widgets'; +import {_StatsWidget as StatsWidget} from '@deck.gl/widgets'; + +# StatsWidget (Experimental) + +Displays performance and debugging statistics from deck.gl, luma.gl, or custom probe.gl stats objects in a collapsible widget. + +## Usage + + + +```ts +import {Deck} from '@deck.gl/core'; +import {_StatsWidget as StatsWidget} from '@deck.gl/widgets'; + +const deck = new Deck({ + widgets: [ + new StatsWidget({ + type: 'deck', + framesPerUpdate: 5 + }) + ] +}); +``` + +## Types + +### `StatsWidgetProps` {#statswidgetprops} + +The `StatsWidget` accepts the generic [`WidgetProps`](../core/widget.md#widgetprops) and: + +- `id` (string, default: `'stats'`) - **Required.** Unique id for this widget +- `type` (string, default `'deck'`) - Type of stats to display: `'deck'`, `'luma'`, `'device'`, or `'custom'` +- `stats` (Stats, optional) - Custom stats object when using `type: 'custom'` +- `title` (string, default `'Stats'`) - Title shown in the widget header +- `framesPerUpdate` (number, default `1`) - Number of frames to wait between updates +- `formatters` (object, default `{}`) - Custom formatters for stat values +- `resetOnUpdate` (object, default `{}`) - Whether to reset particular stats after each update + +### Built-in Formatters + +- `'count'` - Display raw count value +- `'averageTime'` - Format as average time in ms/s +- `'totalTime'` - Format as total time in ms/s +- `'fps'` - Format as frames per second +- `'memory'` - Format as memory in MB + +## Behavior + +- Click the header to expand/collapse the stats display +- Stats are automatically updated based on `framesPerUpdate` +- Different stat types provide access to various performance metrics: + - `'deck'`: deck.gl rendering statistics + - `'luma'`: luma.gl WebGL statistics + - `'device'`: GPU device statistics + - `'custom'`: User-provided stats object diff --git a/docs/api-reference/widgets/theme-widget.md b/docs/api-reference/widgets/theme-widget.md index 2f01e6061c4..b1998ed6282 100644 --- a/docs/api-reference/widgets/theme-widget.md +++ b/docs/api-reference/widgets/theme-widget.md @@ -24,9 +24,9 @@ const deck = new Deck({ }); ``` -### `ThemeWidgetProps` +### `ThemeWidgetProps` {#themewidgetprops} -The `ThemeWidget` accepts the generic [`WidgetProps`](../core/widget.md#props): +The `ThemeWidget` accepts the generic [`WidgetProps`](../core/widget.md#widgetprops): - `id` (default `'theme'`) - Unique id for this widget - `placement` (default `'top-left'`) - Widget position within the view relative to the map container diff --git a/docs/api-reference/widgets/timeline-widget.md b/docs/api-reference/widgets/timeline-widget.md index 1295e1d015b..c5a43f25233 100644 --- a/docs/api-reference/widgets/timeline-widget.md +++ b/docs/api-reference/widgets/timeline-widget.md @@ -24,9 +24,9 @@ const deck = new Deck({ }); ``` -### `TimelineProps` +### `TimelineProps` {#timelineprops} -The `TimelineWidget` accepts the generic [`WidgetProps`](../core/widget.md#props): +The `TimelineWidget` accepts the generic [`WidgetProps`](../core/widget.md#widgetprops): - `id` (default `'timeline'`) - Unique id for this widget - `placement` (default `'top-left'`) - Widget position within the view relative to the map container diff --git a/docs/api-reference/widgets/view-selector-widget.md b/docs/api-reference/widgets/view-selector-widget.md new file mode 100644 index 00000000000..e71d768af2a --- /dev/null +++ b/docs/api-reference/widgets/view-selector-widget.md @@ -0,0 +1,59 @@ +import {WidgetPreview} from '@site/src/doc-demos/widgets'; +import {_ViewSelectorWidget as ViewSelectorWidget} from '@deck.gl/widgets'; + +# ViewSelectorWidget (Experimental) + +Provides a dropdown menu for selecting different view modes including single view and split view configurations. + +## Usage + + + +```ts +import {Deck} from '@deck.gl/core'; +import {_ViewSelectorWidget as ViewSelectorWidget} from '@deck.gl/widgets'; + +const deck = new Deck({ + widgets: [ + new ViewSelectorWidget({ + initialViewMode: 'single', + onViewModeChange: (mode) => { + console.log('View mode changed to:', mode); + // Handle view configuration changes + } + }) + ] +}); +``` + +## Types + +### `ViewSelectorWidgetProps` {#viewselectorwidgetprops} + +The `ViewSelectorWidget` accepts the generic [`WidgetProps`](../core/widget.md#widgetprops) and: + +- `id` (string, default: `'view-selector'`) - **Required.** Unique id for this widget +- `initialViewMode` (ViewMode, default `'single'`) - Initial view mode selection +- `onViewModeChange` (function, optional) - Callback invoked when view mode changes. Receives the new `ViewMode`. +- `label` (string, default `'Split View'`) - Tooltip label for the widget + +### `ViewMode` {#viewmode} + +Available view modes: + +- `'single'` - Single view display +- `'split-horizontal'` - Two views split horizontally (top/bottom) +- `'split-vertical'` - Two views split vertically (left/right) + +## Behavior + +- Click the button to open a dropdown menu with view mode options +- Each option shows an icon representing the layout +- Selection updates the current view mode internally +- The widget button displays an icon matching the currently selected mode + +**Note:** The `onViewModeChange` callback is currently not invoked in the implementation, so this widget primarily serves as a visual selector without automatic view switching functionality. + +## Integration + +This widget provides the UI for view mode selection but does not currently trigger callbacks or modify deck.gl view configuration automatically. Applications need to implement custom logic to detect view mode changes and update view configurations accordingly. \ No newline at end of file diff --git a/docs/api-reference/widgets/zoom-widget.md b/docs/api-reference/widgets/zoom-widget.md index 7759ea3b4ac..cda7edc6cd0 100644 --- a/docs/api-reference/widgets/zoom-widget.md +++ b/docs/api-reference/widgets/zoom-widget.md @@ -16,9 +16,9 @@ const deck = new Deck({ }); ``` -### `ZoomProps` +### `ZoomProps` {#zoomprops} -The `Zoomidget` accepts the generic [`WidgetProps`](../core/widget.md#props): +The `Zoomidget` accepts the generic [`WidgetProps`](../core/widget.md#widgetprops): - `id` (default `'zoom'`) - Unique id for this widget - `placement` (default `'top-left'`) - Widget position within the view relative to the map container diff --git a/docs/table-of-contents.json b/docs/table-of-contents.json index 38bd975788d..a5b84f30754 100644 --- a/docs/table-of-contents.json +++ b/docs/table-of-contents.json @@ -318,8 +318,10 @@ "api-reference/widgets/overview", "api-reference/widgets/styling", "api-reference/widgets/compass-widget", + "api-reference/widgets/context-menu-widget", "api-reference/widgets/fps-widget", "api-reference/widgets/fullscreen-widget", + "api-reference/widgets/geocoder-widget", "api-reference/widgets/gimbal-widget", "api-reference/widgets/info-widget", "api-reference/widgets/loading-widget", @@ -327,8 +329,10 @@ "api-reference/widgets/scale-widget", "api-reference/widgets/screenshot-widget", "api-reference/widgets/splitter-widget", + "api-reference/widgets/stats-widget", "api-reference/widgets/theme-widget", "api-reference/widgets/timeline-widget", + "api-reference/widgets/view-selector-widget", "api-reference/widgets/zoom-widget" ] } diff --git a/docs/whats-new.md b/docs/whats-new.md index ecb75af7866..919a194fef7 100644 --- a/docs/whats-new.md +++ b/docs/whats-new.md @@ -4,30 +4,57 @@ This page contains highlights of each deck.gl release. Also check our [vis.gl bl ## deck.gl v9.2 -Target release date: July, 2025 +Target release date: September, 2025 -### WebGPU Early Preview +### Widgets -A few deck.gl layers can now be run on WebGPU in the website, by selecting the `WebGPU` tab. See documentation about how to [test WebGPU support](./developer-guide/webgpu.md). +- A suite of new widgets have been added to the [`@deck.gl/widgets`](./api-reference/widgets/overview.md) module: + - [ContextMenuWidget](./api-reference/widgets/context-menu-widget.md) + - [FpsWidget](./api-reference/widgets/fps-widget.md) + - [GeocoderWidget](./api-reference/widgets/geocoder-widget.md) + - [GimbalWidget](./api-reference/widgets/gimbal-widget.md) + - [InfoWidget](./api-reference/widgets/info-widget.md) + - [LoadingWidget](./api-reference/widgets/loading-widget.md) + - [ResetViewWidget](./api-reference/widgets/reset-view-widget.md) + - [ScaleWidget](./api-reference/widgets/scale-widget.md) + - [ScreenshotWidget](./api-reference/widgets/screenshot-widget.md) + - [SplitterWidget](./api-reference/widgets/splitter-widget.md) + - [StatsWidget](./api-reference/widgets/stats-widget.md) + - [ThemeWidget](./api-reference/widgets/theme-widget.md) + - [TimelineWidget](./api-reference/widgets/timeline-widget.md) + - [ViewSelectorWidget](./api-reference/widgets/view-selector-widget.md) +- Pre-wrapped React components - deck.gl widgets are available via the [`@deck.gl/react`](./api-reference/react/overview.md) package +- Custom widgets in pydeck - via the `custom_libraries` parameter, Python users can integrate custom deck.gl widgets seamlessly +- Documentation for styling and custom themes - see [Styling Widgets](./api-reference/widgets/styling) -### Widgets +### WebGPU Early Preview - A suite of new widgets have been added to the [`@deck.gl/widgets`](./api-reference/widgets/overview.md) module: +A few deck.gl layers can now be run on WebGPU in the website, by selecting the `WebGPU` tab: -- [ResetViewWidget](./api-reference/widgets/reset-view-widget.md) -- [ScaleWidget](./api-reference/widgets/scale-widget.md) -- [GeocoderWidget](./api-reference/widgets/geocoder-widget.md) -- [ScreenshotWidget](./api-reference/widgets/screenshot-widget.md) -- [LoadingWidget](./api-reference/widgets/loading-widget.md) -- [ThemeWidget](./api-reference/widgets/theme-widget.md) -- [InfoWidget](./api-reference/widgets/info-widget.md) -- [SplitterWidget](./api-reference/widgets/splitter-widget.md) +- [LineLayer](../examples/line-layer) +- [PointCloudLayer](../examples/point-cloud-layer) +- [ScatterplotLayer](../examples/scatterplot-layer) -Pre-wrapped React components for the new deck.gl widgets are available via the [`@deck.gl/react`](./api-reference/react/overview.md) package. +See documentation about how to [test WebGPU support](./developer-guide/webgpu.md). ### Core -- [`View.clone()`](./api-reference/core/view.md) - New method that simplifies creating new Views with modified props, similar to `Layer.clone()`. +- [`View.clone()`](./api-reference/core/view.md#clone) - New method that simplifies creating new Views with modified props, similar to `Layer.clone()` +- Multi-view clear support - Enhanced support for controlling clear color, depth, and stencil buffers across multiple views, via [`clear`](./api-reference/core/view.md#clear), [`clearColor`](./api-reference/core/view.md#clearColor), [`clearDepth`](./api-reference/core/view.md#clearDepth), [`clearStencil`](./api-reference/core/view.md#clearStencil) props + +### Layers + +- New [A5Layer](./api-reference/geo-layers/a5-layer.md) - renders cells from the [A5](https://a5geo.org) geospatial indexing system. See new [Global Grid Layers](../examples/global-grids) example +- TextLayer - new [`backgroundBorderRadius`](./api-reference/layers/text-layer#backgroundborderradius) prop + +### CARTO + +- [ClusterTileLayer](./api-reference/carto/cluster-tile-layer) and [HeatmapTileLayer](./api-reference/carto/heatmap-tile-layer) support H3 data +- [VectorTileLayer](./api-reference/carto/vector-tile-layer) supports labels for line & polygon data, via new `autoLabels` prop + +### Mapbox + +- [`MapboxOverlay`](./api-reference/mapbox/mapbox-overlay.md#constructor) - When using `interleaved: true` and a Mapbox v3 Standard style, you may now control the ordering of layers by adding the [`slot`](https://docs.mapbox.com/mapbox-gl-js/guides/migrate/#layer-slots) prop to a layer. ## deck.gl v9.1 diff --git a/examples/playground/src/configuration.js b/examples/playground/src/configuration.js index da336684c54..e0aab0a8ff3 100644 --- a/examples/playground/src/configuration.js +++ b/examples/playground/src/configuration.js @@ -9,13 +9,8 @@ import * as Layers from '@deck.gl/layers'; import * as AggregationLayers from '@deck.gl/aggregation-layers'; import * as GeoLayers from '@deck.gl/geo-layers'; import * as MeshLayers from '@deck.gl/mesh-layers'; -import { - CARTO_LAYERS, - CARTO_SOURCES, - colorBins, - colorCategories, - colorContinuous -} from '@deck.gl/carto'; +import {CARTO_LAYERS, colorBins, colorCategories, colorContinuous} from '@deck.gl/carto'; +import {CARTO_SOURCES} from '@carto/api-client'; import * as Widgets from '@deck.gl/widgets'; import {COORDINATE_SYSTEM} from '@deck.gl/core'; diff --git a/examples/website/carto-sql/app.tsx b/examples/website/carto-sql/app.tsx index 522ce588c4b..4cf017990ec 100644 --- a/examples/website/carto-sql/app.tsx +++ b/examples/website/carto-sql/app.tsx @@ -7,7 +7,8 @@ import {createRoot} from 'react-dom/client'; import {Map} from 'react-map-gl/maplibre'; import {DeckGL} from '@deck.gl/react'; import {LinearInterpolator, PickingInfo} from '@deck.gl/core'; -import {colorBins, H3TileLayer, h3QuerySource} from '@deck.gl/carto'; +import {colorBins, H3TileLayer} from '@deck.gl/carto'; +import {h3QuerySource} from '@carto/api-client'; import {TooltipContent} from '@deck.gl/core/dist/lib/tooltip'; const INITIAL_VIEW_STATE = { diff --git a/modules/widgets/src/context-menu-widget.tsx b/modules/widgets/src/context-menu-widget.tsx index c4a39d48dd7..72379a4f090 100644 --- a/modules/widgets/src/context-menu-widget.tsx +++ b/modules/widgets/src/context-menu-widget.tsx @@ -32,6 +32,7 @@ export type ContextMenuWidgetProps = WidgetProps & { export class ContextMenuWidget extends Widget { static defaultProps: Required = { ...Widget.defaultProps, + id: 'context', viewId: null, visible: false, position: {x: 0, y: 0}, diff --git a/modules/widgets/src/geocoder-widget.tsx b/modules/widgets/src/geocoder-widget.tsx index 4893d80eddf..d79e66d9e47 100644 --- a/modules/widgets/src/geocoder-widget.tsx +++ b/modules/widgets/src/geocoder-widget.tsx @@ -48,10 +48,10 @@ export type GeocoderWidgetProps = WidgetProps & { export class GeocoderWidget extends Widget { static defaultProps: Required = { ...Widget.defaultProps, - id: 'geolocate', + id: 'geocoder', viewId: undefined!, placement: 'top-left', - label: 'Geolocate', + label: 'Geocoder', transitionDuration: 200, geocoder: 'coordinates', customGeocoder: CoordinatesGeocoder, diff --git a/modules/widgets/src/view-selector-widget.tsx b/modules/widgets/src/view-selector-widget.tsx index 0b08618c440..e760cdb3313 100644 --- a/modules/widgets/src/view-selector-widget.tsx +++ b/modules/widgets/src/view-selector-widget.tsx @@ -33,7 +33,7 @@ export type ViewSelectorWidgetProps = WidgetProps & { export class ViewSelectorWidget extends Widget { static defaultProps: Required = { ...Widget.defaultProps, - id: 'view-selector-widget', + id: 'view-selector', placement: 'top-left', label: 'Split View', initialViewMode: 'single',