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
The InfoWidget shows a popup when an item in a layer has been clicked.
4
+
5
+
## Props
6
+
7
+
#### `id` (string, optional) {#id}
8
+
9
+
Default: `'popup'`
10
+
11
+
The `id` must be unique among all your widgets at a given time.
12
+
13
+
Note: It is necessary to set `id` explicitly if you have more than once instance of the same widget.
14
+
15
+
#### `placement` (string, optional) {#placement}
16
+
17
+
Default: `'top-left'`
18
+
19
+
Widget position within the view relative to the map container. Valid options are `top-left`, `top-right`, `bottom-left`, `bottom-right`, or `fill`.
20
+
21
+
#### `label` (string, optional) {#label}
22
+
23
+
Tooltip message displayed while hovering a mouse over the widget.
24
+
25
+
Default: `'Popup'`
26
+
27
+
#### `style` (object, optional) {#style}
28
+
29
+
Default: `{}`
30
+
31
+
Additional CSS styles for the widget. camelCase CSS properties (e.g. `backgroundColor`) and kabab-case CSS variables are accepted (e.g. `--button-size`).
32
+
33
+
#### `className` (string, optional) {#classname}
34
+
35
+
Default: `undefined`
36
+
37
+
Class name to attach to the widget element. The element has the default class name of `deck-widget deck-popup-widget`.
This widget shows a spinning indicator while any deck.gl layers are loading data.
4
+
5
+
## Props
6
+
7
+
#### `id` (string, optional) {#id}
8
+
9
+
Default: `'loading'`
10
+
11
+
The `id` must be unique among all your widgets at a given time.
12
+
13
+
Note: It is necessary to set `id` explicitly if you have more than once instance of the same widget.
14
+
15
+
#### `placement` (string, optional) {#placement}
16
+
17
+
Default: `'top-left'`
18
+
19
+
Widget position within the view relative to the map container. Valid options are `top-left`, `top-right`, `bottom-left`, `bottom-right`, or `fill`.
20
+
21
+
#### `label` (string, optional) {#label}
22
+
23
+
Tooltip message displayed while hovering a mouse over the widget.
24
+
25
+
Default: `'Loading data'`
26
+
27
+
#### `style` (object, optional) {#style}
28
+
29
+
Default: `{}`
30
+
31
+
Additional CSS styles for the widget. camelCase CSS properties (e.g. `backgroundColor`) and kabab-case CSS variables are accepted (e.g. `--button-size`).
32
+
33
+
#### `className` (string, optional) {#classname}
34
+
35
+
Default: `undefined`
36
+
37
+
Class name to attach to the widget element. The element has the default class name of `deck-widget deck-loading-widget`.
Copy file name to clipboardExpand all lines: docs/api-reference/widgets/overview.md
+2-119Lines changed: 2 additions & 119 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -95,123 +95,6 @@ new Deck({
95
95
});
96
96
```
97
97
98
-
## CSS Theming
98
+
## Themes and Styling
99
99
100
-
Customizing the appearance of widgets beyond light and dark mode can be achieved using CSS variables. This section provides guidance on how to theme widgets at different levels of specificity.
101
-
102
-
### Global Theming
103
-
104
-
Apply to all widgets with the `.deck-widget` selector.
105
-
106
-
```css
107
-
.deck-widget {
108
-
--button-size: 48px;
109
-
}
110
-
```
111
-
112
-
> Note: While variables can be globally applied using the `:root` selector, ensuring their availability throughout the entire document, this method is not recommended. Applying variables globally can lead to naming conflicts, especially in larger projects or when integrating with other libraries.
113
-
114
-
### Type-specific Theming
115
-
116
-
Theme a specific type of widget using the `.deck-widget-[type]` selector.
117
-
118
-
```css
119
-
.deck-widget-fullscreen {
120
-
--button-size: 48px;
121
-
}
122
-
```
123
-
124
-
### Instance-specific Theming
125
-
126
-
Apply styles to a single instance of a widget using inline styles.
Define a custom class with your desired styles and apply it to a widget.
141
-
142
-
```css
143
-
.my-class {
144
-
--button-size: 48px;
145
-
}
146
-
```
147
-
```js
148
-
newFullscreenWidget({ className:'my-class'})
149
-
```
150
-
151
-
## Customizable CSS Variables
152
-
153
-
We've provided a set of CSS variables to make styling UI Widgets more convenient. These variables allow for customization of widget sizes, colors, and other properties. Below is a comprehensive list of these variables, their expected types, and default values:
|`--icon-fullscreen-enter`|[SVG Data Url](https://developer.mozilla.org/en-US/docs/Web/CSS/url#using_a_data_url)|[Material Symbol Fullscreen](https://fonts.google.com/icons?selected=Material+Symbols+Rounded:fullscreen:FILL@0;wght@400;GRAD@0;opsz@40)|
182
-
|`--icon-fullscreen-enter`|[SVG Data Url](https://developer.mozilla.org/en-US/docs/Web/CSS/url#using_a_data_url)|[Material Symbol Fullscreen Exit](https://fonts.google.com/icons?selected=Material+Symbols+Rounded:fullscreen_exit:FILL@0;wght@400;GRAD@0;opsz@40)|
183
-
|`--icon-zoom-in`|[SVG Data Url](https://developer.mozilla.org/en-US/docs/Web/CSS/url#using_a_data_url)|[Material Symbol Add](https://fonts.google.com/icons?selected=Material+Symbols+Rounded:add:FILL@0;wght@600;GRAD@0;opsz@40)|
184
-
|`--icon-zoom-out`|[SVG Data Url](https://developer.mozilla.org/en-US/docs/Web/CSS/url#using_a_data_url)|[Material Symbol Remove](https://fonts.google.com/icons?selected=Material+Symbols+Rounded:remove:FILL@0;wght@600;GRAD@0;opsz@40)|
185
-
|`--icon-camera`|[SVG Data Url](https://developer.mozilla.org/en-US/docs/Web/CSS/url#using_a_data_url)|[Material Symbol Photo Camera](https://fonts.google.com/icons?selected=Material+Symbols+Outlined:photo_camera:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=picture&icon.size=24&icon.color=%23000000)|
186
-
187
-
#### Replacing Icons
188
-
189
-
Users can to customize icons to better align with their design preferences or branding. This section provides a step-by-step guide on how to replace and customize these icons.
190
-
191
-
1. Prepare Your Icons:
192
-
- Ensure your icons are available as [SVG Data Url](https://developer.mozilla.org/en-US/docs/Web/CSS/url#using_a_data_url). These will be used for a CSS [mask-image](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image).
193
-
2. Icon Replacement:
194
-
- Use CSS variables, such as `--icon-fullscreen-enter`, to replace the default icons with your customized ones.
195
-
3. Color Customization:
196
-
- The original color embedded in your SVG will be disregarded. However, it's crucial that the SVG isn't transparent.
197
-
- Customize the color of your icon using the appropriate CSS variable, such as `--button-icon-idle`.
If possible, make the new icon re-colorable, resizable, and replaceable with CSS.
210
-
211
-
- Give the SVG a black fill for color masking
212
-
- Convert your SVG to CSS with a convertor like [this](https://www.svgbackgrounds.com/tools/svg-to-css/).
213
-
- Remove height and width attributes (widget sets to 100%)
214
-
- Add css to the stylesheet like [this](https://github.com/visgl/deck.gl/blob/9752123d560ed9cf7cda62b6e83104b9a930e0df/modules/widgets/src/stylesheet.css#L132)
215
-
- Use a unique CSS class name and variable for the icon.
216
-
217
-
For consistency with the other icons in the core set, you can use [Google Symbols](https://fonts.google.com/icons).
100
+
deck.gl widget appearance can be customized using [themes and CSS](./styles).
This widget captures and downloads the deck.gl screen (canvas). Click the widget to capture an image of the screen. The image will be downloaded by the browser into the user's "download" folder.
4
8
5
-
:::caution
9
+
:::caution
6
10
Only the deck.gl canvas is captured, not other HTML DOM element underneath or on top of that canvas. This means that e.g. a non-interleaved basemap, or any widgets, will not be captured.
7
11
It is possible to use `props.onCapture` to integrate with more advanced screen capture modules such as [html2canvas](https://html2canvas.hertzen.com/)
8
12
:::
@@ -13,7 +17,7 @@ It is possible to use `props.onCapture` to integrate with more advanced screen c
13
17
14
18
Default: `'screenshot'`
15
19
16
-
The `id` must be unique among all your widgets at a given time.
20
+
The `id` must be unique among all your widgets at a given time.
17
21
18
22
Note: It is necessary to set `id` explicitly if you have more than once instance of the same widget.
Allows the application to define its own capture logic, perhaps to integrate a more advanced screen capture module such as [html2canvas](https://html2canvas.hertzen.com/).
45
49
46
-
47
50
#### `style` (object, optional) {#style}
48
51
49
52
Default: `{}`
@@ -55,3 +58,12 @@ Additional CSS styles for the widget. camelCase CSS properties (e.g. `background
55
58
Default: `undefined`
56
59
57
60
Class name to attach to the widget element. The element has the default class name of `deck-widget deck-screenshot-widget`.
0 commit comments