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.
Extended by
Methods
createActionTrigger()
createActionTrigger(
args:CreateActionTriggerParams):Promise<UIActionTriggerCreate>
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.
Parameters
Returns
Promise<UIActionTriggerCreate>
Example
updateActionTrigger()
updateActionTrigger(
args:UpdateActionTriggerParams):Promise<UIActionTriggerCreate>
Updates an action trigger.
Action trigger to update is identified by theid property.
Parameters
Returns
Promise<UIActionTriggerCreate>
Remarks
Properties provided will override the existing properties.
Example
deleteActionTrigger()
deleteActionTrigger(
id:string):void
Deletes an action trigger.
Parameters
id
string
The id of the action trigger to delete.
Returns
void
Example
createFeatureAction()
createFeatureAction(
args:CreateFeatureActionParams):Promise<UIFeatureAction>
Creates a feature contextual action.
Parameters
Returns
Promise<UIFeatureAction>
Example
updateFeatureAction()
updateFeatureAction(
args:UpdateFeatureActionParams):Promise<UIFeatureAction>
Updates a feature contextual action.
Feature contextual action to update is identified by theid property.
Parameters
Returns
Promise<UIFeatureAction>
Remarks
Properties provided will override the existing properties.
Example
deleteFeatureAction()
deleteFeatureAction(
id:string):void
Deletes a feature contextual action.
Parameters
id
string
The id of the feature contextual action to delete.
Returns
void
Example
createPanelId()
createPanelId():
Promise<string>
Creates a panel ID.
In order to create a panel usingcreateOrUpdatePanel, you need to create a panel ID first. Panel IDs are automatically generated to prevent conflicts with other panels.
Returns
Promise<string>
Example
createOrUpdatePanel()
createOrUpdatePanel(
args:CreateOrUpdatePanelParams):Promise<UIPanel>
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 usingcreatePanelId. Custom IDs are not supported to prevent conflicts with other panels.
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 theinitialPlacement 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)
UsecreatePanelElements to add new elements to existing panels
UseupdatePanelElements to modify specific existing elements
UsedeletePanelElements to remove specific elements
Parameters
Returns
Promise<UIPanel>
Example
deletePanel()
deletePanel(
id:string):void
Deletes a panel.
Parameters
id
string
The id of the panel to delete.
Returns
void
Example
createPanelElements()
createPanelElements(
args:CreatePanelElementsParams):Promise<UIPanel>
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.
Parameters
Returns
Promise<UIPanel>
Example
updatePanelElements()
updatePanelElements(
args:UpdatePanelElementsParams):Promise<UIPanel>
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 usingcreateOrUpdatePanel for small changes.
Parameters
Returns
Promise<UIPanel>
Example
deletePanelElements()
deletePanelElements(
args:DeletePanelElementsParams):void
Deletes elements from a panel.
Use this method to remove specific elements from a panel without replacing the entire panel content.
Parameters
Returns
void
Example
updateUiControls()
updateUiControls(
controls:UiControlsOptions):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.
Parameters
Returns
void
Example
setOnMapInteractionsUi()
setOnMapInteractionsUi(
options:OnMapInteractionsOptions):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.
Parameters
options
Returns
void
Example
showLayerDataTable()
showLayerDataTable(
params?: {layerId:string;sorting:SortConfig; }):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.
Parameters
params.layerId?
string
The ID of the layer to show data for.
Returns
Promise<void>
Example
hideLayerDataTable()
hideLayerDataTable():
Promise<void>
Hides the data table.
Returns
Promise<void>
Example
Last updated
Was this helpful?