The Elements controller allows you to get information about the elements on the map, and make changes to their visibility.
getElement(
id:string):Promise<null| >
Get a single element from the map by its id.
Use this method when you know the specific ID of an element and want to retrieve its current state. This is more efficient than getting all elements and filtering.
Promise<null | >
A promise that resolves to the requested element, or null if not found.
getElementGeometry(
id:string):Promise<null| >
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 and radius 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.
Use this method when you need the geometric representation of an element for spatial analysis or visualization purposes.
Promise<null | >
A promise that resolves to the element's geometry in GeoJSON format, or null if the element has no geometry.
getElements(
constraint?: ):Promise<(null| )[]>
Gets elements from the map, according to the constraints supplied. If no constraints are supplied, all elements will be returned.
Use this method to retrieve multiple elements, optionally filtered by constraints. This is useful for bulk operations or when you need to analyze all elements on the map.
Promise<(null | )[]>
A promise that resolves to an array of elements, ordered by the order specified in Felt.
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.
getElementGroup(
id:string):Promise<null| >
Get an element group from the map by its id.
Element groups allow you to organize related elements together and control their visibility as a unit.
Promise<null | >
A promise that resolves to the requested element group, or null if not found.
getElementGroups(
constraint?: ):Promise<(null| )[]>
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.
Use this method to retrieve multiple element groups, optionally filtered by constraints. This is useful for bulk operations on element groups.
Promise<(null | )[]>
A promise that resolves to an array of element groups in rendering order.
setElementGroupVisibility(
visibility: ):Promise<void>
Hide or show element groups with the given ids.
Use this method to control the visibility of multiple element groups at once. This is more efficient than hiding/showing individual elements.
Promise<void>
A promise that resolves when the visibility changes are applied.
createElement(
element: ):Promise<>
Create a new element on the map.
Use this method to programmatically create elements on the map. Elements created via the SDK are only available to the current session and are not persisted.
Promise<>
A promise that resolves to the created element.
updateElement(
element: ):Promise<>
Update an element on the map. The element type must be specified.
Use this method to modify existing elements. You can update properties like coordinates, styling, and metadata.
Promise<>
A promise that resolves to the updated element.
deleteElement(
id:string):Promise<void>
Delete an element from the map.
Use this method to remove elements from the map. This operation cannot be undone.
Promise<void>
A promise that resolves when the element is deleted.
onElementCreate(
args: {handler: (change: ) =>void; }):VoidFunction
Adds a listener for when an element is created.
This will fire when elements are created programmatically, 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.
VoidFunction
A function to unsubscribe from the listener.
onElementCreateEnd(
args: {handler: (params: {element: ; }) =>void; }):VoidFunction
Listens for when a new element is finished being created by a drawing tool.
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.
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.
VoidFunction
A function to unsubscribe from the listener.
onElementChange(
args: {options: {id:string; };handler: (change: ) =>void; }):VoidFunction
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 programmatically.
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.
VoidFunction
A function to unsubscribe from the listener.
onElementDelete(
args: {options: {id:string; };handler: () =>void; }):VoidFunction
Adds a listener for when an element is deleted.
Use this to react to element deletions, such as cleaning up related data or updating your application state.
VoidFunction
A function to unsubscribe from the listener.
onElementGroupChange(
args: {options: {id:string; };handler: (change: ) =>void; }):VoidFunction
Adds a listener for when an element group changes.
Use this to react to changes in element groups, such as when elements are added to or removed from groups.
VoidFunction
A function to unsubscribe from the listener.
Text, Note and Image elements do not return geometry, so will return null.
id
string
The id of the element you want to get.
id
string
The id of the element you want to get the geometry of.
constraint?
Optional constraints to apply to the elements returned from the map.
id
string
The id of the element group you want to get.
constraint?
Optional constraints to apply to the element groups returned from the map.
visibility
The visibility configuration for element groups.
element
The element configuration to create.
element
The element update configuration.
id
string
The id of the element to delete.
args
{ handler: (change: ElementChangeCallbackParams) => void; }
-
args.handler
(change: ElementChangeCallbackParams) => void
The handler that is called when an element is created. This will fire when elements are created programmatically, 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 `onElementCreateEnd` listener.
args
{ handler: (params: { element: Element; }) => void; }
-
args.handler
(params: { element: Element; }) => void
The handler to call whenever this event fires.
args
{ options: { id: string; }; handler: (change: ElementChangeCallbackParams) => void; }
-
args.options
{ id: string; }
-
args.options.id
string
The id of the element to listen for changes to.
args.handler
(change: ElementChangeCallbackParams) => void
The handler that is called when the element changes.
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.
args
{ options: { id: string; }; handler: (change: ElementGroupChangeCallbackParams) => void; }
args.options
{ id: string; }
args.options.id
string
args.handler
(change: ElementGroupChangeCallbackParams) => void
const element = await felt.getElement("element-1");const geometry = await felt.getElementGeometry("element-1");
console.log(geometry?.type, geometry?.coordinates);const elements = await felt.getElements();const elementGroup = await felt.getElementGroup("element-group-1");const elementGroups = await felt.getElementGroups({ ids: ["element-group-1", "element-group-2"] });felt.setElementGroupVisibility({ show: ["element-group-1", "element-group-2"], hide: ["element-group-3"] });const element = await felt.createElement({ type: "Place", coordinates: [10, 10] });// Update a place element's coordinates
await felt.updateElement({
id: "element-1",
type: "Place",
coordinates: [10, 20]
});
// Update a polygon's style
await felt.updateElement({
id: "element-2",
type: "Polygon",
color: "#ABC123",
fillOpacity: 0.5
});await felt.deleteElement("element-1");const unsubscribe = felt.onElementCreate({
handler: ({isBeingCreated, element}) => console.log(element.id),
});
// later on...
unsubscribe();const unsubscribe = felt.onElementCreateEnd({
handler: (params) => console.log(params),
});
// later on...
unsubscribe();const unsubscribe = felt.onElementChange({
options: { id: "element-1" },
handler: ({element}) => console.log(element.id),
});
// later on...
unsubscribe();const unsubscribe = felt.onElementDelete({
options: { id: "element-1" },
handler: () => console.log("element-1 deleted"),
});
// later on...
unsubscribe();const unsubscribe = felt.onElementGroupChange({
options: { id: "element-group-1" },
handler: elementGroup => console.log(elementGroup.id),
});
// later on...
unsubscribe();