PolygonGeometry: {type: "Polygon";coordinates: [][]; }

A GeoJSON-like polygon geometry.

Type declaration

type

type: "Polygon"

coordinates

coordinates: [][]

Modules

• Elements

• Interactions

• Layers

• Main

• Selection

• Shared

• UI

• Viewport

Properties

id

id: string

A string identifying the element group.

name

name: string

The name of the element group. This is shown in the legend.

caption

caption: null | string

The caption of the element group. This is shown in the legend.

elementIds

elementIds: string[]

The ids of the elements in the element group.

Remarks

You can use these ids to get the full element objects via the getElements method.

visible

visible: boolean

Whether the element group is visible or not.

shownInLegend

shownInLegend: boolean

Whether the element group is shown in the legend or not.

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.

Example

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

Index

Controller

• FeltController

Instantiation

• FeltEmbedOptions

• Felt

Properties

id

id: string

The string identifying the element

type

type: string

The type of element, such as a Place, Polygon, Line, Route, etc.

groupId

groupId: null | string

The ID of the element group that the element belongs to, or null if the element is not inside an element group.

name

name: null | string

The name of the element can be displayed in the Legend, depending on how the element's legend is configured in its style.

description

description: null | string

The element description forms part of the element's metadata. This is visible to users via the element info button in the legend.

attributes

attributes: Record<string, unknown>

The attributes of the element, which can be added via the Element Inspector under the Detail tab.

The parameters for the onElementChange listener.

Properties

element

element: null |

The new data for the element or null if the element was removed.

The parameters for the onElementGroupChange listener.

Properties

elementGroup

elementGroup: null |

The Felt SDK lets you get information about the elements in the map, and the groups that they belong to.

Index

Controller

Element Groups

Elements

FeltZoom: number

The zoom level of the map.

It is a floating-point number between 1 and 23, where 1 is the most zoomed out and 23 is the most zoomed in.

Represents a point in world coordinates.

Properties

latitude

latitude: number

longitude

longitude: number

FeltBoundary: [number, number, number, number]

The edges of the map in the form of a bounding box.

The boundary is a tuple of the form [west, south, east, north].

These are generic types that are used across multiple modules.

Index

Other

Visibility

The constraints to apply when getting elements.

Properties

ids?

optional ids: string[]

The ids of the elements to get.

The Interactions module allows you to be notified when the user interacts with the map.

Interactions include clicking and hovering on points and features.

Index

Interfaces

• MapInteractionEvent

Controller

• InteractionsController

LngLatTuple: [number, number]

A tuple representing a longitude and latitude coordinate.

This is used hen serializing geometry because that's the standard used in GeoJSON.

The parameters for the methods that change the visibility of entities.

Properties

show?

optional show: string[]

The ids of the entities you want to change the visibility of.

hide?

optional hide: string[]

LineStringGeometry: {type: "LineString";coordinates: LngLatTuple[]; }

A GeoJSON-like line string geometry.

Type declaration

type

type: "LineString"

coordinates

coordinates: LngLatTuple[]

PointGeometry: {type: "Point";coordinates: LngLatTuple; }

A GeoJSON-like point geometry.

Type declaration

type

type: "Point"

coordinates

coordinates: LngLatTuple

MultiLineStringGeometry: {type: "MultiLineString";coordinates: LineStringGeometry["coordinates"][]; }

A GeoJSON-like multi-line string geometry.

Type declaration

type

type: "MultiLineString"

coordinates

coordinates: LineStringGeometry["coordinates"][]

MultiPolygonGeometry: {type: "MultiPolygon";coordinates: PolygonGeometry["coordinates"][]; }

A GeoJSON-like multi-polygon geometry.

Type declaration

type

type: "MultiPolygon"

coordinates

coordinates: PolygonGeometry["coordinates"][]

The constraints to apply when getting element groups.

Properties

ids?

optional ids: string[]

The ids of the element groups to get.

FilterExpression: [null | string, "in" | "ni", null | (null | string | number | boolean)[]] | [null | string, "lt" | "gt" | "le" | "ge" | "eq" | "ne" | "cn" | "nc" | "is" | "isnt", null | string | number | boolean]

The Elements controller allows you to get information about the elements on the map, and make changes to their visibility.

Extended by

• FeltController

Methods

getElement()

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

Get a single element from the map by its id.

Parameters

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

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

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

Returns

Promise<null | ElementGroup>

The requested element group.

Example

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

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

Returns

Promise<void>

Example

felt.setElementGroupVisibility({ show: ["element-group-1", "element-group-2"], hide: ["element-group-3"] });

Events

onElementChange()

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

Adds a listener for when an element changes.

Parameters

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

onElementGroupChange()

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

Adds a listener for when an element group changes.

Parameters

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

The event object passed to the interaction listeners.

Properties

coordinate

coordinate:

The cursor position in world coordinates.

features

features: []

The vector features that are under the cursor.

rasterValues

rasterValues: []

The raster pixel values that are under the cursor.

The parameters for the setViewport method.

Properties

center?

optional center: {latitude: Latitude;longitude: Longitude; }

zoom?

optional zoom: number

The Viewport module allows you to control the viewport of the map, such as setting the current viewport, getting the current viewport, and being notified when the viewport changes.

Index

Controller

Types

Types

The current state of the viewport, including the derived bounds.

The parameters for the fitViewportToBounds method.

Properties

bounds

bounds: [number, number, number, number]

The bounds to fit the viewport to.

FeltBoundary

Properties

center

center: LatLng

The center of the viewport in latitude and longitude.

LatLng

zoom

zoom: number

The zoom level of the viewport.

FeltZoom

bounds

bounds: [number, number, number, number]

The bounding box of the viewport.

This is derived, and depends on the center and zoom of the viewport, as well as its size.

FeltBoundary

A feature is a single geographical item in a layer. The unique ID for a feature is a compound key made up of the layer ID and the feature ID.

Properties

id

id: string | number

The identifier of the feature, unique within the layer.

layerId

layerId: string

The identifier of the layer that the feature belongs to.

geometryType

geometryType: "Point" | "Polygon" | "MultiPolygon" | "LineString" | string & {}

The type of geometry of the feature.

properties

properties: Record<string, unknown>

The properties of the feature, as a bag of attributes.

Layers in a Felt map hold geospatial data, but also configure how the data is rendered both on the map and in the legend. The data can be vector data such as Points, Lines, or Polygons, or raster data such as satellite images.

Each Layer can be grouped under a LayerGroup, and has associated LegendItems that represent how the layer is rendered in the legend.

You can control the visibility of layers, layer groups, and legend items using the setLayerVisibility, setLayerGroupVisibility, and setLegendItemVisibility methods.

When a Layer is styled to as categorical data or "classed" numeric data, there will be a LegendItem for each category or class. Each LegendItem can be controlled for visibility independently of the Layer, so you can turn on and off each category or class individually.

Index

Interfaces

• Feature

• RasterValue

Controller

• LayersController

Filters

• LayerFilters

• FilterLogicGate

• FilterExpression

• FilterTernary

• Filters

Layer Groups

• LayerGroup

• GetLayerGroupsConstraint

• LayerGroupChangeCallbackParams

Layers

• Layer

• GetLayersConstraint

• LayerChangeCallbackParams

• GetRenderedFeaturesConstraint

• LayerProcessingStatus

Legend Items

• LegendItem

• LegendItemIdentifier

• LegendItemsConstraint

• LegendItemChangeCallbackParams

FilterLogicGate: "and" | "or"

The Interactions controller allows you to observe interactions with the map

Extended by

• FeltController

Events

onPointerClick()

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

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

Parameters

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

const unsubscribe = felt.onPointerMove({
  handler: (event) => console.log(event.center, event.features),
});

// later on...
unsubscribe();

Filters: | | null | boolean

Filters can be used to change which features in a layer are rendered. Filters can be applied to a layer by the setLayerFilters method on the Felt controller.

Remarks

The possible operators are:

• lt: Less than

• gt: Greater than

• le: Less than or equal to

• ge: Greater than or equal to

• eq: Equal to

• ne: Not equal to

• cn: Contains

• nc: Does not contain

The allowed boolean operators are:

• and: Logical AND

• or: Logical OR

Example

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

// compound filters can be constructed using boolean logic:
felt.setLayerFilters({
  layerId: "layer-1",
  filters: [["AREA", "gt", 30_000], "and", ["COLOR", "eq", "red"]]
})

FilterTernary: [ | | null | boolean, , | | null | boolean]

The constraints to apply when getting layer groups.

Properties

ids?

optional ids: string[]

The ids of the layer groups to get.

Constraints for the getRenderedFeatures method. This can include layer constriants, spatial constraints, or both. If no constraints are provided, all rendered features will be returned.

Properties

areaQuery?

optional areaQuery: {coordinates: LatLng; } | {boundary: [number, number, number, number]; }

The area to query for rendered features. This can be specific coordinates or a FeltBoundary. If omitted, the entire viewport will be queried.

layerIds?

optional layerIds: string[]

The ids of the layers to get rendered features for.

The constraints to apply when getting layers.

Properties

ids?

optional ids: string[]

The ids of the layers to get.

Properties

id

id: string

The string identifying the layer

groupId

groupId: null | string

The ID of the layer group that the layer belongs to.

Layers that appear at the root level in Felt will not have a group ID.

name

name: string

The name of the layer can be displayed in the Legend, depending on how the layer's legend is configured in its style.

caption

caption: null | string

The layer's caption is shown in the legend.

description

description: null | string

The layer description forms part of the layer's metadata. This is visible to users via the layer info button in the legend.

visible

visible: boolean

Whether the layer is visible or not.

shownInLegend

shownInLegend: boolean

Whether the layer is shown in the legend or not.

style

style: object

The FSL style for the layer.

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

As the types of the styles are very complex, we return object here and advise that you program defensively while reading the styles.

status

status: "processing" | "completed" | "failed" | "incomplete"

The current processing status of the layer.

geometryType

geometryType: null | string

The geometry type of the layer.

Remarks

This will generally be one of:

• "Point"

• "Line"

• "Polygon"

• "Raster"

• null

When the layer is processing, or it is a data-only layer, it will be null. You should expect this to be able to be any string, however, as more geometry types can be added in the future.

bounds

bounds: null | [number, number, number, number]

The bounding box of the layer. If the layer is processing, or the bounds have otherwise not been calculated or are not available, this will be null.

FeltBoundary

LayerProcessingStatus: "processing" | "completed" | "failed" | "incomplete"

This describes the processing status of a layer.

The various values are:

• processing: The layer has been uploaded or updated and is still processing.

• completed: The layer has been processed and can be viewed on the map.

• failed: The layer failed to process and cannot be viewed on the map.

• incomplete: The layer has not been processed.

Properties

id

id: string

A string identifying the layer group.

name

name: string

The name of the layer group. This is shown in the legend.

caption

caption: null | string

The caption of the layer group. This is shown in the legend.

layerIds

layerIds: string[]

The ids of the layers in the layer group.

Remarks

You can use these ids to get the full layer objects via the getLayers method.

visible

visible: boolean

Whether the layer group is visible or not.

shownInLegend

shownInLegend: boolean

Whether the layer group is shown in the legend or not.

bounds

bounds: null | [number, number, number, number]

The bounding box of the layer group.

The filters that are currently set on a layer.

A layer's filters are the combination of various different places in which filters can be applied.

Properties

style

style:

Filters that are set in the layer's style. These are the lowest level of filters, and can only be set by editing the map.

components

components:

Filters that are set in the layer's components, which are interactive elements in the legend. These can be set by viewers for their own session, but their default value can be set by the map creator.

ephemeral

ephemeral:

Filters that are set ephemerally by viewers in their own session.

These are the filters that are set when the setLayerFilters method is called. There is no way to set these in the Felt UI - they can only be set using the SDK.

combined

The combined result of all the filters set on the layer.

The parameters for the onLayerGroupChange listener.

Properties

layerGroup

layerGroup: null |

The parameters for the onLayerChange listener.

Properties

layer

layer: null | Layer

The new data for the layer or null if the layer was removed.

A legend item, which often represents a sub-class of features in a layer in the case of categorical or classed layers.

Properties

title

title: string | string[]

The title of the legend item.

titleDependsOnZoom

titleDependsOnZoom: boolean

Whether the title depends on the zoom level or not. If it does, you need to call getLegendItem when the zoom level changes.

Note that as the zoom level changes, the onLegendItemChange handler will not be called, so you need to call getLegendItem yourself.

visible

visible: boolean

Whether the legend item is visible or not.

id

id: string

The id of the legend item.

layerId

layerId: string

The id of the layer the legend item belongs to.

The identifier for a legend item. It is a compound key of the layer to which the legend item belongs and the legend item's own id.

Properties

id

id: string

The id of the legend item.

layerId

layerId: string

The id of the layer the legend item belongs to.

Constraints for legend items. If nothing is passed, all legend items will be returned.

Properties

ids?

optional ids: {id: string;layerId: string; }[]

Array of legend item identifiers to constrain by.

layerIds?

optional layerIds: string[]

Array of layer ids to constrain legend items by.

A raster pixel value for a specific layer.

Properties

value

value: number

The value of the pixel.

layerId

layerId: string

The ID of the layer that the pixel belongs to.

categoryName

categoryName: null | string

The name of the category that the pixel belongs to.

color

color: null | {r: number;g: number;b: number;a: number; }

The color of the pixel. Each value is between 0 and 255.

The Layers controller allows you to get information about the layers on the map, and make changes to their visibility.

Layers can be organised into groups, and their groups can also have their visibility toggled.

Extended by

• FeltController

Methods

getLayer()

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

Get a single layer from the map by its id.

Parameters

Returns

Promise<null | Layer>

The requested layer.

Example

const layers = await felt.getLayer({ ids: ["layer-1", "layer-2"] });

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

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

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

getLayerGroup()

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

Get a layer group from the map by its id.

Parameters

Returns

Promise<null | LayerGroup>

The requested layer group.

Example

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

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

Returns

Promise<void>

Example

felt.setLayerGroupVisibility({ show: ["layer-group-1", "layer-group-2"], hide: ["layer-group-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

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

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

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

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

Returns

Promise<Feature[]>

Example

const features = await felt.getRenderedFeatures();

Events

onLayerChange()

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

Adds a listener for when a layer changes.

Parameters

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

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

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

The parameters for the onLegendItemChange listener.

Properties

legendItem

legendItem: null |

The new data for the legend item or null if the legend item was removed.

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

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

Type declaration

embed()

Embeds a Felt map into the provided container.

Parameters

Returns

Promise<>

connect()

Binds to an existing Felt map iframe.

Parameters

Returns

Properties

uiControls?

optional uiControls:

initialViewport?

optional initialViewport:

token?

optional token: string

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

Index

Interfaces

Controller

Entity Node

Entity Nodes

References an element group.

Properties

type

type: "elementGroup"

entity

entity:

References an element on the map.

Properties

type

type: "element"

entity

entity: Element

EntityNode: | | | |

A reference to any kind of entity in the map.

Remarks

EntityNodes are used when you have some collection of entities and you need to

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

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

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

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

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

Returns

Promise<null | ElementGroup>

The requested element group.

Example

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

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

Returns

Promise<void>

Example

felt.setElementGroupVisibility({ show: ["element-group-1", "element-group-2"], hide: ["element-group-3"] });

getLayer()

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

Get a single layer from the map by its id.

Parameters

Returns

Promise<null | Layer>

The requested layer.

Example

const layers = await felt.getLayer({ ids: ["layer-1", "layer-2"] });

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

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

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

getLayerGroup()

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

Get a layer group from the map by its id.

Parameters

Returns

Promise<null | LayerGroup>

The requested layer group.

Example

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

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

Returns

Promise<void>

Example

felt.setLayerGroupVisibility({ show: ["layer-group-1", "layer-group-2"], hide: ["layer-group-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

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

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

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

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

Returns

Promise<Feature[]>

Example

const features = await felt.getRenderedFeatures();

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

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

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 }

updateUiControls()

updateUiControls(controls: UiControlsOptions): void

Updates the UI controls on the embedded map.

Parameters

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

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

Returns

void

Example

felt.setViewport({
  center: { latitude: 0, longitude: 0 },
  zoom: 10,
});

fitViewportToBounds()

fitViewportToBounds(bounds: ViewportFitBoundsParams): void

Fits the map to the specified bounds.

Parameters

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

onElementChange()

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

Adds a listener for when an element changes.

Parameters

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

onElementGroupChange()

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

Adds a listener for when an element group changes.

Parameters

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

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

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

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

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

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

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

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

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

Returns

VoidFunction

A function to unsubscribe from the listener

Example

const unsubscribe = felt.onMapIdle({ handler: () => console.log("map is idle") });

// later on...
unsubscribe();

References a feature on the map.

Properties

type

type: "feature"

entity

entity: Feature

The options for selecting a feature in a layer.

Properties

id

id: string | number

The id of the feature to select.

layerId

layerId: string

The id of the layer that the feature belongs to.

showPopup?

optional showPopup: boolean

Whether to show the feature's popup, if it is configured in the layer's style.

Default

true

fitViewport?

optional fitViewport: boolean | {maxZoom: number; }

Whether to center the view on the feature after selecting it.

When true, the viewport will be centered on the feature and zoomed to fit the feature in the viewport. If you need to control the zoom level to prevent it zooming in too far, you can pass an object with a maxZoom property.

This is useful for avoiding zooming in too far on point features, or if you want to maintain the current zoom level.

Default

true

References a layer on the map.

Properties

type

type: "layer"

entity

entity: Layer

References a layer group on the map.

Properties

type

type: "layerGroup"

entity

entity: LayerGroup

Geometry: PointGeometry | PolygonGeometry | LineStringGeometry | MultiLineStringGeometry | MultiPolygonGeometry

A GeoJSON-like geometry of any type

Properties

showLegend?

optional showLegend: boolean

Whether or not the legend is shown.

Default Value

true

cooperativeGestures?

optional cooperativeGestures: boolean

When co-operative gestures are enabled, the pan and zoom gestures are adjusted to work better when the map is embedded in another page.

Remarks

On mobile devices, enabling co-operative gestures will allow the user to pan past the embedded map with a single finger drag. To pan the map, they must use two fingers.

On desktop devices, enabling co-operative gestures allows the user to scroll past the embedded map using their scroll wheel or trackpad. To zoom the map, they must hold the Ctrl (Windows) or Command key (Mac) while scrolling.

Default Value

true

fullScreenButton?

optional fullScreenButton: boolean

Whether or not the full screen button is shown in an embedded map.

Remarks

When clicked, this will open the map in a new tab or window.

Default Value

true

geolocation?

optional geolocation: boolean

Whether or not the geolocation button is shown in an embedded map.

Remarks

The geolocation feature will plot your position on the map. If you click the button again, it will start tracking your position.

Default Value

false

zoomControls?

optional zoomControls: boolean

Whether or not the zoom controls are shown in an embedded map.

Remarks

This does not affect whether or not the map can be zoomed, just the display of the zoom controls in the bottom right corner of the map.

Default Value

true

scaleBar?

optional scaleBar: boolean

Whether or not the scale bar is shown in an embedded map.

Default Value

true

The Selection controller allows you to listen for changes to the selection on the map.

Extended by

• FeltController

Methods

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

Returns