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
Copy file name to clipboardExpand all lines: docs/api-reference/core/widget.md
+36-60Lines changed: 36 additions & 60 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,73 +1,36 @@
1
1
# Widget
2
2
3
-
A widget is a UI component that can interact with deck.gl's cameras and layers. Some examples are:
3
+
A widget is a UI component that can interact with deck.gl's layers and views.
4
+
You can write your own widgets, or use any of the many ready-to-use widgets in the [`@deck.gl/widgets`](../widgets/overview.md) module.
4
5
5
-
- A tooltip that follows the pointer and provide information for the hovered object
6
-
- A marker pinned to a geo-location containing HTML content
7
-
- Buttons to manipulate the camera, such as +/- zoom buttons, a compass rose for the MapView, a gimble widget for the OrbitView, etc.
8
-
- A legend that offers visual comparison of sizes, colors etc. corresponding to the rendered layers and viewport. For example a distance ruler, a color scale for the HeatmapLayer, etc.
6
+
## Usage
9
7
10
-
You may find many ready-to-use widgets in the `@deck.gl/widgets` module.
8
+
The `Widget` class is a base class used to define new widgets and should not be instantiated directly by an application. See the [Widget Documentation](../widgets/overview.md) for information about how to write your own widgets.
11
9
12
-
The `Widget` class is not used directly by an app. It is a base class used to define new widgets.
10
+
## Types
13
11
12
+
#### `WidgetProps` (object) {#props}
14
13
15
-
A widget should inherit the `Widget` class. Here is a custom widget that shows a spinner while layers are loading:
16
-
17
-
```ts
18
-
import {Deck, Widget} from'@deck.gl/core';
19
-
20
-
classLoadingIndicatorextendsWidget {
21
-
element?:HTMLDivElement;
22
-
size:number;
23
-
24
-
constructor(options: {
25
-
size:number;
26
-
}) {
27
-
this.size=options.size;
28
-
}
29
-
30
-
onRenderHTML(el:HTMLElement) {
31
-
el.className='spinner';
32
-
el.style.width=`${this.size}px`;
33
-
// TODO - create animation for .spinner in the CSS stylesheet
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.
50
-
51
-
### Members
52
-
53
-
A `Widget` implements the following members.
14
+
Options for the widget, as passed into the constructor and can be updated with `setProps`.
54
15
55
16
#### `id` {#id}
56
17
57
-
Unique identifier of the widget.
58
-
59
-
#### `props` (object) {#props}
60
-
61
-
Any options for the widget, as passed into the constructor and can be updated with `setProps`.
18
+
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.
62
19
63
20
#### `viewId` (string | null) {#viewid}
64
21
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.
23
+
65
24
* Default: `null`
66
25
26
+
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
+
67
28
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.
68
29
69
30
#### `placement` (string, optional) {#placement}
70
31
32
+
Widget position within the view relative to the map container.
33
+
71
34
* Default: `'top-left'`
72
35
73
36
Widget positioning within the view. One of:
@@ -78,27 +41,40 @@ Widget positioning within the view. One of:
78
41
-`'bottom-right'`
79
42
-`'fill'`
80
43
81
-
###Methods
44
+
#### `style`
82
45
83
-
#### `setProps` {#setprops}
46
+
CSS inline style overrides.
84
47
85
-
Optional. Called to update widget options.
86
-
87
-
#### `updateHTML` {#updatehtml}
88
-
89
-
Updates the widget. Normally called automatically.
48
+
```ts
49
+
style?:Partial<CSSStyleDeclaration>;
50
+
```
90
51
52
+
#### `className`
91
53
92
-
### Lifecycle Methods
54
+
Additional CSS classnames for interaction with custom stylesheets.
55
+
56
+
```ts
57
+
className?:string;
58
+
```
93
59
94
-
The following methods are available when implementing a new widget.
60
+
### Methods for Widget Writers
95
61
96
62
#### `constructor`
97
63
98
64
Supply the props and default props to the base class.
99
65
66
+
#### `setProps` {#setprops}
67
+
68
+
Called to update widget options.
69
+
70
+
#### `updateHTML` {#updatehtml}
71
+
72
+
Updates the widget. Called by the specific widget when state has changed. Calls `onRenderHTML()`
73
+
100
74
#### `onRenderHTML`
101
75
76
+
This function is implemented by the specific widget subclass to update the HTML for the widget
77
+
102
78
#### `onAdd` {#onadd}
103
79
104
80
Required. Called when the widget is added to a Deck instance.
Copy file name to clipboardExpand all lines: docs/api-reference/widgets/compass-widget.md
+8-28Lines changed: 8 additions & 28 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -16,25 +16,17 @@ const deck = new Deck({
16
16
});
17
17
```
18
18
19
-
## Props
19
+
## Types
20
20
21
-
#### `id` (string, optional) {#id}
21
+
###`CompassWidgetProps`
22
22
23
-
Default: `'compass'`
23
+
The `CompassWidget` accepts the generic [`WidgetProps`](../core/widget.md#props):
24
24
25
-
The `id` must be unique among all your widgets at a given time. It's recommended to set `id` explicitly if you have multiple widgets of the same type.
26
-
27
-
#### `viewId` (string, optional) {#viewid}
28
-
29
-
Default: `null`
30
-
31
-
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.
32
-
33
-
#### `placement` (string, optional) {#placement}
34
-
35
-
Default: `'top-left'`
36
-
37
-
Widget position within the view relative to the map container. Valid options are `top-left`, `top-right`, `bottom-left`, `bottom-right`, or `fill`.
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.
38
30
39
31
#### `label` (string, optional) {#label}
40
32
@@ -48,18 +40,6 @@ Default: `200`
48
40
49
41
Bearing and pitch reset transition duration in milliseconds.
50
42
51
-
#### `style` (object, optional) {#style}
52
-
53
-
Default: `{}`
54
-
55
-
Additional CSS styles for the widget. camelCase CSS properties (e.g. `backgroundColor`) and kabab-case CSS variables are accepted (e.g. `--button-size`).
56
-
57
-
#### `className` (string, optional) {#classname}
58
-
59
-
Default: `undefined`
60
-
61
-
Class name to attach to the widget element. The element has the default class name of `deck-widget deck-compass-widget`.
62
-
63
43
## Styles
64
44
65
45
Learn more about how to replace icons in the [styling guide](/docs/api-reference/widgets/styling#replacing-icons).
This widget allows users to input geographic coordinates (decimal or DMS format) and fly the view to that location. Enter coordinates in the text box and click "Go" or press Enter.
View to attach to and interact with. Required when using multiple views.
66
-
67
-
#### `style` (object, optional) {#style}
68
-
69
-
Default: `{}`
70
-
71
-
Additional CSS styles for the widget. camelCase CSS properties (e.g. `backgroundColor`) and kabab-case CSS variables are accepted (e.g. `--button-size`).
72
-
73
-
#### `className` (string, optional) {#classname}
74
-
75
-
Default: `undefined`
76
-
77
-
Class name to attach to the widget element. The element has the default class name of `deck-widget deck-widget-info`.
Copy file name to clipboardExpand all lines: docs/api-reference/widgets/loading-widget.md
+12-12Lines changed: 12 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,6 +18,18 @@ const deck = new Deck({
18
18
});
19
19
```
20
20
21
+
## Types
22
+
23
+
### `LoadingnWidgetProps`
24
+
25
+
The `LoadingnWidget` accepts the generic [`WidgetProps`](../core/widget.md#props):
26
+
27
+
-`id` (default `'loading'`) - Unique id for this widget
28
+
-`placement` (default `'top-left'`) - Widget position within the view relative to the map container
29
+
-`viewId` (default `null`) - The `viewId` prop controls how a widget interacts with views.
30
+
-`style` (default `{}`) - Additional inline styles on the top HTML element.
31
+
-`className` (default `''`) - Additional classnames on the top HTML element.
32
+
21
33
## Props
22
34
23
35
#### `id` (string, optional) {#id}
@@ -40,18 +52,6 @@ Tooltip message displayed while hovering a mouse over the widget.
40
52
41
53
Default: `'Loading data'`
42
54
43
-
#### `style` (object, optional) {#style}
44
-
45
-
Default: `{}`
46
-
47
-
Additional CSS styles for the widget. camelCase CSS properties (e.g. `backgroundColor`) and kabab-case CSS variables are accepted (e.g. `--button-size`).
48
-
49
-
#### `className` (string, optional) {#classname}
50
-
51
-
Default: `undefined`
52
-
53
-
Class name to attach to the widget element. The element has the default class name of `deck-widget deck-widget-loading`.
0 commit comments