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

ViewportController.UiController.LayersController.ElementsController.SelectionController.InteractionsController.ToolsController.MiscController

Properties

iframe

readonly iframe: null | HTMLIFrameElement

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

Methods

getElement()

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

Get a single element from the map by its id.

Parameters

Parameter	Type	Description
`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 | Geometry>

Get the geometry of an element.

Parameters

Parameter	Type	Description
`id`	`string`	The id of the element you want to get the geometry of.

Returns

Promise<null | Geometry>

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

Parameter	Type	Description
`constraint`?	`GetElementsConstraint`	The constraints to apply to the elements returned from the map.

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

Parameter	Type
`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

Parameter	Type	Description
`constraint`?	`GetElementGroupsConstraint`	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

Parameter	Type
`visibility`	`SetVisibilityRequest`

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

Parameter	Type
`element`	`ElementCreate`

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

Parameter	Type
`element`	`ElementUpdate`

Returns

Promise<Element>

deleteElement()

deleteElement(id: string): Promise<void>

Delete an element from the map.

Parameters

Parameter	Type
`id`	`string`

Returns

Promise<void>

getLayer()

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

Get a single layer from the map by its id.

Parameters

Parameter	Type	Description
`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

Parameter	Type	Description
`constraint`?	`GetLayersConstraint`	The constraints to apply to the layers returned from the map.

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

Parameter	Type
`visibility`	`SetVisibilityRequest`

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

Parameter	Type	Description
`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

Parameter	Type
`params`	`SetVisibilityRequest`

Returns

Promise<void>

Example

felt.setLayerLegendVisibility({ show: ["layer-1", "layer-2"], hide: ["layer-3"] });

getLayerGroup()

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

Get a layer group from the map by its id.

Parameters

Parameter	Type
`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

Parameter	Type	Description
`constraint`?	`GetLayerGroupsConstraint`	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

Parameter	Type
`visibility`	`SetVisibilityRequest`

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

Parameter	Type
`params`	`SetVisibilityRequest`

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

Parameter	Type
`id`	`LegendItemIdentifier`

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

Parameter	Type
`constraint`?	`LegendItemsConstraint`

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

Parameter	Type
`visibility`	{ `show`: `LegendItemIdentifier`[]; `hide`: `LegendItemIdentifier`[]; }
`visibility.show`?	`LegendItemIdentifier`[]
`visibility.hide`?	`LegendItemIdentifier`[]

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

Parameter	Type
`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

Parameter	Type	Description
`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.

Returns

Promise<void>

Example

felt.setLayerFilters({
  layerId: "layer-1",
  filters: ["AREA", "gt", 30_000],
});

getRenderedFeatures()

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

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

Parameter	Type	Description
`params`?	`GetRenderedFeaturesConstraint`	The constraints to apply to the features returned from the map.

Returns

Promise<Feature[]>

Example

const features = await felt.getRenderedFeatures();

getCategoryData()

getCategoryData(params: GetLayerCategoriesParams): Promise<GetLayerCategoriesGroup[]>

Gets values from a layer grouped by a given attribute.

Parameters

Parameter	Type
`params`	`GetLayerCategoriesParams`

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 boundary and filters), which affects both what categories are included and how values are calculated
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.

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

Parameter	Type
`params`	`GetLayerHistogramParams`

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 boundary and filters), which affects both how the bins are calculated and what features are counted in each bin
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.

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

Type Parameter
`T` extends `"avg"` \| `"max"` \| `"min"` \| `"sum"` \| `"median"` \| `"count"`

Parameters

Parameter	Type
`params`	`GetLayerCalculationParams`<`T`>

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

getMapDetails()

getMapDetails(): Promise<MapDetails>

Gets the details of the map.

Returns

Promise<MapDetails>

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

Parameter	Type
`params`	`FeatureSelection`

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

Parameter	Type	Description
`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" | "note" | "pin" | "line" | "route" | "polygon" | "circle" | "marker" | "highlighter" | "link"): void

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

Parameters

Parameter	Type	Description
`tool`	`null` \| `"text"` \| `"note"` \| `"pin"` \| `"line"` \| `"route"` \| `"polygon"` \| `"circle"` \| `"marker"` \| `"highlighter"` \| `"link"`	The tool to set.

Returns

void

Example

// Set the tool to "marker"
felt.setTool("marker");

// put down the tool
felt.setTool(null);

getTool()

getTool(): Promise<null | "text" | "note" | "pin" | "line" | "route" | "polygon" | "circle" | "marker" | "highlighter" | "link">

Gets the current tool, if any is in use.

Returns

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" | "note" | "pin" | "line" | "route" | "polygon" | "circle" | "marker" | "highlighter" | "link") => void; }): VoidFunction

Listens for changes to the current tool.

Parameters

Parameter	Type	Description
`args`	{ `handler`: (`tool`: `null` \| `"text"` \| `"note"` \| `"pin"` \| `"line"` \| `"route"` \| `"polygon"` \| `"circle"` \| `"marker"` \| `"highlighter"` \| `"link"`) => `void`; }	-
`args.handler`	(`tool`: `null` \| `"text"` \| `"note"` \| `"pin"` \| `"line"` \| `"route"` \| `"polygon"` \| `"circle"` \| `"marker"` \| `"highlighter"` \| `"link"`) => `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

Parameter	Type	Description
`settings`	`InputToolSettings`	The settings to set.

Returns

void

getToolSettings()

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

Gets the settings for the current tool.

Type Parameters

Type Parameter
`T` extends keyof `ToolSettingsMap`

Parameters

Parameter	Type
`tool`	`T`

Returns

Promise<ToolSettingsMap[T]>

The settings for the current tool.

onToolSettingsChange()

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

Listens for changes to the settings on all tools.

Parameters

Parameter	Type
`args`	{ `handler`: (`settings`: `ToolSettingsChangeEvent`) => `void`; }
`args.handler`	(`settings`: `ToolSettingsChangeEvent`) => `void`

Returns

VoidFunction

A function to unsubscribe from the listener

updateUiControls()

updateUiControls(controls: UiControlsOptions): void

Updates the UI controls on the embedded map.

Parameters

Parameter	Type	Description
`controls`	`UiControlsOptions`	The controls to update.

Returns

void

setOnMapInteractionsUi()

setOnMapInteractionsUi(options: OnMapInteractionsOptions): void

Control the on-map UI shown when interacting with features and elements.

If you add your own click, selection or hover handlers you may want to disable various parts of the Felt UI. This method allows you to control the visibility of various parts of the UI that might otherwise be shown when people click or hover on things.

This does not affect selection. That means that selectable features and elements will still be selected when clicked.

Parameters

Parameter	Type
`options`	`OnMapInteractionsOptions`

Returns

void

getViewport()

getViewport(): Promise<ViewportState>

Gets the current state of the viewport.

Returns

Promise<ViewportState>

setViewport()

setViewport(viewport: SetViewportCenterZoomParams): void

Moves the map to the specified location.

Parameters

Parameter	Type
`viewport`	`SetViewportCenterZoomParams`

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>

setViewportConstraints()

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

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

Parameters

Parameter	Type
`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

Parameter	Type
`bounds`	`ViewportFitBoundsParams`

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

Parameter	Type	Description
`args`	{ `handler`: (`change`: `ElementChangeCallbackParams`) => `void`; }	-
`args.handler`	(`change`: `ElementChangeCallbackParams`) => `void`	The handler that is called when an element is created.

Returns

VoidFunction

A function to unsubscribe from the listener

Example

const unsubscribe = felt.onElementCreate({
  handler: (element) => console.log(element.id),
});

// later on...
unsubscribe();

onElementChange()

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

Adds a listener for when an element changes.

Parameters

Parameter	Type	Description
`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.

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

Parameter	Type	Description
`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: (element) => console.log(element.id),
});

// later on...
unsubscribe();

onElementGroupChange()

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

Adds a listener for when an element group changes.

Parameters

Parameter	Type
`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

Parameter	Type
`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

Parameter	Type	Description
`params`	{ `handler`: (`event`: `MapInteractionEvent`) => `void`; }	Params for the listener
`params.handler`	(`event`: `MapInteractionEvent`) => `void`	The handler function

Returns

VoidFunction

A function to unsubscribe from the listener

Example

const unsubscribe = felt.onPointerMove({
  handler: (event) => console.log(event.center, 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

Parameter	Type	Description
`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.

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

Parameter	Type
`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

Parameter	Type
`args`	{ `options`: `LegendItemIdentifier`; `handler`: (`change`: `LegendItemChangeCallbackParams`) => `void`; }
`args.options`	`LegendItemIdentifier`
`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();

onSelectionChange()

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

Adds a listener for when the selection changes.

Parameters

Parameter	Type
`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

Parameter	Type	Description
`args`	{ `handler`: (`viewport`: `ViewportState`) => `void`; }	-
`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

Parameter	Type
`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

Parameter	Type
`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();

Files

FeltController.md

Latest commit

History

FeltController.md

File metadata and controls

Extends

Properties

iframe

Methods

getElement()

Parameters

Returns

Example

getElementGeometry()

Parameters

Returns

Example

getElements()

Parameters

Returns

Remarks

Example

getElementGroup()

Parameters

Returns

Example

getElementGroups()

Parameters

Returns

Example

setElementGroupVisibility()

Parameters

Returns

Example

createElement()

Parameters

Returns

Example

updateElement()

Parameters

Returns

deleteElement()

Parameters

Returns

getLayer()

Parameters

Returns

Example

getLayers()

Parameters

Returns

Remarks

Example

setLayerVisibility()

Parameters

Returns

Example

setLayerStyle()

Parameters

Returns

Example

setLayerLegendVisibility()

Parameters

Returns

Example

getLayerGroup()

Parameters

Returns

Example

getLayerGroups()

Parameters

Returns

Example

setLayerGroupVisibility()

Parameters

Returns

Example

setLayerGroupLegendVisibility()

Parameters