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.
Extends
Methods
getElement()
getElement(
id:string):Promise<null|Element>
Get a single element from the map by its id.
Parameters
id
string
The id of the element you want to get.
Returns
Promise<null | Element>
The requested element.
Example
const element = await felt.getElement("element-1");getElementGeometry()
getElementGeometry(
id:string):Promise<null|GeoJsonGeometry>
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
centerandradiusproperties.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.
Text, Note and Image elements do not return geometry, so will return
null.
Parameters
id
string
The id of the element you want to get the geometry of.
Returns
Promise<null | GeoJsonGeometry>
Example
const geometry = await felt.getElementGeometry("element-1");
console.log(geometry?.type, geometry?.coordinates);getElements()
getElements(
constraint?:GetElementsConstraint):Promise<(null|Element)[]>
Gets elements from the map, according to the constraints supplied. If no constraints are supplied, all elements will be returned.
Parameters
Returns
Promise<(null | Element)[]>
All elements on the map.
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.
Example
const elements = await felt.getElements();getElementGroup()
getElementGroup(
id:string):Promise<null|ElementGroup>
Get an element group from the map by its id.
Parameters
id
string
Returns
Promise<null | ElementGroup>
The requested element group.
Example
const elementGroup = await felt.getElementGroup("element-group-1");getElementGroups()
getElementGroups(
constraint?:GetElementGroupsConstraint):Promise<(null|ElementGroup)[]>
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.
Parameters
constraint?
The constraints to apply to the element groups returned from the map.
Returns
Promise<(null | ElementGroup)[]>
The requested element groups.
Example
const elementGroups = await felt.getElementGroups({ ids: ["element-group-1", "element-group-2"] });setElementGroupVisibility()
setElementGroupVisibility(
visibility:SetVisibilityRequest):Promise<void>
Hide or show element groups with the given ids.
Parameters
visibility
Returns
Promise<void>
Example
felt.setElementGroupVisibility({ show: ["element-group-1", "element-group-2"], hide: ["element-group-3"] });createElement()
createElement(
element:ElementCreate):Promise<Element>
Create a new element on the map.
Parameters
element
Returns
Promise<Element>
Example
const element = await felt.createElement({ type: "Place", coordinates: [10, 10] });updateElement()
updateElement(
element:ElementUpdate):Promise<Element>
Update an element on the map.
Parameters
element
Returns
Promise<Element>
Example
// Update a place element's coordinates
await felt.updateElement({
id: "element-1",
coordinates: [10, 20]
});
// Update a polygon's style
await felt.updateElement({
id: "element-2",
color: "#ABC123",
fillOpacity: 0.5
});deleteElement()
deleteElement(
id:string):Promise<void>
Delete an element from the map.
Parameters
id
string
Returns
Promise<void>
Example
await felt.deleteElement("element-1");getLayer()
getLayer(
id:string):Promise<null|Layer>
Get a single layer from the map by its id.
Parameters
id
string
The id of the layer you want to get.
Returns
Promise<null | Layer>
The requested layer.
Example
const layer = await felt.getLayer("layer-1");getLayers()
getLayers(
constraint?:GetLayersConstraint):Promise<(null|Layer)[]>
Gets layers from the map, according to the constraints supplied. If no constraints are supplied, all layers will be returned.
Parameters
Returns
Promise<(null | Layer)[]>
All layers on the map.
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.
Example
const layers = await felt.getLayers();setLayerVisibility()
setLayerVisibility(
visibility:SetVisibilityRequest):Promise<void>
Hide or show layers with the given ids.
Parameters
visibility
Returns
Promise<void>
Example
felt.setLayerVisibility({ show: ["layer-1", "layer-2"], hide: ["layer-3"] });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 FSL documentation 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.
Parameters
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.
Returns
Promise<void>
Example
// first get the current style
const oldStyle = (await felt.getLayer("layer-1")).style;
felt.setLayerStyle({ id: "layer-1", style: {
...oldStyle,
paint: {
...oldStyle.paint,
color: "red",
},
} });setLayerLegendVisibility()
setLayerLegendVisibility(
params:SetVisibilityRequest):Promise<void>
Hide or show layers with the given ids from the legend.
Parameters
params
Returns
Promise<void>
Example
felt.setLayerLegendVisibility({ show: ["layer-1", "layer-2"], hide: ["layer-3"] });createLayersFromGeoJson()
createLayersFromGeoJson(
params:CreateLayersFromGeoJsonParams):Promise<null| {layerGroup:LayerGroup;layers:Layer[]; }>
Adds layers to the map from file or URL sources.
Parameters
Returns
Promise<null | { layerGroup: LayerGroup; layers: Layer[]; }>
The layer groups that were created.
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.
Example
const layerFromFile = await felt.createLayersFromGeoJson({
source: {
type: "geoJsonFile",
file: someFile,
},
name: "Parcels",
});
const layerFromUrl = await felt.createLayersFromGeoJson({
source: {
sourceType: "geoJsonUrl",
url: "https://example.com/parcels.geojson",
},
name: "Parcels",updateLayer()
updateLayer(
params:UpdateLayerParams):Promise<Layer>
Update a layer by passing a subset of the layer's properties.
Note that not all properties can be updated, so check the UpdateLayerParams type to see which properties can be updated.
Parameters
params
Returns
Promise<Layer>
Example
await felt.updateLayer({
id: "layer-1",
name: "My Layer",
caption: "A description of the layer",
});deleteLayer()
deleteLayer(
id:string):Promise<void>
Delete a layer from the map by its id.
Parameters
id
string
Returns
Promise<void>
Remarks
This only works for layers created via the SDK createLayersFromGeoJson method, not layers added via the Felt UI.
Example
await felt.deleteLayer("layer-1");getLayerGroup()
getLayerGroup(
id:string):Promise<null|LayerGroup>
Get a layer group from the map by its id.
Parameters
id
string
Returns
Promise<null | LayerGroup>
The requested layer group.
Example
const layerGroup = await felt.getLayerGroup("layer-group-1");getLayerGroups()
getLayerGroups(
constraint?:GetLayerGroupsConstraint):Promise<(null|LayerGroup)[]>
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.
Parameters
constraint?
The constraints to apply to the layer groups returned from the map.
Returns
Promise<(null | LayerGroup)[]>
The requested layer groups.
Example
const layerGroups = await felt.getLayerGroups({ ids: ["layer-group-1", "layer-group-2"] });setLayerGroupVisibility()
setLayerGroupVisibility(
visibility:SetVisibilityRequest):Promise<void>
Hide or show layer groups with the given ids.
Parameters
visibility
Returns
Promise<void>
Example
felt.setLayerGroupVisibility({ show: ["layer-group-1", "layer-group-2"], hide: ["layer-group-3"] });setLayerGroupLegendVisibility()
setLayerGroupLegendVisibility(
params:SetVisibilityRequest):Promise<void>
Hide or show layer groups with the given ids from the legend.
Parameters
params
Returns
Promise<void>
Example
felt.setLayerGroupLegendVisibility({ show: ["layer-1", "layer-2"], hide: ["layer-3"] });getLegendItem()
getLegendItem(
id:LegendItemIdentifier):Promise<null|LegendItem>
Allows you to get the state of a single legend item.
Parameters
Returns
Promise<null | LegendItem>
Example
const legendItem = await felt.getLegendItem({
id: "legend-item-1",
layerId: "layer-1",
})getLegendItems()
getLegendItems(
constraint?:LegendItemsConstraint):Promise<(null|LegendItem)[]>
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.
Parameters
constraint?
Returns
Promise<(null | LegendItem)[]>
Example
const legendItems = await felt.getLegendItems({layerId: "layer-1"});setLegendItemVisibility()
setLegendItemVisibility(
visibility: {show:LegendItemIdentifier[];hide:LegendItemIdentifier[]; }):Promise<void>
Hide or show legend items with the given identifiers.
Parameters
visibility
{ show: LegendItemIdentifier[]; hide: LegendItemIdentifier[]; }
visibility.show?
visibility.hide?
Returns
Promise<void>
Example
felt.setLegendItemVisibility({
show: [{layerId: "layer-group-1", id: "item-1-0"}],
hide: [{layerId: "layer-group-2", id: "item-2-0"}],
})getLayerFilters()
getLayerFilters(
layerId:string):Promise<null|LayerFilters>
Get the filters for a layer.
Parameters
layerId
string
Returns
Promise<null | LayerFilters>
Remarks
The return type gives you the filters split up into the various sources that make up the overall filters for a layer.
Example
const filters = await felt.getLayerFilters("layer-1");
console.log(filters.combined, filters.style, filters.ephemeral, filters.components);setLayerFilters()
setLayerFilters(
params: {layerId:string;filters:Filters;note:string; }):Promise<void>
Sets the ephemeral filters for a layer.
Parameters
params.layerId
string
The layer that you want to set the filters for.
params.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.
Returns
Promise<void>
Example
await felt.setLayerFilters({
layerId: "layer-1",
filters: ["AREA", "gt", 30_000],
});getLayerBoundaries()
getLayerBoundaries(
layerId:string):Promise<null|LayerBoundaries>
Get the spatial boundaries that are filtering a layer.
Parameters
layerId
string
Returns
Promise<null | LayerBoundaries>
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.
Example
const boundaries = await felt.getLayerBoundaries("layer-1");
console.log(boundaries?.combined);
console.log(boundaries?.spatialFilters);
console.log(boundaries?.ephemeral);setLayerBoundary()
setLayerBoundary(
params: {layerIds:string[];boundary:null|GeometryFilter; }):Promise<void>
Set the `ephemeral` boundary for one or more layers.
Parameters
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.
Returns
Promise<void>
Example
await felt.setLayerBoundary({
layerIds: ["layer-1", "layer-2"],
boundary: { type: "MultiPolygon", coordinates: [[[100, 0], [101, 0], [101, 1], [100, 1], [100, 0]]] }
});getRenderedFeatures()
getRenderedFeatures(
params?:GetRenderedFeaturesConstraint):Promise<LayerFeature[]>
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.
Parameters
Returns
Promise<LayerFeature[]>
Example
const features = await felt.getRenderedFeatures();getFeature()
getFeature(
params: {id:string|number;layerId:string; }):Promise<null|LayerFeature>
Get a feature from the map by its ID and layer ID.
The response is a LayerFeature 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.
Parameters
params
{ id: string | number; layerId: string; }
params.id
string | number
params.layerId
string
Returns
Promise<null | LayerFeature>
Example
const feature = await felt.getFeature({ layerId: "layer-1", id: 123 });getFeatures()
getFeatures(
params: {layerId:string;filters:Filters;sorting:SortConfig;boundary:GeometryFilter;search:string;pagination:null|string; }):Promise<{features:LayerFeature[];count:number;previousPage:null|string;nextPage:null|string; }>
Get a list of layer features.
Parameters
params
{ layerId: string; filters: Filters; sorting: SortConfig; boundary: GeometryFilter; search: string; pagination: null | string; }
-
params.layerId
string
The ID of the layer to get features from.
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.
Returns
Promise<{ features: LayerFeature[]; count: number; previousPage: null | string; nextPage: null | string; }>
The response is an object which contains:
features: list of LayerFeature 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&nextPage: The tokens to pass in thepaginationparam to navigate between pages.
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.
Example
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,
});
}getGeoJsonFeature()
getGeoJsonFeature(
params: {id:string|number;layerId:string; }):Promise<null|GeoJsonFeature>
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.
Parameters
params
{ id: string | number; layerId: string; }
params.id
string | number
params.layerId
string
Returns
Promise<null | GeoJsonFeature>
Example
const feature = await felt.getGeoJsonFeature({ layerId: "layer-1", id: 123 });getCategoryData()
getCategoryData(
params:GetLayerCategoriesParams):Promise<GetLayerCategoriesGroup[]>
Gets values from a layer grouped by a given attribute.
Parameters
params
Returns
Promise<GetLayerCategoriesGroup[]>
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:
At the top level (using
boundaryandfilters), which affects both what categories are included and how values are calculatedIn the
valuesconfiguration, 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.
Example
// 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"
}
}
});getHistogramData()
getHistogramData(
params:GetLayerHistogramParams):Promise<GetLayerHistogramBin[]>
Gets a histogram of values from a layer for a given attribute.
Parameters
params
Returns
Promise<GetLayerHistogramBin[]>
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:
At the top level (using
boundaryandfilters), which affects both how the bins are calculated and what features are counted in each binIn the
valuesconfiguration, 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.
Example
// 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]
}
});getAggregates()
getAggregates<
T>(params:GetLayerCalculationParams<T>):Promise<Record<T,null|number>>
Calculates a single aggregate value for a layer based on the provided configuration.
Type Parameters
T extends "avg" | "max" | "min" | "sum" | "median" | "count"
Parameters
params
Returns
Promise<Record<T, null | number>>
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 no aggregation is specified, it counts features. When an aggregation is provided, it performs that calculation (average, sum, etc.) on the specified attribute.
Example
// Count all residential buildings
const residentialCount = await felt.getAggregates({
layerId: "buildings",
filters: ["type", "eq", "residential"]
});
// 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: {
method: "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: {
method: "max",
attribute: "height"
}
});getLayerSchema()
getLayerSchema(
layerId:string):Promise<LayerSchema>
Get the schema for a layer.
Parameters
layerId
string
Returns
Promise<LayerSchema>
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.
Example
const schema = await felt.getLayerSchema("layer-1");
const attributeIds = schema.attributes.map((attr) => attr.id);getMapDetails()
getMapDetails():
Promise<MapDetails>
Gets the details of the map.
Returns
Promise<MapDetails>
Example
const details = await felt.getMapDetails();
console.log({
id: details.id,
title: details.title,
description: details.description,
});getSelection()
getSelection():
Promise<EntityNode[]>
Gets the current selection as a list of entity identifiers.
Returns
Promise<EntityNode[]>
Example
const selection = await felt.getSelection();selectFeature()
selectFeature(
params:FeatureSelection):Promise<void>
Selects a feature on a layer. This will show the feature's popup, modal or sidebar (if configured) and highlight the feature.
Parameters
params
Returns
Promise<void>
Example
felt.selectFeature({
id: 123,
layerId: "my-layer",
showPopup: true,
fitViewport: { maxZoom: 15 },
});clearSelection()
clearSelection(
params?: {features:boolean;elements:boolean; }):Promise<void>
Clears the current selection. This clears the selection of
Parameters
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.
Returns
Promise<void>
Example
// 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 });Default
{ features: true, elements: true }setTool()
setTool(
tool:null|"text"|"link"|"note"|"pin"|"line"|"route"|"polygon"|"circle"|"marker"|"highlighter"):void
Sets the tool to use for drawing elements on the map.
Parameters
tool
null | "text" | "link" | "note" | "pin" | "line" | "route" | "polygon" | "circle" | "marker" | "highlighter"
The tool to set.
Returns
void
Example
// Set the tool to "marker"
await felt.setTool("marker");
// put down the tool
await felt.setTool(null);getTool()
getTool():
Promise<null|"text"|"link"|"note"|"pin"|"line"|"route"|"polygon"|"circle"|"marker"|"highlighter">
Gets the current tool, if any is in use.
Returns
Promise<null | "text" | "link" | "note" | "pin" | "line" | "route" | "polygon" | "circle" | "marker" | "highlighter">
The current tool, or null if no tool is in use.
Example
const tool = await felt.getTool(); // "marker", "polygon", etc.onToolChange()
onToolChange(
args: {handler: (tool:null|"text"|"link"|"note"|"pin"|"line"|"route"|"polygon"|"circle"|"marker"|"highlighter") =>void; }):VoidFunction
Listens for changes to the current tool.
Parameters
args
{ handler: (tool: null | "text" | "link" | "note" | "pin" | "line" | "route" | "polygon" | "circle" | "marker" | "highlighter") => void; }
-
args.handler
(tool: null | "text" | "link" | "note" | "pin" | "line" | "route" | "polygon" | "circle" | "marker" | "highlighter") => void
This callback is called with the current tool whenever the tool changes.
Returns
VoidFunction
A function to unsubscribe from the listener
Example
const unsubscribe = felt.onToolChange({
handler: tool => console.log(tool),
});
// later on...
unsubscribe();setToolSettings()
setToolSettings(
settings:InputToolSettings):void
Sets the settings for the current tool.
Parameters
Returns
void
Example
// Set the settings for the marker tool
await felt.setToolSettings({
tool: "marker",
color: "#FE17",
});getToolSettings()
getToolSettings<
T>(tool:T):Promise<ToolSettingsMap[T]>
Gets the settings for the chosen tool
Type Parameters
T extends keyof ToolSettingsMap
Parameters
tool
T
Returns
Promise<ToolSettingsMap[T]>
The settings for the chosen tool.
Example
const settings = await felt.getToolSettings("marker");onToolSettingsChange()
onToolSettingsChange(
args: {handler: (settings:ToolSettingsChangeEvent) =>void; }):VoidFunction
Listens for changes to the settings on all tools.
Parameters
args
{ handler: (settings: ToolSettingsChangeEvent) => void; }
args.handler
(settings: ToolSettingsChangeEvent) => void
Returns
VoidFunction
A function to unsubscribe from the listener
Example
const unsubscribe = felt.onToolSettingsChange({
handler: settings => console.log(settings),
});
// later on...
unsubscribe();updateUiControls()
updateUiControls(
controls:UiControlsOptions):void
Updates the UI controls on the embedded map.
Parameters
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
options
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.
Parameters
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();getViewport()
getViewport():
Promise<ViewportState>
Gets the current state of the viewport.
Returns
Promise<ViewportState>
Example
// Get current viewport state
const viewport = await felt.getViewport();
console.log({
center: viewport.center,
zoom: viewport.zoom,
});setViewport()
setViewport(
viewport:SetViewportCenterZoomParams):void
Moves the map to the specified location.
Parameters
viewport
Returns
void
Example
felt.setViewport({
center: { latitude: 0, longitude: 0 },
zoom: 10,
});getViewportConstraints()
getViewportConstraints():
Promise<null|ViewportConstraints>
Gets the current state of the viewport constraints.
Returns
Promise<null | ViewportConstraints>
Example
// 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");
}setViewportConstraints()
setViewportConstraints(
constraints:null|Partial<ViewportConstraints>):void
Constrains the map viewport so it stays inside certain bounds and/or certain zoom levels.
Parameters
constraints
null | Partial<ViewportConstraints>
Returns
void
Examples
felt.setViewportConstraints({
bounds: [-122.5372532, 37.6652478, -122.1927016, 37.881707],
minZoom: 1,
maxZoom: 23,
});every constraint is optional
felt.setViewportConstraints({
bounds: [-122.5372532, 37.6652478, -122.1927016, 37.881707],
});if a constraint is null, it will be removed but keeping the others
felt.setViewportConstraints({ bounds: null });if method receives null, it will remove the constraints
felt.setViewportConstraints(null);fitViewportToBounds()
fitViewportToBounds(
bounds:ViewportFitBoundsParams):void
Fits the map to the specified bounds.
Parameters
bounds
Returns
void
Example
const west = -122.4194;
const south = 37.7749;
const east = -122.4194;
const north = 37.7749;
felt.fitViewportToBounds({ bounds: [west, south, east, north] });Events
onElementCreate()
onElementCreate(
args: {handler: (change:ElementChangeCallbackParams) =>void; }):VoidFunction
Adds a listener for when an element is created.
Parameters
args.handler
(change: ElementChangeCallbackParams) => void
The handler that is called when an element is created. This will fire when elements are created programatically, 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.
Returns
VoidFunction
A function to unsubscribe from the listener
Example
const unsubscribe = felt.onElementCreate({
handler: (element) => console.log(element.id),
});
// later on...
unsubscribe();onElementCreateEnd()
onElementCreateEnd(
args: {handler: (params: {element:Element; }) =>void; }):VoidFunction
Listens for when a new element is finished being created by a drawing tool.
This differs from the `onElementCreate` 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.
Parameters
Returns
VoidFunction
A function to unsubscribe from the listener
Example
const unsubscribe = felt.onToolCreatedElement({
handler: (params) => console.log(params),
});
// later on...
unsubscribe();onElementChange()
onElementChange(
args: {options: {id:string; };handler: (change:ElementChangeCallbackParams) =>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 programatically.
Like the `onElementCreate` listener, this will fire when an element is still being created by a drawing tool.
You can check the `isBeingCreated` property to determine if the element is still being created by a drawing tool.
Parameters
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.
Returns
VoidFunction
A function to unsubscribe from the listener
Example
const unsubscribe = felt.onElementChange({
options: { id: "element-1" },
handler: ({element}) => console.log(element.id),
});
// later on...
unsubscribe();onElementDelete()
onElementDelete(
args: {options: {id:string; };handler: () =>void; }):VoidFunction
Adds a listener for when an element is deleted.
Parameters
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.
Returns
VoidFunction
A function to unsubscribe from the listener
Example
const unsubscribe = felt.onElementDelete({
options: { id: "element-1" },
handler: () => console.log("element-1 deleted"),
});
// later on...
unsubscribe();onElementGroupChange()
onElementGroupChange(
args: {options: {id:string; };handler: (change:ElementGroupChangeCallbackParams) =>void; }):VoidFunction
Adds a listener for when an element group changes.
Parameters
args
{ options: { id: string; }; handler: (change: ElementGroupChangeCallbackParams) => void; }
args.options
{ id: string; }
args.options.id
string
args.handler
(change: ElementGroupChangeCallbackParams) => void
Returns
VoidFunction
A function to unsubscribe from the listener
Example
const unsubscribe = felt.onElementGroupChange({
options: { id: "element-group-1" },
handler: elementGroup => console.log(elementGroup.id),
});
// later on...
unsubscribe();onPointerClick()
onPointerClick(
params: {handler: (event:MapInteractionEvent) =>void; }):VoidFunction
Allows you to be notified the user clicks on the map.
Parameters
params
{ handler: (event: MapInteractionEvent) => void; }
params.handler
(event: MapInteractionEvent) => void
Returns
VoidFunction
A function to unsubscribe from the listener
Example
const unsubscribe = felt.onPointerClick({
handler: (event) => console.log(event.center, event.features),
});
// later on...
unsubscribe();onPointerMove()
onPointerMove(
params: {handler: (event:MapInteractionEvent) =>void; }):VoidFunction
Allows you to be notified the user moves the mouse over the map.
Parameters
Returns
VoidFunction
A function to unsubscribe from the listener
Example
// 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();onLayerChange()
onLayerChange(
args: {options: {id:string; };handler: (change:LayerChangeCallbackParams) =>void; }):VoidFunction
Adds a listener for when a layer changes.
Parameters
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.
Returns
VoidFunction
A function to unsubscribe from the listener
Example
const unsubscribe = felt.onLayerChange({
options: { id: "layer-1" },
handler: ({layer}) => console.log(layer.bounds),
});
// later on...
unsubscribe();onLayerGroupChange()
onLayerGroupChange(
args: {options: {id:string; };handler: (change:LayerGroupChangeCallbackParams) =>void; }):VoidFunction
Adds a listener for when a layer group changes.
Parameters
args
{ options: { id: string; }; handler: (change: LayerGroupChangeCallbackParams) => void; }
args.options
{ id: string; }
args.options.id
string
args.handler
(change: LayerGroupChangeCallbackParams) => void
Returns
VoidFunction
A function to unsubscribe from the listener
Example
const unsubscribe = felt.onLayerGroupChange({
options: { id: "layer-group-1" },
handler: ({layerGroup}) => console.log(layerGroup.id),
});
// later on...
unsubscribe();onLegendItemChange()
onLegendItemChange(
args: {options:LegendItemIdentifier;handler: (change:LegendItemChangeCallbackParams) =>void; }):VoidFunction
Adds a listener for when a legend item changes.
Parameters
args
{ options: LegendItemIdentifier; handler: (change: LegendItemChangeCallbackParams) => void; }
args.options
args.handler
(change: LegendItemChangeCallbackParams) => void
Returns
VoidFunction
A function to unsubscribe from the listener
Example
const unsubscribe = felt.onLegendItemChange({
options: { layerId: "layer-1", id: "item-1-0" },
handler: ({legendItem}) => console.log(legendItem.visible),
});
// later on...
unsubscribe();onLayerFiltersChange()
onLayerFiltersChange(
params: {options: {layerId:string; };handler: (change:LayerFilters) =>void; }):VoidFunction
Adds a listener for when a layer's filters change.
Parameters
params
{ options: { layerId: string; }; handler: (change: LayerFilters) => void; }
params.options
{ layerId: string; }
params.options.layerId
string
params.handler
(change: LayerFilters) => void
Returns
VoidFunction
A function to unsubscribe from the listener
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.
Example
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();onLayerBoundariesChange()
onLayerBoundariesChange(
params: {options: {layerId:string; };handler: (boundaries:null|LayerBoundaries) =>void; }):VoidFunction
Adds a listener for when a layer's spatial boundaries change.
Parameters
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.
Returns
VoidFunction
A function to unsubscribe from the listener
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.
Example
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();onSelectionChange()
onSelectionChange(
params: {handler: (change: {selection:EntityNode[]; }) =>void; }):VoidFunction
Adds a listener for when the selection changes.
Parameters
params
{ handler: (change: { selection: EntityNode[]; }) => void; }
params.handler
(change: { selection: EntityNode[]; }) => void
Returns
VoidFunction
A function to unsubscribe from the listener
Example
const unsubscribe = felt.onSelectionChange({
handler: ({selection}) => console.log(selection),
});
// later on...
unsubscribe();onViewportMove()
onViewportMove(
args: {handler: (viewport:ViewportState) =>void; }):VoidFunction
Adds a listener for when the viewport changes.
Parameters
args.handler
(viewport: ViewportState) => void
This callback is called with the current viewport state whenever the viewport changes.
Returns
VoidFunction
A function to unsubscribe from the listener
Example
const unsubscribe = felt.onViewportMove({
handler: viewport => console.log(viewport.center.latitude),
});
// later on...
unsubscribe();onViewportMoveEnd()
onViewportMoveEnd(
args: {handler: (viewport:ViewportState) =>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.
Parameters
args
{ handler: (viewport: ViewportState) => void; }
args.handler
(viewport: ViewportState) => void
Returns
VoidFunction
A function to unsubscribe from the listener
Example
const unsubscribe = felt.onViewportMoveEnd({
handler: viewport => console.log(viewport.center.latitude),
});
// later on...
unsubscribe();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
Any fade transitions (e.g. for labels) have completed
Parameters
args
{ handler: () => void; }
args.handler
() => void
Returns
VoidFunction
A function to unsubscribe from the listener
Example
const unsubscribe = felt.onMapIdle({ handler: () => console.log("map is idle") });
// later on...
unsubscribe();Properties
iframe
readonlyiframe:null|HTMLIFrameElement
The iframe element containing the Felt map, if it is an embedded map.
Last updated
Was this helpful?