arrow-left

All pages
gitbookPowered by GitBook
1 of 4

Loading...

Loading...

Loading...

Loading...

FeltEmbedOptions


hashtag
Properties

hashtag
uiControls?

optional uiControls:


hashtag
initialViewport?

optional initialViewport:


hashtag
token?

optional token: string

A short-lived (15 minutes) authentication token to use for showing embeds that are configured to be private.

UiControlsOptions
ViewportCenterZoom

Main


Use the Felt object to embed a new iframe, or connect to an existing embedded iframe.

Once you have connected to a Felt map (either by embedding or connecting to an existing iframe), you can use the FeltController object to control the map.

To see what you can do with the map, see the documentation for the FeltController interface and its constituent controllers.

hashtag
Example

hashtag
Controller

hashtag
Instantiation

// embed the map
const map = await Felt.embed(container, "felt-map-abc-123");

// now the map is loaded and connected, you can use the FeltController interface
// to control the map. For instance, to get information about the layers
const layers = await map.getLayers();

// Or to set the viewport to a specific location and zoom level
await map.setViewport({
  center: { latitude: 37.8113, longitude: -122.2682 },
  zoom: 10,
});
FeltController
FeltEmbedOptions
Felt

FeltController


This is the main interface for interacting with a Felt map.

This interface is composed of the various controllers, each having a different area of responsibility.

All the methods are listed here, but each controller is documented on its own to make it easier to find related methods and events.

hashtag
Extends

  • ........

hashtag
Methods

hashtag
getCurrentBasemap()

getCurrentBasemap(): Promise<>

Gets the currently active basemap.

Use this method to retrieve information about the current basemap, including its type (Felt, color, or custom tile), name, color scheme, and attribution.

hashtag
Returns

Promise<>

A promise that resolves to the current basemap configuration.

hashtag
Example


hashtag
getBasemaps()

getBasemaps(): Promise<[]>

Gets all basemaps available on the map.

Use this method to retrieve a list of all available basemaps that can be applied to the map.

hashtag
Returns

Promise<[]>

A promise that resolves to all basemaps available on the map.

hashtag
Example


hashtag
chooseBasemap()

chooseBasemap(id: string): void

Chooses the basemap to use for the map.

Use this method to change the current basemap. The basemap ID can be obtained from getBasemaps().

hashtag
Parameters

Parameter
Type

hashtag
Returns

void

A promise that resolves when the basemap has been set.

hashtag
Example


hashtag
addCustomBasemap()

addCustomBasemap(args: { basemap: | ; select: boolean; }): Promise<>

Adds a custom basemap to the map. This can be either a solid color or a basemap from a custom tile URL.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

Promise<>

A promise for the added basemap.

hashtag
Example


hashtag
removeBasemap()

removeBasemap(id: string): Promise<void>

Removes a basemap from the list of available basemaps.

hashtag
Parameters

Parameter
Type

hashtag
Returns

Promise<void>

A promise that resolves when the basemap has been removed.


hashtag
getElement()

getElement(id: string): Promise<null | >

Get a single element from the map by its id.

Use this method when you know the specific ID of an element and want to retrieve its current state. This is more efficient than getting all elements and filtering.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

Promise<null | >

A promise that resolves to the requested element, or null if not found.

hashtag
Example


hashtag
getElementGeometry()

getElementGeometry(id: string): Promise<null | >

Get the geometry of an element in GeoJSON geometry format.

For most element types, the geometry returned is based on the coordinates property of the element, with some differences:

  • For Circle elements, the geometry is a Polygon drawn from the center and radius properties.

  • Path elements become MultiLineString geometries.

  • Marker elements return a MultiLineString of the path traced by the user as they drew the marker. Note that this is not the polygon formed by filled-in "pen" stroke, which doesn't exactly follow the path traced by the user as it is smoothed and interpolated to create a continuous line.

Use this method when you need the geometric representation of an element for spatial analysis or visualization purposes.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

Promise<null | >

A promise that resolves to the element's geometry in GeoJSON format, or null if the element has no geometry.

hashtag
Example


hashtag
getElements()

getElements(constraint?: ): Promise<(null | )[]>

Gets elements from the map, according to the constraints supplied. If no constraints are supplied, all elements will be returned.

Use this method to retrieve multiple elements, optionally filtered by constraints. This is useful for bulk operations or when you need to analyze all elements on the map.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

Promise<(null | )[]>

A promise that resolves to an array of elements, ordered by the order specified in Felt.

hashtag
Remarks

The elements in the map, ordered by the order specified in Felt. This is not necessarily the order that they are drawn in, as Felt draws points above lines and lines above polygons, for instance.

hashtag
Example


hashtag
getElementGroup()

getElementGroup(id: string): Promise<null | >

Get an element group from the map by its id.

Element groups allow you to organize related elements together and control their visibility as a unit.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

Promise<null | >

A promise that resolves to the requested element group, or null if not found.

hashtag
Example


hashtag
getElementGroups()

getElementGroups(constraint?: ): Promise<(null | )[]>

Gets element groups from the map, according to the filters supplied. If no constraints are supplied, all element groups will be returned in rendering order.

Use this method to retrieve multiple element groups, optionally filtered by constraints. This is useful for bulk operations on element groups.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

Promise<(null | )[]>

A promise that resolves to an array of element groups in rendering order.

hashtag
Example


hashtag
setElementGroupVisibility()

setElementGroupVisibility(visibility: ): Promise<void>

Hide or show element groups with the given ids.

Use this method to control the visibility of multiple element groups at once. This is more efficient than hiding/showing individual elements.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

Promise<void>

A promise that resolves when the visibility changes are applied.

hashtag
Example


hashtag
createElement()

createElement(element: ): Promise<>

Create a new element on the map.

Use this method to programmatically create elements on the map. Elements created via the SDK are only available to the current session and are not persisted.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

Promise<>

A promise that resolves to the created element.

hashtag
Example


hashtag
updateElement()

updateElement(element: ): Promise<>

Update an element on the map. The element type must be specified.

Use this method to modify existing elements. You can update properties like coordinates, styling, and metadata.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

Promise<>

A promise that resolves to the updated element.

hashtag
Example


hashtag
deleteElement()

deleteElement(id: string): Promise<void>

Delete an element from the map.

Use this method to remove elements from the map. This operation cannot be undone.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

Promise<void>

A promise that resolves when the element is deleted.

hashtag
Example


hashtag
getLayer()

getLayer(id: string): Promise<null | >

Get a single layer from the map by its id.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

Promise<null | >

The requested layer.

hashtag
Example


hashtag
getLayers()

getLayers(constraint?: ): Promise<(null | )[]>

Gets layers from the map, according to the constraints supplied. If no constraints are supplied, all layers will be returned.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

Promise<(null | )[]>

All layers on the map.

hashtag
Remarks

The layers in the map, ordered by the order specified in Felt. This is not necessarily the order that they are drawn in, as Felt draws points above lines and lines above polygons, for instance.

hashtag
Example


hashtag
setLayerVisibility()

setLayerVisibility(visibility: ): Promise<void>

Hide or show layers with the given ids.

hashtag
Parameters

Parameter
Type

hashtag
Returns

Promise<void>

hashtag
Example


hashtag
setLayerStyle()

setLayerStyle(params: { id: string; style: object; }): Promise<void>

Set the style for a layer using FSL, the Felt Style Language.

Changes are only for this session, and not persisted. This is useful to make temporary changes to a layer's style, such as to highlight a particular layer or feature.

See the for details on how to read and write styles.

If the style you set is invalid, you will receive an error explaining the problem in the rejected promise value.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

Promise<void>

hashtag
Example


hashtag
setLayerLegendVisibility()

setLayerLegendVisibility(params: ): Promise<void>

Hide or show layers with the given ids from the legend.

hashtag
Parameters

Parameter
Type

hashtag
Returns

Promise<void>

hashtag
Example


hashtag
createLayersFromGeoJson()

createLayersFromGeoJson(params: ): Promise<null | { layerGroup: ; layers: []; }>

Adds layers to the map from file or URL sources.

hashtag
Parameters

Parameter
Type

hashtag
Returns

Promise<null | { layerGroup: ; layers: []; }>

The layer groups that were created.

hashtag
Remarks

This allows you to add temporary layers to the map that don't depend on any processing by Felt. This is useful for viewing data from external sources or remote files.

hashtag
Example


hashtag
updateLayer()

updateLayer(params: ): Promise<>

Update a layer by passing a subset of the layer's properties.

Note that not all properties can be updated, so check the type to see which properties can be updated.

hashtag
Parameters

Parameter
Type

hashtag
Returns

Promise<>

hashtag
Example


hashtag
deleteLayer()

deleteLayer(id: string): Promise<void>

Delete a layer from the map by its id.

hashtag
Parameters

Parameter
Type

hashtag
Returns

Promise<void>

hashtag
Remarks

This only works for layers created via the SDK createLayersFromGeoJson method, not layers added via the Felt UI.

hashtag
Example


hashtag
duplicateLayer()

duplicateLayer(id: string): Promise<>

Duplicate a layer from the map by its id.

hashtag
Parameters

Parameter
Type

hashtag
Returns

Promise<>

The duplicated layer.

hashtag
Remarks

This will create an ephemeral copy of the layer, just for the duration of the session. The duplicated layer will not be persisted to the map.

hashtag
Example


hashtag
getLayerGroup()

getLayerGroup(id: string): Promise<null | >

Get a layer group from the map by its id.

hashtag
Parameters

Parameter
Type

hashtag
Returns

Promise<null | >

The requested layer group.

hashtag
Example


hashtag
getLayerGroups()

getLayerGroups(constraint?: ): Promise<(null | )[]>

Gets layer groups from the map, according to the constraints supplied. If no constraints are supplied, all layer groups will be returned in rendering order.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

Promise<(null | )[]>

The requested layer groups.

hashtag
Example


hashtag
setLayerGroupVisibility()

setLayerGroupVisibility(visibility: ): Promise<void>

Hide or show layer groups with the given ids.

hashtag
Parameters

Parameter
Type

hashtag
Returns

Promise<void>

hashtag
Example


hashtag
setLayerGroupLegendVisibility()

setLayerGroupLegendVisibility(params: ): Promise<void>

Hide or show layer groups with the given ids from the legend.

hashtag
Parameters

Parameter
Type

hashtag
Returns

Promise<void>

hashtag
Example


hashtag
getLegendItem()

getLegendItem(id: ): Promise<null | >

Allows you to get the state of a single legend item.

hashtag
Parameters

Parameter
Type

hashtag
Returns

Promise<null | >

hashtag
Example


hashtag
getLegendItems()

getLegendItems(constraint?: ): Promise<(null | )[]>

Allows you to obtain the state of several legend items, by passing in constraints describing which legend items you want.

If you do not pass any constraints, you will receive all legend items.

hashtag
Parameters

Parameter
Type

hashtag
Returns

Promise<(null | )[]>

hashtag
Example


hashtag
setLegendItemVisibility()

setLegendItemVisibility(visibility: { show: []; hide: []; }): Promise<void>

Hide or show legend items with the given identifiers.

hashtag
Parameters

Parameter
Type

hashtag
Returns

Promise<void>

hashtag
Example


hashtag
getLayerFilters()

getLayerFilters(layerId: string): Promise<null | >

Get the filters for a layer.

hashtag
Parameters

Parameter
Type

hashtag
Returns

Promise<null | >

hashtag
Remarks

The return type gives you the filters split up into the various sources that make up the overall filters for a layer.

hashtag
Example


hashtag
setLayerFilters()

setLayerFilters(params: { layerId: string; filters: ; note: string; }): Promise<void>

Sets the ephemeral filters for a layer.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

Promise<void>

hashtag
Example


hashtag
getLayerBoundaries()

getLayerBoundaries(layerId: string): Promise<null | >

Get the spatial boundaries that are filtering a layer.

hashtag
Parameters

Parameter
Type

hashtag
Returns

Promise<null | >

hashtag
Remarks

The return type gives you the boundaries split up into the various sources that make up the overall boundary for a layer.

The combined boundary is the intersection of the other sources of boundaries.

hashtag
Example


hashtag
setLayerBoundary()

setLayerBoundary(params: { layerIds: string[]; boundary: null | ; }): Promise<void>

Set the boundary for one or more layers.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

Promise<void>

hashtag
Example


hashtag
getRenderedFeatures()

getRenderedFeatures(params?: ): Promise<[]>

Get the features that are currently rendered on the map in the viewport.

Note that this is explicitly about the features that are rendered, which isn't necessarily a complete list of all the features in the viewport. This is because of the way features are tiled: at low zoom levels or high feature densities, many features are omitted from what is rendered on the screen.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

Promise<[]>

hashtag
Example


hashtag
getFeature()

getFeature(params: { id: string | number; layerId: string; }): Promise<null | >

Get a feature from the map by its ID and layer ID.

The response is a object, which does not include the geometry of the feature.

You may want to use this when you don't need the geometry of a feature, but you know the ID of the feature you need.

hashtag
Parameters

Parameter
Type

hashtag
Returns

Promise<null | >

hashtag
Example


hashtag
getFeatures()

getFeatures(params: { layerId: string; filters: ; sorting: ; boundary: ; search: string; pagination: null | string

Get a list of layer features.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

Promise<{ features: []; count: number; previousPage: null | string; nextPage: null | string; }>

The response is an object which contains:

  • features: list of objects, which does not include the geometry of the feature but it does include its bounding box.

  • count: the total number of features that match the query.

  • previousPage

hashtag
Remarks

This list is paginated in sets of 20 features for each page. In order to paginate between pages, the response includes previousPage and nextPage that are tokens that should be sent in the pagination params for requesting sibling pages.

Text search is case-insensitive and looks for matches across all feature properties.

hashtag
Example


hashtag
getGeoJsonFeature()

getGeoJsonFeature(params: { id: string | number; layerId: string; }): Promise<null | >

Get a feature in GeoJSON format from the map by its ID and layer ID.

The response is a GeoJSON Feature object with the complete geometry of the feature. Note that for some very large geometries, the response may take a long time to return, and may return a very large object.

hashtag
Parameters

Parameter
Type

hashtag
Returns

Promise<null | >

hashtag
Example


hashtag
getCategoryData()

getCategoryData(params: ): Promise<[]>

Gets values from a layer grouped by a given attribute.

hashtag
Parameters

Parameter
Type

hashtag
Returns

Promise<[]>

hashtag
Remarks

Groups features in your layer by unique values in the specified attribute and calculates a value for each group. By default, this value is the count of features in each group.

You can apply filters in two ways:

  1. At the top level (using boundary and filters), which affects both what categories are included and how values are calculated

  2. In the values configuration, which only affects the values but keeps all categories

This two-level filtering is particularly useful when you want to compare subsets of data while maintaining consistent categories. For example, you might want to show the distribution of all building types in a city, but only count buildings built after 2000 in each category.

hashtag
Example


hashtag
getHistogramData()

getHistogramData(params: ): Promise<[]>

Gets a histogram of values from a layer for a given attribute.

hashtag
Parameters

Parameter
Type

hashtag
Returns

Promise<[]>

hashtag
Remarks

Creates bins (ranges) for numeric data and counts how many features fall into each bin, or returns aggregated values for each bin.

You can control how the bins are created using the steps parameter, choosing from several methods like equal intervals, quantiles, or natural breaks (Jenks), or passing in the step values directly if you know how you want to bin the data.

Like getCategoryData, you can apply filters in two ways:

  1. At the top level (using boundary and filters), which affects both how the bins are calculated and what features are counted in each bin

  2. In the values configuration, which only affects what gets counted but keeps the bin ranges the same

This is particularly useful when you want to compare distributions while keeping consistent bin ranges. For example, you might want to compare the distribution of building heights in different years while using the same height ranges.

hashtag
Example


hashtag
getAggregates()

getAggregates<T>(params: <T>): Promise<Record<T, null | number>>

Calculates a single aggregate value for a layer based on the provided configuration.

hashtag
Type Parameters

Type Parameter

hashtag
Parameters

Parameter
Type

hashtag
Returns

Promise<Record<T, null | number>>

hashtag
Remarks

Performs statistical calculations on your data, like counting features or computing averages, sums, etc. You can focus your calculation on specific areas or subsets of your data using boundaries and filters.

When you request an aggregation other than count, you must specify an attribute to aggregate on.

hashtag
Example


hashtag
getPrecomputedAggregates()

getPrecomputedAggregates(params: ): Promise<{ avg: null | number; max: null | number; min: null | number

Calculates aggregates for spatial cells of a layer.

hashtag
Parameters

Parameter
Type

hashtag
Returns

Promise<{ avg: null | number; max: null | number; min: null | number; sum: null | number

hashtag
Remarks

Performs statistical calculations on spatial cells of a layer, returning min, max, avg, sum, and count. You can focus your calculation on specific areas or subsets of your data using boundaries and filters. When using the count method, an attribute is not required.

hashtag
Example


hashtag
getLayerSchema()

getLayerSchema(layerId: string): Promise<>

Get the schema for a layer.

hashtag
Parameters

Parameter
Type

hashtag
Returns

Promise<>

hashtag
Remarks

The schema describes the structure of the data in a layer, including the attributes that are available on the features in the layer.

This can be useful to build generic UIs that need to know the structure of the data in a layer, such as a dropdown to choose an attribute.

hashtag
Example


hashtag
getMapDetails()

getMapDetails(): Promise<>

Gets the details of the map.

Use this method to retrieve metadata about the current map, such as its title, description, and other map-level information.

hashtag
Returns

Promise<>

A promise that resolves to the map details.

hashtag
Example


hashtag
getSelection()

getSelection(): Promise<[]>

Gets the current selection as a list of entity identifiers.

Use this method to retrieve the current selection state, which can include features, elements, or both types of entities.

hashtag
Returns

Promise<[]>

A promise that resolves to an array of selected entity nodes.

hashtag
Example


hashtag
selectFeature()

selectFeature(params: ): Promise<void>

Selects a feature on a layer. This will show the feature's popup, modal or sidebar (if configured) and highlight the feature.

Use this method to programmatically select features, which can be useful for highlighting specific data points or triggering feature-specific UI.

hashtag
Parameters

Parameter
Type

hashtag
Returns

Promise<void>

A promise that resolves when the feature is selected.

hashtag
Example


hashtag
clearSelection()

clearSelection(params?: { features: boolean; elements: boolean; }): Promise<void>

Clears the current selection (elements, features or both).

Use this method to programmatically clear the current selection, which can be useful for resetting the map state or preparing for new selections.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

Promise<void>

A promise that resolves when the selection is cleared.

hashtag
Example

hashtag
Default


hashtag
setTool()

setTool(tool: null | ): void

Sets the tool to use for drawing elements on the map.

Use this method to programmatically activate drawing tools for users. When a tool is set, users can draw elements on the map using that tool. Set to null to deactivate all drawing tools.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

void

hashtag
Example


hashtag
getTool()

getTool(): Promise<null | >

Gets the current tool, if any is in use.

Use this method to check which drawing tool is currently active, if any.

hashtag
Returns

Promise<null | >

A promise that resolves to the current tool, or null if no tool is in use.

hashtag
Example


hashtag
onToolChange()

onToolChange(args: { handler: (tool: null | ) => void; }): VoidFunction

Listens for changes to the current tool.

Use this to react to tool changes, such as updating your UI to reflect the currently active drawing tool.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

VoidFunction

hashtag
Example


hashtag
setToolSettings()

setToolSettings(settings: ): void

Sets the settings for the current tool.

Use this method to configure how drawing tools behave, such as setting colors, stroke widths, or other tool-specific properties.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

void

hashtag
Example


hashtag
getToolSettings()

getToolSettings<T>(tool: T): Promise<[T]>

Gets the settings for the chosen tool.

Use this method to retrieve the current configuration of a drawing tool.

hashtag
Type Parameters

Type Parameter

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

Promise<[T]>

A promise that resolves to the settings for the chosen tool.

hashtag
Example


hashtag
onToolSettingsChange()

onToolSettingsChange(args: { handler: (settings: ) => void; }): VoidFunction

Listens for changes to the settings on all tools.

Use this to react to tool setting changes, such as updating your UI to reflect the current tool configuration.

hashtag
Parameters

Parameter
Type

hashtag
Returns

VoidFunction

A function to unsubscribe from the listener.

hashtag
Example


hashtag
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.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

Promise<>

hashtag
Example


hashtag
updateActionTrigger()

updateActionTrigger(args: ): Promise<>

Updates an action trigger.

Action trigger to update is identified by the id property.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

Promise<>

hashtag
Remarks

Properties provided will override the existing properties.

hashtag
Example


hashtag
deleteActionTrigger()

deleteActionTrigger(id: string): void

Deletes an action trigger.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

void

hashtag
Example


hashtag
createFeatureAction()

createFeatureAction(args: ): Promise<>

Creates a feature contextual action.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

Promise<>

hashtag
Example


hashtag
updateFeatureAction()

updateFeatureAction(args: ): Promise<>

Updates a feature contextual action.

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

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

Promise<>

hashtag
Remarks

Properties provided will override the existing properties.

hashtag
Example


hashtag
deleteFeatureAction()

deleteFeatureAction(id: string): void

Deletes a feature contextual action.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

void

hashtag
Example


hashtag
createPanelId()

createPanelId(): Promise<string>

Creates a panel ID.

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

hashtag
Returns

Promise<string>

hashtag
Example


hashtag
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 . 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 to add new elements to existing panels

  • Use to modify specific existing elements

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

Promise<>

hashtag
Example


hashtag
deletePanel()

deletePanel(id: string): void

Deletes a panel.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

void

hashtag
Example


hashtag
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.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

Promise<>

hashtag
Example


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

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

Promise<>

hashtag
Example


hashtag
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.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

void

hashtag
Example


hashtag
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.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

void

hashtag
Example


hashtag
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.

hashtag
Parameters

Parameter
Type

hashtag
Returns

void

hashtag
Example


hashtag
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.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

Promise<void>

hashtag
Example


hashtag
hideLayerDataTable()

hideLayerDataTable(): Promise<void>

Hides the data table.

hashtag
Returns

Promise<void>

hashtag
Example


hashtag
getViewport()

getViewport(): Promise<>

Gets the current state of the viewport.

Use this method to retrieve the current center coordinates and zoom level of the map viewport.

hashtag
Returns

Promise<>

A promise that resolves to the current viewport state.

hashtag
Example


hashtag
setViewport()

setViewport(viewport: ): void

Moves the map to the specified location.

Use this method to programmatically change the map's viewport to a specific location and zoom level. The map will animate to the new position.

hashtag
Parameters

Parameter
Type

hashtag
Returns

void

hashtag
Example


hashtag
getViewportConstraints()

getViewportConstraints(): Promise<null | >

Gets the current state of the viewport constraints.

Use this method to retrieve the current viewport constraints, which limit where users can pan and zoom on the map.

hashtag
Returns

Promise<null | >

A promise that resolves to the current viewport constraints, or null if no constraints are set.

hashtag
Example


hashtag
setViewportConstraints()

setViewportConstraints(constraints: null | Partial<>): void

Constrains the map viewport so it stays inside certain bounds and/or certain zoom levels.

Use this method to limit where users can navigate on the map. This is useful for keeping users focused on a specific area or preventing them from zooming too far in or out.

hashtag
Parameters

Parameter
Type

hashtag
Returns

void

hashtag
Examples

every constraint is optional

if a constraint is null, it will be removed but keeping the others

if method receives null, it will remove the constraints


hashtag
fitViewportToBounds()

fitViewportToBounds(bounds: ): void

Fits the map to the specified bounds.

Use this method to automatically adjust the viewport to show a specific geographic area. The map will calculate the appropriate center and zoom level to fit the bounds within the current map size.

hashtag
Parameters

Parameter
Type

hashtag
Returns

void

hashtag
Example

hashtag
Events

hashtag
onBasemapChange()

onBasemapChange(args: { handler: (basemap: ) => void; }): VoidFunction

Adds a listener for when the basemap changes.

Use this to react to basemap changes, such as updating your UI or adjusting other map elements to match the new basemap's color scheme.

hashtag
Parameters

Parameter
Type

hashtag
Returns

VoidFunction

A function to unsubscribe from the listener.

hashtag
Example


hashtag
onElementCreate()

onElementCreate(args: { handler: (change: ) => void; }): VoidFunction

Adds a listener for when an element is created.

This will fire when elements are created programmatically, or when the user starts creating an element with a drawing tool.

When the user creates an element with a drawing tool, it can begin in an invalid state, such as if you've just placed a single point in a polygon.

You can use the isBeingCreated property to determine if the element is still being created by a drawing tool.

If you want to know when the element is finished being created, you can use the listener.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

VoidFunction

A function to unsubscribe from the listener.

hashtag
Example


hashtag
onElementCreateEnd()

onElementCreateEnd(args: { handler: (params: { element: ; }) => void; }): VoidFunction

Listens for when a new element is finished being created by a drawing tool.

This differs from the listener, which fires whenever an element is first created. This fires when the user finishes creating an element which could be after a series of interactions.

For example, when creating a polygon, the user places a series of points then finishes by pressing Enter or Escape. Or when creating a Place element, they add the marker, type a label, then finally deselect the element.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

VoidFunction

A function to unsubscribe from the listener.

hashtag
Example


hashtag
onElementChange()

onElementChange(args: { options: { id: string; }; handler: (change: ) => void; }): VoidFunction

Adds a listener for when an element changes.

This will fire when an element is being edited, either on the map by the user or programmatically.

Like the listener, this will fire when an element is still being created by a drawing tool.

You can check the property to determine if the element is still being created by a drawing tool.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

VoidFunction

A function to unsubscribe from the listener.

hashtag
Example


hashtag
onElementDelete()

onElementDelete(args: { options: { id: string; }; handler: () => void; }): VoidFunction

Adds a listener for when an element is deleted.

Use this to react to element deletions, such as cleaning up related data or updating your application state.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

VoidFunction

A function to unsubscribe from the listener.

hashtag
Example


hashtag
onElementGroupChange()

onElementGroupChange(args: { options: { id: string; }; handler: (change: ) => void; }): VoidFunction

Adds a listener for when an element group changes.

Use this to react to changes in element groups, such as when elements are added to or removed from groups.

hashtag
Parameters

Parameter
Type

hashtag
Returns

VoidFunction

A function to unsubscribe from the listener.

hashtag
Example


hashtag
onPointerClick()

onPointerClick(params: { handler: (event: ) => void; }): VoidFunction

Allows you to be notified when the user clicks on the map.

Use this to react to user clicks on the map, such as triggering custom actions or collecting interaction data.

hashtag
Parameters

Parameter
Type

hashtag
Returns

VoidFunction

A function to unsubscribe from the listener.

hashtag
Example


hashtag
onPointerMove()

onPointerMove(params: { handler: (event: ) => void; }): VoidFunction

Allows you to be notified when the user moves the mouse over the map.

Use this to track mouse movement and detect features under the cursor, such as for hover effects or real-time data display.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

VoidFunction

A function to unsubscribe from the listener.

hashtag
Example


hashtag
onLayerChange()

onLayerChange(args: { options: { id: string; }; handler: (change: ) => void; }): VoidFunction

Adds a listener for when a layer changes.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

VoidFunction

A function to unsubscribe from the listener

hashtag
Example


hashtag
onLayerGroupChange()

onLayerGroupChange(args: { options: { id: string; }; handler: (change: ) => void; }): VoidFunction

Adds a listener for when a layer group changes.

hashtag
Parameters

Parameter
Type

hashtag
Returns

VoidFunction

A function to unsubscribe from the listener

hashtag
Example


hashtag
onLegendItemChange()

onLegendItemChange(args: { options: ; handler: (change: ) => void; }): VoidFunction

Adds a listener for when a legend item changes.

hashtag
Parameters

Parameter
Type

hashtag
Returns

VoidFunction

A function to unsubscribe from the listener

hashtag
Example


hashtag
onLayerFiltersChange()

onLayerFiltersChange(params: { options: { layerId: string; }; handler: (change: ) => void; }): VoidFunction

Adds a listener for when a layer's filters change.

hashtag
Parameters

Parameter
Type

hashtag
Returns

VoidFunction

A function to unsubscribe from the listener

hashtag
Remarks

This event fires whenever any type of filter changes on the layer, including ephemeral filters set via the SDK, style-based filters, or filters set through the Felt UI via Components.

hashtag
Example


hashtag
onLayerBoundariesChange()

onLayerBoundariesChange(params: { options: { layerId: string; }; handler: (boundaries: null | ) => void; }): VoidFunction

Adds a listener for when a layer's spatial boundaries change.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

VoidFunction

A function to unsubscribe from the listener

hashtag
Remarks

This event fires whenever any type of spatial boundary changes on the layer, including ephemeral boundaries set via the SDK or boundaries set through the Felt UI via Spatial filter components.

hashtag
Example


hashtag
onSelectionChange()

onSelectionChange(params: { handler: (change: { selection: []; }) => void; }): VoidFunction

Adds a listener for when the selection changes.

Use this to react to selection changes, such as updating your UI to reflect what is currently selected on the map.

hashtag
Parameters

Parameter
Type

hashtag
Returns

VoidFunction

A function to unsubscribe from the listener.

hashtag
Example


hashtag
onViewportMove()

onViewportMove(args: { handler: (viewport: ) => void; }): VoidFunction

Adds a listener for when the viewport changes.

Use this to react to viewport changes, such as updating your UI or triggering other actions when users navigate the map.

hashtag
Parameters

Parameter
Type
Description

hashtag
Returns

VoidFunction

A function to unsubscribe from the listener.

hashtag
Example


hashtag
onViewportMoveEnd()

onViewportMoveEnd(args: { handler: (viewport: ) => void; }): VoidFunction

Adds a listener for when the viewport move ends, which is when the user stops dragging or zooming the map, animations have finished, or inertial dragging ends.

Use this to react to the end of viewport changes, such as triggering data loading or analysis when users finish navigating.

hashtag
Parameters

Parameter
Type

hashtag
Returns

VoidFunction

A function to unsubscribe from the listener.

hashtag
Example


hashtag
onMapIdle()

onMapIdle(args: { handler: () => void; }): VoidFunction

Adds a listener for when the map is idle, which is defined as:

  • No transitions are in progress

  • The user is not interacting with the map, e.g. by panning or zooming

  • All tiles for the current viewport have been loaded

Use this to perform actions when the map is completely stable and ready for user interaction, such as enabling certain features or triggering data analysis.

hashtag
Parameters

Parameter
Type

hashtag
Returns

VoidFunction

A function to unsubscribe from the listener.

hashtag
Example

hashtag
Properties

hashtag
iframe

readonly iframe: null | HTMLIFrameElement

The iframe element containing the Felt map, if it is an embedded map.

  • Text, Note and Image elements do not return geometry, so will return null.

  • ;
    pageSize
    :
    number
    ;
    select
    :
    string
    []; }):
    Promise
    <{
    features
    :
    []; count: number; previousPage: null | string; nextPage: null | string; }>

    params.boundary?

    The spatial boundary to be applied.

    params.search?

    string

    Search term to search by. Search is case-insensitive and looks for matches across all feature properties.

    params.pagination?

    null | string

    Pagination token. It comes from either the previousPage or nextPage properties of the previous response.

    params.pageSize?

    number

    The number of features to return per page. Defaults to 20. Note: The larger the page size, the longer this is likely to take to respond.

    params.select?

    string[]

    The attributes to select from the features. If not provided, all attributes will be returned. If you set this to an empty array, no attributes will be returned.

    &
    nextPage
    : The tokens to pass in the
    pagination
    param to navigate between pages.
    ;
    sum
    :
    null
    |
    number
    ;
    count
    :
    null
    |
    number
    ; }>
    ;
    count
    :
    null
    |
    number
    ; }>
    Use deletePanelElements to remove specific elements
    Any fade transitions (e.g. for labels) have completed

    id

    string

    args

    { basemap: ColorBasemapInput | CustomTileBasemapInput; select: boolean; }

    -

    args.basemap

    ColorBasemapInput | CustomTileBasemapInput

    The basemap to add.

    args.select?

    boolean

    Whether to select the basemap after adding it.

    id

    string

    id

    string

    The id of the element you want to get.

    id

    string

    The id of the element you want to get the geometry of.

    constraint?

    GetElementsConstraint

    Optional constraints to apply to the elements returned from the map.

    id

    string

    The id of the element group you want to get.

    constraint?

    GetElementGroupsConstraint

    Optional constraints to apply to the element groups returned from the map.

    visibility

    SetVisibilityRequest

    The visibility configuration for element groups.

    element

    ElementCreate

    The element configuration to create.

    element

    ElementUpdate

    The element update configuration.

    id

    string

    The id of the element to delete.

    id

    string

    The id of the layer you want to get.

    constraint?

    GetLayersConstraint

    The constraints to apply to the layers returned from the map.

    visibility

    SetVisibilityRequest

    params

    { id: string; style: object; }

    -

    params.id

    string

    The id of the layer to set the style for.

    params.style

    object

    The style to set for the layer.

    params

    SetVisibilityRequest

    params

    CreateLayersFromGeoJsonParams

    params

    UpdateLayerParams

    id

    string

    id

    string

    id

    string

    constraint?

    GetLayerGroupsConstraint

    The constraints to apply to the layer groups returned from the map.

    visibility

    SetVisibilityRequest

    params

    SetVisibilityRequest

    id

    LegendItemIdentifier

    constraint?

    LegendItemsConstraint

    visibility

    { show: LegendItemIdentifier[]; hide: LegendItemIdentifier[]; }

    visibility.show?

    LegendItemIdentifier[]

    visibility.hide?

    LegendItemIdentifier[]

    layerId

    string

    params

    { layerId: string; filters: Filters; note: string; }

    -

    params.layerId

    string

    The layer that you want to set the filters for.

    params.filters

    Filters

    The filters to set for the layer. This will replace any ephemeral filters that are currently set for the layer.

    params.note?

    string

    A note to display on the layer legend when this filter is applied. When the note is shown, a reset button will also be shown, allowing the user to clear the filter.

    layerId

    string

    params

    { layerIds: string[]; boundary: null | GeometryFilter; }

    -

    params.layerIds

    string[]

    The ids of the layers to set the boundary for.

    params.boundary

    null | GeometryFilter

    The boundary to set for the layer. Passing null clears the ephemeral boundary for the layer.

    params?

    GetRenderedFeaturesConstraint

    The constraints to apply to the features returned from the map.

    params

    { id: string | number; layerId: string; }

    params.id

    string | number

    params.layerId

    string

    params

    { layerId: string; filters: Filters; sorting: SortConfig; boundary: GeometryFilter; search: string; pagination: null | string; pageSize: number; select: string[]; }

    -

    params.layerId

    string

    The ID of the layer to get features from.

    params.filters?

    Filters

    Filters to be applied. These filters will merge with layer's own filters.

    params.sorting?

    SortConfig

    Attribute to sort by.

    params

    { id: string | number; layerId: string; }

    params.id

    string | number

    params.layerId

    string

    params

    GetLayerCategoriesParams

    params

    GetLayerHistogramParams

    T extends "min" | "max" | "avg" | "sum" | "median" | "count"

    params

    GetLayerCalculationParams<T>

    params

    GetLayerPrecomputedCalculationParams

    layerId

    string

    params

    FeatureSelection

    params?

    { features: boolean; elements: boolean; }

    The parameters to clear the selection. If this is not provided, both features and elements will be cleared.

    params.features?

    boolean

    Whether to clear the features from the selection.

    params.elements?

    boolean

    Whether to clear the elements from the selection.

    tool

    null | ToolType

    The tool to set, or null to deactivate all tools.

    args

    { handler: (tool: null | ToolType) => void; }

    -

    args.handler

    (tool: null | ToolType) => void

    This callback is called with the current tool whenever the tool changes.

    settings

    InputToolSettings

    The settings to set for the specified tool.

    T extends ConfigurableToolType

    tool

    T

    The tool to get settings for.

    args

    { handler: (settings: ToolSettingsChangeEvent) => void; }

    args.handler

    (settings: ToolSettingsChangeEvent) => void

    args

    CreateActionTriggerParams

    The arguments for the method.

    args

    UpdateActionTriggerParams

    The action trigger to update.

    id

    string

    The id of the action trigger to delete.

    args

    CreateFeatureActionParams

    The arguments for the method.

    args

    UpdateFeatureActionParams

    The feature contextual action to update.

    id

    string

    The id of the feature contextual action to delete.

    args

    CreateOrUpdatePanelParams

    The arguments for creating or updating the panel.

    id

    string

    The id of the panel to delete.

    args

    CreatePanelElementsParams

    The arguments for the method.

    args

    UpdatePanelElementsParams

    The arguments for the method.

    args

    DeletePanelElementsParams

    The arguments for the method.

    controls

    UiControlsOptions

    The controls to update.

    options

    OnMapInteractionsOptions

    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.

    viewport

    SetViewportCenterZoomParams

    constraints

    null | Partial<ViewportConstraints>

    bounds

    ViewportFitBoundsParams

    args

    { handler: (basemap: Basemap) => void; }

    args.handler

    (basemap: Basemap) => void

    args

    { handler: (change: ElementChangeCallbackParams) => void; }

    -

    args.handler

    (change: ElementChangeCallbackParams) => void

    The handler that is called when an element is created. This will fire when elements are created programmatically, or when the user starts creating an element with a drawing tool. When the user creates an element with a drawing tool, it can begin in an invalid state, such as if you've just placed a single point in a polygon. You can use the isBeingCreated property to determine if the element is still being created by a drawing tool. If you want to know when the element is finished being created, you can use the `onElementCreateEnd` listener.

    args

    { handler: (params: { element: Element; }) => void; }

    -

    args.handler

    (params: { element: Element; }) => void

    The handler to call whenever this event fires.

    args

    { options: { id: string; }; handler: (change: ElementChangeCallbackParams) => void; }

    -

    args.options

    { id: string; }

    -

    args.options.id

    string

    The id of the element to listen for changes to.

    args.handler

    (change: ElementChangeCallbackParams) => void

    The handler that is called when the element changes.

    args

    { options: { id: string; }; handler: () => void; }

    -

    args.options

    { id: string; }

    -

    args.options.id

    string

    The id of the element to listen for deletions of.

    args.handler

    () => void

    The handler that is called when the element is deleted.

    args

    { options: { id: string; }; handler: (change: ElementGroupChangeCallbackParams) => void; }

    args.options

    { id: string; }

    args.options.id

    string

    args.handler

    (change: ElementGroupChangeCallbackParams) => void

    params

    { handler: (event: MapInteractionEvent) => void; }

    params.handler

    (event: MapInteractionEvent) => void

    params

    { handler: (event: MapInteractionEvent) => void; }

    Params for the listener

    params.handler

    (event: MapInteractionEvent) => void

    The handler function

    args

    { options: { id: string; }; handler: (change: LayerChangeCallbackParams) => void; }

    -

    args.options

    { id: string; }

    -

    args.options.id

    string

    The id of the layer to listen for changes to.

    args.handler

    (change: LayerChangeCallbackParams) => void

    The handler that is called when the layer changes.

    args

    { options: { id: string; }; handler: (change: LayerGroupChangeCallbackParams) => void; }

    args.options

    { id: string; }

    args.options.id

    string

    args.handler

    (change: LayerGroupChangeCallbackParams) => void

    args

    { options: LegendItemIdentifier; handler: (change: LegendItemChangeCallbackParams) => void; }

    args.options

    LegendItemIdentifier

    args.handler

    (change: LegendItemChangeCallbackParams) => void

    params

    { options: { layerId: string; }; handler: (change: LayerFilters) => void; }

    params.options

    { layerId: string; }

    params.options.layerId

    string

    params.handler

    (change: LayerFilters) => void

    params

    { options: { layerId: string; }; handler: (boundaries: null | LayerBoundaries) => void; }

    -

    params.options

    { layerId: string; }

    -

    params.options.layerId

    string

    The id of the layer to listen for boundary changes on.

    params.handler

    (boundaries: null | LayerBoundaries) => void

    A function that is called when the boundaries change.

    params

    { handler: (change: { selection: EntityNode[]; }) => void; }

    params.handler

    (change: { selection: EntityNode[]; }) => void

    args

    { handler: (viewport: ViewportState) => void; }

    -

    args.handler

    (viewport: ViewportState) => void

    This callback is called with the current viewport state whenever the viewport changes.

    args

    { handler: (viewport: ViewportState) => void; }

    args.handler

    (viewport: ViewportState) => void

    args

    { handler: () => void; }

    args.handler

    () => void

    ViewportController
    UiController
    LayersController
    ElementsController
    SelectionController
    InteractionsController
    ToolsController
    MiscController
    BasemapsController
    Basemap
    Basemap
    Basemap
    Basemap
    ColorBasemapInput
    CustomTileBasemapInput
    Basemap
    Basemap
    Element
    Element
    GeoJsonGeometry
    GeoJsonGeometry
    GetElementsConstraint
    Element
    Element
    ElementGroup
    ElementGroup
    GetElementGroupsConstraint
    ElementGroup
    ElementGroup
    SetVisibilityRequest
    ElementCreate
    Element
    Element
    ElementUpdate
    Element
    Element
    Layer
    Layer
    GetLayersConstraint
    Layer
    Layer
    SetVisibilityRequest
    FSL documentationarrow-up-right
    SetVisibilityRequest
    CreateLayersFromGeoJsonParams
    LayerGroup
    Layer
    LayerGroup
    Layer
    UpdateLayerParams
    Layer
    UpdateLayerParams
    Layer
    Layer
    Layer
    LayerGroup
    LayerGroup
    GetLayerGroupsConstraint
    LayerGroup
    LayerGroup
    SetVisibilityRequest
    SetVisibilityRequest
    LegendItemIdentifier
    LegendItem
    LegendItem
    LegendItemsConstraint
    LegendItem
    LegendItem
    LegendItemIdentifier
    LegendItemIdentifier
    LayerFilters
    LayerFilters
    Filters
    LayerBoundaries
    LayerBoundaries
    GeometryFilter
    `ephemeral`
    GetRenderedFeaturesConstraint
    LayerFeature
    LayerFeature
    LayerFeature
    LayerFeature
    LayerFeature
    Filters
    SortConfig
    GeometryFilter
    LayerFeature
    LayerFeature
    GeoJsonFeature
    GeoJsonFeature
    GetLayerCategoriesParams
    GetLayerCategoriesGroup
    GetLayerCategoriesGroup
    GetLayerHistogramParams
    GetLayerHistogramBin
    GetLayerHistogramBin
    GetLayerCalculationParams
    GetLayerPrecomputedCalculationParams
    LayerSchema
    LayerSchema
    MapDetails
    MapDetails
    EntityNode
    EntityNode
    FeatureSelection
    ToolType
    ToolType
    ToolType
    ToolType
    InputToolSettings
    ToolSettingsMap
    ToolSettingsMap
    ToolSettingsChangeEvent
    CreateActionTriggerParams
    UIActionTriggerCreate
    UIActionTriggerCreate
    UpdateActionTriggerParams
    UIActionTriggerCreate
    UIActionTriggerCreate
    CreateFeatureActionParams
    UIFeatureAction
    UIFeatureAction
    UpdateFeatureActionParams
    UIFeatureAction
    UIFeatureAction
    createOrUpdatePanel
    CreateOrUpdatePanelParams
    UIPanel
    createPanelId
    createPanelElements
    updatePanelElements
    UIPanel
    CreatePanelElementsParams
    UIPanel
    UIPanel
    UpdatePanelElementsParams
    UIPanel
    createOrUpdatePanel
    UIPanel
    DeletePanelElementsParams
    UiControlsOptions
    OnMapInteractionsOptions
    SortConfig
    ViewportState
    ViewportState
    SetViewportCenterZoomParams
    ViewportConstraints
    ViewportConstraints
    ViewportConstraints
    ViewportFitBoundsParams
    Basemap
    ElementChangeCallbackParams
    `onElementCreateEnd`
    Element
    `onElementCreate`
    ElementChangeCallbackParams
    `onElementCreate`
    `isBeingCreated`
    ElementGroupChangeCallbackParams
    MapInteractionEvent
    MapInteractionEvent
    LayerChangeCallbackParams
    LayerGroupChangeCallbackParams
    LegendItemIdentifier
    LegendItemChangeCallbackParams
    LayerFilters
    LayerBoundaries
    EntityNode
    ViewportState
    ViewportState
    LayerFeature
    // Get current basemap
    const basemap = await felt.getCurrentBasemap();
    console.log({
      name: basemap.name,
      type: basemap.type,
      uiColorScheme: basemap.uiColorScheme,
    });
    // Get all available basemaps
    const basemaps = await felt.getBasemaps();
    const lightBasemaps = basemaps.filter(b => b.uiColorScheme === "light");
    // Switch to a specific basemap
    const basemaps = await felt.getBasemaps();
    const darkBasemap = basemaps.find(b => b.uiColorScheme === "dark");
    if (darkBasemap) {
      await felt.chooseBasemap(darkBasemap.id);
    }
    // Add a custom basemap and select it
    await felt.addCustomBasemap({
      basemap: {
        type: "xyz_tile",
        tileUrl: "https://example.com/tile.png"
      },
      select: true,
    });
    const element = await felt.getElement("element-1");
    const geometry = await felt.getElementGeometry("element-1");
    console.log(geometry?.type, geometry?.coordinates);
    const elements = await felt.getElements();
    const elementGroup = await felt.getElementGroup("element-group-1");
    const elementGroups = await felt.getElementGroups({ ids: ["element-group-1", "element-group-2"] });
    felt.setElementGroupVisibility({ show: ["element-group-1", "element-group-2"], hide: ["element-group-3"] });
    const element = await felt.createElement({ type: "Place", coordinates: [10, 10] });
    // Update a place element's coordinates
    await felt.updateElement({
      id: "element-1",
      type: "Place",
      coordinates: [10, 20]
    });
    
    // Update a polygon's style
    await felt.updateElement({
      id: "element-2",
      type: "Polygon",
      color: "#ABC123",
      fillOpacity: 0.5
    });
    await felt.deleteElement("element-1");
    const layer = await felt.getLayer("layer-1");
    const layers = await felt.getLayers();
    felt.setLayerVisibility({ show: ["layer-1", "layer-2"], hide: ["layer-3"] });
    // first get the current style
    const oldStyle = (await felt.getLayer("layer-1")).style;
    
    await felt.setLayerStyle({ id: "layer-1", style: {
      ...oldStyle,
      paint: {
        ...oldStyle.paint,
        color: "red",
      },
    } });
    felt.setLayerLegendVisibility({ show: ["layer-1", "layer-2"], hide: ["layer-3"] });
    const layerFromFile = await felt.createLayersFromGeoJson({
      source: {
        type: "geoJsonFile",
        file: someFile,
      },
      name: "Parcels",
    });
    
    const layerFromUrl = await felt.createLayersFromGeoJson({
      source: {
        type: "geoJsonUrl",
        url: "https://example.com/parcels.geojson",
      },
      name: "Parcels",
    await felt.updateLayer({
      id: "layer-1",
      name: "My Layer",
      caption: "A description of the layer",
    });
    await felt.deleteLayer("layer-1");
    const duplicatedLayer = await felt.duplicateLayer("layer-1");
    const layerGroup = await felt.getLayerGroup("layer-group-1");
    const layerGroups = await felt.getLayerGroups({ ids: ["layer-group-1", "layer-group-2"] });
    felt.setLayerGroupVisibility({ show: ["layer-group-1", "layer-group-2"], hide: ["layer-group-3"] });
    felt.setLayerGroupLegendVisibility({ show: ["layer-1", "layer-2"], hide: ["layer-3"] });
    const legendItem = await felt.getLegendItem({
      id: "legend-item-1",
      layerId: "layer-1",
    })
    const legendItems = await felt.getLegendItems({layerId: "layer-1"});
    felt.setLegendItemVisibility({
      show: [{layerId: "layer-group-1", id: "item-1-0"}],
      hide: [{layerId: "layer-group-2", id: "item-2-0"}],
    })
    const filters = await felt.getLayerFilters("layer-1");
    console.log(filters.combined, filters.style, filters.ephemeral, filters.components);
    await felt.setLayerFilters({
      layerId: "layer-1",
      filters: ["AREA", "gt", 30_000],
    });
    const boundaries = await felt.getLayerBoundaries("layer-1");
    
    console.log(boundaries?.combined);
    console.log(boundaries?.spatialFilters);
    console.log(boundaries?.ephemeral);
    await felt.setLayerBoundary({
      layerIds: ["layer-1", "layer-2"],
      boundary: { type: "MultiPolygon", coordinates: [[[100, 0], [101, 0], [101, 1], [100, 1], [100, 0]]] }
    });
    const features = await felt.getRenderedFeatures();
    const feature = await felt.getFeature({ layerId: "layer-1", id: 123 });
    const page1Response = await felt.getFeatures({
      layerId: "layer-1",
      search: "abc123",
      pagination: undefined,
    });
    
    // Note that the search term here matches the one for the first page.
    if (page1Response.nextPage) {
      const page2Response = await felt.getFeatures({
        layerId: "layer-1",
        search: "abc123",
        pagination: page1Response.nextPage,
      });
    }
    const feature = await felt.getGeoJsonFeature({ layerId: "layer-1", id: 123 });
    // Basic grouping: Count of buildings by type
    const buildingsByType = await felt.getCategoryData({
      layerId: "buildings",
      attribute: "type"
    });
    
    // Filtered grouping: Only count buildings in downtown
    const downtownBuildingsByType = await felt.getCategoryData({
      layerId: "buildings",
      attribute: "type",
      boundary: [-122.43, 47.60, -122.33, 47.62]  // downtown boundary
    });
    
    // Advanced: Show all building types, but only sum floor area of recent buildings
    const recentBuildingAreaByType = await felt.getCategoryData({
      layerId: "buildings",
      attribute: "type",
      values: {
        filters: ["year_built", "gte", 2000],
        aggregation: {
          method: "sum",
          attribute: "floor_area"
        }
      }
    });
    
    // Compare residential density across neighborhoods while only counting recent buildings
    const newBuildingDensityByNeighborhood = await felt.getCategoryData({
      layerId: "buildings",
      attribute: "neighborhood",
      values: {
        filters: ["year_built", "gte", 2000],
        aggregation: {
          method: "avg",
          attribute: "units_per_acre"
        }
      }
    });
    // Basic histogram: Building heights in 5 natural break bins
    const buildingHeights = await felt.getHistogramData({
      layerId: "buildings",
      attribute: "height",
      steps: { type: "jenks", count: 5 }
    });
    
    // Compare old vs new buildings using the same height ranges
    const oldBuildingHeights = await felt.getHistogramData({
      layerId: "buildings",
      attribute: "height",
      steps: [0, 20, 50, 100, 200, 500],
      values: {
        filters: ["year_built", "lt", 1950]
      }
    });
    
    const newBuildingHeights = await felt.getHistogramData({
      layerId: "buildings",
      attribute: "height",
      steps: [0, 20, 50, 100, 200, 500],  // Same ranges as above
      values: {
        filters: ["year_built", "gte", 1950]
      }
    });
    // Count all residential buildings
    const residentialCount = await felt.getAggregates({
      layerId: "buildings",
      filters: ["type", "eq", "residential"],
      aggregation: {
        methods: ["count"],
      }
    });
    
    // Calculate average home value in a specific neighborhood
    const avgHomeValue = await felt.getAggregates({
      layerId: "buildings",
      boundary: [-122.43, 47.60, -122.33, 47.62],  // neighborhood boundary
      aggregation: {
        methods: ["avg"],
        attribute: "assessed_value"
      }
    });
    
    // Find the maximum building height for buildings built after 2000
    const maxNewBuildingHeight = await felt.getAggregates({
      layerId: "buildings",
      filters: ["year_built", "gte", 2000],
      aggregation: {
        methods: ["max"],
        attribute: "height"
      }
    });
    const aggregates = await felt.getPrecomputedAggregates({
      layerId: "buildings",
      gridConfig: {
        type: "h3",
        resolution: 10,
        method: "avg",
        attribute: "assessed_value"
      },
    });
    const schema = await felt.getLayerSchema("layer-1");
    const attributeIds = schema.attributes.map((attr) => attr.id);
    const details = await felt.getMapDetails();
    console.log({
      id: details.id,
      title: details.title,
      description: details.description,
    });
    const selection = await felt.getSelection();
    felt.selectFeature({
      id: 123,
      layerId: "my-layer",
      showPopup: true,
      fitViewport: { maxZoom: 15 },
    });
    
    // Removes all features and elements from the selection
    felt.clearSelection();
    
    // Removes only features from the selection
    felt.clearSelection({ features: true });
    
    // Removes only elements from the selection
    felt.clearSelection({ elements: true });
    { features: true, elements: true }
    // Set the tool to "marker"
    await felt.setTool("marker");
    
    // put down the tool
    await felt.setTool(null);
    const tool = await felt.getTool(); // "marker", "polygon", etc.
    const unsubscribe = felt.onToolChange({
      handler: tool => console.log(tool),
    });
    
    // later on...
    unsubscribe();
    // Set the settings for the marker tool
    await felt.setToolSettings({
      tool: "marker",
      color: "#FE17",
    });
    const settings = await felt.getToolSettings("marker");
    const unsubscribe = felt.onToolSettingsChange({
      handler: settings => console.log(settings),
    });
    
    // later on...
    unsubscribe();
    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" }
    });
    await felt.updateActionTrigger({
      id: "enablePolygonTool",
      label: "Enable polygon tool", // only label changes
    });
    await felt.deleteActionTrigger("enablePolygonTool");
    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" }
    });
    
    const myAction = await felt.createFeatureAction({ ... });
    await felt.updateFeatureAction({
      id: myAction.id,
      label: "Updated action label", // only label changes
    });
    const myAction = await felt.createFeatureAction({ ... });
    await felt.deleteFeatureAction(myAction.id);
    const panelId = await felt.createPanelId();
    // 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]
      }
    });
    await felt.deletePanel("panel-1");
    await felt.createPanelElements({
      panelId,
      elements: [
        {
          element: { type: "Text", content: "Hello, world!" },
          container: "body",
          placement: { at: "start" },
        },
      ],
    });
    // 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
          },
        },
      ],
    });
    await felt.deletePanelElements({
      panelId,
      elements: ["element-1", "element-2"],
    });
    // Show some UI controls
    await felt.updateUiControls({
      showLegend: true,
      fullScreenButton: true,
    });
    
    // Disable some UI options
    await felt.updateUiControls({
      cooperativeGestures: false,
      geolocation: false,
    });
    // Disable UI when hovering or selecting features
    await felt.setOnMapInteractionsUi({
      featureSelectPanel: false,
      featureHoverPanel: false,
    });
    // 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();
    await felt.hideLayerDataTable();
    // Get current viewport state
    const viewport = await felt.getViewport();
    console.log({
      center: viewport.center,
      zoom: viewport.zoom,
    });
    felt.setViewport({
      center: { latitude: 0, longitude: 0 },
      zoom: 10,
    });
    // Get current viewport constraints
    const constraints = await felt.getViewportConstraints();
    if (constraints) {
      console.log({
        bounds: constraints.bounds,
        minZoom: constraints.minZoom,
        maxZoom: constraints.maxZoom
      });
    } else {
      console.log("No viewport constraints set");
    }
    felt.setViewportConstraints({
      bounds: [-122.5372532, 37.6652478, -122.1927016, 37.881707],
      minZoom: 1,
      maxZoom: 23,
    });
    felt.setViewportConstraints({
      bounds: [-122.5372532, 37.6652478, -122.1927016, 37.881707],
    });
    felt.setViewportConstraints({ bounds: null });
    felt.setViewportConstraints(null);
    const west = -122.4194;
    const south = 37.7749;
    const east = -122.4194;
    const north = 37.7749;
    felt.fitViewportToBounds({ bounds: [west, south, east, north] });
    // Listen for basemap changes
    const unsubscribe = felt.onBasemapChange({
      handler: basemap => {
        console.log(`Switched to ${basemap.name}`);
        updateUIColors(basemap.uiColorScheme);
      },
    });
    
    // later on...
    unsubscribe();
    const unsubscribe = felt.onElementCreate({
      handler: ({isBeingCreated, element}) => console.log(element.id),
    });
    
    // later on...
    unsubscribe();
    const unsubscribe = felt.onElementCreateEnd({
      handler: (params) => console.log(params),
    });
    
    // later on...
    unsubscribe();
    const unsubscribe = felt.onElementChange({
      options: { id: "element-1" },
      handler: ({element}) => console.log(element.id),
    });
    
    // later on...
    unsubscribe();
    const unsubscribe = felt.onElementDelete({
      options: { id: "element-1" },
      handler: () => console.log("element-1 deleted"),
    });
    
    // later on...
    unsubscribe();
    const unsubscribe = felt.onElementGroupChange({
      options: { id: "element-group-1" },
      handler: elementGroup => console.log(elementGroup.id),
    });
    
    // later on...
    unsubscribe();
    const unsubscribe = felt.onPointerClick({
      handler: (event) => console.log(event.center, event.features),
    });
    
    // later on...
    unsubscribe();
    // Track mouse movement and features under cursor
    const unsubscribe = felt.onPointerMove({
      handler: (event) => {
        console.log("Mouse position:", event.center);
        console.log("Features under cursor:", event.features);
      }
    });
    
    // later on...
    unsubscribe();
    const unsubscribe = felt.onLayerChange({
      options: { id: "layer-1" },
      handler: ({layer}) => console.log(layer.bounds),
    });
    
    // later on...
    unsubscribe();
    const unsubscribe = felt.onLayerGroupChange({
      options: { id: "layer-group-1" },
      handler: ({layerGroup}) => console.log(layerGroup.id),
    });
    
    // later on...
    unsubscribe();
    const unsubscribe = felt.onLegendItemChange({
      options: { layerId: "layer-1", id: "item-1-0" },
      handler: ({legendItem}) => console.log(legendItem.visible),
    });
    
    // later on...
    unsubscribe();
    const unsubscribe = felt.onLayerFiltersChange({
      options: { layerId: "layer-1" },
      handler: ({combined, ephemeral, style, components}) => {
        console.log("Layer filters updated:", {
          combined,  // All filters combined
          ephemeral, // Filters set via SDK
          style,     // Filters from layer style
          components // Filters from UI components
        });
      },
    });
    
    // later on...
    unsubscribe();
    const unsubscribe = felt.onLayerBoundariesChange({
      options: { layerId: "layer-1" },
      handler: ({combined, ephemeral, spatialFilters}) => {
        console.log("Layer boundaries updated:", {
          combined,  // All boundaries combined
          ephemeral, // Boundaries set via SDK
          spatialFilters // Boundaries set via UI
        });
      },
    });
    
    // later on...
    unsubscribe();
    const unsubscribe = felt.onSelectionChange({
      handler: ({selection}) => console.log(selection),
    });
    
    // later on...
    unsubscribe();
    const unsubscribe = felt.onViewportMove({
      handler: viewport => console.log(viewport.center.latitude),
    });
    
    // later on...
    unsubscribe();
    const unsubscribe = felt.onViewportMoveEnd({
      handler: viewport => console.log(viewport.center.latitude),
    });
    
    // later on...
    unsubscribe();
    const unsubscribe = felt.onMapIdle({ handler: () => console.log("map is idle") });
    
    // later on...
    unsubscribe();
    GeometryFilter

    Felt


    const Felt: { embed: Promise<FeltController>; connect: Promise<FeltController>; }

    The Felt SDK is a library for embedding Felt maps into your website, allowing you to control and inspect the map programmatically.

    hashtag
    Type declaration

    hashtag
    embed()

    Embeds a Felt map into the provided container, returning a promise that resolves to a object that you can use to control the map.

    hashtag
    Parameters

    Parameter
    Type
    Description

    hashtag
    Returns

    Promise<>

    A promise for a .

    hashtag
    connect()

    Binds to an existing Felt map iframe.

    hashtag
    Parameters

    Parameter
    Type
    Description

    hashtag
    Returns

    Promise<>

    container

    HTMLElement

    The container element to embed the map into.

    mapId

    string

    The ID of the map to embed.

    options?

    The options to configure the map.

    feltWindow

    Pick<Window, "postMessage">

    The iframe element containing the Felt map.

    FeltController
    FeltController
    FeltController
    FeltController
    FeltEmbedOptions