You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* Add viewId prop to all widgets for multi-view support
Introduces a standardized `viewId` prop to all widget components, enabling them to attach to specific views when using multiple views. Updates defaultProps, constructors, and setProps methods to handle the new prop, and improves JSDoc comments for clarity. Also adds copyright headers to several files for consistency.
* Refactor widget exports and update overview documentation
Reorganized widget exports in index.ts into clearer categories: navigation, geospatial, view, information, control, and utility widgets. Updated the overview documentation to reflect the new structure and added missing widgets to the lists for improved clarity and discoverability.
* Refactor widget docs to centralize WidgetProps
Updated widget documentation to reference generic WidgetProps from core/widget.md, removing redundant prop listings from individual widget docs. This improves consistency and maintainability by centralizing prop definitions and reducing duplication.
* Add usage sections and version badges to widget docs
Updated documentation for multiple deck.gl widgets to include 'Usage' sections and version badges, improving clarity and consistency.
* Document default prop values for widget API
Updates API reference docs for all widgets to consistently document default values for props, improving clarity for users. Default values are now listed before descriptions for easier reference.
* Add usage section to TimelineWidget docs
* Add source links to widget API docs
* Audit widget docs for missing props
Added documentation for GimbalWidget, InfoWidget, ResetViewWidget, and ScreenshotWidget
* [fix] Invoke onViewModeChange callback on mode select
The ViewSelectorWidget now calls the onViewModeChange callback when the view mode is changed, enabling external handling of view mode changes. Updated documentation to reflect this behavior.
* Remove 'none' option from initialTheme prop docs
Updated the documentation for the ThemeWidget to remove the 'none' value from the initialTheme prop, clarifying that only 'auto', 'light', and 'dark' are valid options.
* Fix merge for context menu widget doc
* Fix inline CSS type
* Refactor widget imports for type-only usage
Updated imports in all widget components to use type-only imports for WidgetProps, WidgetPlacement, and related types from @deck.gl/core.
* Fix link
* Add placement and viewId props to StatsWidget
Introduces 'placement' and 'viewId' properties to StatsWidget for improved positioning and multi-view support.
* Update widget.md
Co-authored-by: felixpalmer <[email protected]>
* alphabetical
---------
Co-authored-by: felixpalmer <[email protected]>
Copy file name to clipboardExpand all lines: docs/api-reference/core/widget.md
+30-22Lines changed: 30 additions & 22 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,30 +9,54 @@ The `Widget` class is a base class used to define new widgets and should not be
9
9
10
10
## Types
11
11
12
-
####`WidgetProps` (object) {#widgetprops}
12
+
### `WidgetProps` (object) {#widgetprops}
13
13
14
14
Options for the widget, as passed into the constructor and can be updated with `setProps`.
15
15
16
-
#### `id` (string) {#id}
16
+
#### `id` (string, optional) {#id}
17
+
18
+
* Default: the widget's name.
17
19
18
20
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.
19
21
20
-
#### `viewId` (string | null) {#viewid}
22
+
Remarks:
21
23
22
-
The `viewId` prop controls how a widget interacts with views. If `viewId` is defined, the widget is placed in that view and interacts exclusively with it; otherwise, it is placed in the root widget container and affects all views.
24
+
*`id` is used to match widgets between rendering calls. deck.gl requires each widget to have a unique `id`. A default `id` is assigned based on widget type, which means if you are using more than one widget of the same type (e.g. two `InfoWidget`s) you need to provide a custom `id` for at least one of them.
25
+
26
+
#### `style` (object, optional) {#style}
27
+
28
+
* Default: `{}`
29
+
30
+
Additional inline CSS styles on the top HTML element of the widget. camelCase CSS properties (e.g. `backgroundColor`) and kebab-case CSS variables are accepted (e.g. `--button-size`).
31
+
32
+
```ts
33
+
style?:Partial<CSSStyleDeclaration>;
34
+
```
35
+
36
+
#### `className` (string, optional) {#classname}
37
+
38
+
* Default: `''`
39
+
40
+
Additional CSS classnames on the top HTML element.
41
+
42
+
### Additional `WidgetProps` on UI Widgets
43
+
44
+
#### `viewId` (string | null) {#viewid}
23
45
24
46
* Default: `null`
25
47
48
+
The `viewId` prop controls how a widget interacts with views. If `viewId` is defined, the widget is placed in that view and interacts exclusively with it; otherwise, it is placed in the root widget container and affects all views.
49
+
26
50
When a widget instance is added to Deck, the user can optionally specify a `viewId` that it is attached to (default `null`). If assigned, this widget will only respond to events occurred inside the specific view that matches this id.
27
51
28
52
The id of the view that the widget is attached to. If `null`, the widget receives events from all views. Otherwise, it only receives events from the view that matches this id.
29
53
30
54
#### `placement` (string, optional) {#placement}
31
55
32
-
Widget position within the view relative to the map container.
33
-
34
56
* Default: `'top-left'`
35
57
58
+
Widget position within the view relative to the map container.
59
+
36
60
Widget positioning within the view. One of:
37
61
38
62
-`'top-left'`
@@ -41,22 +65,6 @@ Widget positioning within the view. One of:
41
65
-`'bottom-right'`
42
66
-`'fill'`
43
67
44
-
#### `style` (object, optional) {#style}
45
-
46
-
Additional inline CSS styles on the top HTML element.
47
-
48
-
```ts
49
-
style?:Partial<CSSStyleDeclaration>;
50
-
```
51
-
52
-
* Default: `{}`
53
-
54
-
#### `className` (string, optional) {#classname}
55
-
56
-
Additional CSS classnames on the top HTML element.
This widget visualizes bearing and pitch. Click it once to reset bearing to 0, click it a second time to reset pitch to 0. Supports Map and Globe view.
7
9
10
+
## Usage
11
+
8
12
<WidgetPreviewcls={CompassWidget}/>
9
13
10
14
```ts
11
-
import {CompassWidget} from'@deck.gl/widgets';
12
15
import {Deck} from'@deck.gl/core';
16
+
import {CompassWidget} from'@deck.gl/widgets';
13
17
14
-
const deck =newDeck({
18
+
newDeck({
15
19
widgets: [newCompassWidget()]
16
20
});
17
21
```
@@ -20,23 +24,17 @@ const deck = new Deck({
20
24
21
25
### `CompassWidgetProps` {#compasswidgetprops}
22
26
23
-
The `CompassWidget` accepts the generic [`WidgetProps`](../core/widget.md#widgetprops):
24
-
25
-
-`id` (default `'compass'`) - Unique id for this widget
26
-
-`placement` (default `'top-left'`) - Widget position within the view relative to the map container
27
-
-`viewId` (default `null`) - The `viewId` prop controls how a widget interacts with views.
28
-
-`style` (default `{}`) - Additional inline styles on the top HTML element.
29
-
-`className` (default `''`) - Additional classnames on the top HTML element.
27
+
The `CompassWidget` accepts the generic [`WidgetProps`](../core/widget.md#widgetprops) and:
30
28
31
29
#### `label` (string, optional) {#label}
32
30
33
-
Tooltip message displayed while hovering a mouse over the widget.
31
+
* Default: `'Compass'`
34
32
35
-
Default: `'Compass'`
33
+
Tooltip message displayed while hovering a mouse over the widget.
Copy file name to clipboardExpand all lines: docs/api-reference/widgets/context-menu-widget.md
+7-4Lines changed: 7 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -16,7 +16,7 @@ const deck = new Deck({
16
16
newContextMenuWidget({
17
17
getMenuItems: (info, widget) => {
18
18
if (info.object) {
19
-
const name =info.object.properties.name;
19
+
const name =info.object.properties.name;
20
20
return [
21
21
{key: 'name', label: name},
22
22
{key: 'delete', label: 'Delete'}
@@ -25,8 +25,8 @@ const deck = new Deck({
25
25
return [{label: 'Add Point', key: 'add'}];
26
26
},
27
27
onMenuItemSelected: (key, pickInfo) => {
28
-
if (key==='add') addPoint(pickInfo);
29
-
if (key==='delete') deletePoint(pickInfo);
28
+
if (key==='add') addPoint(pickInfo);
29
+
if (key==='delete') deletePoint(pickInfo);
30
30
}
31
31
})
32
32
]
@@ -39,7 +39,6 @@ const deck = new Deck({
39
39
40
40
The `ContextMenuWidget` accepts the generic [`WidgetProps`](../core/widget.md#widgetprops) and:
41
41
42
-
-`id` (string, default: `'context'`) - **Required.** Unique id for this widget
43
42
-`getMenuItems` (function) - **Required.** Function that returns menu items based on the picked object. Receives `PickingInfo` and returns an array of `ContextWidgetMenuItem` objects or `null`.
44
43
-`onMenuItemSelected` (function, optional) - Callback invoked when a menu item is selected. Receives the selected item key and `PickingInfo`.
45
44
-`visible` (boolean, default `false`) - Controls visibility of the context menu.
@@ -59,3 +58,7 @@ Menu item definition:
59
58
- Menu items are dynamically generated based on what was clicked
60
59
- Click elsewhere to hide the menu
61
60
- Menu automatically positions itself at the cursor location
A [compatible DOM element](https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen#Compatible_elements) which should be made full screen. By default, the map container element will be made full screen.
Tooltip message displayed while hovering a mouse over the widget when out of fullscreen.
37
+
* Default: `'Enter Fullscreen'`
40
38
41
-
Default: `'Enter Fullscreen'`
39
+
Tooltip message displayed while hovering a mouse over the widget when out of fullscreen.
42
40
43
41
#### `exitLabel` (string, optional) {#exitlabel}
44
42
45
-
Tooltip message displayed while hovering a mouse over the widget when fullscreen.
43
+
* Default: `'Exit Fullscreen'`
46
44
47
-
Default: `'Exit Fullscreen'`
48
-
49
-
#### `style` (object, optional) {#style}
50
-
51
-
Default: `{}`
52
-
53
-
Additional CSS styles for the widget. camelCase CSS properties (e.g. `backgroundColor`) and kabab-case CSS variables are accepted (e.g. `--button-size`).
54
-
55
-
#### `className` (string, optional) {#classname}
56
-
57
-
Default: `undefined`
58
-
59
-
Class name to attach to the widget element. The element has the default class name of `deck-widget deck-fullscreen-widget`.
45
+
Tooltip message displayed while hovering a mouse over the widget when fullscreen.
Which geocoding service to use. Supported values are `'coordinates'`, `'google'`, `'mapbox'`, `'opencage'`, or `'custom'`.
48
50
49
51
#### `apiKey` (string, optional) {#apikey}
50
52
53
+
* Default: `''`
54
+
51
55
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.
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.
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.
66
64
67
65
If `props._geolocation`**Current position** from the drop-down uses `navigator.geolocation` to center the map. The option is hidden if the browser does not provide the Geolocation API or the user denies access.
0 commit comments