CreateActionTriggerParams actionTrigger :
optional placement : { after: string; } | { before: string; } | { at: "start" | "end"; }
CreatePanelElementsParams panelId : string
elements : { element: container: "footer" | "body" | { id: string; }; placement: { after: string; } | { before: string
CreateFeatureActionParams action :
optional placement : { after: string; } | { before: string; } | { at: "start" | "end"; }
CreateOrUpdatePanelParams The parameters for creating or updating a panel by using UiController.createOrUpdatePanel .
panel :
The panel to add.
optional placement : { after: string; } | { before: string; } | { at: "start" | "end"; }
initialPlacement?
optional initialPlacement : { after: string; } | { before: string; } | { at: "start" | "end"; }
The placement of the panel on the right sidebar stack.
{ at: "end" }
; } | {
at
:
"start"
|
"end"
; }; }[]
"footer" | "body" | { id: string; }
The section of the panel to add the element to. It can be either one of the top-level sections of the panel ("body" or "footer") or a specific container (like { id: string }).
{ after: string; } | { before: string; } | { at: "start" | "end"; }
The placement of the element in the target container (based on the container property).
DeletePanelElementsParams panelId : string
elements : string[]
UI The UI part of the Felt SDK allows you to enable and disable certain UI features such as the legend and the full screen button.
OnMapInteractionsOptions The options for which parts of the Felt UI can be shown when interacting with
features and elements on the map.
Switching these off can be useful if you add your own click, selection or hover
handlers for features and elements.
featureSelectPanel?
optional featureSelectPanel : boolean
Set this to false to prevent the panel that shows information about a selected
feature from being shown.
featureHoverPanel?
optional featureHoverPanel : boolean
Set this to false to prevent the panel that shows information about a hovered
feature from being shown.
elementSelectPanel?
optional elementSelectPanel : boolean
Set this to false to prevent the panel that shows information about a selected
element from being shown.
optional linkClickOpen : boolean
Set this to false to prevent clicking on a map link element from opening that link
in a new tab or window.
imageLightboxOpen?
optional imageLightboxOpen : boolean
Set this to false to prevent clicking on an image element from opening the image
in a lightbox.
UIDividerElementUpdate The parameters for updating a divider element.
See UIDividerElement for more details.
id and type are required to identify the element to update.
type : "Divider"
id : string
The ID of the element.
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
void
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
void
UpdatePanelElementsParams panelId : string
The ID of the panel to update.
elements : { element:
Dictionary of element IDs to the element to update.
UIButtonRowElementCreate The parameters for creating a button row element.
See
UIButtonElement Represents a button element in a panel.
UIFlexibleSpaceElementUpdate The parameters for updating a flexible space element.
See
id and type
UIControlElementOption An option to display in a control element.
Control elements are elements that allow the user to select one or more values from a list of options. This includes:
UIPanelElementUpdate UIPanelElementUpdate :
This is a union of all the possible elements that can be updated inside panel's body or footer (excluding Divider and FlexibleSpace elements because they cannot be updated).
UIFlexibleSpaceElementCreate The parameters for creating a flexible space element.
id is optional but recommended if you want to be able to perform updates.
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
The arguments passed to the function.
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
The arguments passed to the function.
If not provided, the element will be assigned a random ID, but it is recommended to provide it to perform further updates on the element.
If provided, it must be unique within the UI.
The arguments passed to the function.
The arguments passed to the function.
hashtag
The items to add to the button row.
optional align : "start" | "end"
The alignment of the button row.
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
The arguments passed to the function.
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
The arguments passed to the function.
If not provided, the element will be assigned a random ID, but it is recommended to provide it to perform further updates on the element.
If provided, it must be unique within the UI.
Label text to display above the element and used for screen readers.
are required to identify the element to update.
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
The arguments passed to the function.
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
The arguments passed to the function.
Remarks
id and type are required to identify the element to update.
The label to display in the button.
onClick : (args: { id: string; }) => void
The action to perform when the button is clicked.
The arguments passed to the function.
optional variant : "filled" | "transparent" | "outlined"
The style variant of the button.
"filled": a button with background.
background color is based on button's tint (defaults to default tint)
"transparent": a transparent button that gets a subtle dark background when hovered.
text color is based on button's tint (defaults to default tint)
"outlined": a transparent button with a border.
text and border colors are based on button's tint (defaults to default tint)
optional tint : "default" | "primary" | "accent" | "danger"
"default": Felt's theme-based light/dark colors.
"primary": Felt's primary color (pink).
"accent": Felt's accent color (blue).
"danger": Felt's danger color (red).
optional disabled : boolean
Whether the button is disabled.
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
The arguments passed to the function.
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
The arguments passed to the function.
The option can be disabled by setting the disabled property to true.
optional disabled : boolean
Copy {
type: "Button",
label: "Click me",
onClick: () => alert("Button clicked"),
}
Copy { label: "Option A", value: "optionA" }
Copy { label: "Option A", value: "optionA", disabled: true } UIButtonElementCreate The parameters for creating a button element.
See UIButtonElement for more details.
id is optional but recommended if you want to be able to perform updates.
type : "Button"
label : string
The label to display in the button.
onClick : (args: { id: string; }) => void
The action to perform when the button is clicked.
void
optional variant : "filled" | "transparent" | "outlined"
The style variant of the button.
"filled": a button with background.
background color is based on button's tint (defaults to default tint)
"filled"
optional tint : "default" | "primary" | "accent" | "danger"
The tint of the button.
"default": Felt's theme-based light/dark colors.
"primary": Felt's primary color (pink).
"accent": Felt's accent color (blue).
"default"
optional disabled : boolean
Whether the button is disabled.
false
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
void
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
void
optional id : string
The ID of the element.
If not provided, the element will be assigned a random ID, but it is recommended to provide it to perform further updates on the element.
If provided, it must be unique within the UI.
undefined
UiControlsOptions optional showLegend : boolean
Whether or not the legend is shown.
cooperativeGestures?
optional cooperativeGestures : boolean
When co-operative gestures are enabled, the pan and zoom gestures are
adjusted to work better when the map is embedded in another page.
On mobile devices, enabling co-operative gestures will allow the user to
pan past the embedded map with a single finger drag. To pan the map, they
must use two fingers.
On desktop devices, enabling co-operative gestures allows the user to
scroll past the embedded map using their scroll wheel or trackpad. To
zoom the map, they must hold the Ctrl (Windows) or Command key (Mac) while
scrolling.
fullScreenButton?
optional fullScreenButton : boolean
Whether or not the full screen button is shown in an embedded map.
When clicked, this will open the map in a new tab or window.
optional geolocation : boolean
Whether or not the geolocation button is shown in an embedded map.
The geolocation feature will plot your position on the map. If you
click the button again, it will start tracking your position.
optional zoomControls : boolean
Whether or not the zoom controls are shown in an embedded map.
This does not affect whether or not the map can be zoomed, just
the display of the zoom controls in the bottom right corner of the map.
optional scaleBar : boolean
Whether or not the scale bar is shown in an embedded map.
UIDividerElement Represents a divider element in a panel. This element is used to separate other elements in a panel. It is rendered as a gray horizontal line of 1px height.
Divider element is useful to separate sections of a panel.
type : "Divider"
id : string
The ID of the element.
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
void
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
void
UITextElementUpdate The parameters for updating a text element.
See UITextElement for more details.
id and type are required to identify the element to update.
type : "Text"
id : string
The ID of the element.
optional content : string
The text to display in the element.
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
void
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
void
UIGridContainerElementCreate The parameters for creating a grid container element.
See
UIFeatureAction Represents a feature action after creation (with generated id).
UICheckboxGroupElementUpdate The parameters for updating a checkbox group element.
See
UIRadioGroupElementUpdate The parameters for updating a radio group element.
See
UIFlexibleSpaceElement Represents a flexible space element in a container.
When rendered...
inside grid property.
UITextElementCreate The parameters for creating a text element.
See
id is optional but recommended if you want to be able to perform updates.
UIIframeElement Represents an iframe element in a panel.
The height of the iframe can be set by using the height property either as a number (measured in pixels) or a string (e.g. “100px” or “50%“).
By default, the height is calculated following a 16:9 ratio.
UpdateActionTriggerParams UIActionTriggerCreate Represents an action trigger. It can be added to the map by using the
UICheckboxGroupElementCreate The parameters for creating a checkbox group element.
See
UpdateFeatureActionParams UIButtonRowElementUpdate The parameters for updating a button row element.
See
UIIframeElementUpdate The parameters for updating an iframe element.
See
id and type are required to identify the element to update.
UIFeatureActionCreate Represents a feature action for creation. It can be added to the map by using the
UIDividerElementCreate The parameters for creating a divider element.
See
id is optional but recommended if you want to be able to delete the element.
Copy {
body: [
{ type: "Text", content: "Contact" },
{ type: "TextInput", placeholder: "Enter your name", ... },
{ type: "TextInput", placeholder: "Enter your email", ... },
{ type: "Divider" },
{ type: "Text", content: "Address" },
{ type: "TextInput", placeholder: "Enter your address", ... },
],
} id : string
The label of the action trigger.
optional disabled : boolean
Whether the action trigger is disabled or not.
optional onTrigger : (args: { id: string; }) => void
The function to call when the action trigger is triggered.
The arguments passed to the function.
The id of the action trigger.
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
The arguments passed to the function.
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
The arguments passed to the function.
"transparent": a transparent button that gets a subtle dark background when hovered.
text color is based on button's tint (defaults to default tint)
"outlined": a transparent button with a border.
text and border colors are based on button's tint (defaults to default tint)
"danger": Felt's danger color (red).
The arguments passed to the function.
The arguments passed to the function.
The arguments passed to the function.
The arguments passed to the function.
The arguments passed to the function.
The arguments passed to the function.
The arguments passed to the function.
hashtag
optional value : string[] = valueSchema
The value of the checkbox group.
The options to display in the checkbox group.
optional onChange : (args: { value: string[]; id: string; }) => void
The function to call when the value of the checkbox group changes.
{ value: string[]; id: string; }
The arguments passed to the function.
Array of the selected values.
The id of the checkbox group element.
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
The arguments passed to the function.
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
The arguments passed to the function.
Label text to display above the element and used for screen readers.
hashtag
optional value : string = valueSchema
The value of the radio group.
The options to display in the radio group.
optional onChange : (args: { value: undefined | string; id: string; }) => void
The function to call when the value of the radio group changes.
{ value: undefined | string; id: string; }
The arguments passed to the function.
The id of the radio group element.
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
The arguments passed to the function.
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
The arguments passed to the function.
Label text to display above the element and used for screen readers.
The text to display in the element.
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
The arguments passed to the function.
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
The arguments passed to the function.
If not provided, the element will be assigned a random ID, but it is recommended to provide it to perform further updates on the element.
If provided, it must be unique within the UI.
label
The label of the action trigger.
onTrigger : (args: { id: string; }) => void
The function to call when the action trigger is triggered.
The arguments passed to the function.
The id of the action trigger.
optional disabled : boolean
Whether the action trigger is disabled or not.
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
The arguments passed to the function.
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
The arguments passed to the function.
hashtag
value : string[] = valueSchema
The value of the checkbox group.
The options to display in the checkbox group.
onChange : (args: { value: string[]; id: string; }) => void
The function to call when the value of the checkbox group changes.
{ value: string[]; id: string; }
The arguments passed to the function.
Array of the selected values.
The id of the checkbox group element.
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
The arguments passed to the function.
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
The arguments passed to the function.
If not provided, the element will be assigned a random ID, but it is recommended to provide it to perform further updates on the element.
If provided, it must be unique within the UI.
Label text to display above the element and used for screen readers.
hashtag
optional align : "start" | "end"
The alignment of the button row.
The items to add to the button row.
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
The arguments passed to the function.
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
The arguments passed to the function.
Label text to display above the element and used for screen readers.
optional height : string | number
The height of the iframe.
If not provided, the height will be automatically calculated following a 16:9 ratio.
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
The arguments passed to the function.
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
The arguments passed to the function.
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
The arguments passed to the function.
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
The arguments passed to the function.
If not provided, the element will be assigned a random ID, but it is recommended to provide it to perform further updates on the element.
If provided, it must be unique within the UI.
hashtag
optional height : string | number
The height of the iframe.
If not provided, the height will be automatically calculated following a 16:9 ratio.
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
The arguments passed to the function.
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
The arguments passed to the function.
Iframe with default height (16:9) Iframe with custom height hashtag
The items to add to the grid container.
The grid to use for the container. It is the exact same as CSS's shorthand property grid.
two columns, the first column is 50px wide, the second column takes the remaining space
optional verticalAlignment : "center" | "top" | "bottom"
The alignment of the items in the grid. Only takes effect on horizontal stacks.
optional horizontalDistribution : "center" | "start" | "end" | "space-between" | "space-around" | "space-evenly"
The distribution of the items in the grid. Only takes effect on horizontal stacks.
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
The arguments passed to the function.
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
The arguments passed to the function.
If not provided, the element will be assigned a random ID, but it is recommended to provide it to perform further updates on the element.
If provided, it must be unique within the UI.
body
or
footer
, since they work as vertically stacks, it will add extra gap between items.
Paragraphs with a flexible space between makes them more visually separated.
Horizontal stack of buttons with a flexible space between makes them more visually separated.
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
The arguments passed to the function.
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
The arguments passed to the function.
Copy { type: "Iframe", url: "https://www.example.com" }
Copy { type: "Iframe", url: "https://www.example.com", height: 300 }
Copy {
type: "Grid",
grid: "auto-flow / 50px 1fr",
items: [...]
}
Copy {
type: "Panel",
body: [
{ type: "Paragraph", text: "Paragraph 1" },
{ type: "FlexibleSpace" },
{ type: "Paragraph", text: "Paragraph 2" },
],
}
Copy {
type: "Grid",
grid: "auto-flow / auto 1fr auto",
items: [
{ type: "Button", label: "Button 1", onClick: () => {} },
{ type: "FlexibleSpace" },
{ type: "Button", label: "Button 2", onClick: () => {} },
],
} label
The label of the feature action.
The function to call when the feature action is triggered.
The arguments passed to the function.
The feature that triggered the action.
optional layerIds : string[]
The layers to add the action to. Optional. Defaults to all layers.
optional geometryTypes : ("Polygon" | "Point" | "Line" | "Raster")[]
The geometry type of the features to add the action to. Optional. Defaults to all geometry types.
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
The arguments passed to the function.
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
The arguments passed to the function.
id : string
The label of the feature action.
optional layerIds : string[]
The layers to add the action to. Optional. Defaults to all layers.
optional geometryTypes : ("Polygon" | "Point" | "Line" | "Raster")[]
The geometry type of the features to add the action to. Optional. Defaults to all geometry types.
optional onTrigger : (args: { feature: LayerFeaturevoid
The function to call when the feature action is triggered.
The arguments passed to the function.
The feature that triggered the action.
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
The arguments passed to the function.
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
The arguments passed to the function.
label
The label of the feature action.
The function to call when the feature action is triggered.
The arguments passed to the function.
The feature that triggered the action.
optional layerIds : string[]
The layers to add the action to. Optional. Defaults to all layers.
optional geometryTypes : ("Polygon" | "Point" | "Line" | "Raster")[]
The geometry type of the features to add the action to. Optional. Defaults to all geometry types.
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
The arguments passed to the function.
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
The arguments passed to the function.
UISelectElementUpdate The parameters for updating a select element.
See UISelectElement for more details.
id and type are required to identify the element to update.
type : "Select"
id : string
The ID of the element.
optional value : string
The value of the select.
optional placeholder : string
The placeholder text to display in the select.
optional search : boolean
Whether the select should allow searching through the options.
false
optional options :
The options to display in the select.
optional onChange : (args: { value: string; id: string; }) => void
The function to call when the value of the select changes.
void
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
void
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
void
optional label : string
Label text to display above the element and used for screen readers.
UIPanelCreateOrUpdate The parameters for creating a panel by using UiController.createOrUpdatePanel .
UIPanel for more information about panels.
id : string
The ID of the panel obtained from
Custom IDs are not supported.
optional title : string
The title to display in the panel header.
onClickClose()?
optional onClickClose : (args: { id: string; }) => void
A function to call when panel's close button is clicked.
void
optional type : "Panel"
optional body :
The elements to add to the panel body.
optional footer :
The elements to add to the panel footer.
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
void
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
void
UICheckboxGroupElement The parameters for creating a checkbox group element.
The checkbox group is a control that allows the user to select one or more values from a list of options.
As a control, the checkbox group can have a label displayed above the checkboxes.
If no value is provided, value is [], the checkbox group will be empty.
A checkbox group with a label type : "CheckboxGroup"
value : string[] = valueSchema
The value of the checkbox group.
[]
options :
The options to display in the checkbox group.
onChange : (args: { value: string[]; id: string; }) => void
The function to call when the value of the checkbox group changes.
void
id : string
The ID of the element.
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
void
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
void
optional label : string
Label text to display above the element and used for screen readers.
UITextElement Represents a text element in a panel. Markdown is supported.
complex markdown
Complex markdown syntax is supported like tables, images, quotes, etc.
type : "Text"
content : string
The text to display in the element.
id : string
The ID of the element.
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
void
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
void
UIRadioGroupElementCreate The parameters for creating a radio group element.
See UIRadioGroupElement for more details.
type : "RadioGroup"
options :
The options to display in the radio group.
onChange : (args: { value: undefined | string; id: string; }) => void
The function to call when the value of the radio group changes.
void
optional value : string = valueSchema
The value of the radio group.
undefined
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
void
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
void
optional id : string
The ID of the element.
If not provided, the element will be assigned a random ID, but it is recommended to provide it to perform further updates on the element.
If provided, it must be unique within the UI.
undefined
optional label : string
Label text to display above the element and used for screen readers.
UIIframeElementCreate The parameters for creating an iframe element.
See UIIframeElement for more details.
id is optional but recommended if you want to be able to perform updates.
type : "Iframe"
url : string
The URL of the iframe.
optional height : string | number
The height of the iframe.
If not provided, the height will be automatically calculated following a 16:9 ratio.
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
void
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
void
optional id : string
The ID of the element.
If not provided, the element will be assigned a random ID, but it is recommended to provide it to perform further updates on the element.
If provided, it must be unique within the UI.
undefined
UIRadioGroupElement The parameters for creating a radio group element.
The radio group is a control that allows the user to select a single value from a list of options.
As a control, the radio group can have a label displayed above the radioes.
If no value is provided, value is undefined, the radio group will be empty.
A radio buttons group with a label type : "RadioGroup"
options :
The options to display in the radio group.
onChange : (args: { value: undefined | string; id: string; }) => void
The function to call when the value of the radio group changes.
void
id : string
The ID of the element.
optional value : string = valueSchema
The value of the radio group.
undefined
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
void
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
void
optional label : string
Label text to display above the element and used for screen readers.
UIToggleGroupElementUpdate The parameters for updating a toggle group element.
See UIToggleGroupElement for more details.
type : "ToggleGroup"
id : string
The ID of the element.
optional alignment : "start" | "end"
The alignment of the toggle group.
"start"
optional value : string[] = valueSchema
The value of the toggle group.
[]
optional options :
The options to display in the toggle group.
optional onChange : (args: { value: string[]; id: string; }) => void
The function to call when the value of the toggle group changes.
void
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
void
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
void
optional label : string
Label text to display above the element and used for screen readers.
UIButtonElementUpdate The parameters for updating a button element.
See
id and type are required to identify the element to update.
UIPanel A UI panel that can be added to the map using
Panels are containers for UI elements with title, body, footer, and close button. Body and footer elements are arranged in vertical stacks.
Main content area that scrolls when content exceeds available space.
UISelectElementCreate The parameters for creating a select element.
See
id is optional but recommended if you want to be able to perform updates.
UITextInputElementUpdate The parameters for updating a text input element.
See
id and type
UIGridContainerElementUpdate The parameters for updating a grid container element.
See
id and type
Copy {
type: "CheckboxGroup",
label: "Select your hobbies",
options: [
{ label: "👾 Video games", value: "gaming" },
{ label: "🎨 Art", value: "art" },
{ label: "🎤 Singing", value: "singing" },
{ label: "🎬 Movies", value: "movies" },
],
value: ["gaming", "art"],
onChange: ({ value, id }) => { }
}
Copy {
type: "RadioGroup",
label: "Select a side",
options: [
{ label: "🍟", value: "fries" },
{ label: "🍚", value: "rice" },
{ label: "🥗", value: "salad" },
],
value: "rice",
onChange: ({ value, id }) => { }
} The arguments passed to the function.
The arguments passed to the function.
{ value: string; id: string; }
The arguments passed to the function.
The id of the select element.
The arguments passed to the function.
The arguments passed to the function.
The arguments passed to the function.
The arguments passed to the function.
The arguments passed to the function.
{ value: undefined | string; id: string; }
The arguments passed to the function.
The id of the radio group element.
The arguments passed to the function.
The arguments passed to the function.
{ value: string[]; id: string; }
The arguments passed to the function.
Array of the selected values.
The id of the toggle group element.
The arguments passed to the function.
The arguments passed to the function.
The label to display in the button.
optional variant : "filled" | "transparent" | "outlined"
The style variant of the button.
"filled": a button with background.
background color is based on button's tint (defaults to default tint)
"transparent": a transparent button that gets a subtle dark background when hovered.
text color is based on button's tint (defaults to default tint)
"outlined": a transparent button with a border.
text and border colors are based on button's tint (defaults to default tint)
optional tint : "default" | "primary" | "accent" | "danger"
"default": Felt's theme-based light/dark colors.
"primary": Felt's primary color (pink).
"accent": Felt's accent color (blue).
"danger": Felt's danger color (red).
optional disabled : boolean
Whether the button is disabled.
optional onClick : (args: { id: string; }) => void
The action to perform when the button is clicked.
The arguments passed to the function.
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
The arguments passed to the function.
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
The arguments passed to the function.
The options to display in the select.
onChange : (args: { value: string; id: string; }) => void
The function to call when the value of the select changes.
{ value: string; id: string; }
The arguments passed to the function.
The id of the select element.
optional placeholder : string
The placeholder text to display in the select.
Whether the select should allow searching through the options.
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
The arguments passed to the function.
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
The arguments passed to the function.
If not provided, the element will be assigned a random ID, but it is recommended to provide it to perform further updates on the element.
If provided, it must be unique within the UI.
Label text to display above the element and used for screen readers.
are required to identify the element to update.
The value of the input. Use "" for empty values.
optional placeholder : string
The placeholder text to display in the input.
optional onChange : (args: { value: string; id: string; }) => void
The function to call when the value of the input changes.
{ value: string; id: string; }
The arguments passed to the function.
The id of the input element.
optional onBlur : (args: { value: string; id: string; }) => void
The function to call when the input is blurred.
{ value: string; id: string; }
The arguments passed to the function.
The id of the input element.
optional onFocus : (args: { value: string; id: string; }) => void
The function to call when the input is focused.
{ value: string; id: string; }
The arguments passed to the function.
The id of the input element.
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
The arguments passed to the function.
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
The arguments passed to the function.
Label text to display above the element and used for screen readers.
{ value: string[]; id: string; }
The arguments passed to the function.
Array of the selected values.
The id of the checkbox group element.
The arguments passed to the function.
The arguments passed to the function.
{ value: undefined | string; id: string; }
The arguments passed to the function.
The id of the radio group element.
The arguments passed to the function.
The arguments passed to the function.
The arguments passed to the function.
The arguments passed to the function.
Sticky bottom section for action buttons (e.g., Save, Cancel).
Optional close icon in header. When onClickClose is provided, you must handle panel cleanup and removal.
Custom IDs are not supported.
The title to display in the panel header.
The elements to add to the panel body.
The elements to add to the panel footer.
optional onClickClose : (args: { id: string; }) => void
A function to call when panel's close button is clicked.
The arguments passed to the function.
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
The arguments passed to the function.
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
The arguments passed to the function.
are required to identify the element to update.
The grid to use for the container. It is the exact same as CSS's shorthand property grid.
two columns, the first column is 50px wide, the second column takes the remaining space
optional verticalAlignment : "center" | "top" | "bottom"
The alignment of the items in the grid. Only takes effect on horizontal stacks.
optional horizontalDistribution : "center" | "start" | "end" | "space-between" | "space-around" | "space-evenly"
The distribution of the items in the grid. Only takes effect on horizontal stacks.
The items to add to the grid container.
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
The arguments passed to the function.
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
The arguments passed to the function.
Copy {
type: "Text",
content: "Hello, world!",
}
Copy {
type: "Text",
content: "Fill the form https://www.google.com.",
}
Copy {
type: "Text",
content: "**Hello**, _world_!",
}
Copy {
type: "Text",
content: `
# Heading
This is a paragraph.
## Subheading
This is a paragraph.
| Name | Age |
| ---- | --- |
| John | 25 |
| Jane | 30 |
> This is a quote.
[Link](https://www.google.com)
`,
}
Copy // 1. Create panel ID
const panelId = await felt.createPanelId();
// 2. Create panel with close button and footer
await felt.createOrUpdatePanel({
panel: {
id: panelId,
title: "My Panel",
body: [
{ type: "Text", content: "Hello, world!" },
{ type: "TextInput", label: "Name", placeholder: "Enter your name" }
],
footer: [
{
type: "ButtonRow",
align: "end",
items: [
{ type: "Button", label: "Cancel", onClick: () => handleCancel() },
{ type: "Button", label: "Save", onClick: () => handleSave() }
]
}
],
onClickClose: (args) => {
// Clean up any state or resources
cleanupResources();
// Close the panel
felt.deletePanel(panelId);
}
}
});
Copy {
type: "Grid",
grid: "auto-flow / 50px 1fr",
items: [...]
} UITextInputElement Represents a text input element in a panel.
value property is required, for empty value use "". label property is displayed above the input and used for screen readers.
type : "TextInput"
value : string
The value of the input. Use "" for empty values.
id : string
The ID of the element.
optional placeholder : string
The placeholder text to display in the input.
optional onChange : (args: { value: string; id: string; }) => void
The function to call when the value of the input changes.
void
optional onBlur : (args: { value: string; id: string; }) => void
The function to call when the input is blurred.
void
optional onFocus : (args: { value: string; id: string; }) => void
The function to call when the input is focused.
void
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
void
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
void
optional label : string
Label text to display above the element and used for screen readers.
UIToggleGroupElement The parameters for creating a toggle group element.
The options to display in the toggle group are defined using the options property. It can contain one or more options and each option renders a toggle.
A group with a single option By default, the toggles are aligned to the start of the group, but it can be changed to end by setting the alignment property to end.
As a control, the toggle group can have a label displayed above the toggles.
type : "ToggleGroup"
value : string[] = valueSchema
The value of the toggle group.
[]
options :
The options to display in the toggle group.
onChange : (args: { value: string[]; id: string; }) => void
The function to call when the value of the toggle group changes.
void
id : string
The ID of the element.
optional alignment : "start" | "end"
The alignment of the toggle group.
"start"
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
void
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
void
optional label : string
Label text to display above the element and used for screen readers.
UIButtonRowElement Represents a row of buttons.
It is useful to group buttons together and align them.
Unlike on UIGridContainerElement , buttons do not expand to fill the container. Instead, they use the space they need and are wrapped to the next line when they overflow.
A label can be added to the button row using the label property.
It is possible to align the button row to the start or end of the container using the align property.
Start alignment
When buttons overflow the container, they are wrapped to the next line.
With Grid container
In this example, the combination of
type : "ButtonRow"
items :
The items to add to the button row.
id : string
The ID of the element.
optional align : "start" | "end"
The alignment of the button row.
"start"
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
void
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
void
optional label : string
Label text to display above the element and used for screen readers.
UIToggleGroupElementCreate The parameters for creating a toggle group element.
See UIToggleGroupElement for more details.
type : "ToggleGroup"
value : string[] = valueSchema
The value of the toggle group.
[]
options :
The options to display in the toggle group.
onChange : (args: { value: string[]; id: string; }) => void
The function to call when the value of the toggle group changes.
void
optional alignment : "start" | "end"
The alignment of the toggle group.
"start"
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
void
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
void
optional id : string
The ID of the element.
If not provided, the element will be assigned a random ID, but it is recommended to provide it to perform further updates on the element.
If provided, it must be unique within the UI.
undefined
optional label : string
Label text to display above the element and used for screen readers.
UISelectElement Represents a select element in a panel.
options property is required. label property is displayed above the select and used for screen readers. value property is optional, for empty value use
UITextInputElementCreate The parameters for creating a text input element.
See
id is optional but recommended if you want to be able to perform updates.
Copy {
type: "ToggleGroup",
options: [{ label: "Option A", value: "optionA" }],
value: [],
onChange: ({ value, id }) => { }
} { value: string[]; id: string; }
The arguments passed to the function.
Array of the selected values.
The id of the toggle group element.
The arguments passed to the function.
The arguments passed to the function.
The value of the input. Use "" for empty values.
optional placeholder : string
The placeholder text to display in the input.
optional onChange : (args: { value: string; id: string; }) => void
The function to call when the value of the input changes.
{ value: string; id: string; }
The arguments passed to the function.
The id of the input element.
optional onBlur : (args: { value: string; id: string; }) => void
The function to call when the input is blurred.
{ value: string; id: string; }
The arguments passed to the function.
The id of the input element.
optional onFocus : (args: { value: string; id: string; }) => void
The function to call when the input is focused.
{ value: string; id: string; }
The arguments passed to the function.
The id of the input element.
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
The arguments passed to the function.
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
The arguments passed to the function.
If not provided, the element will be assigned a random ID, but it is recommended to provide it to perform further updates on the element.
If provided, it must be unique within the UI.
Label text to display above the element and used for screen readers.
{ value: string; id: string; }
The arguments passed to the function.
The id of the input element.
{ value: string; id: string; }
The arguments passed to the function.
The id of the input element.
{ value: string; id: string; }
The arguments passed to the function.
The id of the input element.
The arguments passed to the function.
The arguments passed to the function.
{ value: string[]; id: string; }
The arguments passed to the function.
Array of the selected values.
The id of the toggle group element.
The arguments passed to the function.
The arguments passed to the function.
The toggles are aligned to the end
The arguments passed to the function.
The arguments passed to the function.
undefined
.
placeholder
property is displayed in the select when no value is selected.
search
property is used to enable searching through the options.
onChange
property is used to handle the value change event.
label is displayed above the select and used for screen readers. placeholder is displayed in the select when no value is selected.
The options to display in the select.
onChange : (args: { value: string; id: string; }) => void
The function to call when the value of the select changes.
{ value: string; id: string; }
The arguments passed to the function.
The id of the select element.
optional placeholder : string
The placeholder text to display in the select.
Whether the select should allow searching through the options.
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
The arguments passed to the function.
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
The arguments passed to the function.
Label text to display above the element and used for screen readers.
Copy {
type: "TextInput",
value: "",
onChange: (args) => console.log(args.value),
placeholder: "Enter your name",
}
Copy {
type: "TextInput",
label: "Name",
value: "Hello",
onChange: (args) => console.log(args.value),
placeholder: "Enter your name",
}
Copy {
type: "ToggleGroup",
alignment: "end",
label: "All options",
options: [
{ label: "Option A", value: "optionA" },
{ label: "Option B", value: "optionB" },
],
value: ["optionA"],
onChange: ({ value, id }) => { }
}
Copy {
type: "ToggleGroup",
label: "All options",
options: [
{ label: "Option A", value: "optionA" },
{ label: "Option B", value: "optionB" },
],
value: ["optionA"],
onChange: ({ value, id }) => { }
}
Copy {
type: "ButtonRow",
label: "Zoom control",
items: [
{ type: "Button", label: "Increase", onClick: () => {} },
{ type: "Button", label: "Decrease", onClick: () => {} },
],
}
Copy {
type: "ButtonRow",
align: "start", // default value
items: [
{ type: "Button", label: "Button 1", onClick: () => {} },
{ type: "Button", label: "Button 2", onClick: () => {} },
],
}
Copy {
type: "ButtonRow",
align: "end",
items: [
{ type: "Button", label: "Button 1", onClick: () => {} },
{ type: "Button", label: "Button 2", onClick: () => {} },
],
}
Copy {
type: "ButtonRow",
items: [
{ type: "Button", label: "Button with a very long text", onClick: () => {} },
{ type: "Button", label: "Button 2", onClick: () => {} },
{ type: "Button", label: "Button 3", onClick: () => {} },
],
}
Copy {
type: "Grid",
grid: "auto-flow / 1fr auto",
rowItemsJustify: "space-between",
rowItemsAlign: "center",
items: [
{ type: "Text", content: "Continue?" },
{
type: "ButtonRow",
align: "end",
items: [
{ type: "Button", variant: "transparent", label: "Cancel", onClick: () => {} },
{ type: "Button", variant: "filled", tint: "primary", label: "Continue", onClick: () => {} },
]
},
],
}
Copy {
type: "Select",
options: [{ label: "Option 1", value: "option1" }, { label: "Option 2", value: "option2" }],
value: undefined,
placeholder: "Select an option",
onChange: (args) => console.log(args.value),
}
Copy {
type: "Select",
label: "Fruit",
options: [{ label: "Apple", value: "apple" }, { label: "Banana", value: "banana" }],
value: undefined,
placeholder: "Select a fruit",
onChange: (args) => console.log(args.value),
}
Copy {
type: "Select",
options: [{ label: "Option 1", value: "option1" }, { label: "Option 2", value: "option2" }],
value: "option1",
placeholder: "Select an option",
search: true,
onChange: (args) => console.log(args.value),
} UIGridContainerElement Represents a container with a grid layout in a panel.
By default, the grid items are vertically stacked, but you can change the grid to use a different layout by setting the grid property to a different value.
grid property is the exact same as CSS's shorthand property grid. See the MDN documentation for more detailsarrow-up-right .
You can understand UIPanel body and footer properties as grid containers using default vertical stack layout.
Horizontal stack
As part of CSS Grid Layout capabilities it is possible to create a horizontal stack.
Alignment & Distribution
On horizontal stacks, it is possible to align and distribute the items.
verticalAlignment is used to align the items vertically. By default, items are aligned to the top of the container. It follows the same values as CSS's align-items property. See
horizontalDistribution is used to justify the items horizontally. By default, items are justified to the start of the container. It follows the same values as CSS's justify-content property. See
Equal width columns
FlexibleSpace element
FlexibleSpace element is a handy solution to allow more control over grid layout.
If grid is not set, FlexibleSpace will add some space between the items. By using grid property it is possible to control FlexibleSpace's size.
to right align the input
two columns of buttons with space between them
type : "Grid"
items : (
The items to add to the grid container.
id : string
The ID of the element.
optional grid : string
The grid to use for the container. It is the exact same as CSS's shorthand property grid.
horizontal stack
two columns, the first column is 50px wide, the second column takes the remaining space
verticalAlignment?
optional verticalAlignment : "center" | "top" | "bottom"
The alignment of the items in the grid. Only takes effect on horizontal stacks.
"top"
horizontalDistribution?
optional horizontalDistribution : "center" | "start" | "end" | "space-between" | "space-around" | "space-evenly"
The distribution of the items in the grid. Only takes effect on horizontal stacks.
"start"
optional onCreate : (args: { id: string; }) => void
A function to call when the element is created.
void
optional onDestroy : (args: { id: string; }) => void
A function to call when the element is destroyed.
void
The arguments passed to the function.
The arguments passed to the function.
Two columns, each sharing 50% of the container width
Flexible space takes 50% of the container width
Copy {
type: "Grid",
grid: "auto-flow / 1fr 1fr",
items: [
{ type: "TextInput", label: "Name", value: "" },
{ type: "TextInput", label: "Last name", value: "" },
],
}
Copy {
type: "Grid",
grid: "auto-flow / 1fr 1fr",
items: [
{ type: "FlexibleSpace" },
{ type: "TextInput", label: "An input" , value: "" },
],
}
Copy {
type: "Grid",
grid: "auto-flow / auto auto 1fr auto auto",
items: [
{ type: "Button", label: "A" , onClick: () => {} },
{ type: "Button", label: "B" , onClick: () => {} },
{ type: "FlexibleSpace" },
{ type: "Button", label: "C" , onClick: () => {} },
{ type: "Button", label: "D" , onClick: () => {} },
],
}
Copy {
type: "Grid",
grid: "auto-flow / 50px 1fr",
items: [...]
} UiController The UI controller allows you to control various aspects of the Felt UI in your map.
This includes enabling/disabling UI controls, managing on-map interactions, and controlling the visibility of UI components like the data table.
createActionTrigger()
createActionTrigger (args: Promise<
Creates an action trigger. Action triggers are rendered on map's left sidebar as a button, similar to other map extensions like measure and spatial filter.
The goal of action triggers is to allow users to perform actions on the map by clicking on a button.
Promise<
updateActionTrigger()
updateActionTrigger (args: Promise<
Updates an action trigger.
Action trigger to update is identified by the id property.
Promise<
Properties provided will override the existing properties.
deleteActionTrigger()
deleteActionTrigger (id: string): void
Deletes an action trigger.
void
createFeatureAction()
createFeatureAction (args: Promise<
Creates a feature contextual action.
Promise<
updateFeatureAction()
updateFeatureAction (args: Promise<
Updates a feature contextual action.
Feature contextual action to update is identified by the id property.
Promise<
Properties provided will override the existing properties.
deleteFeatureAction()
deleteFeatureAction (id: string): void
Deletes a feature contextual action.
void
createPanelId()
createPanelId (): Promise<string>
Creates a panel ID.
In order to create a panel using
Promise<string>
createOrUpdatePanel()
createOrUpdatePanel (args: Promise<
Creates or updates a panel.
Panels are rendered on the map's right sidebar and allow you to extend Felt UI for your own use cases using Felt UI elements (e.g., Text, Button, etc.).
A panel is identified by its ID, which must be created using
Panels have two main sections:
body - The main content area of the panel, which is scrollable.
footer - A section that sticks to the bottom of the panel, useful for action buttons like "Submit" or "Cancel".
Panel placement is controlled by the initialPlacement parameter. By default, panels are added to the end of the panel stack, but you can specify a different placement. Note that this placement cannot be changed after the panel is created.
Element IDs are required for targeted updates and deletions using the other panel management methods. For complete panel refreshes with this method, element IDs are optional but recommended for consistency.
For dynamic content management, consider these approaches:
Use this method for complete panel refreshes (replaces all content)
Use
Use
Promise<
deletePanel (id: string): void
Deletes a panel.
void
createPanelElements()
createPanelElements (args: Promise<
Creates elements in a panel.
Use this method to add new elements to an existing panel without replacing the entire panel content. This is useful for dynamic UI updates.
Promise<
updatePanelElements()
updatePanelElements (args: Promise<
Updates an existing element in a panel. This method can only update elements that already exist in the panel and have an ID.
Use this method to modify specific elements without replacing the entire panel. This is more efficient than using
Promise<
deletePanelElements()
deletePanelElements (args: void
Deletes elements from a panel.
Use this method to remove specific elements from a panel without replacing the entire panel content.
void
updateUiControls()
updateUiControls (controls: void
Updates the UI controls on the embedded map.
Use this method to show or hide various UI controls like the legend, full screen button, and other map interface elements.
void
setOnMapInteractionsUi()
setOnMapInteractionsUi (options: void
Control the on-map UI shown when interacting with features and elements.
If you add your own click, selection or hover handlers you may want to disable various parts of the Felt UI. This method allows you to control the visibility of various parts of the UI that might otherwise be shown when people click or hover on things.
This does not affect selection. That means that selectable features and elements will still be selected when clicked.
void
showLayerDataTable()
showLayerDataTable (params?: { layerId: string; sorting: Promise<void>
Shows a data table view for the specified layer, optionally sorted by a given attribute.
The data table displays feature data in a tabular format, making it easy to browse and analyze layer data. You can control the initial sorting of the table.
Promise<void>
hideLayerDataTable()
hideLayerDataTable (): Promise<void>
Hides the data table.
Promise<void>
Use
The arguments for the method.
The action trigger to update.
The id of the action trigger to delete.
The arguments for the method.
The feature contextual action to update.
The id of the feature contextual action to delete.
The arguments for creating or updating the panel.
The id of the panel to delete.
The arguments for the method.
The arguments for the method.
The arguments for the method.
{ layerId: string; sorting:
Optional parameters for showing the data table.
The ID of the layer to show data for.
Optional sorting configuration for the table.
Copy await felt.createActionTrigger({
actionTrigger: {
id: "enablePolygonTool", // optional. Required if you want to update the action trigger later
label: "Draw polygon",
onTrigger: async () => {
felt.setTool("polygon");
},
disabled: false, // optional, defaults to false
},
placement: { at: "start" }, // optional, defaults to { at: "end" }
});
Copy await felt.updateActionTrigger({
id: "enablePolygonTool",
label: "Enable polygon tool", // only label changes
});
Copy await felt.deleteActionTrigger("enablePolygonTool");
Copy const myAction = await felt.createFeatureAction({
action: {
label: "Add to selection",
onTrigger: async ({ feature }) => {
console.log(`Adding feature ${feature.id} from layer ${feature.layerId} to selection`);
},
layerIds: ["layer-1", "layer-2"], // Display the feature action only on these layers
},
placement: { at: "start" }, // optional, defaults to { at: "end" }
});
Copy const myAction = await felt.createFeatureAction({ ... });
await felt.updateFeatureAction({
id: myAction.id,
label: "Updated action label", // only label changes
});
Copy const myAction = await felt.createFeatureAction({ ... });
await felt.deleteFeatureAction(myAction.id);
Copy const panelId = await felt.createPanelId();
Copy // 1. Create panel ID first (required)
const panelId = await felt.createPanelId();
// 2. Define reusable elements
const SELECT = { id: "layer-select", type: "Select", label: "Layer", options: [...] };
const ANALYZE_BTN = { id: "analyze-btn", type: "Button", label: "Analyze", onClick: handleAnalyze };
const STATUS_TEXT = { id: "status-text", type: "Text", content: "" };
const CLEAR_BTN = { id: "clear-btn", type: "Button", label: "Clear", onClick: handleClear };
// 3. Initial state
await felt.createOrUpdatePanel({
panel: { id: panelId, title: "Data Analyzer", body: [SELECT, ANALYZE_BTN] }
});
// 4. Loading state (replaces entire panel)
await felt.createOrUpdatePanel({
panel: {
id: panelId,
title: "Data Analyzer",
body: [SELECT, ANALYZE_BTN, { ...STATUS_TEXT, content: "Loading..." }]
}
});
// 5. Results state (replaces entire panel)
await felt.createOrUpdatePanel({
panel: {
id: panelId,
title: "Data Analyzer",
body: [SELECT, ANALYZE_BTN, { ...STATUS_TEXT, content: "**Results:**\n- Found 150 features" }, CLEAR_BTN]
}
});
Copy await felt.deletePanel("panel-1");
Copy await felt.createPanelElements({
panelId,
elements: [
{
element: { type: "Text", content: "Hello, world!" },
container: "body",
placement: { at: "start" },
},
],
});
Copy // 1. Create panel with initial elements
const panelId = await felt.createPanelId();
const STATUS_TEXT = { id: "status-text", type: "Text", content: "Ready" };
await felt.createOrUpdatePanel({
panel: {
id: panelId,
title: "My Panel",
body: [STATUS_TEXT]
}
});
// 2. Update the existing element
await felt.updatePanelElements({
panelId,
elements: [
{
element: {
...STATUS_TEXT, // Reuse the same element structure
content: "Updated content" // Only change what needs updating
},
},
],
});
Copy await felt.deletePanelElements({
panelId,
elements: ["element-1", "element-2"],
});
Copy // Show some UI controls
await felt.updateUiControls({
showLegend: true,
fullScreenButton: true,
});
// Disable some UI options
await felt.updateUiControls({
cooperativeGestures: false,
geolocation: false,
});
Copy // Disable UI when hovering or selecting features
await felt.setOnMapInteractionsUi({
featureSelectPanel: false,
featureHoverPanel: false,
});
Copy // Show data table with default sorting
await felt.showLayerDataTable({
layerId: "layer-1",
});
// Show data table sorted by height in descending order
await felt.showLayerDataTable({
layerId: "layer-1",
sorting: {
attribute: "height",
direction: "desc",
},
});
// Show the data table pane with no table visible
await felt.showLayerDataTable();
Copy await felt.hideLayerDataTable(); 
