LogoLogo
Sign upHelp CenterContactSocial
JS SDK API Reference
JS SDK API Reference
  • API Reference
  • @feltmaps/js-sdk
  • Elements
    • CircleElementCreate
    • CircleElementRead
    • CircleElementUpdate
    • Element
    • ElementChangeCallbackParams
    • ElementCreate
    • ElementGroup
    • ElementGroupChangeCallbackParams
    • ElementUpdate
    • ElementsController
    • GetElementGroupsConstraint
    • GetElementsConstraint
    • HighlighterElementCreate
    • HighlighterElementRead
    • HighlighterElementUpdate
    • ImageElementCreate
    • ImageElementRead
    • ImageElementUpdate
    • LinkElementRead
    • MarkerElementCreate
    • MarkerElementRead
    • MarkerElementUpdate
    • NoteElementCreate
    • NoteElementRead
    • NoteElementUpdate
    • PathElementCreate
    • PathElementRead
    • PathElementUpdate
    • PlaceElementCreate
    • PlaceElementRead
    • PlaceElementUpdate
    • PolygonElementCreate
    • PolygonElementRead
    • PolygonElementUpdate
    • TextElementCreate
    • TextElementRead
    • TextElementUpdate
  • Interactions
    • InteractionsController
    • MapInteractionEvent
  • Layers
    • AggregationConfig
    • AggregationMethod
    • CreateLayersFromGeoJsonParams
    • DataOnlyLayer
    • FeltTiledVectorSource
    • FilterExpression
    • FilterLogicGate
    • FilterTernary
    • Filters
    • GeoJsonDataVectorSource
    • GeoJsonFileVectorSource
    • GeoJsonUrlVectorSource
    • GeometryFilter
    • GetLayerCalculationParams
    • GetLayerCategoriesGroup
    • GetLayerCategoriesParams
    • GetLayerGroupsConstraint
    • GetLayerHistogramBin
    • GetLayerHistogramParams
    • GetLayersConstraint
    • GetRenderedFeaturesConstraint
    • Layer
    • LayerBoundaries
    • LayerChangeCallbackParams
    • LayerCommon
    • LayerFeature
    • LayerFilters
    • LayerGroup
    • LayerGroupChangeCallbackParams
    • LayerProcessingStatus
    • LayerSchema
    • LayerSchemaAttribute
    • LayerSchemaBooleanAttribute
    • LayerSchemaCommonAttribute
    • LayerSchemaDateAttribute
    • LayerSchemaDateTimeAttribute
    • LayerSchemaNumericAttribute
    • LayerSchemaTextAttribute
    • LayersController
    • LegendItem
    • LegendItemChangeCallbackParams
    • LegendItemIdentifier
    • LegendItemsConstraint
    • MultiAggregationConfig
    • RasterBand
    • RasterLayer
    • RasterLayerSource
    • RasterValue
    • UpdateLayerParams
    • ValueConfiguration
    • VectorLayer
  • Main
    • Felt
    • FeltController
    • FeltEmbedOptions
  • Misc
    • MapDetails
    • MiscController
  • Selection
    • ElementGroupNode
    • ElementNode
    • EntityNode
    • FeatureNode
    • FeatureSelection
    • LayerGroupNode
    • LayerNode
    • SelectionController
  • Shared
    • FeltBoundary
    • FeltZoom
    • GeoJsonFeature
    • GeoJsonGeometry
    • GeoJsonProperties
    • LatLng
    • LineStringGeometry
    • LngLatTuple
    • MultiLineStringGeometry
    • MultiPointGeometry
    • MultiPolygonGeometry
    • PointGeometry
    • PolygonGeometry
    • SetVisibilityRequest
    • SortConfig
    • SortDirection
  • Tools
    • CircleToolSettings
    • ConfigurableToolType
    • HighlighterToolSettings
    • InputToolSettings
    • LineToolSettings
    • MarkerToolSettings
    • NoteToolSettings
    • PinToolSettings
    • PlaceFrame
    • PlaceSymbol
    • PolygonToolSettings
    • RouteToolSettings
    • TextToolSettings
    • ToolSettingsChangeEvent
    • ToolSettingsMap
    • ToolType
    • ToolsController
  • UI
    • OnMapInteractionsOptions
    • UiController
    • UiControlsOptions
  • Viewport
    • SetViewportCenterZoomParams
    • ViewportCenterZoom
    • ViewportConstraints
    • ViewportController
    • ViewportFitBoundsParams
    • ViewportState
Powered by GitBook
On this page
  • Extended by
  • Methods
  • getElement()
  • getElementGeometry()
  • getElements()
  • getElementGroup()
  • getElementGroups()
  • setElementGroupVisibility()
  • createElement()
  • updateElement()
  • deleteElement()
  • Events
  • onElementCreate()
  • onElementCreateEnd()
  • onElementChange()
  • onElementDelete()
  • onElementGroupChange()

Was this helpful?

Export as PDF
  1. Elements

ElementsController

PreviousElementUpdateNextGetElementGroupsConstraint

Last updated 27 days ago

Was this helpful?


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

Parameter
Type
Description

id

string

The id of the element you want to get.

Returns

Promise<null | >

The requested element.

Example

const element = await felt.getElement("element-1");

getElementGeometry()

Get the geometry of an element in GeoJSON geometry format.

For most element types, the geometry returned is based on the coordinates property of the element, with some differences:

  • For Circle elements, the geometry is a Polygon drawn from the center andradius properties.

  • Path elements become MultiLineString geometries.

  • Marker elements return a MultiLineString of the path traced by the user as they drew the marker. Note that this is not the polygon formed by filled-in "pen" stroke, which doesn't exactly follow the path traced by the user as it is smoothed and interpolated to create a continuous line.

  • Text, Note and Image elements do not return geometry, so will return null.

Parameters

Parameter
Type
Description

id

string

The id of the element you want to get the geometry of.

Returns

Example

const geometry = await felt.getElementGeometry("element-1");
console.log(geometry?.type, geometry?.coordinates);

getElements()

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?

The constraints to apply to the elements returned from the map.

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

const elements = await felt.getElements();

getElementGroup()

Get an element group from the map by its id.

Parameters

Parameter
Type

id

string

Returns

The requested element group.

Example

const elementGroup = await felt.getElementGroup("element-group-1");

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

Parameter
Type
Description

constraint?

The constraints to apply to the element groups returned from the map.

Returns

The requested element groups.

Example

const elementGroups = await felt.getElementGroups({ ids: ["element-group-1", "element-group-2"] });

setElementGroupVisibility()

Hide or show element groups with the given ids.

Parameters

Parameter
Type

visibility

Returns

Promise<void>

Example

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

createElement()

Create a new element on the map.

Parameters

Parameter
Type

element

Returns

Example

const element = await felt.createElement({ type: "Place", coordinates: [10, 10] });

updateElement()

Update an element on the map.

Parameters

Parameter
Type

element

Returns

Example

// Update a place element's coordinates
await felt.updateElement({
  id: "element-1",
  coordinates: [10, 20]
});

// Update a polygon's style
await felt.updateElement({
  id: "element-2",
  color: "#ABC123",
  fillOpacity: 0.5
});

deleteElement()

deleteElement(id: string): Promise<void>

Delete an element from the map.

Parameters

Parameter
Type

id

string

Returns

Promise<void>

Example

await felt.deleteElement("element-1");

Events

onElementCreate()

Adds a listener for when an element is created.

Parameters

Parameter
Type
Description

args

-

args.handler

Returns

VoidFunction

A function to unsubscribe from the listener

Example

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

// later on...
unsubscribe();

onElementCreateEnd()

Listens for when a new element is finished being created by a drawing tool.

For example, when creating a polygon, the user places a series of points then finishes by pressing Enter or Escape. Or when creating a Place element, they add the marker, type a label, then finally deselect the element.

Parameters

Parameter
Type
Description

args

-

args.handler

The handler to call whenever this event fires.

Returns

VoidFunction

A function to unsubscribe from the listener

Example

const unsubscribe = felt.onToolCreatedElement({
  handler: (params) => console.log(params),
});

// later on...
unsubscribe();

onElementChange()

Adds a listener for when an element changes.

This will fire when an element is being edited, either on the map by the user or programatically.

Parameters

Parameter
Type
Description

args

-

args.options

{ id: string; }

-

args.options.id

string

The id of the element to listen for changes to.

args.handler

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: () => console.log("element-1 deleted"),
});

// later on...
unsubscribe();

onElementGroupChange()

Adds a listener for when an element group changes.

Parameters

Parameter
Type

args

args.options

{ id: string; }

args.options.id

string

args.handler

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

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

Promise<null | >

getElements(constraint?: ): Promise<(null | )[]>

Promise<(null | )[]>

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

Promise<null | >

getElementGroups(constraint?: ): Promise<(null | )[]>

Promise<(null | )[]>

setElementGroupVisibility(visibility: ): Promise<void>

createElement(element: ): Promise<>

Promise<>

updateElement(element: ): Promise<>

Promise<>

onElementCreate(args: { handler: (change: ) => void; }): VoidFunction

{ handler: (change: ) => void; }

(change: ) => void

The handler that is called when an element is created. This will fire when elements are created programatically, or when the user starts creating an element with a drawing tool. When the user creates an element with a drawing tool, it can begin in an invalid state, such as if you've just placed a single point in a polygon. You can use the isBeingCreated property to determine if the element is still being created by a drawing tool. If you want to know when the element is finished being created, you can use the listener.

onElementCreateEnd(args: { handler: (params: { element: ; }) => void; }): VoidFunction

This differs from the listener, which fires whenever an element is first created. This fires when the user finishes creating an element which could be after a series of interactions.

{ handler: (params: { element: ; }) => void; }

(params: { element: ; }) => void

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

Like the listener, this will fire when an element is still being created by a drawing tool.

You can check the property to determine if the element is still being created by a drawing tool.

{ options: { id: string; }; handler: (change: ) => void; }

(change: ) => void

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

{ options: { id: string; }; handler: (change: ) => void; }

(change: ) => void

FeltController
Element
Element
GeoJsonGeometry
GeoJsonGeometry
GetElementsConstraint
Element
Element
ElementGroup
ElementGroup
GetElementGroupsConstraint
ElementGroup
ElementGroup
SetVisibilityRequest
ElementCreate
Element
Element
ElementUpdate
Element
Element
ElementChangeCallbackParams
Element
ElementChangeCallbackParams
ElementGroupChangeCallbackParams
`onElementCreate`
`onElementCreate`
GetElementsConstraint
GetElementGroupsConstraint
SetVisibilityRequest
ElementCreate
ElementUpdate
ElementChangeCallbackParams
ElementChangeCallbackParams
Element
Element
ElementChangeCallbackParams
ElementChangeCallbackParams
ElementGroupChangeCallbackParams
ElementGroupChangeCallbackParams
`onElementCreateEnd`
`isBeingCreated`