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.

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

Index

Controller

• ElementsController

Element Groups

• ElementGroup

• GetElementGroupsConstraint

• ElementGroupChangeCallbackParams

Elements

• Element

• GetElementsConstraint

• ElementChangeCallbackParams

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 constraints to apply when getting elements.

Properties

ids?

optional ids: string[]

The ids of the elements to get.

The constraints to apply when getting element groups.

Properties

ids?

optional ids: string[]

The ids of the element groups to get.

The parameters for the onElementGroupChange listener.

Properties

elementGroup

elementGroup: null |

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

Extended by

Methods

getElement()

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

Get a single element from the map by its id.

Parameters

Returns

Promise<null | >

The requested element.

Example

getElementGeometry()

Get the geometry of an element.

Parameters

Returns

Example

getElements()

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

Parameters

Returns

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

getElementGroup()

Get an element group from the map by its id.

Parameters

Returns

The requested element group.

Example

getElementGroups()

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

The requested element groups.

Example

setElementGroupVisibility()

Hide or show element groups with the given ids.

Parameters

Returns

Promise<void>

Example

Events

onElementChange()

Adds a listener for when an element changes.

Parameters

Returns

VoidFunction

A function to unsubscribe from the listener

Example

onElementGroupChange()

Adds a listener for when an element group changes.

Parameters

Returns

VoidFunction

A function to unsubscribe from the listener

Example

The parameters for the onElementChange listener.

Properties

element

element: null |

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

Modules

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

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

The event object passed to the interaction listeners.

Properties

coordinate

coordinate: LatLng

The cursor position in world coordinates.

features

features: Feature[]

The vector features that are under the cursor.

rasterValues

rasterValues: RasterValue[]

The raster pixel values that are under the cursor.

FilterLogicGate: "and" | "or"

The constraints to apply when getting layer groups.

Properties

ids?

optional ids: string[]

The ids of the layer groups to get.

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

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

The parameters for the onLayerChange listener.

Properties

layer

layer: null | Layer

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

Constraints for the getRenderedFeatures method. If no constraints are provided, all rendered features will be returned.

Properties

layerIds?

optional layerIds: string[]

The ids of the layers to get rendered features for.

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

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

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

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

combined: Filters

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

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.

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

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]

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.

FeltBoundary

The constraints to apply when getting layers.

Properties

ids?

optional ids: string[]

The ids of the layers to get.

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.

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.

The parameters for the onLayerGroupChange listener.

Properties

layerGroup

layerGroup: null |

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

Methods

getLayer()

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

Get a single layer from the map by its id.

Parameters

Returns

Promise<null | >

The requested layer.

Example

getLayers()

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

Parameters

Returns

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

setLayerVisibility()

Hide or show layers with the given ids.

Parameters

Returns

Promise<void>

Example

getLayerGroup()

Get a layer group from the map by its id.

Parameters

Returns

The requested layer group.

Example

getLayerGroups()

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

The requested layer groups.

Example

setLayerGroupVisibility()

Hide or show layer groups with the given ids.

Parameters

Returns

Promise<void>

Example

getLegendItem()

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

Parameters

Returns

Example

getLegendItems()

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

Example

setLegendItemVisibility()

Hide or show legend items with the given identifiers.

Parameters

Returns

Promise<void>

Example

getLayerFilters()

Get the filters for a layer.

Parameters

Returns

Remarks

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

Example

setLayerFilters()

Sets the ephemeral filters for a layer.

Parameters

Returns

Promise<void>

Example

getRenderedFeatures()

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

Example

Events

onLayerChange()

Adds a listener for when a layer changes.

Parameters

Returns

VoidFunction

A function to unsubscribe from the listener

Example

onLayerGroupChange()

Adds a listener for when a layer group changes.

Parameters

Returns

VoidFunction

A function to unsubscribe from the listener

Example

onLegendItemChange()

Adds a listener for when a legend item changes.

Parameters

Returns

VoidFunction

A function to unsubscribe from the listener

Example

References an element on the map.

Properties

type

type: "element"

entity

entity: Element

References an element group.

Properties

type

type: "elementGroup"

entity

entity: ElementGroup

EntityNode: ElementNode | ElementGroupNode | LayerNode | LayerGroupNode | FeatureNode

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

Index

Controller

• SelectionController

Entity Node

• EntityNode

Entity Nodes

• ElementNode

• ElementGroupNode

• LayerNode

• LayerGroupNode

• FeatureNode

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

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.

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

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

Type declaration

embed()

Embeds a Felt map into the provided container.

Parameters

Returns

Promise<FeltController>

connect()

Binds to an existing Felt map iframe.

Parameters

Returns

Promise<FeltController>

References a feature on the map.

Properties

type

type: "feature"

entity

entity:

References a layer group on the map.

Properties

type

type: "layerGroup"

entity

entity:

References a layer on the map.

Properties

type

type: "layer"

entity

entity:

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

Extended by

Methods

getSelection()

getSelection(): Promise<[]>

Gets the current selection as a list of entity identifiers.

Returns

Promise<[]>

Example

Events

onSelectionChange()

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

Adds a listener for when the selection changes.

Parameters

Returns

VoidFunction

A function to unsubscribe from the listener

Example

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.

Properties

uiControls

uiControls:

initialViewport?

optional initialViewport:

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

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

Represents a point in world coordinates.

Properties

latitude

latitude: number

longitude

longitude: number

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.

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.

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

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

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