LayersController

---

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

Parameter	Type	Description
id	string	The id of the layer you want to get.

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

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

---

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

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

---

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

Events

onLayerChange()

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

Adds a listener for when a layer changes.

Parameters

Parameter	Type	Description
args	object	-
args.options	object	-
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	object
args.options	object
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	object
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();