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

• FeltController

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

Parameter	Type	Description
args	CreateActionTriggerParams	The arguments for the method.

Returns

Promise<UIActionTriggerCreate>

Example

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" }
});

---

updateActionTrigger()

updateActionTrigger(args: UpdateActionTriggerParams): Promise<UIActionTriggerCreate>

Updates an action trigger.

Action trigger to update is identified by the id property.

Parameters

Parameter	Type	Description
args	UpdateActionTriggerParams	The action trigger to update.

Returns

Promise<UIActionTriggerCreate>

Remarks

Properties provided will override the existing properties.

Example

await felt.updateActionTrigger({
  id: "enablePolygonTool",
  label: "Enable polygon tool", // only label changes
});

---

deleteActionTrigger()

deleteActionTrigger(id: string): void

Deletes an action trigger.

Parameters

Parameter	Type	Description
id	string	The id of the action trigger to delete.

Returns

void

Example

await felt.deleteActionTrigger("enablePolygonTool");

---

createFeatureAction()

createFeatureAction(args: CreateFeatureActionParams): Promise<UIFeatureAction>

Creates a feature contextual action.

Parameters

Parameter	Type	Description
args	CreateFeatureActionParams	The arguments for the method.

Returns

Promise<UIFeatureAction>

Example

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" }
});

---

updateFeatureAction()

updateFeatureAction(args: UpdateFeatureActionParams): Promise<UIFeatureAction>

Updates a feature contextual action.

Feature contextual action to update is identified by the id property.

Parameters

Parameter	Type	Description
args	UpdateFeatureActionParams	The feature contextual action to update.

Returns

Promise<UIFeatureAction>

Remarks

Properties provided will override the existing properties.

Example

const myAction = await felt.createFeatureAction({ ... });
await felt.updateFeatureAction({
  id: myAction.id,
  label: "Updated action label", // only label changes
});

---

deleteFeatureAction()

deleteFeatureAction(id: string): void

Deletes a feature contextual action.

Parameters

Parameter	Type	Description
id	string	The id of the feature contextual action to delete.

Returns

void

Example

const myAction = await felt.createFeatureAction({ ... });
await felt.deleteFeatureAction(myAction.id);

---

createPanelId()

createPanelId(): Promise<string>

Creates a panel ID.

In order to create a panel using createOrUpdatePanel, you need to create a panel ID first. Panel IDs are automatically generated to prevent conflicts with other panels.

Returns

Promise<string>

Example

const panelId = await felt.createPanelId();

---

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 using createPanelId. 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 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 createPanelElements to add new elements to existing panels

• Use updatePanelElements to modify specific existing elements

• Use deletePanelElements to remove specific elements

Parameters

Parameter	Type	Description
args	CreateOrUpdatePanelParams	The arguments for creating or updating the panel.

Returns

Promise<UIPanel>

Example

// 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]
  }
});

---

deletePanel()

deletePanel(id: string): void

Deletes a panel.

Parameters

Parameter	Type	Description
id	string	The id of the panel to delete.

Returns

void

Example

await felt.deletePanel("panel-1");

---

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

Parameter	Type	Description
args	CreatePanelElementsParams	The arguments for the method.

Returns

Promise<UIPanel>

Example

await felt.createPanelElements({
  panelId,
  elements: [
    {
      element: { type: "Text", content: "Hello, world!" },
      container: "body",
      placement: { at: "start" },
    },
  ],
});

---

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 using createOrUpdatePanel for small changes.

Parameters

Parameter	Type	Description
args	UpdatePanelElementsParams	The arguments for the method.

Returns

Promise<UIPanel>

Example

// 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
      },
    },
  ],
});

---

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

Parameter	Type	Description
args	DeletePanelElementsParams	The arguments for the method.

Returns

void

Example

await felt.deletePanelElements({
  panelId,
  elements: ["element-1", "element-2"],
});

---

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

Parameter	Type	Description
controls	UiControlsOptions	The controls to update.

Returns

void

Example

// Show some UI controls
await felt.updateUiControls({
  showLegend: true,
  fullScreenButton: true,
});

// Disable some UI options
await felt.updateUiControls({
  cooperativeGestures: false,
  geolocation: false,
});

---

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

Parameter	Type
options	OnMapInteractionsOptions

Returns

void

Example

// Disable UI when hovering or selecting features
await felt.setOnMapInteractionsUi({
  featureSelectPanel: false,
  featureHoverPanel: false,
});

---

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

Parameter	Type	Description
params?	{ layerId: string; sorting: SortConfig; }	Optional parameters for showing the data table.
params.layerId?	string	The ID of the layer to show data for.
params.sorting?	SortConfig	Optional sorting configuration for the table.

Returns

Promise<void>

Example

// 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();

---

hideLayerDataTable()

hideLayerDataTable(): Promise<void>

Hides the data table.

Returns

Promise<void>

Example

await felt.hideLayerDataTable();