diff --git a/.changeset/empty-camels-pay.md b/.changeset/empty-camels-pay.md new file mode 100644 index 00000000..205d9f63 --- /dev/null +++ b/.changeset/empty-camels-pay.md @@ -0,0 +1,5 @@ +--- +"@feltmaps/js-sdk": minor +--- + +Add feature actions diff --git a/.changeset/pre.json b/.changeset/pre.json new file mode 100644 index 00000000..83a8e451 --- /dev/null +++ b/.changeset/pre.json @@ -0,0 +1,11 @@ +{ + "mode": "exit", + "tag": "next", + "initialVersions": { + "@feltmaps/js-sdk": "1.9.0" + }, + "changesets": [ + "empty-camels-pay", + "sharp-files-dance" + ] +} diff --git a/.changeset/sharp-files-dance.md b/.changeset/sharp-files-dance.md new file mode 100644 index 00000000..5cbce2ca --- /dev/null +++ b/.changeset/sharp-files-dance.md @@ -0,0 +1,5 @@ +--- +"@feltmaps/js-sdk": minor +--- + +Add duplicateLayer method diff --git a/CHANGELOG.md b/CHANGELOG.md index 78d45e21..c5e4c626 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,23 @@ # @feltmaps/js-sdk +## 1.10.0-next.1 + +### Minor Changes + +- 34b9ed3: Add feature actions + +## 1.10.0-next.0 + +### Minor Changes + +- 3d9527b: Add duplicateLayer method + +## 1.9.0 + +### Minor Changes + +- 7e4034f: Add support for legendDisplay on the layer + ## 1.8.0 ### Minor Changes diff --git a/DEVELOPING.md b/DEVELOPING.md index 0656f32e..fc828d9b 100644 --- a/DEVELOPING.md +++ b/DEVELOPING.md @@ -70,12 +70,13 @@ Once you have added your module: 1. Run `npm run build` to ensure everything compiles and the docs are generated. It's possible for the docs to fail to build if some types are not exported, but you will be warned in the console about this. -1. Run `npm run update-api` to run api-extractor which updates the "api spec" file, which allows +2. Run `npm run update-api` to run api-extractor which updates the "api spec" file, which allows reviewers to understand the changes made to the API. -1. Stage or commit your changes. This is important, because the next step will fail if you have +3. Stage or commit your changes. This is important, because the next step will fail if you have docs changes that are unstaged as it is used to check that the docs are up to date. -1. Run `npm run check` which will check that the package is correctly built, the docs have been +4. Run `npm run check` which will check that the package is correctly built, the docs have been updated, the API spec has been updated and the tests are passing. +5. If you make any further changes, run steps 1 to 4 again. If this all works, your module is ready and should be working. diff --git a/docs-minimal/CHANGELOG.md b/docs-minimal/CHANGELOG.md new file mode 100644 index 00000000..43c682d5 --- /dev/null +++ b/docs-minimal/CHANGELOG.md @@ -0,0 +1,157 @@ +# @feltmaps/js-sdk + +## 1.10.0-next.1 + +### Minor Changes + +* 34b9ed3: Add feature actions + +## 1.10.0-next.0 + +### Minor Changes + +* 3d9527b: Add duplicateLayer method + +## 1.9.0 + +### Minor Changes + +* 7e4034f: Add support for legendDisplay on the layer + +## 1.8.0 + +### Minor Changes + +* 336538b: Improve controller method documentation + +### Patch Changes + +* 7b04db4: Update filter docs + +## 1.7.0 + +### Minor Changes + +* f40a75c: Update getPrecomputedAggregates types +* 4c4ebfd: Add UIIframeElement to custom ui panel +* b87393f: Better docs, types and method consistency for Custom Panels API +* aff926a: Return UIPanel on custom panel API methods +* f5ca219: Speed up initial Felt/SDK connection +* 0b06e28: Add support for align and distribute items on grid container +* bd1952f: Merge create and update panel methods and require using createPanelId +* 27cc597: Add UIGridContainerElement to custom ui panel +* f2fcd2a: Add checkbox, radio and toggle controls to custom ui panel +* 15a35a5: Add method getPrecomputedAggregates +* 6ce4a76: Rename UIPanel onClose to onClickClose +* c16c55a: Support disabled on custom ui control option +* 2688f9c: Add UIButtonRowElement to custom ui panel +* 49d8895: Add Custom UI API for action triggers +* 0754363: Add new variants, drop thin variants and add tint prop to UIButtonElement +* 535e539: Include element id on every custom ui callback args +* b848937: Add tool setting to hide/show inspector +* 1e8e6f1: Return UIActionTrigger on custom action trigger API methods +* 2b0f08f: Add Custom UI API for panels +* f73dccf: Remove UIButtonGroupElement from custom ui panel + +### Patch Changes + +* 58bd6dd: Add isDeterministicId to LayerFeature +* 07b27c6: Export bundled controller types file for consumption as single file +* 41e1612: Update getAggregates examples to be correct +* 475c98e: Update getAggregates + MultiAggregationConfig docs +* ea5c7ff: Run patch on prepare, not install +* 4c83cfe: Don't try to patch packages not in dev mode +* 2008356: Documentation improvements +* 2fd720d: Use singular for custom ui types +* a1c6322: Make custom panel API consistent with other methods + +## 1.6.0 + +### Minor Changes + +* 160ca6d: Implement getFeatures method on LayersController +* 6a1e536: Widen allowed boundary types +* 56077be: Add setLayerBoundary, getLayerBoundaries, onLayerBoundaryChange + +## 1.5.1 + +### Patch Changes + +* ac68984: Update getLayerSchema example + +## 1.5.0 + +### Minor Changes + +* d327b46: Add `afterCreation` option in pin tool settings to control what happens after creating a Place +* 6a66d40: Add updateLayer and expand createLayersFromGeoJson options +* 6504fea: Change documentation for getElementGeoemtry to document Highlighter and Marker functionality, and allow holes in Highlighter geometry +* cf6711e: Make programmatic element CRUD types more accurate +* 4c83c60: Add programmatic element creation, editing and deletion +* 46e8ddc: Add onElementChange and onElementDelete +* 3e87812: Adds APIs to use Felt's drawing tools on read-only maps +* d877a83: Add getFeature for getting a single feature as GeoJSON with full detail geometry +* 7f1d6aa: Add "interaction" to element schema +* cf1dd7c: Improve Text and Note types and docs +* 1f6a386: Add getViewportConstraints and setViewportConstraints methods definition +* b059b70: Add onLayerFiltersChange to allow listening to changes to layer filters, be it ephemeral, style or widget filters that changed. +* 19b41ce: Improve createLayer API +* c20e605: Add setLayerLegendVisibility and setLayerGroupLegendVisibility methods definition +* cbfd3fd: Reject promises when method handlers are invalid +* 0915f48: Add showLayerDataTable and hideLayerDataTable methods +* 9620df9: Change Circle.coordinates for Circle.center +* 63c3042: Add getLayerSchema method +* 69cc0a9: Fix spelling mistake in types +* 87304d8: Fix geometry filter type +* 1f22654: Add screen point to pointer events +* b0e4149: Improves type readability and docs +* 65bf269: Add createLayer and deleteLayer +* 4bd0ae9: Add getMapDetails method definition +* 5f903fb: Update Layer type and createLayerFromGeoJson to separate out Source concept +* 597a8d6: Return coordinates on Circle and Place elements as they are only a single point. +* f2f4289: Add layer stats methods + +### Patch Changes + +* 993fd44: Allow workers to be SDK clients +* 417b8f4: Fixes incorrect value in documentation and updates links to other methods +* 9620df9: Improve element docs +* f0892c4: Improve documentation +* bb79037: Fix per-geometry styling for created layers + +## 1.4.0 + +### Minor Changes + +* 555a25a: Add clearSelection method +* 1f5d950: Add option to pass auth token when embedding + +## 1.3.0 + +### Minor Changes + +* 4bbde62: Allow setting a note to show with layer filters + +## 1.2.0 + +### Minor Changes + +* 7badd4b: Add onMapIdle event +* 41efd53: Add selectFeature method to select feature by layer and feature ID +* 208c492: Add areaQuery param to getRenderedFeatures + +## 1.1.0 + +### Minor Changes + +* 5f607ec: Return style with layers, and allow updating layer styles via setLayerStyle + +### Patch Changes + +* 3a8bec8: Fix API reference link in README + +## 1.0.2 + +### Major Changes + +* Release v1 of Felt JS SDK diff --git a/docs-minimal/README.md b/docs-minimal/README.md new file mode 100644 index 00000000..feb182a6 --- /dev/null +++ b/docs-minimal/README.md @@ -0,0 +1,30 @@ +# API Reference + +To get started: + +``` +import { Felt } from "@feltmaps/js-sdk"; + +const felt = await Felt.embed( + document.querySelector("#container"), + "FELT_MAP_ID", + { + uiControls: { + cooperativeGestures: false, + fullScreenButton: false, + showLegend: false, + }, + } +); +const layers = await map.getLayers(); +``` + +**View Main.FeltController | FeltController for a complete list of available functions. Main.FeltEmbedOptions | FeltEmbedOptions enumerates initialization options.** + +# Documents + +* [CHANGELOG](CHANGELOG.md) + +# Modules + +* [client](client.md) diff --git a/docs-minimal/_media/button-row-end-alignment.png b/docs-minimal/_media/button-row-end-alignment.png new file mode 100644 index 00000000..bfb21875 Binary files /dev/null and b/docs-minimal/_media/button-row-end-alignment.png differ diff --git a/docs-minimal/_media/button-row-label.png b/docs-minimal/_media/button-row-label.png new file mode 100644 index 00000000..d091aa2c Binary files /dev/null and b/docs-minimal/_media/button-row-label.png differ diff --git a/docs-minimal/_media/button-row-overflow.png b/docs-minimal/_media/button-row-overflow.png new file mode 100644 index 00000000..a14c8c9e Binary files /dev/null and b/docs-minimal/_media/button-row-overflow.png differ diff --git a/docs-minimal/_media/button-row-start-alignment.png b/docs-minimal/_media/button-row-start-alignment.png new file mode 100644 index 00000000..d16bbc6c Binary files /dev/null and b/docs-minimal/_media/button-row-start-alignment.png differ diff --git a/docs-minimal/_media/button-row-with-grid-container.png b/docs-minimal/_media/button-row-with-grid-container.png new file mode 100644 index 00000000..7c6c9d32 Binary files /dev/null and b/docs-minimal/_media/button-row-with-grid-container.png differ diff --git a/docs-minimal/_media/button-showcase.png b/docs-minimal/_media/button-showcase.png new file mode 100644 index 00000000..6f312d70 Binary files /dev/null and b/docs-minimal/_media/button-showcase.png differ diff --git a/docs-minimal/_media/checkbox-group-basic.png b/docs-minimal/_media/checkbox-group-basic.png new file mode 100644 index 00000000..06c266b6 Binary files /dev/null and b/docs-minimal/_media/checkbox-group-basic.png differ diff --git a/docs-minimal/_media/grid-flexible-space.png b/docs-minimal/_media/grid-flexible-space.png new file mode 100644 index 00000000..18180ec0 Binary files /dev/null and b/docs-minimal/_media/grid-flexible-space.png differ diff --git a/docs-minimal/_media/grid-horizontal-stack.png b/docs-minimal/_media/grid-horizontal-stack.png new file mode 100644 index 00000000..01b22c4e Binary files /dev/null and b/docs-minimal/_media/grid-horizontal-stack.png differ diff --git a/docs-minimal/_media/grid-two-groups-of-buttons.png b/docs-minimal/_media/grid-two-groups-of-buttons.png new file mode 100644 index 00000000..9996e3d5 Binary files /dev/null and b/docs-minimal/_media/grid-two-groups-of-buttons.png differ diff --git a/docs-minimal/_media/iframe-basic.png b/docs-minimal/_media/iframe-basic.png new file mode 100644 index 00000000..0e3fe081 Binary files /dev/null and b/docs-minimal/_media/iframe-basic.png differ diff --git a/docs-minimal/_media/iframe-custom-height.png b/docs-minimal/_media/iframe-custom-height.png new file mode 100644 index 00000000..eefda968 Binary files /dev/null and b/docs-minimal/_media/iframe-custom-height.png differ diff --git a/docs-minimal/_media/legend-default.png b/docs-minimal/_media/legend-default.png new file mode 100644 index 00000000..9090992d Binary files /dev/null and b/docs-minimal/_media/legend-default.png differ diff --git a/docs-minimal/_media/legend-name-only.png b/docs-minimal/_media/legend-name-only.png new file mode 100644 index 00000000..7275b3ae Binary files /dev/null and b/docs-minimal/_media/legend-name-only.png differ diff --git a/docs-minimal/_media/radio-group-basic.png b/docs-minimal/_media/radio-group-basic.png new file mode 100644 index 00000000..6d01762e Binary files /dev/null and b/docs-minimal/_media/radio-group-basic.png differ diff --git a/docs-minimal/_media/toggle-group-basic.png b/docs-minimal/_media/toggle-group-basic.png new file mode 100644 index 00000000..f0c95533 Binary files /dev/null and b/docs-minimal/_media/toggle-group-basic.png differ diff --git a/docs-minimal/_media/toggle-group-end-alignment.png b/docs-minimal/_media/toggle-group-end-alignment.png new file mode 100644 index 00000000..441d36ef Binary files /dev/null and b/docs-minimal/_media/toggle-group-end-alignment.png differ diff --git a/docs-minimal/_media/toggle-group-with-label.png b/docs-minimal/_media/toggle-group-with-label.png new file mode 100644 index 00000000..ce8bae66 Binary files /dev/null and b/docs-minimal/_media/toggle-group-with-label.png differ diff --git a/docs-minimal/client.md b/docs-minimal/client.md new file mode 100644 index 00000000..ecf96e64 --- /dev/null +++ b/docs-minimal/client.md @@ -0,0 +1,16417 @@ +# Other + +## PlaceElementCreate + +### Properties + +#### type + +> **type**: `"Place"` + +#### coordinates + +> **coordinates**: [`LngLatTuple`](client.md#lnglattuple) + +#### groupId? + +> `optional` **groupId**: `null` | `string` + +The ID of the element group that the element belongs to. +For elements that are not part of a group, this will be null. + +#### color? + +> `optional` **color**: `string` + +The color of the element in some CSS-like format. + +##### Example + +```typescript +"#ABC123"; +"rgb(255, 0, 0)"; +"hsl(200, 100%, 50%)"; +``` + +##### Default + +```ts +"#C93535" +``` + +#### name? + +> `optional` **name**: `null` | `string` + +The element's name. For elements that can show a label or text on +the map (e.g. a Place or Text element) this is the text that will be shown. + +For elements such as Polygons or Paths, the name is what is shown when +the element is selected by clicking on it. + +#### description? + +> `optional` **description**: `null` | `string` + +Text describing the element, which is shown in an element's popup when it +is selected. + +Note that some elements are not selectable on the map, such as Notes, Text +and Markers, so their description will not be shown. + +#### attributes? + +> `optional` **attributes**: `Record`\<`string`, `unknown`> + +A set of key-value pairs that can be used to store arbitrary data about the element. + +This is most useful for associating additional data with an element that is not +part of the element's core data, such as a Place's address or some other +data. + +#### interaction? + +> `optional` **interaction**: `"default"` | `"locked"` + +Whether the element is interactive. + +The `default` interaction mode means that the element can be selected and edited by +the user, if it was created by the SDK or by the user using a tool. + +If the interaction mode is `locked`, the element will not be editable by the user, +which is often used for elements that you don't want the user to edit or move by +accident. + +Elements that were created by the map author (i.e. not during an SDK "session") are +not editable and have special behaviour depending on their name, description and +attributes. + +##### Default + +```ts +"default" +``` + +#### imageUrl? + +> `optional` **imageUrl**: `null` | `string` + +The URL of an image that has been added to the element. + +#### symbol? + +> `optional` **symbol**: `string` + +The symbol that is rendered for the Place. + +This can be an emoji by using colon-enclosed characters (e.g. `":smiley:"`) +or one of the symbols available in Felt's symbol library. + +You can see the available symbols in the Felt UI when editing a Place +by hovering a symbol and converting the tooltip to kebab-case. For example, +the "Oil barrel" symbol is `oil-barrel`. + +#### frame? + +> `optional` **frame**: `null` | `"frame-circle"` | `"frame-square"` + +The frame that is rendered around the Place's symbol. This is +only available for non-emoji symbols. + +#### hideLabel? + +> `optional` **hideLabel**: `boolean` + +Whether the element's label is hidden on the map. This allows you +to add a name to the element and can show in popups, but not have +it visible on the map. + +This will also hide the faint placeholder label that is shown when +an editable Place is selected. + +##### Default + +```ts +false +``` + +## PathElementCreate + +### Properties + +#### type + +> **type**: `"Path"` + +#### coordinates + +> **coordinates**: [`LngLatTuple`](client.md#lnglattuple)\[]\[] + +#### groupId? + +> `optional` **groupId**: `null` | `string` + +The ID of the element group that the element belongs to. +For elements that are not part of a group, this will be null. + +#### color? + +> `optional` **color**: `string` + +The color of the element in some CSS-like format. + +##### Example + +```typescript +"#ABC123"; +"rgb(255, 0, 0)"; +"hsl(200, 100%, 50%)"; +``` + +##### Default + +```ts +"#C93535" +``` + +#### name? + +> `optional` **name**: `null` | `string` + +The element's name. For elements that can show a label or text on +the map (e.g. a Place or Text element) this is the text that will be shown. + +For elements such as Polygons or Paths, the name is what is shown when +the element is selected by clicking on it. + +#### description? + +> `optional` **description**: `null` | `string` + +Text describing the element, which is shown in an element's popup when it +is selected. + +Note that some elements are not selectable on the map, such as Notes, Text +and Markers, so their description will not be shown. + +#### attributes? + +> `optional` **attributes**: `Record`\<`string`, `unknown`> + +A set of key-value pairs that can be used to store arbitrary data about the element. + +This is most useful for associating additional data with an element that is not +part of the element's core data, such as a Place's address or some other +data. + +#### interaction? + +> `optional` **interaction**: `"default"` | `"locked"` + +Whether the element is interactive. + +The `default` interaction mode means that the element can be selected and edited by +the user, if it was created by the SDK or by the user using a tool. + +If the interaction mode is `locked`, the element will not be editable by the user, +which is often used for elements that you don't want the user to edit or move by +accident. + +Elements that were created by the map author (i.e. not during an SDK "session") are +not editable and have special behaviour depending on their name, description and +attributes. + +##### Default + +```ts +"default" +``` + +#### imageUrl? + +> `optional` **imageUrl**: `null` | `string` + +The URL of an image that has been added to the element. + +#### strokeOpacity? + +> `optional` **strokeOpacity**: `number` + +A value between 0 and 1 that describes the opacity of the element's stroke. + +##### Default + +```ts +1 +``` + +#### strokeWidth? + +> `optional` **strokeWidth**: `number` + +The width of the element's stroke in pixels. + +##### Default + +```ts +2 +``` + +#### strokeStyle? + +> `optional` **strokeStyle**: `"solid"` | `"dashed"` | `"dotted"` + +The style of the element's stroke. + +##### Default + +```ts +"solid" +``` + +#### distanceMarker? + +> `optional` **distanceMarker**: `boolean` + +Whether a distance marker is shown at the midpoint of the path. + +##### Default + +```ts +false +``` + +#### routingMode? + +> `optional` **routingMode**: `null` | `"driving"` | `"cycling"` | `"walking"` | `"flying"` + +Whether this represents a route, and if so, what mode of transport +is used. + +If this is `null`, the path is not considered to be a route, so while it +can have a `distanceMarker`, it will does not have a start or end cap. + +##### Default + +```ts +null +``` + +#### endCaps? + +> `optional` **endCaps**: `boolean` + +Whether or not to show Start and End caps on the path. This is +only available if the `routingMode` is set. + +##### Default + +```ts +false +``` + +## PolygonElementCreate + +### Properties + +#### type + +> **type**: `"Polygon"` + +#### coordinates + +> **coordinates**: [`LngLatTuple`](client.md#lnglattuple)\[]\[] + +#### groupId? + +> `optional` **groupId**: `null` | `string` + +The ID of the element group that the element belongs to. +For elements that are not part of a group, this will be null. + +#### color? + +> `optional` **color**: `string` + +The color of the element in some CSS-like format. + +##### Example + +```typescript +"#ABC123"; +"rgb(255, 0, 0)"; +"hsl(200, 100%, 50%)"; +``` + +##### Default + +```ts +"#C93535" +``` + +#### name? + +> `optional` **name**: `null` | `string` + +The element's name. For elements that can show a label or text on +the map (e.g. a Place or Text element) this is the text that will be shown. + +For elements such as Polygons or Paths, the name is what is shown when +the element is selected by clicking on it. + +#### description? + +> `optional` **description**: `null` | `string` + +Text describing the element, which is shown in an element's popup when it +is selected. + +Note that some elements are not selectable on the map, such as Notes, Text +and Markers, so their description will not be shown. + +#### attributes? + +> `optional` **attributes**: `Record`\<`string`, `unknown`> + +A set of key-value pairs that can be used to store arbitrary data about the element. + +This is most useful for associating additional data with an element that is not +part of the element's core data, such as a Place's address or some other +data. + +#### interaction? + +> `optional` **interaction**: `"default"` | `"locked"` + +Whether the element is interactive. + +The `default` interaction mode means that the element can be selected and edited by +the user, if it was created by the SDK or by the user using a tool. + +If the interaction mode is `locked`, the element will not be editable by the user, +which is often used for elements that you don't want the user to edit or move by +accident. + +Elements that were created by the map author (i.e. not during an SDK "session") are +not editable and have special behaviour depending on their name, description and +attributes. + +##### Default + +```ts +"default" +``` + +#### imageUrl? + +> `optional` **imageUrl**: `null` | `string` + +The URL of an image that has been added to the element. + +#### strokeOpacity? + +> `optional` **strokeOpacity**: `number` + +A value between 0 and 1 that describes the opacity of the element's stroke. + +##### Default + +```ts +1 +``` + +#### strokeWidth? + +> `optional` **strokeWidth**: `number` + +The width of the element's stroke in pixels. + +##### Default + +```ts +2 +``` + +#### strokeStyle? + +> `optional` **strokeStyle**: `"solid"` | `"dashed"` | `"dotted"` + +The style of the element's stroke. + +##### Default + +```ts +"solid" +``` + +#### fillOpacity? + +> `optional` **fillOpacity**: `number` + +The opacity of the polygon's fill, between 0 and 1. + +##### Default + +```ts +0.25 +``` + +#### areaMarker? + +> `optional` **areaMarker**: `boolean` + +Whether to show an area marker on the polygon. + +##### Default + +```ts +false +``` + +## CircleElementCreate + +### Properties + +#### type + +> **type**: `"Circle"` + +#### radius + +> **radius**: `number` + +The radius of the circle in meters. + +#### center + +> **center**: [`LngLatTuple`](client.md#lnglattuple) + +The center of the circle. + +#### groupId? + +> `optional` **groupId**: `null` | `string` + +The ID of the element group that the element belongs to. +For elements that are not part of a group, this will be null. + +#### color? + +> `optional` **color**: `string` + +The color of the element in some CSS-like format. + +##### Example + +```typescript +"#ABC123"; +"rgb(255, 0, 0)"; +"hsl(200, 100%, 50%)"; +``` + +##### Default + +```ts +"#C93535" +``` + +#### name? + +> `optional` **name**: `null` | `string` + +The element's name. For elements that can show a label or text on +the map (e.g. a Place or Text element) this is the text that will be shown. + +For elements such as Polygons or Paths, the name is what is shown when +the element is selected by clicking on it. + +#### description? + +> `optional` **description**: `null` | `string` + +Text describing the element, which is shown in an element's popup when it +is selected. + +Note that some elements are not selectable on the map, such as Notes, Text +and Markers, so their description will not be shown. + +#### attributes? + +> `optional` **attributes**: `Record`\<`string`, `unknown`> + +A set of key-value pairs that can be used to store arbitrary data about the element. + +This is most useful for associating additional data with an element that is not +part of the element's core data, such as a Place's address or some other +data. + +#### interaction? + +> `optional` **interaction**: `"default"` | `"locked"` + +Whether the element is interactive. + +The `default` interaction mode means that the element can be selected and edited by +the user, if it was created by the SDK or by the user using a tool. + +If the interaction mode is `locked`, the element will not be editable by the user, +which is often used for elements that you don't want the user to edit or move by +accident. + +Elements that were created by the map author (i.e. not during an SDK "session") are +not editable and have special behaviour depending on their name, description and +attributes. + +##### Default + +```ts +"default" +``` + +#### imageUrl? + +> `optional` **imageUrl**: `null` | `string` + +The URL of an image that has been added to the element. + +#### strokeOpacity? + +> `optional` **strokeOpacity**: `number` + +A value between 0 and 1 that describes the opacity of the element's stroke. + +##### Default + +```ts +1 +``` + +#### strokeWidth? + +> `optional` **strokeWidth**: `number` + +The width of the element's stroke in pixels. + +##### Default + +```ts +2 +``` + +#### strokeStyle? + +> `optional` **strokeStyle**: `"solid"` | `"dashed"` | `"dotted"` + +The style of the element's stroke. + +##### Default + +```ts +"solid" +``` + +#### radiusMarker? + +> `optional` **radiusMarker**: `boolean` + +Whether to show a marker on the circle that indicates the radius + +##### Default + +```ts +false +``` + +#### radiusDisplayAngle? + +> `optional` **radiusDisplayAngle**: `number` + +The angle at which the control point for setting the radius is displayed, +in degrees. When the `radiusMarker` is `true`, there is a dotted line rendered +from the center of the circle to the control point, and the marker is shown +at the midpoint of this line. + +##### Default + +```ts +90 +``` + +#### radiusDisplayUnit? + +> `optional` **radiusDisplayUnit**: `null` | `"meter"` | `"kilometer"` | `"foot"` | `"mile"` + +The unit of the radius used when the `radiusMarker` is `true`. + +A value of `null` means that the unit matches the user's locale. + +##### Default + +```ts +null +``` + +#### fillOpacity? + +> `optional` **fillOpacity**: `number` + +The opacity of the circle's fill. + +##### Default + +```ts +0.25 +``` + +## MarkerElementCreate + +### Properties + +#### type + +> **type**: `"Marker"` + +#### coordinates + +> **coordinates**: [`LngLatTuple`](client.md#lnglattuple)\[]\[] + +#### groupId? + +> `optional` **groupId**: `null` | `string` + +The ID of the element group that the element belongs to. +For elements that are not part of a group, this will be null. + +#### color? + +> `optional` **color**: `string` + +The color of the element in some CSS-like format. + +##### Example + +```typescript +"#ABC123"; +"rgb(255, 0, 0)"; +"hsl(200, 100%, 50%)"; +``` + +##### Default + +```ts +"#C93535" +``` + +#### name? + +> `optional` **name**: `null` | `string` + +The element's name. For elements that can show a label or text on +the map (e.g. a Place or Text element) this is the text that will be shown. + +For elements such as Polygons or Paths, the name is what is shown when +the element is selected by clicking on it. + +#### description? + +> `optional` **description**: `null` | `string` + +Text describing the element, which is shown in an element's popup when it +is selected. + +Note that some elements are not selectable on the map, such as Notes, Text +and Markers, so their description will not be shown. + +#### attributes? + +> `optional` **attributes**: `Record`\<`string`, `unknown`> + +A set of key-value pairs that can be used to store arbitrary data about the element. + +This is most useful for associating additional data with an element that is not +part of the element's core data, such as a Place's address or some other +data. + +#### interaction? + +> `optional` **interaction**: `"default"` | `"locked"` + +Whether the element is interactive. + +The `default` interaction mode means that the element can be selected and edited by +the user, if it was created by the SDK or by the user using a tool. + +If the interaction mode is `locked`, the element will not be editable by the user, +which is often used for elements that you don't want the user to edit or move by +accident. + +Elements that were created by the map author (i.e. not during an SDK "session") are +not editable and have special behaviour depending on their name, description and +attributes. + +##### Default + +```ts +"default" +``` + +#### opacity? + +> `optional` **opacity**: `number` + +The opacity of the marker, between 0 and 1. + +##### Default + +```ts +1 +``` + +#### size? + +> `optional` **size**: `number` + +The size of the marker, used in conjunction with the `zoom` to determine +the actual size of the marker. + +##### Default + +```ts +10 +``` + +#### zoom? + +> `optional` **zoom**: `number` + +The zoom level at which the marker was created. This is combined with +the `size` to determine the actual size of the marker. + +When creating a marker, if you don't supply this value it defaults to +the current zoom of the map when you call `createElement`. + +## HighlighterElementCreate + +### Properties + +#### type + +> **type**: `"Highlighter"` + +#### coordinates + +> **coordinates**: [`LngLatTuple`](client.md#lnglattuple)\[]\[]\[] + +A multipolygon describing the area that is highlighted. + +If `renderHoles` is set to false, only the outer ring of each polygon +will be rendered, filling in the area inside the highlighted region. + +#### groupId? + +> `optional` **groupId**: `null` | `string` + +The ID of the element group that the element belongs to. +For elements that are not part of a group, this will be null. + +#### color? + +> `optional` **color**: `string` + +The color of the element in some CSS-like format. + +##### Example + +```typescript +"#ABC123"; +"rgb(255, 0, 0)"; +"hsl(200, 100%, 50%)"; +``` + +##### Default + +```ts +"#C93535" +``` + +#### name? + +> `optional` **name**: `null` | `string` + +The element's name. For elements that can show a label or text on +the map (e.g. a Place or Text element) this is the text that will be shown. + +For elements such as Polygons or Paths, the name is what is shown when +the element is selected by clicking on it. + +#### description? + +> `optional` **description**: `null` | `string` + +Text describing the element, which is shown in an element's popup when it +is selected. + +Note that some elements are not selectable on the map, such as Notes, Text +and Markers, so their description will not be shown. + +#### attributes? + +> `optional` **attributes**: `Record`\<`string`, `unknown`> + +A set of key-value pairs that can be used to store arbitrary data about the element. + +This is most useful for associating additional data with an element that is not +part of the element's core data, such as a Place's address or some other +data. + +#### interaction? + +> `optional` **interaction**: `"default"` | `"locked"` + +Whether the element is interactive. + +The `default` interaction mode means that the element can be selected and edited by +the user, if it was created by the SDK or by the user using a tool. + +If the interaction mode is `locked`, the element will not be editable by the user, +which is often used for elements that you don't want the user to edit or move by +accident. + +Elements that were created by the map author (i.e. not during an SDK "session") are +not editable and have special behaviour depending on their name, description and +attributes. + +##### Default + +```ts +"default" +``` + +#### renderHoles? + +> `optional` **renderHoles**: `boolean` + +Whether to render the holes of the highlighted area. + +##### Default + +```ts +false +``` + +#### opacity? + +> `optional` **opacity**: `number` + +The opacity of the highlighter, between 0 and 1. + +##### Default + +```ts +0.5 +``` + +## TextElementCreate + +### Properties + +#### type + +> **type**: `"Text"` + +#### text + +> **text**: `string` + +#### groupId? + +> `optional` **groupId**: `null` | `string` + +The ID of the element group that the element belongs to. +For elements that are not part of a group, this will be null. + +#### color? + +> `optional` **color**: `string` + +The color of the element in some CSS-like format. + +##### Example + +```typescript +"#ABC123"; +"rgb(255, 0, 0)"; +"hsl(200, 100%, 50%)"; +``` + +##### Default + +```ts +"#C93535" +``` + +#### description? + +> `optional` **description**: `null` | `string` + +Text describing the element, which is shown in an element's popup when it +is selected. + +Note that some elements are not selectable on the map, such as Notes, Text +and Markers, so their description will not be shown. + +#### attributes? + +> `optional` **attributes**: `Record`\<`string`, `unknown`> + +A set of key-value pairs that can be used to store arbitrary data about the element. + +This is most useful for associating additional data with an element that is not +part of the element's core data, such as a Place's address or some other +data. + +#### interaction? + +> `optional` **interaction**: `"default"` | `"locked"` + +Whether the element is interactive. + +The `default` interaction mode means that the element can be selected and edited by +the user, if it was created by the SDK or by the user using a tool. + +If the interaction mode is `locked`, the element will not be editable by the user, +which is often used for elements that you don't want the user to edit or move by +accident. + +Elements that were created by the map author (i.e. not during an SDK "session") are +not editable and have special behaviour depending on their name, description and +attributes. + +##### Default + +```ts +"default" +``` + +#### rotation? + +> `optional` **rotation**: `number` + +The rotation of the element in degrees. + +##### Default + +```ts +0 +``` + +#### scale? + +> `optional` **scale**: `number` + +The relative scale of the element from the default size. This is combined +with the `zoom` to determine the actual size of the element. + +##### Default + +```ts +1 +``` + +#### zoom? + +> `optional` **zoom**: `number` + +The zoom level at which the element was created. This is combined with +the `scale` to determine the actual size of the element. + +When creating an element, if you don't supply this value it defaults to +the current zoom of the map when you call `createElement`. + +#### align? + +> `optional` **align**: `"center"` | `"left"` | `"right"` + +The alignment of the text, either `left`, `center` or `right`. + +##### Default + +```ts +"center" +``` + +#### style? + +> `optional` **style**: `"italic"` | `"light"` | `"regular"` | `"caps"` + +The style of the text, either `italic`, `light`, `regular` or `caps`. + +##### Default + +```ts +"regular" +``` + +#### position? + +> `optional` **position**: [`LngLatTuple`](client.md#lnglattuple) + +The geographical position of the center of the text element. + +If this is omitted, the text will be placed at the center of the current +viewport. + +## NoteElementCreate + +### Properties + +#### type + +> **type**: `"Note"` + +#### text + +> **text**: `string` + +#### groupId? + +> `optional` **groupId**: `null` | `string` + +The ID of the element group that the element belongs to. +For elements that are not part of a group, this will be null. + +#### color? + +> `optional` **color**: `string` + +The color of the element in some CSS-like format. + +##### Example + +```typescript +"#ABC123"; +"rgb(255, 0, 0)"; +"hsl(200, 100%, 50%)"; +``` + +##### Default + +```ts +"#C93535" +``` + +#### description? + +> `optional` **description**: `null` | `string` + +Text describing the element, which is shown in an element's popup when it +is selected. + +Note that some elements are not selectable on the map, such as Notes, Text +and Markers, so their description will not be shown. + +#### attributes? + +> `optional` **attributes**: `Record`\<`string`, `unknown`> + +A set of key-value pairs that can be used to store arbitrary data about the element. + +This is most useful for associating additional data with an element that is not +part of the element's core data, such as a Place's address or some other +data. + +#### interaction? + +> `optional` **interaction**: `"default"` | `"locked"` + +Whether the element is interactive. + +The `default` interaction mode means that the element can be selected and edited by +the user, if it was created by the SDK or by the user using a tool. + +If the interaction mode is `locked`, the element will not be editable by the user, +which is often used for elements that you don't want the user to edit or move by +accident. + +Elements that were created by the map author (i.e. not during an SDK "session") are +not editable and have special behaviour depending on their name, description and +attributes. + +##### Default + +```ts +"default" +``` + +#### rotation? + +> `optional` **rotation**: `number` + +The rotation of the element in degrees. + +##### Default + +```ts +0 +``` + +#### scale? + +> `optional` **scale**: `number` + +The relative scale of the element from the default size. This is combined +with the `zoom` to determine the actual size of the element. + +##### Default + +```ts +1 +``` + +#### zoom? + +> `optional` **zoom**: `number` + +The zoom level at which the element was created. This is combined with +the `scale` to determine the actual size of the element. + +When creating an element, if you don't supply this value it defaults to +the current zoom of the map when you call `createElement`. + +#### align? + +> `optional` **align**: `"center"` | `"left"` | `"right"` + +The alignment of the text, either `left`, `center` or `right`. + +##### Default + +```ts +"center" +``` + +#### style? + +> `optional` **style**: `"italic"` | `"light"` | `"regular"` | `"caps"` + +The style of the text, either `italic`, `light`, `regular` or `caps`. + +##### Default + +```ts +"regular" +``` + +#### widthScale? + +> `optional` **widthScale**: `number` + +#### position? + +> `optional` **position**: [`LngLatTuple`](client.md#lnglattuple) + +The geographical position of the center of the note element. + +If this is omitted, the note will be placed at the center of the current +viewport. + +## ImageElementCreate + +### Properties + +#### type + +> **type**: `"Image"` + +#### coordinates + +> **coordinates**: \[`number`, `number`]\[]\[] = `MultiLineStringGeometrySchema.shape.coordinates` + +#### imageUrl + +> **imageUrl**: `string` + +The URL of the image that is rendered in this element + +#### groupId? + +> `optional` **groupId**: `null` | `string` + +The ID of the element group that the element belongs to. +For elements that are not part of a group, this will be null. + +#### name? + +> `optional` **name**: `null` | `string` + +The element's name. For elements that can show a label or text on +the map (e.g. a Place or Text element) this is the text that will be shown. + +For elements such as Polygons or Paths, the name is what is shown when +the element is selected by clicking on it. + +#### description? + +> `optional` **description**: `null` | `string` + +Text describing the element, which is shown in an element's popup when it +is selected. + +Note that some elements are not selectable on the map, such as Notes, Text +and Markers, so their description will not be shown. + +#### attributes? + +> `optional` **attributes**: `Record`\<`string`, `unknown`> + +A set of key-value pairs that can be used to store arbitrary data about the element. + +This is most useful for associating additional data with an element that is not +part of the element's core data, such as a Place's address or some other +data. + +#### interaction? + +> `optional` **interaction**: `"default"` | `"locked"` + +Whether the element is interactive. + +The `default` interaction mode means that the element can be selected and edited by +the user, if it was created by the SDK or by the user using a tool. + +If the interaction mode is `locked`, the element will not be editable by the user, +which is often used for elements that you don't want the user to edit or move by +accident. + +Elements that were created by the map author (i.e. not during an SDK "session") are +not editable and have special behaviour depending on their name, description and +attributes. + +##### Default + +```ts +"default" +``` + +#### opacity? + +> `optional` **opacity**: `number` + +The opacity of the image, between 0 and 1. + +##### Default + +```ts +1 +``` + +## PlaceElementRead + +### Properties + +#### id + +> **id**: `string` + +The unique identifier for the element. + +#### groupId + +> **groupId**: `null` | `string` + +The ID of the element group that the element belongs to. +For elements that are not part of a group, this will be null. + +#### color + +> **color**: `string` + +The color of the element in some CSS-like format. + +##### Example + +```typescript +"#ABC123"; +"rgb(255, 0, 0)"; +"hsl(200, 100%, 50%)"; +``` + +##### Default + +```ts +"#C93535" +``` + +#### name + +> **name**: `null` | `string` + +The element's name. For elements that can show a label or text on +the map (e.g. a Place or Text element) this is the text that will be shown. + +For elements such as Polygons or Paths, the name is what is shown when +the element is selected by clicking on it. + +#### description + +> **description**: `null` | `string` + +Text describing the element, which is shown in an element's popup when it +is selected. + +Note that some elements are not selectable on the map, such as Notes, Text +and Markers, so their description will not be shown. + +#### attributes + +> **attributes**: `Record`\<`string`, `unknown`> + +A set of key-value pairs that can be used to store arbitrary data about the element. + +This is most useful for associating additional data with an element that is not +part of the element's core data, such as a Place's address or some other +data. + +#### imageUrl + +> **imageUrl**: `null` | `string` + +The URL of an image that has been added to the element. + +#### type + +> **type**: `"Place"` + +#### symbol + +> **symbol**: `string` + +The symbol that is rendered for the Place. + +This can be an emoji by using colon-enclosed characters (e.g. `":smiley:"`) +or one of the symbols available in Felt's symbol library. + +You can see the available symbols in the Felt UI when editing a Place +by hovering a symbol and converting the tooltip to kebab-case. For example, +the "Oil barrel" symbol is `oil-barrel`. + +#### frame + +> **frame**: `null` | `"frame-circle"` | `"frame-square"` + +The frame that is rendered around the Place's symbol. This is +only available for non-emoji symbols. + +#### hideLabel + +> **hideLabel**: `boolean` + +Whether the element's label is hidden on the map. This allows you +to add a name to the element and can show in popups, but not have +it visible on the map. + +This will also hide the faint placeholder label that is shown when +an editable Place is selected. + +##### Default + +```ts +false +``` + +#### coordinates + +> **coordinates**: [`LngLatTuple`](client.md#lnglattuple) + +#### interaction? + +> `optional` **interaction**: `"default"` | `"locked"` + +Whether the element is interactive. + +The `default` interaction mode means that the element can be selected and edited by +the user, if it was created by the SDK or by the user using a tool. + +If the interaction mode is `locked`, the element will not be editable by the user, +which is often used for elements that you don't want the user to edit or move by +accident. + +Elements that were created by the map author (i.e. not during an SDK "session") are +not editable and have special behaviour depending on their name, description and +attributes. + +##### Default + +```ts +"default" +``` + +## PathElementRead + +### Properties + +#### id + +> **id**: `string` + +The unique identifier for the element. + +#### groupId + +> **groupId**: `null` | `string` + +The ID of the element group that the element belongs to. +For elements that are not part of a group, this will be null. + +#### color + +> **color**: `string` + +The color of the element in some CSS-like format. + +##### Example + +```typescript +"#ABC123"; +"rgb(255, 0, 0)"; +"hsl(200, 100%, 50%)"; +``` + +##### Default + +```ts +"#C93535" +``` + +#### name + +> **name**: `null` | `string` + +The element's name. For elements that can show a label or text on +the map (e.g. a Place or Text element) this is the text that will be shown. + +For elements such as Polygons or Paths, the name is what is shown when +the element is selected by clicking on it. + +#### description + +> **description**: `null` | `string` + +Text describing the element, which is shown in an element's popup when it +is selected. + +Note that some elements are not selectable on the map, such as Notes, Text +and Markers, so their description will not be shown. + +#### attributes + +> **attributes**: `Record`\<`string`, `unknown`> + +A set of key-value pairs that can be used to store arbitrary data about the element. + +This is most useful for associating additional data with an element that is not +part of the element's core data, such as a Place's address or some other +data. + +#### imageUrl + +> **imageUrl**: `null` | `string` + +The URL of an image that has been added to the element. + +#### strokeOpacity + +> **strokeOpacity**: `number` + +A value between 0 and 1 that describes the opacity of the element's stroke. + +##### Default + +```ts +1 +``` + +#### strokeWidth + +> **strokeWidth**: `number` + +The width of the element's stroke in pixels. + +##### Default + +```ts +2 +``` + +#### strokeStyle + +> **strokeStyle**: `"solid"` | `"dashed"` | `"dotted"` + +The style of the element's stroke. + +##### Default + +```ts +"solid" +``` + +#### type + +> **type**: `"Path"` + +#### distanceMarker + +> **distanceMarker**: `boolean` + +Whether a distance marker is shown at the midpoint of the path. + +##### Default + +```ts +false +``` + +#### routingMode + +> **routingMode**: `null` | `"driving"` | `"cycling"` | `"walking"` | `"flying"` + +Whether this represents a route, and if so, what mode of transport +is used. + +If this is `null`, the path is not considered to be a route, so while it +can have a `distanceMarker`, it will does not have a start or end cap. + +##### Default + +```ts +null +``` + +#### endCaps + +> **endCaps**: `boolean` + +Whether or not to show Start and End caps on the path. This is +only available if the `routingMode` is set. + +##### Default + +```ts +false +``` + +#### interaction? + +> `optional` **interaction**: `"default"` | `"locked"` + +Whether the element is interactive. + +The `default` interaction mode means that the element can be selected and edited by +the user, if it was created by the SDK or by the user using a tool. + +If the interaction mode is `locked`, the element will not be editable by the user, +which is often used for elements that you don't want the user to edit or move by +accident. + +Elements that were created by the map author (i.e. not during an SDK "session") are +not editable and have special behaviour depending on their name, description and +attributes. + +##### Default + +```ts +"default" +``` + +## PolygonElementRead + +### Properties + +#### id + +> **id**: `string` + +The unique identifier for the element. + +#### groupId + +> **groupId**: `null` | `string` + +The ID of the element group that the element belongs to. +For elements that are not part of a group, this will be null. + +#### color + +> **color**: `string` + +The color of the element in some CSS-like format. + +##### Example + +```typescript +"#ABC123"; +"rgb(255, 0, 0)"; +"hsl(200, 100%, 50%)"; +``` + +##### Default + +```ts +"#C93535" +``` + +#### name + +> **name**: `null` | `string` + +The element's name. For elements that can show a label or text on +the map (e.g. a Place or Text element) this is the text that will be shown. + +For elements such as Polygons or Paths, the name is what is shown when +the element is selected by clicking on it. + +#### description + +> **description**: `null` | `string` + +Text describing the element, which is shown in an element's popup when it +is selected. + +Note that some elements are not selectable on the map, such as Notes, Text +and Markers, so their description will not be shown. + +#### attributes + +> **attributes**: `Record`\<`string`, `unknown`> + +A set of key-value pairs that can be used to store arbitrary data about the element. + +This is most useful for associating additional data with an element that is not +part of the element's core data, such as a Place's address or some other +data. + +#### imageUrl + +> **imageUrl**: `null` | `string` + +The URL of an image that has been added to the element. + +#### strokeOpacity + +> **strokeOpacity**: `number` + +A value between 0 and 1 that describes the opacity of the element's stroke. + +##### Default + +```ts +1 +``` + +#### strokeWidth + +> **strokeWidth**: `number` + +The width of the element's stroke in pixels. + +##### Default + +```ts +2 +``` + +#### strokeStyle + +> **strokeStyle**: `"solid"` | `"dashed"` | `"dotted"` + +The style of the element's stroke. + +##### Default + +```ts +"solid" +``` + +#### type + +> **type**: `"Polygon"` + +#### fillOpacity + +> **fillOpacity**: `number` + +The opacity of the polygon's fill, between 0 and 1. + +##### Default + +```ts +0.25 +``` + +#### areaMarker + +> **areaMarker**: `boolean` + +Whether to show an area marker on the polygon. + +##### Default + +```ts +false +``` + +#### interaction? + +> `optional` **interaction**: `"default"` | `"locked"` + +Whether the element is interactive. + +The `default` interaction mode means that the element can be selected and edited by +the user, if it was created by the SDK or by the user using a tool. + +If the interaction mode is `locked`, the element will not be editable by the user, +which is often used for elements that you don't want the user to edit or move by +accident. + +Elements that were created by the map author (i.e. not during an SDK "session") are +not editable and have special behaviour depending on their name, description and +attributes. + +##### Default + +```ts +"default" +``` + +## CircleElementRead + +### Properties + +#### id + +> **id**: `string` + +The unique identifier for the element. + +#### groupId + +> **groupId**: `null` | `string` + +The ID of the element group that the element belongs to. +For elements that are not part of a group, this will be null. + +#### color + +> **color**: `string` + +The color of the element in some CSS-like format. + +##### Example + +```typescript +"#ABC123"; +"rgb(255, 0, 0)"; +"hsl(200, 100%, 50%)"; +``` + +##### Default + +```ts +"#C93535" +``` + +#### name + +> **name**: `null` | `string` + +The element's name. For elements that can show a label or text on +the map (e.g. a Place or Text element) this is the text that will be shown. + +For elements such as Polygons or Paths, the name is what is shown when +the element is selected by clicking on it. + +#### description + +> **description**: `null` | `string` + +Text describing the element, which is shown in an element's popup when it +is selected. + +Note that some elements are not selectable on the map, such as Notes, Text +and Markers, so their description will not be shown. + +#### attributes + +> **attributes**: `Record`\<`string`, `unknown`> + +A set of key-value pairs that can be used to store arbitrary data about the element. + +This is most useful for associating additional data with an element that is not +part of the element's core data, such as a Place's address or some other +data. + +#### imageUrl + +> **imageUrl**: `null` | `string` + +The URL of an image that has been added to the element. + +#### strokeOpacity + +> **strokeOpacity**: `number` + +A value between 0 and 1 that describes the opacity of the element's stroke. + +##### Default + +```ts +1 +``` + +#### strokeWidth + +> **strokeWidth**: `number` + +The width of the element's stroke in pixels. + +##### Default + +```ts +2 +``` + +#### strokeStyle + +> **strokeStyle**: `"solid"` | `"dashed"` | `"dotted"` + +The style of the element's stroke. + +##### Default + +```ts +"solid" +``` + +#### type + +> **type**: `"Circle"` + +#### radius + +> **radius**: `number` + +The radius of the circle in meters. + +#### radiusMarker + +> **radiusMarker**: `boolean` + +Whether to show a marker on the circle that indicates the radius + +##### Default + +```ts +false +``` + +#### radiusDisplayAngle + +> **radiusDisplayAngle**: `number` + +The angle at which the control point for setting the radius is displayed, +in degrees. When the `radiusMarker` is `true`, there is a dotted line rendered +from the center of the circle to the control point, and the marker is shown +at the midpoint of this line. + +##### Default + +```ts +90 +``` + +#### radiusDisplayUnit + +> **radiusDisplayUnit**: `null` | `"meter"` | `"kilometer"` | `"foot"` | `"mile"` + +The unit of the radius used when the `radiusMarker` is `true`. + +A value of `null` means that the unit matches the user's locale. + +##### Default + +```ts +null +``` + +#### fillOpacity + +> **fillOpacity**: `number` + +The opacity of the circle's fill. + +##### Default + +```ts +0.25 +``` + +#### center + +> **center**: [`LngLatTuple`](client.md#lnglattuple) + +The center of the circle. + +#### interaction? + +> `optional` **interaction**: `"default"` | `"locked"` + +Whether the element is interactive. + +The `default` interaction mode means that the element can be selected and edited by +the user, if it was created by the SDK or by the user using a tool. + +If the interaction mode is `locked`, the element will not be editable by the user, +which is often used for elements that you don't want the user to edit or move by +accident. + +Elements that were created by the map author (i.e. not during an SDK "session") are +not editable and have special behaviour depending on their name, description and +attributes. + +##### Default + +```ts +"default" +``` + +## MarkerElementRead + +### Properties + +#### id + +> **id**: `string` + +The unique identifier for the element. + +#### groupId + +> **groupId**: `null` | `string` + +The ID of the element group that the element belongs to. +For elements that are not part of a group, this will be null. + +#### color + +> **color**: `string` + +The color of the element in some CSS-like format. + +##### Example + +```typescript +"#ABC123"; +"rgb(255, 0, 0)"; +"hsl(200, 100%, 50%)"; +``` + +##### Default + +```ts +"#C93535" +``` + +#### name + +> **name**: `null` | `string` + +The element's name. For elements that can show a label or text on +the map (e.g. a Place or Text element) this is the text that will be shown. + +For elements such as Polygons or Paths, the name is what is shown when +the element is selected by clicking on it. + +#### description + +> **description**: `null` | `string` + +Text describing the element, which is shown in an element's popup when it +is selected. + +Note that some elements are not selectable on the map, such as Notes, Text +and Markers, so their description will not be shown. + +#### attributes + +> **attributes**: `Record`\<`string`, `unknown`> + +A set of key-value pairs that can be used to store arbitrary data about the element. + +This is most useful for associating additional data with an element that is not +part of the element's core data, such as a Place's address or some other +data. + +#### type + +> **type**: `"Marker"` + +#### opacity + +> **opacity**: `number` + +The opacity of the marker, between 0 and 1. + +##### Default + +```ts +1 +``` + +#### size + +> **size**: `number` + +The size of the marker, used in conjunction with the `zoom` to determine +the actual size of the marker. + +##### Default + +```ts +10 +``` + +#### zoom + +> **zoom**: `number` + +The zoom level at which the marker was created. This is combined with +the `size` to determine the actual size of the marker. + +When creating a marker, if you don't supply this value it defaults to +the current zoom of the map when you call `createElement`. + +#### interaction? + +> `optional` **interaction**: `"default"` | `"locked"` + +Whether the element is interactive. + +The `default` interaction mode means that the element can be selected and edited by +the user, if it was created by the SDK or by the user using a tool. + +If the interaction mode is `locked`, the element will not be editable by the user, +which is often used for elements that you don't want the user to edit or move by +accident. + +Elements that were created by the map author (i.e. not during an SDK "session") are +not editable and have special behaviour depending on their name, description and +attributes. + +##### Default + +```ts +"default" +``` + +## HighlighterElementRead + +### Properties + +#### id + +> **id**: `string` + +The unique identifier for the element. + +#### groupId + +> **groupId**: `null` | `string` + +The ID of the element group that the element belongs to. +For elements that are not part of a group, this will be null. + +#### color + +> **color**: `string` + +The color of the element in some CSS-like format. + +##### Example + +```typescript +"#ABC123"; +"rgb(255, 0, 0)"; +"hsl(200, 100%, 50%)"; +``` + +##### Default + +```ts +"#C93535" +``` + +#### name + +> **name**: `null` | `string` + +The element's name. For elements that can show a label or text on +the map (e.g. a Place or Text element) this is the text that will be shown. + +For elements such as Polygons or Paths, the name is what is shown when +the element is selected by clicking on it. + +#### description + +> **description**: `null` | `string` + +Text describing the element, which is shown in an element's popup when it +is selected. + +Note that some elements are not selectable on the map, such as Notes, Text +and Markers, so their description will not be shown. + +#### attributes + +> **attributes**: `Record`\<`string`, `unknown`> + +A set of key-value pairs that can be used to store arbitrary data about the element. + +This is most useful for associating additional data with an element that is not +part of the element's core data, such as a Place's address or some other +data. + +#### type + +> **type**: `"Highlighter"` + +#### renderHoles + +> **renderHoles**: `boolean` + +Whether to render the holes of the highlighted area. + +##### Default + +```ts +false +``` + +#### opacity + +> **opacity**: `number` + +The opacity of the highlighter, between 0 and 1. + +##### Default + +```ts +0.5 +``` + +#### interaction? + +> `optional` **interaction**: `"default"` | `"locked"` + +Whether the element is interactive. + +The `default` interaction mode means that the element can be selected and edited by +the user, if it was created by the SDK or by the user using a tool. + +If the interaction mode is `locked`, the element will not be editable by the user, +which is often used for elements that you don't want the user to edit or move by +accident. + +Elements that were created by the map author (i.e. not during an SDK "session") are +not editable and have special behaviour depending on their name, description and +attributes. + +##### Default + +```ts +"default" +``` + +## TextElementRead + +### Properties + +#### id + +> **id**: `string` + +The unique identifier for the element. + +#### groupId + +> **groupId**: `null` | `string` + +The ID of the element group that the element belongs to. +For elements that are not part of a group, this will be null. + +#### color + +> **color**: `string` + +The color of the element in some CSS-like format. + +##### Example + +```typescript +"#ABC123"; +"rgb(255, 0, 0)"; +"hsl(200, 100%, 50%)"; +``` + +##### Default + +```ts +"#C93535" +``` + +#### description + +> **description**: `null` | `string` + +Text describing the element, which is shown in an element's popup when it +is selected. + +Note that some elements are not selectable on the map, such as Notes, Text +and Markers, so their description will not be shown. + +#### attributes + +> **attributes**: `Record`\<`string`, `unknown`> + +A set of key-value pairs that can be used to store arbitrary data about the element. + +This is most useful for associating additional data with an element that is not +part of the element's core data, such as a Place's address or some other +data. + +#### rotation + +> **rotation**: `number` + +The rotation of the element in degrees. + +##### Default + +```ts +0 +``` + +#### scale + +> **scale**: `number` + +The relative scale of the element from the default size. This is combined +with the `zoom` to determine the actual size of the element. + +##### Default + +```ts +1 +``` + +#### zoom + +> **zoom**: `number` + +The zoom level at which the element was created. This is combined with +the `scale` to determine the actual size of the element. + +When creating an element, if you don't supply this value it defaults to +the current zoom of the map when you call `createElement`. + +#### text + +> **text**: `string` + +The text in the element. + +#### align + +> **align**: `"center"` | `"left"` | `"right"` + +The alignment of the text, either `left`, `center` or `right`. + +##### Default + +```ts +"center" +``` + +#### style + +> **style**: `"italic"` | `"light"` | `"regular"` | `"caps"` + +The style of the text, either `italic`, `light`, `regular` or `caps`. + +##### Default + +```ts +"regular" +``` + +#### name + +> **name**: `string` + +The text shown in the element, which is identical to the `text` property. + +##### Remarks + +This is added for consistency with other elements that have a `name` +property. + +#### type + +> **type**: `"Text"` + +#### position + +> **position**: [`LngLatTuple`](client.md#lnglattuple) + +The geographical position of the center of the text element. + +#### interaction? + +> `optional` **interaction**: `"default"` | `"locked"` + +Whether the element is interactive. + +The `default` interaction mode means that the element can be selected and edited by +the user, if it was created by the SDK or by the user using a tool. + +If the interaction mode is `locked`, the element will not be editable by the user, +which is often used for elements that you don't want the user to edit or move by +accident. + +Elements that were created by the map author (i.e. not during an SDK "session") are +not editable and have special behaviour depending on their name, description and +attributes. + +##### Default + +```ts +"default" +``` + +## NoteElementRead + +### Properties + +#### id + +> **id**: `string` + +The unique identifier for the element. + +#### groupId + +> **groupId**: `null` | `string` + +The ID of the element group that the element belongs to. +For elements that are not part of a group, this will be null. + +#### color + +> **color**: `string` + +The color of the element in some CSS-like format. + +##### Example + +```typescript +"#ABC123"; +"rgb(255, 0, 0)"; +"hsl(200, 100%, 50%)"; +``` + +##### Default + +```ts +"#C93535" +``` + +#### description + +> **description**: `null` | `string` + +Text describing the element, which is shown in an element's popup when it +is selected. + +Note that some elements are not selectable on the map, such as Notes, Text +and Markers, so their description will not be shown. + +#### attributes + +> **attributes**: `Record`\<`string`, `unknown`> + +A set of key-value pairs that can be used to store arbitrary data about the element. + +This is most useful for associating additional data with an element that is not +part of the element's core data, such as a Place's address or some other +data. + +#### rotation + +> **rotation**: `number` + +The rotation of the element in degrees. + +##### Default + +```ts +0 +``` + +#### scale + +> **scale**: `number` + +The relative scale of the element from the default size. This is combined +with the `zoom` to determine the actual size of the element. + +##### Default + +```ts +1 +``` + +#### zoom + +> **zoom**: `number` + +The zoom level at which the element was created. This is combined with +the `scale` to determine the actual size of the element. + +When creating an element, if you don't supply this value it defaults to +the current zoom of the map when you call `createElement`. + +#### text + +> **text**: `string` + +The text in the element. + +#### align + +> **align**: `"center"` | `"left"` | `"right"` + +The alignment of the text, either `left`, `center` or `right`. + +##### Default + +```ts +"center" +``` + +#### style + +> **style**: `"italic"` | `"light"` | `"regular"` | `"caps"` + +The style of the text, either `italic`, `light`, `regular` or `caps`. + +##### Default + +```ts +"regular" +``` + +#### name + +> **name**: `string` + +The text shown in the element, which is identical to the `text` property. + +##### Remarks + +This is added for consistency with other elements that have a `name` +property. + +#### type + +> **type**: `"Note"` + +#### widthScale + +> **widthScale**: `number` + +#### position + +> **position**: [`LngLatTuple`](client.md#lnglattuple) + +The geographical position of the center of the note element. + +#### interaction? + +> `optional` **interaction**: `"default"` | `"locked"` + +Whether the element is interactive. + +The `default` interaction mode means that the element can be selected and edited by +the user, if it was created by the SDK or by the user using a tool. + +If the interaction mode is `locked`, the element will not be editable by the user, +which is often used for elements that you don't want the user to edit or move by +accident. + +Elements that were created by the map author (i.e. not during an SDK "session") are +not editable and have special behaviour depending on their name, description and +attributes. + +##### Default + +```ts +"default" +``` + +## ImageElementRead + +### Properties + +#### id + +> **id**: `string` + +The unique identifier for the element. + +#### groupId + +> **groupId**: `null` | `string` + +The ID of the element group that the element belongs to. +For elements that are not part of a group, this will be null. + +#### name + +> **name**: `null` | `string` + +The element's name. For elements that can show a label or text on +the map (e.g. a Place or Text element) this is the text that will be shown. + +For elements such as Polygons or Paths, the name is what is shown when +the element is selected by clicking on it. + +#### description + +> **description**: `null` | `string` + +Text describing the element, which is shown in an element's popup when it +is selected. + +Note that some elements are not selectable on the map, such as Notes, Text +and Markers, so their description will not be shown. + +#### attributes + +> **attributes**: `Record`\<`string`, `unknown`> + +A set of key-value pairs that can be used to store arbitrary data about the element. + +This is most useful for associating additional data with an element that is not +part of the element's core data, such as a Place's address or some other +data. + +#### type + +> **type**: `"Image"` + +#### imageUrl + +> **imageUrl**: `string` + +The URL of the image that is rendered in this element + +#### opacity + +> **opacity**: `number` + +The opacity of the image, between 0 and 1. + +##### Default + +```ts +1 +``` + +#### interaction? + +> `optional` **interaction**: `"default"` | `"locked"` + +Whether the element is interactive. + +The `default` interaction mode means that the element can be selected and edited by +the user, if it was created by the SDK or by the user using a tool. + +If the interaction mode is `locked`, the element will not be editable by the user, +which is often used for elements that you don't want the user to edit or move by +accident. + +Elements that were created by the map author (i.e. not during an SDK "session") are +not editable and have special behaviour depending on their name, description and +attributes. + +##### Default + +```ts +"default" +``` + +## LinkElementRead + +### Properties + +#### id + +> **id**: `string` + +The unique identifier for the element. + +#### groupId + +> **groupId**: `null` | `string` + +The ID of the element group that the element belongs to. +For elements that are not part of a group, this will be null. + +#### color + +> **color**: `string` + +The color of the element in some CSS-like format. + +##### Example + +```typescript +"#ABC123"; +"rgb(255, 0, 0)"; +"hsl(200, 100%, 50%)"; +``` + +##### Default + +```ts +"#C93535" +``` + +#### name + +> **name**: `null` | `string` + +The element's name. For elements that can show a label or text on +the map (e.g. a Place or Text element) this is the text that will be shown. + +For elements such as Polygons or Paths, the name is what is shown when +the element is selected by clicking on it. + +#### description + +> **description**: `null` | `string` + +Text describing the element, which is shown in an element's popup when it +is selected. + +Note that some elements are not selectable on the map, such as Notes, Text +and Markers, so their description will not be shown. + +#### attributes + +> **attributes**: `Record`\<`string`, `unknown`> + +A set of key-value pairs that can be used to store arbitrary data about the element. + +This is most useful for associating additional data with an element that is not +part of the element's core data, such as a Place's address or some other +data. + +#### type + +> **type**: `"Link"` + +#### url + +> **url**: `string` + +The URL of the link that is rendered in this element. + +#### interaction? + +> `optional` **interaction**: `"default"` | `"locked"` + +Whether the element is interactive. + +The `default` interaction mode means that the element can be selected and edited by +the user, if it was created by the SDK or by the user using a tool. + +If the interaction mode is `locked`, the element will not be editable by the user, +which is often used for elements that you don't want the user to edit or move by +accident. + +Elements that were created by the map author (i.e. not during an SDK "session") are +not editable and have special behaviour depending on their name, description and +attributes. + +##### Default + +```ts +"default" +``` + +## PlaceElementUpdate + +### Properties + +#### id + +> **id**: `string` + +The unique identifier for the element. + +#### type + +> **type**: `"Place"` + +#### groupId? + +> `optional` **groupId**: `null` | `string` + +The ID of the element group that the element belongs to. +For elements that are not part of a group, this will be null. + +#### color? + +> `optional` **color**: `string` + +The color of the element in some CSS-like format. + +##### Example + +```typescript +"#ABC123"; +"rgb(255, 0, 0)"; +"hsl(200, 100%, 50%)"; +``` + +##### Default + +```ts +"#C93535" +``` + +#### name? + +> `optional` **name**: `null` | `string` + +The element's name. For elements that can show a label or text on +the map (e.g. a Place or Text element) this is the text that will be shown. + +For elements such as Polygons or Paths, the name is what is shown when +the element is selected by clicking on it. + +#### description? + +> `optional` **description**: `null` | `string` + +Text describing the element, which is shown in an element's popup when it +is selected. + +Note that some elements are not selectable on the map, such as Notes, Text +and Markers, so their description will not be shown. + +#### attributes? + +> `optional` **attributes**: `Record`\<`string`, `unknown`> + +A set of key-value pairs that can be used to store arbitrary data about the element. + +This is most useful for associating additional data with an element that is not +part of the element's core data, such as a Place's address or some other +data. + +#### interaction? + +> `optional` **interaction**: `"default"` | `"locked"` + +Whether the element is interactive. + +The `default` interaction mode means that the element can be selected and edited by +the user, if it was created by the SDK or by the user using a tool. + +If the interaction mode is `locked`, the element will not be editable by the user, +which is often used for elements that you don't want the user to edit or move by +accident. + +Elements that were created by the map author (i.e. not during an SDK "session") are +not editable and have special behaviour depending on their name, description and +attributes. + +##### Default + +```ts +"default" +``` + +#### imageUrl? + +> `optional` **imageUrl**: `null` | `string` + +The URL of an image that has been added to the element. + +#### symbol? + +> `optional` **symbol**: `string` + +The symbol that is rendered for the Place. + +This can be an emoji by using colon-enclosed characters (e.g. `":smiley:"`) +or one of the symbols available in Felt's symbol library. + +You can see the available symbols in the Felt UI when editing a Place +by hovering a symbol and converting the tooltip to kebab-case. For example, +the "Oil barrel" symbol is `oil-barrel`. + +#### frame? + +> `optional` **frame**: `null` | `"frame-circle"` | `"frame-square"` + +The frame that is rendered around the Place's symbol. This is +only available for non-emoji symbols. + +#### hideLabel? + +> `optional` **hideLabel**: `boolean` + +Whether the element's label is hidden on the map. This allows you +to add a name to the element and can show in popups, but not have +it visible on the map. + +This will also hide the faint placeholder label that is shown when +an editable Place is selected. + +##### Default + +```ts +false +``` + +#### coordinates? + +> `optional` **coordinates**: [`LngLatTuple`](client.md#lnglattuple) + +## PathElementUpdate + +### Properties + +#### id + +> **id**: `string` + +The unique identifier for the element. + +#### type + +> **type**: `"Path"` + +#### groupId? + +> `optional` **groupId**: `null` | `string` + +The ID of the element group that the element belongs to. +For elements that are not part of a group, this will be null. + +#### color? + +> `optional` **color**: `string` + +The color of the element in some CSS-like format. + +##### Example + +```typescript +"#ABC123"; +"rgb(255, 0, 0)"; +"hsl(200, 100%, 50%)"; +``` + +##### Default + +```ts +"#C93535" +``` + +#### name? + +> `optional` **name**: `null` | `string` + +The element's name. For elements that can show a label or text on +the map (e.g. a Place or Text element) this is the text that will be shown. + +For elements such as Polygons or Paths, the name is what is shown when +the element is selected by clicking on it. + +#### description? + +> `optional` **description**: `null` | `string` + +Text describing the element, which is shown in an element's popup when it +is selected. + +Note that some elements are not selectable on the map, such as Notes, Text +and Markers, so their description will not be shown. + +#### attributes? + +> `optional` **attributes**: `Record`\<`string`, `unknown`> + +A set of key-value pairs that can be used to store arbitrary data about the element. + +This is most useful for associating additional data with an element that is not +part of the element's core data, such as a Place's address or some other +data. + +#### interaction? + +> `optional` **interaction**: `"default"` | `"locked"` + +Whether the element is interactive. + +The `default` interaction mode means that the element can be selected and edited by +the user, if it was created by the SDK or by the user using a tool. + +If the interaction mode is `locked`, the element will not be editable by the user, +which is often used for elements that you don't want the user to edit or move by +accident. + +Elements that were created by the map author (i.e. not during an SDK "session") are +not editable and have special behaviour depending on their name, description and +attributes. + +##### Default + +```ts +"default" +``` + +#### imageUrl? + +> `optional` **imageUrl**: `null` | `string` + +The URL of an image that has been added to the element. + +#### strokeOpacity? + +> `optional` **strokeOpacity**: `number` + +A value between 0 and 1 that describes the opacity of the element's stroke. + +##### Default + +```ts +1 +``` + +#### strokeWidth? + +> `optional` **strokeWidth**: `number` + +The width of the element's stroke in pixels. + +##### Default + +```ts +2 +``` + +#### strokeStyle? + +> `optional` **strokeStyle**: `"solid"` | `"dashed"` | `"dotted"` + +The style of the element's stroke. + +##### Default + +```ts +"solid" +``` + +#### distanceMarker? + +> `optional` **distanceMarker**: `boolean` + +Whether a distance marker is shown at the midpoint of the path. + +##### Default + +```ts +false +``` + +#### routingMode? + +> `optional` **routingMode**: `null` | `"driving"` | `"cycling"` | `"walking"` | `"flying"` + +Whether this represents a route, and if so, what mode of transport +is used. + +If this is `null`, the path is not considered to be a route, so while it +can have a `distanceMarker`, it will does not have a start or end cap. + +##### Default + +```ts +null +``` + +#### endCaps? + +> `optional` **endCaps**: `boolean` + +Whether or not to show Start and End caps on the path. This is +only available if the `routingMode` is set. + +##### Default + +```ts +false +``` + +#### coordinates? + +> `optional` **coordinates**: [`LngLatTuple`](client.md#lnglattuple)\[]\[] + +## PolygonElementUpdate + +### Properties + +#### id + +> **id**: `string` + +The unique identifier for the element. + +#### type + +> **type**: `"Polygon"` + +#### groupId? + +> `optional` **groupId**: `null` | `string` + +The ID of the element group that the element belongs to. +For elements that are not part of a group, this will be null. + +#### color? + +> `optional` **color**: `string` + +The color of the element in some CSS-like format. + +##### Example + +```typescript +"#ABC123"; +"rgb(255, 0, 0)"; +"hsl(200, 100%, 50%)"; +``` + +##### Default + +```ts +"#C93535" +``` + +#### name? + +> `optional` **name**: `null` | `string` + +The element's name. For elements that can show a label or text on +the map (e.g. a Place or Text element) this is the text that will be shown. + +For elements such as Polygons or Paths, the name is what is shown when +the element is selected by clicking on it. + +#### description? + +> `optional` **description**: `null` | `string` + +Text describing the element, which is shown in an element's popup when it +is selected. + +Note that some elements are not selectable on the map, such as Notes, Text +and Markers, so their description will not be shown. + +#### attributes? + +> `optional` **attributes**: `Record`\<`string`, `unknown`> + +A set of key-value pairs that can be used to store arbitrary data about the element. + +This is most useful for associating additional data with an element that is not +part of the element's core data, such as a Place's address or some other +data. + +#### interaction? + +> `optional` **interaction**: `"default"` | `"locked"` + +Whether the element is interactive. + +The `default` interaction mode means that the element can be selected and edited by +the user, if it was created by the SDK or by the user using a tool. + +If the interaction mode is `locked`, the element will not be editable by the user, +which is often used for elements that you don't want the user to edit or move by +accident. + +Elements that were created by the map author (i.e. not during an SDK "session") are +not editable and have special behaviour depending on their name, description and +attributes. + +##### Default + +```ts +"default" +``` + +#### imageUrl? + +> `optional` **imageUrl**: `null` | `string` + +The URL of an image that has been added to the element. + +#### strokeOpacity? + +> `optional` **strokeOpacity**: `number` + +A value between 0 and 1 that describes the opacity of the element's stroke. + +##### Default + +```ts +1 +``` + +#### strokeWidth? + +> `optional` **strokeWidth**: `number` + +The width of the element's stroke in pixels. + +##### Default + +```ts +2 +``` + +#### strokeStyle? + +> `optional` **strokeStyle**: `"solid"` | `"dashed"` | `"dotted"` + +The style of the element's stroke. + +##### Default + +```ts +"solid" +``` + +#### fillOpacity? + +> `optional` **fillOpacity**: `number` + +The opacity of the polygon's fill, between 0 and 1. + +##### Default + +```ts +0.25 +``` + +#### areaMarker? + +> `optional` **areaMarker**: `boolean` + +Whether to show an area marker on the polygon. + +##### Default + +```ts +false +``` + +#### coordinates? + +> `optional` **coordinates**: [`LngLatTuple`](client.md#lnglattuple)\[]\[] + +## CircleElementUpdate + +### Properties + +#### id + +> **id**: `string` + +The unique identifier for the element. + +#### type + +> **type**: `"Circle"` + +#### groupId? + +> `optional` **groupId**: `null` | `string` + +The ID of the element group that the element belongs to. +For elements that are not part of a group, this will be null. + +#### color? + +> `optional` **color**: `string` + +The color of the element in some CSS-like format. + +##### Example + +```typescript +"#ABC123"; +"rgb(255, 0, 0)"; +"hsl(200, 100%, 50%)"; +``` + +##### Default + +```ts +"#C93535" +``` + +#### name? + +> `optional` **name**: `null` | `string` + +The element's name. For elements that can show a label or text on +the map (e.g. a Place or Text element) this is the text that will be shown. + +For elements such as Polygons or Paths, the name is what is shown when +the element is selected by clicking on it. + +#### description? + +> `optional` **description**: `null` | `string` + +Text describing the element, which is shown in an element's popup when it +is selected. + +Note that some elements are not selectable on the map, such as Notes, Text +and Markers, so their description will not be shown. + +#### attributes? + +> `optional` **attributes**: `Record`\<`string`, `unknown`> + +A set of key-value pairs that can be used to store arbitrary data about the element. + +This is most useful for associating additional data with an element that is not +part of the element's core data, such as a Place's address or some other +data. + +#### interaction? + +> `optional` **interaction**: `"default"` | `"locked"` + +Whether the element is interactive. + +The `default` interaction mode means that the element can be selected and edited by +the user, if it was created by the SDK or by the user using a tool. + +If the interaction mode is `locked`, the element will not be editable by the user, +which is often used for elements that you don't want the user to edit or move by +accident. + +Elements that were created by the map author (i.e. not during an SDK "session") are +not editable and have special behaviour depending on their name, description and +attributes. + +##### Default + +```ts +"default" +``` + +#### imageUrl? + +> `optional` **imageUrl**: `null` | `string` + +The URL of an image that has been added to the element. + +#### strokeOpacity? + +> `optional` **strokeOpacity**: `number` + +A value between 0 and 1 that describes the opacity of the element's stroke. + +##### Default + +```ts +1 +``` + +#### strokeWidth? + +> `optional` **strokeWidth**: `number` + +The width of the element's stroke in pixels. + +##### Default + +```ts +2 +``` + +#### strokeStyle? + +> `optional` **strokeStyle**: `"solid"` | `"dashed"` | `"dotted"` + +The style of the element's stroke. + +##### Default + +```ts +"solid" +``` + +#### radius? + +> `optional` **radius**: `number` + +The radius of the circle in meters. + +#### radiusMarker? + +> `optional` **radiusMarker**: `boolean` + +Whether to show a marker on the circle that indicates the radius + +##### Default + +```ts +false +``` + +#### radiusDisplayAngle? + +> `optional` **radiusDisplayAngle**: `number` + +The angle at which the control point for setting the radius is displayed, +in degrees. When the `radiusMarker` is `true`, there is a dotted line rendered +from the center of the circle to the control point, and the marker is shown +at the midpoint of this line. + +##### Default + +```ts +90 +``` + +#### radiusDisplayUnit? + +> `optional` **radiusDisplayUnit**: `null` | `"meter"` | `"kilometer"` | `"foot"` | `"mile"` + +The unit of the radius used when the `radiusMarker` is `true`. + +A value of `null` means that the unit matches the user's locale. + +##### Default + +```ts +null +``` + +#### fillOpacity? + +> `optional` **fillOpacity**: `number` + +The opacity of the circle's fill. + +##### Default + +```ts +0.25 +``` + +#### center? + +> `optional` **center**: [`LngLatTuple`](client.md#lnglattuple) + +The center of the circle. + +## MarkerElementUpdate + +### Properties + +#### id + +> **id**: `string` + +The unique identifier for the element. + +#### type + +> **type**: `"Marker"` + +#### groupId? + +> `optional` **groupId**: `null` | `string` + +The ID of the element group that the element belongs to. +For elements that are not part of a group, this will be null. + +#### color? + +> `optional` **color**: `string` + +The color of the element in some CSS-like format. + +##### Example + +```typescript +"#ABC123"; +"rgb(255, 0, 0)"; +"hsl(200, 100%, 50%)"; +``` + +##### Default + +```ts +"#C93535" +``` + +#### name? + +> `optional` **name**: `null` | `string` + +The element's name. For elements that can show a label or text on +the map (e.g. a Place or Text element) this is the text that will be shown. + +For elements such as Polygons or Paths, the name is what is shown when +the element is selected by clicking on it. + +#### description? + +> `optional` **description**: `null` | `string` + +Text describing the element, which is shown in an element's popup when it +is selected. + +Note that some elements are not selectable on the map, such as Notes, Text +and Markers, so their description will not be shown. + +#### attributes? + +> `optional` **attributes**: `Record`\<`string`, `unknown`> + +A set of key-value pairs that can be used to store arbitrary data about the element. + +This is most useful for associating additional data with an element that is not +part of the element's core data, such as a Place's address or some other +data. + +#### interaction? + +> `optional` **interaction**: `"default"` | `"locked"` + +Whether the element is interactive. + +The `default` interaction mode means that the element can be selected and edited by +the user, if it was created by the SDK or by the user using a tool. + +If the interaction mode is `locked`, the element will not be editable by the user, +which is often used for elements that you don't want the user to edit or move by +accident. + +Elements that were created by the map author (i.e. not during an SDK "session") are +not editable and have special behaviour depending on their name, description and +attributes. + +##### Default + +```ts +"default" +``` + +#### opacity? + +> `optional` **opacity**: `number` + +The opacity of the marker, between 0 and 1. + +##### Default + +```ts +1 +``` + +#### size? + +> `optional` **size**: `number` + +The size of the marker, used in conjunction with the `zoom` to determine +the actual size of the marker. + +##### Default + +```ts +10 +``` + +#### zoom? + +> `optional` **zoom**: `number` + +The zoom level at which the marker was created. This is combined with +the `size` to determine the actual size of the marker. + +When creating a marker, if you don't supply this value it defaults to +the current zoom of the map when you call `createElement`. + +#### coordinates? + +> `optional` **coordinates**: [`LngLatTuple`](client.md#lnglattuple)\[]\[] + +## HighlighterElementUpdate + +### Properties + +#### id + +> **id**: `string` + +The unique identifier for the element. + +#### type + +> **type**: `"Highlighter"` + +#### groupId? + +> `optional` **groupId**: `null` | `string` + +The ID of the element group that the element belongs to. +For elements that are not part of a group, this will be null. + +#### color? + +> `optional` **color**: `string` + +The color of the element in some CSS-like format. + +##### Example + +```typescript +"#ABC123"; +"rgb(255, 0, 0)"; +"hsl(200, 100%, 50%)"; +``` + +##### Default + +```ts +"#C93535" +``` + +#### name? + +> `optional` **name**: `null` | `string` + +The element's name. For elements that can show a label or text on +the map (e.g. a Place or Text element) this is the text that will be shown. + +For elements such as Polygons or Paths, the name is what is shown when +the element is selected by clicking on it. + +#### description? + +> `optional` **description**: `null` | `string` + +Text describing the element, which is shown in an element's popup when it +is selected. + +Note that some elements are not selectable on the map, such as Notes, Text +and Markers, so their description will not be shown. + +#### attributes? + +> `optional` **attributes**: `Record`\<`string`, `unknown`> + +A set of key-value pairs that can be used to store arbitrary data about the element. + +This is most useful for associating additional data with an element that is not +part of the element's core data, such as a Place's address or some other +data. + +#### interaction? + +> `optional` **interaction**: `"default"` | `"locked"` + +Whether the element is interactive. + +The `default` interaction mode means that the element can be selected and edited by +the user, if it was created by the SDK or by the user using a tool. + +If the interaction mode is `locked`, the element will not be editable by the user, +which is often used for elements that you don't want the user to edit or move by +accident. + +Elements that were created by the map author (i.e. not during an SDK "session") are +not editable and have special behaviour depending on their name, description and +attributes. + +##### Default + +```ts +"default" +``` + +#### renderHoles? + +> `optional` **renderHoles**: `boolean` + +Whether to render the holes of the highlighted area. + +##### Default + +```ts +false +``` + +#### opacity? + +> `optional` **opacity**: `number` + +The opacity of the highlighter, between 0 and 1. + +##### Default + +```ts +0.5 +``` + +#### coordinates? + +> `optional` **coordinates**: [`LngLatTuple`](client.md#lnglattuple)\[]\[]\[] + +A multipolygon describing the area that is highlighted. + +If `renderHoles` is set to false, only the outer ring of each polygon +will be rendered, filling in the area inside the highlighted region. + +## TextElementUpdate + +### Properties + +#### id + +> **id**: `string` + +The unique identifier for the element. + +#### type + +> **type**: `"Text"` + +#### groupId? + +> `optional` **groupId**: `null` | `string` + +The ID of the element group that the element belongs to. +For elements that are not part of a group, this will be null. + +#### color? + +> `optional` **color**: `string` + +The color of the element in some CSS-like format. + +##### Example + +```typescript +"#ABC123"; +"rgb(255, 0, 0)"; +"hsl(200, 100%, 50%)"; +``` + +##### Default + +```ts +"#C93535" +``` + +#### description? + +> `optional` **description**: `null` | `string` + +Text describing the element, which is shown in an element's popup when it +is selected. + +Note that some elements are not selectable on the map, such as Notes, Text +and Markers, so their description will not be shown. + +#### attributes? + +> `optional` **attributes**: `Record`\<`string`, `unknown`> + +A set of key-value pairs that can be used to store arbitrary data about the element. + +This is most useful for associating additional data with an element that is not +part of the element's core data, such as a Place's address or some other +data. + +#### interaction? + +> `optional` **interaction**: `"default"` | `"locked"` + +Whether the element is interactive. + +The `default` interaction mode means that the element can be selected and edited by +the user, if it was created by the SDK or by the user using a tool. + +If the interaction mode is `locked`, the element will not be editable by the user, +which is often used for elements that you don't want the user to edit or move by +accident. + +Elements that were created by the map author (i.e. not during an SDK "session") are +not editable and have special behaviour depending on their name, description and +attributes. + +##### Default + +```ts +"default" +``` + +#### rotation? + +> `optional` **rotation**: `number` + +The rotation of the element in degrees. + +##### Default + +```ts +0 +``` + +#### scale? + +> `optional` **scale**: `number` + +The relative scale of the element from the default size. This is combined +with the `zoom` to determine the actual size of the element. + +##### Default + +```ts +1 +``` + +#### zoom? + +> `optional` **zoom**: `number` + +The zoom level at which the element was created. This is combined with +the `scale` to determine the actual size of the element. + +When creating an element, if you don't supply this value it defaults to +the current zoom of the map when you call `createElement`. + +#### text? + +> `optional` **text**: `string` + +The text in the element. + +#### align? + +> `optional` **align**: `"center"` | `"left"` | `"right"` + +The alignment of the text, either `left`, `center` or `right`. + +##### Default + +```ts +"center" +``` + +#### style? + +> `optional` **style**: `"italic"` | `"light"` | `"regular"` | `"caps"` + +The style of the text, either `italic`, `light`, `regular` or `caps`. + +##### Default + +```ts +"regular" +``` + +#### position? + +> `optional` **position**: [`LngLatTuple`](client.md#lnglattuple) + +The geographical position of the center of the text element. + +## NoteElementUpdate + +### Properties + +#### id + +> **id**: `string` + +The unique identifier for the element. + +#### type + +> **type**: `"Note"` + +#### groupId? + +> `optional` **groupId**: `null` | `string` + +The ID of the element group that the element belongs to. +For elements that are not part of a group, this will be null. + +#### color? + +> `optional` **color**: `string` + +The color of the element in some CSS-like format. + +##### Example + +```typescript +"#ABC123"; +"rgb(255, 0, 0)"; +"hsl(200, 100%, 50%)"; +``` + +##### Default + +```ts +"#C93535" +``` + +#### description? + +> `optional` **description**: `null` | `string` + +Text describing the element, which is shown in an element's popup when it +is selected. + +Note that some elements are not selectable on the map, such as Notes, Text +and Markers, so their description will not be shown. + +#### attributes? + +> `optional` **attributes**: `Record`\<`string`, `unknown`> + +A set of key-value pairs that can be used to store arbitrary data about the element. + +This is most useful for associating additional data with an element that is not +part of the element's core data, such as a Place's address or some other +data. + +#### interaction? + +> `optional` **interaction**: `"default"` | `"locked"` + +Whether the element is interactive. + +The `default` interaction mode means that the element can be selected and edited by +the user, if it was created by the SDK or by the user using a tool. + +If the interaction mode is `locked`, the element will not be editable by the user, +which is often used for elements that you don't want the user to edit or move by +accident. + +Elements that were created by the map author (i.e. not during an SDK "session") are +not editable and have special behaviour depending on their name, description and +attributes. + +##### Default + +```ts +"default" +``` + +#### rotation? + +> `optional` **rotation**: `number` + +The rotation of the element in degrees. + +##### Default + +```ts +0 +``` + +#### scale? + +> `optional` **scale**: `number` + +The relative scale of the element from the default size. This is combined +with the `zoom` to determine the actual size of the element. + +##### Default + +```ts +1 +``` + +#### zoom? + +> `optional` **zoom**: `number` + +The zoom level at which the element was created. This is combined with +the `scale` to determine the actual size of the element. + +When creating an element, if you don't supply this value it defaults to +the current zoom of the map when you call `createElement`. + +#### text? + +> `optional` **text**: `string` + +The text in the element. + +#### align? + +> `optional` **align**: `"center"` | `"left"` | `"right"` + +The alignment of the text, either `left`, `center` or `right`. + +##### Default + +```ts +"center" +``` + +#### style? + +> `optional` **style**: `"italic"` | `"light"` | `"regular"` | `"caps"` + +The style of the text, either `italic`, `light`, `regular` or `caps`. + +##### Default + +```ts +"regular" +``` + +#### widthScale? + +> `optional` **widthScale**: `number` + +#### position? + +> `optional` **position**: [`LngLatTuple`](client.md#lnglattuple) + +The geographical position of the center of the note element. + +## ImageElementUpdate + +### Properties + +#### id + +> **id**: `string` + +The unique identifier for the element. + +#### type + +> **type**: `"Image"` + +#### groupId? + +> `optional` **groupId**: `null` | `string` + +The ID of the element group that the element belongs to. +For elements that are not part of a group, this will be null. + +#### name? + +> `optional` **name**: `null` | `string` + +The element's name. For elements that can show a label or text on +the map (e.g. a Place or Text element) this is the text that will be shown. + +For elements such as Polygons or Paths, the name is what is shown when +the element is selected by clicking on it. + +#### description? + +> `optional` **description**: `null` | `string` + +Text describing the element, which is shown in an element's popup when it +is selected. + +Note that some elements are not selectable on the map, such as Notes, Text +and Markers, so their description will not be shown. + +#### attributes? + +> `optional` **attributes**: `Record`\<`string`, `unknown`> + +A set of key-value pairs that can be used to store arbitrary data about the element. + +This is most useful for associating additional data with an element that is not +part of the element's core data, such as a Place's address or some other +data. + +#### interaction? + +> `optional` **interaction**: `"default"` | `"locked"` + +Whether the element is interactive. + +The `default` interaction mode means that the element can be selected and edited by +the user, if it was created by the SDK or by the user using a tool. + +If the interaction mode is `locked`, the element will not be editable by the user, +which is often used for elements that you don't want the user to edit or move by +accident. + +Elements that were created by the map author (i.e. not during an SDK "session") are +not editable and have special behaviour depending on their name, description and +attributes. + +##### Default + +```ts +"default" +``` + +#### coordinates? + +> `optional` **coordinates**: \[`number`, `number`]\[]\[] = `MultiLineStringGeometrySchema.shape.coordinates` + +#### imageUrl? + +> `optional` **imageUrl**: `string` + +The URL of the image that is rendered in this element + +#### opacity? + +> `optional` **opacity**: `number` + +The opacity of the image, between 0 and 1. + +##### Default + +```ts +1 +``` + +## ElementGroup + +### 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 ElementsController.getElements | \`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. + +## GetElementsConstraint + +The constraints to apply when getting elements. + +### Properties + +#### ids? + +> `optional` **ids**: `string`\[] + +The ids of the elements to get. + +## GetElementGroupsConstraint + +The constraints to apply when getting element groups. + +### Properties + +#### ids? + +> `optional` **ids**: `string`\[] + +The ids of the element groups to get. + +## ElementChangeCallbackParams + +The parameters for the ElementsController.onElementChange | \`onElementChange\` and the ElementsController.onElementCreate | \`onElementCreate\` listeners. + +### Properties + +#### element + +> **element**: `null` | [`Element`](client.md#element-1) + +The new data for the element or null if the element was removed. + +#### isBeingCreated + +> **isBeingCreated**: `boolean` + +Whether or not this element is still being created by a drawing tool. + +For example, if the user begins drawing a polygon, they need to place +multiple points until they've ultimately completed the polygon. All +the time they are still placing points, this will be true. + +For elements that require text entry (such as Places, Text and Notes) +this will be true all the time the user is typing text until the point +at which the user finishes, by pressing Escape for example. + +If the user is editing an existing element, this will be false. + +For elements that are created programmatically, this will be false. + +## ElementGroupChangeCallbackParams + +The parameters for the ElementsController.onElementGroupChange | \`onElementGroupChange\` listener. + +### Properties + +#### elementGroup + +> **elementGroup**: `null` | [`ElementGroup`](client.md#elementgroup) + +## MapInteractionEvent + +The event object passed to the interaction listeners. + +### Properties + +#### coordinate + +> **coordinate**: [`LatLng`](client.md#latlng) + +The cursor position in world coordinates. + +#### point + +> **point**: `object` + +The pixel coordinates of the mouse cursor, relative to the map and measured from the top left corner. + +##### x + +> **x**: `number` + +##### y + +> **y**: `number` + +#### features + +> **features**: [`LayerFeature`](client.md#layerfeature)\[] + +The vector features that are under the cursor. + +#### rasterValues + +> **rasterValues**: [`RasterValue`](client.md#rastervalue)\[] + +The raster pixel values that are under the cursor. + +## LayerFeature + +A LayerFeature is a single geographical item in a layer. + +It is intended to be a lightweight object that contains the properties of a +feature, but not the geometry. It is returned by methods like +[FeltController.getRenderedFeatures](client.md#getrenderedfeatures) and [FeltController.getFeature](client.md#getfeature), +and as part of the methods in the SelectionController + +The geometry can be obtained via the [FeltController.getGeoJsonFeature](client.md#getgeojsonfeature) +method, which returns a [GeoJsonFeature](client.md#geojsonfeature) object. + +### Properties + +#### id + +> **id**: `string` | `number` + +The identifier of the feature, unique within the layer. + +#### isDeterministicId + +> **isDeterministicId**: `boolean` + +Whether the id is deterministic. + +##### Remarks + +If the id is deterministic, it means that the id can be used to reference the feature +in the layer and therefore in all the SDK feature-related methods. + +When the id is not deterministic, the feature cannot be referenced on SDK methods like [FeltController.getFeature](client.md#getfeature) +or [SelectionController.selectFeature](client.md#selectfeature). + +For layers created and processed on Felt servers, the feature IDs are deterministic because Felt ensures every feature is correctly identified in vector tiles. +This cannot be guaranteed for layers created using a GeoJSON source on the SDK (see [LayersController.createLayersFromGeoJson](client.md#createlayersfromgeojson)) +where the ID will only be deterministic if GeoJSON features have an `id` property. + +#### layerId + +> **layerId**: `string` + +The identifier of the layer that the feature belongs to. + +#### geometryType + +> **geometryType**: `"Polygon"` | `"MultiPolygon"` | `"LineString"` | `"MultiLineString"` | `"Point"` | `"MultiPoint"` | `string` & `object` + +The type of geometry of the feature. + +##### Remarks + +Because LayerFeatures can be read from tiled features, it's +possible that this `geometryType` won't match the `geometry.type` of the +[GeoJsonFeature](client.md#geojsonfeature) returned by [FeltController.getGeoJsonFeature](client.md#getgeojsonfeature). + +For example, this may return `LineString` but the full feature is a `MultiLineString`, +or, similarly `Polygon` here may be a `MultiPolygon` in the full feature. + +As a result, you should treat this property as being indicative only. + +#### bbox + +> **bbox**: `undefined` | \[`number`, `number`, `number`, `number`] + +The bounding box of the feature. + +##### Remarks + +Because LayerFeatures can be read from tiled features and considering +that feature geometry can go through multiple tiles, it's possible that this +is not the complete bounding box of the feature. + +#### properties + +> **properties**: [`GeoJsonProperties`](client.md#geojsonproperties) + +The properties of the feature, as a bag of attributes. + +## RasterValue + +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. + +## LayerFilters + +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`](client.md#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`](client.md#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`](client.md#filters) + +Filters that are set ephemerally by viewers in their own session. + +These are the filters that are set when the LayersController.setLayerFilters | \`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`](client.md#filters) + +The combined result of all the filters set on the layer. + +## LayerBoundaries + +All the different sources for boundaries for a layer, including their combined result. + +### Properties + +#### spatialFilters + +> **spatialFilters**: `null` | [`MultiPolygonGeometry`](client.md#multipolygongeometry) + +Boundaries set by drawing spatial filters on the map. + +When there are multiple spatial filters, they are combined into a multi-polygon. + +#### ephemeral + +> **ephemeral**: `null` | [`GeometryFilter`](client.md#geometryfilter) + +Boundaries that are set ephemerally by viewers in their own session. + +These are the filters that are set when the LayersController.setLayerBoundary +method is called. There is no way to set these in the Felt UI - they can only be +set using the SDK. + +#### combined + +> **combined**: `null` | [`MultiPolygonGeometry`](client.md#multipolygongeometry) + +The combined result of all the boundaries set on the layer. + +Each different source of boundary is intersected to produce the combined result. + +## AggregationConfig + +Defines how to aggregate a value across features in a layer. + +### Properties + +#### attribute + +> **attribute**: `string` + +The attribute to use for the aggregation. This must be a numeric attribute. + +#### method + +> **method**: `"avg"` | `"max"` | `"min"` | `"sum"` | `"median"` + +The method to use for the aggregation. + +## MultiAggregationConfig\ + +Defines how to aggregate a value across features in a layer with multiple aggregations +returned at once. + +### Type Parameters + +• **T** *extends* [`AggregationMethod`](client.md#aggregationmethod) | `"count"` + +### Properties + +#### methods + +> **methods**: `T`\[] + +The operations to use on the values from the features in the layer + +#### attribute? + +> `optional` **attribute**: `string` + +The attribute ID to use for the aggregation when aggregations other than "count" are used. + +This can be omitted if the only aggregation is "count", but must be a numeric attribute +otherwise. + +Use `getLayerSchema` to get the attributes available for a layer. + +## ValueConfiguration + +Configuration for filtering and aggregating values across features. + +This can be used to restrict the features considered for aggregation via the `boundary` +and `filters` properties. + +It can also be used to specify how to aggregate the values via the `aggregation` property. + +### Properties + +#### boundary? + +> `optional` **boundary**: [`GeometryFilter`](client.md#geometryfilter) + +The spatial boundary for what to count or aggregate. + +#### filters? + +> `optional` **filters**: [`Filters`](client.md#filters) + +Attribute filters to determine what gets counted or aggregated. + +#### aggregation? + +> `optional` **aggregation**: [`AggregationConfig`](client.md#aggregationconfig) + +Specifies how to aggregate values within each category or bin. When omitted, +features are counted. When specified, the chosen calculation (avg, sum, etc.) +is performed on the specified attribute. + +For example, instead of counting buildings in each category, you might want +to sum their square footage or average their assessed values. + +## GetLayerCategoriesParams + +The parameters for getting categories from a layer, passed to +the [LayersController.getCategoryData](client.md#getcategorydata) method. + +### Properties + +#### layerId + +> **layerId**: `string` + +The ID of the layer to get categories from. + +#### attribute + +> **attribute**: `string` + +The attribute to use for categorization. + +#### limit? + +> `optional` **limit**: `number` + +The maximum number of categories to return. + +#### filters? + +> `optional` **filters**: [`Filters`](client.md#filters) + +Attribute filters for the features to include when calculating the categories. + +#### boundary? + +> `optional` **boundary**: [`GeometryFilter`](client.md#geometryfilter) + +The spatial boundary for the features to include when calculating the categories. + +#### values? + +> `optional` **values**: [`ValueConfiguration`](client.md#valueconfiguration) + +Configuration for filtering and aggregating values while preserving the full set of +categories in the results. + +This is particularly useful when you want to compare different subsets of data while +maintaining consistent categories. For example: + +* Show all building types in a city, but only count recent buildings in each type +* Keep all neighborhood categories but only sum up residential square footage + +Unlike top-level filters which affect both what categories appear AND their values, +filters in this configuration only affect the values while keeping all possible +categories in the results. + +## GetLayerCategoriesGroup + +A single category from the response from the [LayersController.getCategoryData](client.md#getcategorydata) method. + +### Properties + +#### key + +> **key**: `string` | `number` | `boolean` + +The category for which the value was calculated. + +#### value + +> **value**: `null` | `number` + +The value calculated for the category, whether a count, sum, average, etc. + +`null` is returned if there are no features in the category as opposed to zero, +so as not to confuse with a real zero value from some aggregation. + +## GetLayerHistogramParams + +The params used to request a histogram of values from a layer, passed to +the [LayersController.getHistogramData](client.md#gethistogramdata) method. + +### Properties + +#### layerId + +> **layerId**: `string` + +#### attribute + +> **attribute**: `string` + +#### steps + +> **steps**: `number`\[] | \{ `type`: `"equal-intervals"`; `count`: `number`; } | \{ `type`: `"time-interval"`; `interval`: `"hour"` | `"day"` | `"week"` | `"month"` | `"year"`; } + +#### values? + +> `optional` **values**: `object` + +Configuration for filtering and aggregating values while preserving the full set of +bin ranges in the results. + +This is particularly useful when you want to compare different subsets of data while +maintaining consistent ranges. For example: + +* Use the same height ranges for comparing old vs new buildings + +Unlike top-level filters which affect both what ranges appear AND their values, +filters in this configuration only affect the values while keeping all possible +ranges in the results. + +##### boundary? + +> `optional` **boundary**: \[`number`, `number`]\[] | \[`number`, `number`, `number`, `number`] | \{ `type`: `"Polygon"`; `coordinates`: \[`number`, `number`]\[]\[]; } | \{ `type`: `"MultiPolygon"`; `coordinates`: \[`number`, `number`]\[]\[]\[]; } + +##### Type declaration + +\[`number`, `number`]\[] + +\[`number`, `number`, `number`, `number`] + +\{ `type`: `"Polygon"`; `coordinates`: \[`number`, `number`]\[]\[]; } + +\{ `type`: `"MultiPolygon"`; `coordinates`: \[`number`, `number`]\[]\[]\[]; } + +##### filters? + +> `optional` **filters**: `null` | `boolean` | \[`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`] | [`FilterTernary`](client.md#filterternary) + +##### aggregation? + +> `optional` **aggregation**: `object` + +##### aggregation.method + +> **method**: `"avg"` | `"max"` | `"min"` | `"sum"` | `"median"` = `AggregateMethodSchema` + +The operation to use on the values from the features in the layer + +##### aggregation.attribute + +> **attribute**: `string` + +The attribute to use for the aggregation. This must be a numeric attribute. + +#### filters? + +> `optional` **filters**: [`Filters`](client.md#filters) + +Attribute filters for the features to include when calculating the histogram bins. + +#### boundary? + +> `optional` **boundary**: [`GeometryFilter`](client.md#geometryfilter) + +The spatial boundary for the features to include when calculating the histogram bins. + +## GetLayerHistogramBin + +One bin from the response from the [LayersController.getHistogramData](client.md#gethistogramdata) method. + +### Properties + +#### min + +> **min**: `number` + +The left edge of the bin. + +#### max + +> **max**: `number` + +The right edge of the bin. + +#### value + +> **value**: `number` + +The number of features in the bin. + +## GetLayerCalculationParams\ + +The parameters for calculating a single aggregate value for a layer, passed to +the [LayersController.getAggregates](client.md#getaggregates) method. + +### Type Parameters + +• **T** *extends* [`AggregationMethod`](client.md#aggregationmethod) | `"count"` + +### Properties + +#### layerId + +> **layerId**: `string` + +The ID of the layer to calculate an aggregate value for. + +#### aggregation + +> **aggregation**: [`MultiAggregationConfig`](client.md#multiaggregationconfigt)\<`T`> + +Specifies how to aggregate values within each category or bin. When omitted, +features are counted. When specified, the chosen calculation (avg, sum, etc.) +is performed on the specified attribute. + +#### filters? + +> `optional` **filters**: [`Filters`](client.md#filters) + +Attribute filters for the features to include when calculating the aggregate value. + +#### boundary? + +> `optional` **boundary**: [`GeometryFilter`](client.md#geometryfilter) + +The spatial boundary for the features to include when calculating the aggregate value. + +## CountGridConfig + +The grid configuration for a count-based precomputed aggregate value. Compared to the +[AggregatedGridConfig](client.md#aggregatedgridconfig), the `attribute` property is not required, because the count +is the same regardless of the attribute. + +Used inside [GetLayerPrecomputedCalculationParams](client.md#getlayerprecomputedcalculationparams). + +### Properties + +#### resolution + +> **resolution**: `number` + +The resolution of the grid to use for the precomputed calculation. + +#### type + +> **type**: `"h3"` + +The type of grid to use for the precomputed calculation. + +#### method + +> **method**: `"count"` + +The method to use for the precomputed calculation, which in this case is always "count". + +## AggregatedGridConfig + +The grid configuration for an aggregated precomputed aggregate value. This requires +an `attribute` property, because the numeric aggregation requires it. + +If you just want to count the features in each grid cell, use the [CountGridConfig](client.md#countgridconfig) +instead, where you are not required to specify an `attribute`. + +Used inside [GetLayerPrecomputedCalculationParams](client.md#getlayerprecomputedcalculationparams). + +### Properties + +#### resolution + +> **resolution**: `number` + +The resolution of the grid to use for the precomputed calculation. + +#### attribute + +> **attribute**: `string` + +The attribute to use for the precomputed calculation. + +This must be a numeric attribute; + +#### type + +> **type**: `"h3"` + +The type of grid to use for the precomputed calculation. + +#### method + +> **method**: `"avg"` | `"max"` | `"min"` | `"sum"` + +The method to use for the precomputed calculation. + +## GetLayerPrecomputedCalculationParams + +The parameters for calculating a single aggregate value for a layer, passed to +the [LayersController.getPrecomputedAggregates](client.md#getprecomputedaggregates) method. + +### Properties + +#### layerId + +> **layerId**: `string` + +The ID of the layer to calculate an aggregate value for. + +#### gridConfig + +> **gridConfig**: [`GridConfig`](client.md#gridconfig-1) + +The grid configuration to use for the precomputed calculation. + +#### filters? + +> `optional` **filters**: [`Filters`](client.md#filters) + +Attribute filters for the features to include when calculating the aggregate value. + +#### boundary? + +> `optional` **boundary**: [`GeometryFilter`](client.md#geometryfilter) + +The spatial boundary for the features to include when calculating the aggregate value. + +## LayerCommon + +The common properties for all layers. + +### Properties + +#### id + +> **id**: `string` + +A 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. + +#### legendDisplay + +> **legendDisplay**: `"default"` | `"nameOnly"` + +The display mode for the layer's legend. + +See [LegendDisplay](client.md#legenddisplay-5) for more details. + +#### style + +> **style**: `object` + +The FSL style for the layer. + +See the [FSL documentation](https://developers.felt.com/felt-style-language) 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. + +#### bounds + +> **bounds**: `null` | \[`number`, `number`, `number`, `number`] + +The bounding box of the layer in \[west, south, east, north] order + +There are cases where the bounds are not available, such as for layers added to the map +from URL sources, as these are not (depending on their type) processed and analyzed by +Felt. + +[FeltBoundary](client.md#feltboundary) + +## RasterLayer + +A raster layer is a layer that contains raster data that can be rendered on the map + +### Properties + +#### id + +> **id**: `string` + +A 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. + +#### legendDisplay + +> **legendDisplay**: `"default"` | `"nameOnly"` + +The display mode for the layer's legend. + +See [LegendDisplay](client.md#legenddisplay-5) for more details. + +#### style + +> **style**: `object` + +The FSL style for the layer. + +See the [FSL documentation](https://developers.felt.com/felt-style-language) 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. + +#### bounds + +> **bounds**: `null` | \[`number`, `number`, `number`, `number`] + +The bounding box of the layer in \[west, south, east, north] order + +There are cases where the bounds are not available, such as for layers added to the map +from URL sources, as these are not (depending on their type) processed and analyzed by +Felt. + +[FeltBoundary](client.md#feltboundary) + +#### geometryType + +> **geometryType**: `"Raster"` + +Identifies the type of geometry in the layer. + +#### source + +> **source**: [`RasterLayerSource`](client.md#rasterlayersource) + +The source of the raster layer's data. + +## RasterLayerSource + +The source of a raster layer's data. + +### Properties + +#### imageTileTemplateUrl + +> **imageTileTemplateUrl**: `string` + +A URL template for fetching image tiles for the raster. + +#### encodedTileTemplateUrl + +> **encodedTileTemplateUrl**: `string` + +A URL template for fetching encoded tiles for the raster. + +The encoded raster value can be calculated from the red, green, and blue values of the pixel +using the following formula: + +``` +base + ((RED << 16) + (GREEN <<8) + BLUE) * interval +``` + +or + +``` +base + (RED * 256 * 256 + GREEN * 256 + BLUE) * interval +``` + +#### bands + +> **bands**: [`RasterBand`](client.md#rasterband)\[] + +List of encoded raster bands + +## RasterBand + +The RasterBand interface describes the metadata for a raster band, necessary for +calculating the encoded raster value from the red, green, and blue values of the pixel. + +### Properties + +#### base + +> **base**: `number` + +Encoding base value as a floating point number + +#### interval + +> **interval**: `number` + +Encoding interval as a floating point number + +#### bandIndex + +> **bandIndex**: `number` + +1-based index of the band in the raster + +## VectorLayer + +A vector layer is a layer that contains vector data that can be rendered on the map + +### Properties + +#### id + +> **id**: `string` + +A 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. + +#### legendDisplay + +> **legendDisplay**: `"default"` | `"nameOnly"` + +The display mode for the layer's legend. + +See [LegendDisplay](client.md#legenddisplay-5) for more details. + +#### style + +> **style**: `object` + +The FSL style for the layer. + +See the [FSL documentation](https://developers.felt.com/felt-style-language) 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. + +#### bounds + +> **bounds**: `null` | \[`number`, `number`, `number`, `number`] + +The bounding box of the layer in \[west, south, east, north] order + +There are cases where the bounds are not available, such as for layers added to the map +from URL sources, as these are not (depending on their type) processed and analyzed by +Felt. + +[FeltBoundary](client.md#feltboundary) + +#### geometryType + +> **geometryType**: `"Polygon"` | `"Point"` | `"Line"` + +Identifies the type of geometry in the layer. + +#### source + +> **source**: [`GeoJsonUrlVectorSource`](client.md#geojsonurlvectorsource) | [`FeltTiledVectorSource`](client.md#felttiledvectorsource) | `Omit`\<[`GeoJsonDataVectorSource`](client.md#geojsondatavectorsource), `"data"`> + +The source of the vector layer's data. + +## GeoJsonUrlVectorSource + +A GeoJSON URL source is a layer that is populated from a GeoJSON file at a remote URL. + +These sources are ones that have not been uploaded to and processed by Felt, and as such +their capabilities are limited. + +For instance, they cannot be filtered, nor can statistics be fetched for them. + +### Properties + +#### type + +> **type**: `"geoJsonUrl"` + +Identifies this as a GeoJSON URL source. + +#### url + +> **url**: `string` + +The remote URL of the GeoJSON file used to populate the layer. + +#### refreshInterval? + +> `optional` **refreshInterval**: `null` | `number` + +The interval in milliseconds between automatic refreshes of the GeoJSON. + +The value must be in the range of 250ms - 5 minutes (300,000ms). + +If the value is `null`, the GeoJSON will not be refreshed automatically. + +## GeoJsonDataVectorSource + +A GeoJSON data source is a layer that is populated from GeoJSON data, such as +from a local file, or programmatically-created data. + +### Properties + +#### type + +> **type**: `"geoJsonData"` + +Identifies this as a GeoJSON data source. + +#### data + +> **data**: `object` + +The GeoJSON data for the layer. + +This must be a GeoJSON FeatureCollection. + +## GeoJsonFileVectorSource + +A GeoJSON file source is a layer that is populated from a GeoJSON file +on your local machine. + +This is an input-only type. It is converted to a [GeoJsonDataVectorSource](client.md#geojsondatavectorsource) +when passed to [LayersController.createLayersFromGeoJson](client.md#createlayersfromgeojson). + +### Properties + +#### type + +> **type**: `"geoJsonFile"` + +Identifies this as a GeoJSON file source. + +#### file + +> **file**: `File` + +The GeoJSON file for the layer. + +## UpdateLayerParams + +The value you need to pass to [LayersController.updateLayer](client.md#updatelayer) + +### Properties + +#### id + +> **id**: `string` + +The id of the layer to update. + +#### shownInLegend? + +> `optional` **shownInLegend**: `boolean` + +Changes whether the layer is shown in the legend. + +#### legendDisplay? + +> `optional` **legendDisplay**: `"default"` | `"nameOnly"` + +Changes the layer's legend display mode. + +See [LegendDisplay](client.md#legenddisplay-5) for more details. + +#### name? + +> `optional` **name**: `string` + +Changes the name of the layer. + +#### caption? + +> `optional` **caption**: `string` + +Changes the caption of the layer. + +#### description? + +> `optional` **description**: `string` + +Changes the description of the layer. + +#### bounds? + +> `optional` **bounds**: \[`number`, `number`, `number`, `number`] + +Changes the bounds of the layer. + +#### style? + +> `optional` **style**: `object` + +The style of the layer. + +#### source? + +> `optional` **source**: [`GeoJsonUrlVectorSource`](client.md#geojsonurlvectorsource) | [`GeoJsonDataVectorSource`](client.md#geojsondatavectorsource) | [`GeoJsonFileVectorSource`](client.md#geojsonfilevectorsource) + +Updates the source of the layer. + +Only layers that have a GeoJSON source can have their source udpated. + +For URL sources, if you pass the same URL again it will cause the data to be +refreshed. + +## DataOnlyLayer + +A data-only layer doesn't have any geometry, but can be used to join with other layers + +### Properties + +#### id + +> **id**: `string` + +A 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. + +#### legendDisplay + +> **legendDisplay**: `"default"` | `"nameOnly"` + +The display mode for the layer's legend. + +See [LegendDisplay](client.md#legenddisplay-5) for more details. + +#### style + +> **style**: `object` + +The FSL style for the layer. + +See the [FSL documentation](https://developers.felt.com/felt-style-language) 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` + +Indicates that this layer has no geometry. + +#### bounds + +> **bounds**: `null` + +This is always null for data-only layers. + +## LayerGroup + +### 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\`](client.md#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 in \[west, south, east, north] order. + +[FeltBoundary](client.md#feltboundary) + +## GetLayersConstraint + +The constraints to apply when getting layers. + +### Properties + +#### ids? + +> `optional` **ids**: `string`\[] + +The ids of the layers to get. + +## GetLayerGroupsConstraint + +The constraints to apply when getting layer groups. + +### Properties + +#### ids? + +> `optional` **ids**: `string`\[] + +The ids of the layer groups to get. + +## LayerChangeCallbackParams + +The parameters for the [\`onLayerChange\`](client.md#onlayerchange) listener. + +### Properties + +#### layer + +> **layer**: `null` | [`Layer`](client.md#layer-1) + +The new data for the layer or null if the layer was removed. + +## LayerGroupChangeCallbackParams + +The parameters for the [\`onLayerGroupChange\`](client.md#onlayergroupchange) listener. + +### Properties + +#### layerGroup + +> **layerGroup**: `null` | [`LayerGroup`](client.md#layergroup) + +## LegendItem + +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\`](client.md#getlegenditem) when the zoom level changes. + +Note that as the zoom level changes, the [\`onLegendItemChange\`](client.md#onlegenditemchange) handler +will not be called, so you need to call [\`getLegendItem\`](client.md#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. + +## LegendItemIdentifier + +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. + +## LegendItemsConstraint + +Constraints for legend items. If nothing is passed, all legend items will be returned. + +### Properties + +#### ids? + +> `optional` **ids**: `object`\[] + +Array of legend item identifiers to constrain by. + +##### id + +> **id**: `string` + +The id of the legend item. + +##### layerId + +> **layerId**: `string` + +The id of the layer the legend item belongs to. + +#### layerIds? + +> `optional` **layerIds**: `string`\[] + +Array of layer ids to constrain legend items by. + +## LegendItemChangeCallbackParams + +The parameters for the [\`onLegendItemChange\`](client.md#onlegenditemchange) listener. + +### Properties + +#### legendItem + +> **legendItem**: `null` | [`LegendItem`](client.md#legenditem) + +The new data for the legend item or null if the legend item was removed. + +## GetRenderedFeaturesConstraint + +Constraints for the [\`getRenderedFeatures\`](client.md#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`](client.md#latlng); } | \{ `boundary`: \[`number`, `number`, `number`, `number`]; } + +The area to query for rendered features. This can be specific coordinates or a [FeltBoundary](client.md#feltboundary). If omitted, the entire viewport will be queried. + +#### layerIds? + +> `optional` **layerIds**: `string`\[] + +The ids of the layers to get rendered features for. + +## LayerSchema + +The schema that describes the structure of the features in a layer. + +### Remarks + +This can be useful to build generic UIs that need to know the structure of the data in +a layer, such as a dropdown to choose an attribute. + +### Properties + +#### featureCount + +> **featureCount**: `number` + +The total number of features in the layer. + +#### attributes + +> **attributes**: [`LayerSchemaAttribute`](client.md#layerschemaattribute)\[] + +Array of attribute schemas describing the properties available on features in this layer. + +## LayerSchemaCommonAttribute + +The common schema for all attributes. + +### Properties + +#### id + +> **id**: `string` + +The unique identifier for this attribute. + +This can be used to fetch statistics, categories, histograms etc. for this attribute +via the [LayersController.getCategoryData](client.md#getcategorydata), [LayersController.getHistogramData](client.md#gethistogramdata), +and [LayersController.getAggregates](client.md#getaggregates) methods. + +#### displayName + +> **displayName**: `string` + +The human-readable name of this attribute. + +#### detailedType + +> **detailedType**: `string` + +The specific data type of this attribute, providing more detail than the basic type. + +For instance, a numeric attribute might be "INTEGER", "FLOAT, etc. + +#### distinctCount + +> **distinctCount**: `number` + +The number of distinct values present for this attribute across all features. + +## LayerSchemaNumericAttribute + +The schema for a numeric attribute on a layer. + +### Properties + +#### id + +> **id**: `string` + +The unique identifier for this attribute. + +This can be used to fetch statistics, categories, histograms etc. for this attribute +via the [LayersController.getCategoryData](client.md#getcategorydata), [LayersController.getHistogramData](client.md#gethistogramdata), +and [LayersController.getAggregates](client.md#getaggregates) methods. + +#### displayName + +> **displayName**: `string` + +The human-readable name of this attribute. + +#### detailedType + +> **detailedType**: `string` + +The specific data type of this attribute, providing more detail than the basic type. + +For instance, a numeric attribute might be "INTEGER", "FLOAT, etc. + +#### distinctCount + +> **distinctCount**: `number` + +The number of distinct values present for this attribute across all features. + +#### type + +> **type**: `"numeric"` + +Indicates this is a numeric attribute. + +#### sampleValues + +> **sampleValues**: `object`\[] + +A small sample of values for this attribute and their frequency. + +##### value + +> **value**: `number` + +##### count + +> **count**: `number` + +#### min + +> **min**: `number` + +The minimum value present for this attribute across all features. + +#### max + +> **max**: `number` + +The maximum value present for this attribute across all features. + +## LayerSchemaTextAttribute + +The schema for a text attribute on a layer. + +### Properties + +#### id + +> **id**: `string` + +The unique identifier for this attribute. + +This can be used to fetch statistics, categories, histograms etc. for this attribute +via the [LayersController.getCategoryData](client.md#getcategorydata), [LayersController.getHistogramData](client.md#gethistogramdata), +and [LayersController.getAggregates](client.md#getaggregates) methods. + +#### displayName + +> **displayName**: `string` + +The human-readable name of this attribute. + +#### detailedType + +> **detailedType**: `string` + +The specific data type of this attribute, providing more detail than the basic type. + +For instance, a numeric attribute might be "INTEGER", "FLOAT, etc. + +#### distinctCount + +> **distinctCount**: `number` + +The number of distinct values present for this attribute across all features. + +#### type + +> **type**: `"text"` + +Indicates this is a text attribute. + +#### sampleValues + +> **sampleValues**: `object`\[] + +A small sample of string values for this attribute and their frequency. + +##### value + +> **value**: `string` + +##### count + +> **count**: `number` + +## LayerSchemaBooleanAttribute + +The schema for a boolean attribute on a layer. + +### Properties + +#### id + +> **id**: `string` + +The unique identifier for this attribute. + +This can be used to fetch statistics, categories, histograms etc. for this attribute +via the [LayersController.getCategoryData](client.md#getcategorydata), [LayersController.getHistogramData](client.md#gethistogramdata), +and [LayersController.getAggregates](client.md#getaggregates) methods. + +#### displayName + +> **displayName**: `string` + +The human-readable name of this attribute. + +#### detailedType + +> **detailedType**: `string` + +The specific data type of this attribute, providing more detail than the basic type. + +For instance, a numeric attribute might be "INTEGER", "FLOAT, etc. + +#### distinctCount + +> **distinctCount**: `number` + +The number of distinct values present for this attribute across all features. + +#### type + +> **type**: `"boolean"` + +Indicates this is a boolean attribute. + +#### sampleValues + +> **sampleValues**: `object`\[] + +A representative sample of boolean values for this attribute and their frequency. + +##### value + +> **value**: `boolean` + +##### count + +> **count**: `number` + +## LayerSchemaDateAttribute + +The schema for a date attribute on a layer. + +### Properties + +#### id + +> **id**: `string` + +The unique identifier for this attribute. + +This can be used to fetch statistics, categories, histograms etc. for this attribute +via the [LayersController.getCategoryData](client.md#getcategorydata), [LayersController.getHistogramData](client.md#gethistogramdata), +and [LayersController.getAggregates](client.md#getaggregates) methods. + +#### displayName + +> **displayName**: `string` + +The human-readable name of this attribute. + +#### detailedType + +> **detailedType**: `string` + +The specific data type of this attribute, providing more detail than the basic type. + +For instance, a numeric attribute might be "INTEGER", "FLOAT, etc. + +#### distinctCount + +> **distinctCount**: `number` + +The number of distinct values present for this attribute across all features. + +#### type + +> **type**: `"date"` + +Indicates this is a date attribute. + +#### min + +> **min**: `string` + +The earliest date present for this attribute in truncated ISO8601 format (YYYY-MM-DD). + +#### max + +> **max**: `string` + +The latest date present for this attribute in truncated ISO8601 format (YYYY-MM-DD). + +#### sampleValues + +> **sampleValues**: `object`\[] + +A representative sample of date values for this attribute and their frequency. + +##### value + +> **value**: `string` + +##### count + +> **count**: `number` + +## LayerSchemaDateTimeAttribute + +The schema for a datetime attribute on a layer. + +### Properties + +#### id + +> **id**: `string` + +The unique identifier for this attribute. + +This can be used to fetch statistics, categories, histograms etc. for this attribute +via the [LayersController.getCategoryData](client.md#getcategorydata), [LayersController.getHistogramData](client.md#gethistogramdata), +and [LayersController.getAggregates](client.md#getaggregates) methods. + +#### displayName + +> **displayName**: `string` + +The human-readable name of this attribute. + +#### detailedType + +> **detailedType**: `string` + +The specific data type of this attribute, providing more detail than the basic type. + +For instance, a numeric attribute might be "INTEGER", "FLOAT, etc. + +#### distinctCount + +> **distinctCount**: `number` + +The number of distinct values present for this attribute across all features. + +#### type + +> **type**: `"datetime"` + +Indicates this is a datetime attribute. + +#### min + +> **min**: `string` + +The earliest datetime present for this attribute in ISO8601 format. + +#### max + +> **max**: `string` + +The latest datetime present for this attribute in ISO8601 format. + +#### sampleValues + +> **sampleValues**: `object`\[] + +A representative sample of datetime values for this attribute and their frequency. + +##### value + +> **value**: `string` + +##### count + +> **count**: `number` + +## CreateLayersFromGeoJsonParams + +The parameters for the [LayersController.createLayersFromGeoJson](client.md#createlayersfromgeojson) method. + +### Properties + +#### name + +> **name**: `string` + +The name of the layer to create. + +#### source + +> **source**: [`GeoJsonUrlVectorSource`](client.md#geojsonurlvectorsource) | [`GeoJsonDataVectorSource`](client.md#geojsondatavectorsource) | [`GeoJsonFileVectorSource`](client.md#geojsonfilevectorsource) + +The source of the GeoJSON data. + +#### bounds? + +> `optional` **bounds**: \[`number`, `number`, `number`, `number`] + +Sets the bounds of the layer. + +#### caption? + +> `optional` **caption**: `string` + +Sets the caption of the layer. + +#### description? + +> `optional` **description**: `string` + +Sets the description of the layer. + +#### geometryStyles? + +> `optional` **geometryStyles**: `object` + +The styles to apply to each geometry on the layer. + +Each style should be a valid FSL style, as described in [Layer.style](client.md#style-9). + +These are optional, and if missing will use a default style determined by +Felt, which you can consider to be undefined behaviour. + +##### Point? + +> `optional` **Point**: `object` + +##### Line? + +> `optional` **Line**: `object` + +##### Polygon? + +> `optional` **Polygon**: `object` + +##### Example + +```typescript +const layer = await layersController.createLayersFromGeoJson({ + name: "My Layer", + geometryStyles: { + Point: { + paint: { color: "red", size: 8 }, + }, + Line: { + paint: { color: "blue", size: 4 }, + config: { labelAttribute: ["name"] }, + label: { minZoom: 0 }, + }, + Polygon: { + paint: { color: "green", strokeColor: "darkgreen" }, + }, + }, +}); +``` + +## FeltController + +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`.[`ToolsController`](client.md#toolscontroller).`MiscController` + +### Methods + +#### getElement() + +> **getElement**(`id`): `Promise`\<`null` | [`Element`](client.md#element-1)> + +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. + +##### Parameters + +##### id + +`string` + +The id of the element you want to get. + +##### Returns + +`Promise`\<`null` | [`Element`](client.md#element-1)> + +A promise that resolves to the requested element, or `null` if not found. + +##### Example + +```typescript +const element = await felt.getElement("element-1"); +``` + +#### getElementGeometry() + +> **getElementGeometry**(`id`): `Promise`\<`null` | [`GeoJsonGeometry`](client.md#geojsongeometry)> + +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. + +* Text, Note and Image elements do not return geometry, so will return `null`. + +Use this method when you need the geometric representation of an element for +spatial analysis or visualization purposes. + +##### Parameters + +##### id + +`string` + +The id of the element you want to get the geometry of. + +##### Returns + +`Promise`\<`null` | [`GeoJsonGeometry`](client.md#geojsongeometry)> + +A promise that resolves to the element's geometry in GeoJSON format, or `null` if the element has no geometry. + +##### Example + +```typescript +const geometry = await felt.getElementGeometry("element-1"); +console.log(geometry?.type, geometry?.coordinates); +``` + +#### getElements() + +> **getElements**(`constraint`?): `Promise`\<(`null` | [`Element`](client.md#element-1))\[]> + +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. + +##### Parameters + +##### constraint? + +[`GetElementsConstraint`](client.md#getelementsconstraint) + +Optional constraints to apply to the elements returned from the map. + +##### Returns + +`Promise`\<(`null` | [`Element`](client.md#element-1))\[]> + +A promise that resolves to an array of elements, ordered by the order specified in Felt. + +##### 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 + +```typescript +const elements = await felt.getElements(); +``` + +#### getElementGroup() + +> **getElementGroup**(`id`): `Promise`\<`null` | [`ElementGroup`](client.md#elementgroup)> + +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. + +##### Parameters + +##### id + +`string` + +The id of the element group you want to get. + +##### Returns + +`Promise`\<`null` | [`ElementGroup`](client.md#elementgroup)> + +A promise that resolves to the requested element group, or `null` if not found. + +##### Example + +```typescript +const elementGroup = await felt.getElementGroup("element-group-1"); +``` + +#### getElementGroups() + +> **getElementGroups**(`constraint`?): `Promise`\<(`null` | [`ElementGroup`](client.md#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. + +Use this method to retrieve multiple element groups, optionally filtered by constraints. +This is useful for bulk operations on element groups. + +##### Parameters + +##### constraint? + +[`GetElementGroupsConstraint`](client.md#getelementgroupsconstraint) + +Optional constraints to apply to the element groups returned from the map. + +##### Returns + +`Promise`\<(`null` | [`ElementGroup`](client.md#elementgroup))\[]> + +A promise that resolves to an array of element groups in rendering order. + +##### Example + +```typescript +const elementGroups = await felt.getElementGroups({ ids: ["element-group-1", "element-group-2"] }); +``` + +#### setElementGroupVisibility() + +> **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. + +##### Parameters + +##### visibility + +[`SetVisibilityRequest`](client.md#setvisibilityrequest) + +The visibility configuration for element groups. + +##### Returns + +`Promise`\<`void`> + +A promise that resolves when the visibility changes are applied. + +##### Example + +```typescript +felt.setElementGroupVisibility({ show: ["element-group-1", "element-group-2"], hide: ["element-group-3"] }); +``` + +#### createElement() + +> **createElement**(`element`): `Promise`\<[`Element`](client.md#element-1)> + +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. + +##### Parameters + +##### element + +[`ElementCreate`](client.md#elementcreate) + +The element configuration to create. + +##### Returns + +`Promise`\<[`Element`](client.md#element-1)> + +A promise that resolves to the created element. + +##### Example + +```typescript +const element = await felt.createElement({ type: "Place", coordinates: [10, 10] }); +``` + +#### updateElement() + +> **updateElement**(`element`): `Promise`\<[`Element`](client.md#element-1)> + +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. + +##### Parameters + +##### element + +[`ElementUpdate`](client.md#elementupdate) + +The element update configuration. + +##### Returns + +`Promise`\<[`Element`](client.md#element-1)> + +A promise that resolves to the updated element. + +##### Example + +```typescript +// 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 +}); +``` + +#### deleteElement() + +> **deleteElement**(`id`): `Promise`\<`void`> + +Delete an element from the map. + +Use this method to remove elements from the map. This operation cannot be undone. + +##### Parameters + +##### id + +`string` + +The id of the element to delete. + +##### Returns + +`Promise`\<`void`> + +A promise that resolves when the element is deleted. + +##### Example + +```typescript +await felt.deleteElement("element-1"); +``` + +#### getLayer() + +> **getLayer**(`id`): `Promise`\<`null` | [`Layer`](client.md#layer-1)> + +Get a single layer from the map by its id. + +##### Parameters + +##### id + +`string` + +The id of the layer you want to get. + +##### Returns + +`Promise`\<`null` | [`Layer`](client.md#layer-1)> + +The requested layer. + +##### Example + +```typescript +const layer = await felt.getLayer("layer-1"); +``` + +#### getLayers() + +> **getLayers**(`constraint`?): `Promise`\<(`null` | [`Layer`](client.md#layer-1))\[]> + +Gets layers from the map, according to the constraints supplied. If no +constraints are supplied, all layers will be returned. + +##### Parameters + +##### constraint? + +[`GetLayersConstraint`](client.md#getlayersconstraint) + +The constraints to apply to the layers returned from the map. + +##### Returns + +`Promise`\<(`null` | [`Layer`](client.md#layer-1))\[]> + +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 + +```typescript +const layers = await felt.getLayers(); +``` + +#### setLayerVisibility() + +> **setLayerVisibility**(`visibility`): `Promise`\<`void`> + +Hide or show layers with the given ids. + +##### Parameters + +##### visibility + +[`SetVisibilityRequest`](client.md#setvisibilityrequest) + +##### Returns + +`Promise`\<`void`> + +##### Example + +```typescript +felt.setLayerVisibility({ show: ["layer-1", "layer-2"], hide: ["layer-3"] }); +``` + +#### setLayerStyle() + +> **setLayerStyle**(`params`): `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](https://developers.felt.com/felt-style-language) 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 + +##### params + +##### id + +`string` + +The id of the layer to set the style for. + +##### style + +`object` + +The style to set for the layer. + +##### Returns + +`Promise`\<`void`> + +##### Example + +```typescript +// first get the current style +const oldStyle = (await felt.getLayer("layer-1")).style; + +await felt.setLayerStyle({ id: "layer-1", style: { + ...oldStyle, + paint: { + ...oldStyle.paint, + color: "red", + }, +} }); +``` + +#### setLayerLegendVisibility() + +> **setLayerLegendVisibility**(`params`): `Promise`\<`void`> + +Hide or show layers with the given ids from the legend. + +##### Parameters + +##### params + +[`SetVisibilityRequest`](client.md#setvisibilityrequest) + +##### Returns + +`Promise`\<`void`> + +##### Example + +```typescript +felt.setLayerLegendVisibility({ show: ["layer-1", "layer-2"], hide: ["layer-3"] }); +``` + +#### createLayersFromGeoJson() + +> **createLayersFromGeoJson**(`params`): `Promise`\<`null` | \{ `layerGroup`: [`LayerGroup`](client.md#layergroup); `layers`: [`Layer`](client.md#layer-1)\[]; }> + +Adds layers to the map from file or URL sources. + +##### Parameters + +##### params + +[`CreateLayersFromGeoJsonParams`](client.md#createlayersfromgeojsonparams) + +##### Returns + +`Promise`\<`null` | \{ `layerGroup`: [`LayerGroup`](client.md#layergroup); `layers`: [`Layer`](client.md#layer-1)\[]; }> + +The layer groups that were created. + +##### Remarks + +This allows you to add temporary layers to the map that don't depend on +any processing by Felt. This is useful for viewing data from external sources or +remote files. + +##### Example + +```typescript +const layerFromFile = await felt.createLayersFromGeoJson({ + source: { + type: "geoJsonFile", + file: someFile, + }, + name: "Parcels", +}); + +const layerFromUrl = await felt.createLayersFromGeoJson({ + source: { + type: "geoJsonUrl", + url: "https://example.com/parcels.geojson", + }, + name: "Parcels", +``` + +#### updateLayer() + +> **updateLayer**(`params`): `Promise`\<[`Layer`](client.md#layer-1)> + +Update a layer by passing a subset of the layer's properties. + +Note that not all properties can be updated, so check the [UpdateLayerParams](client.md#updatelayerparams) +type to see which properties can be updated. + +##### Parameters + +##### params + +[`UpdateLayerParams`](client.md#updatelayerparams) + +##### Returns + +`Promise`\<[`Layer`](client.md#layer-1)> + +##### Example + +```typescript +await felt.updateLayer({ + id: "layer-1", + name: "My Layer", + caption: "A description of the layer", +}); +``` + +#### deleteLayer() + +> **deleteLayer**(`id`): `Promise`\<`void`> + +Delete a layer from the map by its id. + +##### Parameters + +##### id + +`string` + +##### Returns + +`Promise`\<`void`> + +##### Remarks + +This only works for layers created via the SDK `createLayersFromGeoJson` method, not layers added via the Felt UI. + +##### Example + +```typescript +await felt.deleteLayer("layer-1"); +``` + +#### duplicateLayer() + +> **duplicateLayer**(`id`): `Promise`\<[`Layer`](client.md#layer-1)> + +Duplicate a layer from the map by its id. + +##### Parameters + +##### id + +`string` + +##### Returns + +`Promise`\<[`Layer`](client.md#layer-1)> + +The duplicated layer. + +##### Remarks + +This will create an ephemeral copy of the layer, just for the duration of the session. The duplicated layer will not be persisted to the map. + +##### Example + +```typescript +const duplicatedLayer = await felt.duplicateLayer("layer-1"); +``` + +#### getLayerGroup() + +> **getLayerGroup**(`id`): `Promise`\<`null` | [`LayerGroup`](client.md#layergroup)> + +Get a layer group from the map by its id. + +##### Parameters + +##### id + +`string` + +##### Returns + +`Promise`\<`null` | [`LayerGroup`](client.md#layergroup)> + +The requested layer group. + +##### Example + +```typescript +const layerGroup = await felt.getLayerGroup("layer-group-1"); +``` + +#### getLayerGroups() + +> **getLayerGroups**(`constraint`?): `Promise`\<(`null` | [`LayerGroup`](client.md#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 + +##### constraint? + +[`GetLayerGroupsConstraint`](client.md#getlayergroupsconstraint) + +The constraints to apply to the layer groups returned from the map. + +##### Returns + +`Promise`\<(`null` | [`LayerGroup`](client.md#layergroup))\[]> + +The requested layer groups. + +##### Example + +```typescript +const layerGroups = await felt.getLayerGroups({ ids: ["layer-group-1", "layer-group-2"] }); +``` + +#### setLayerGroupVisibility() + +> **setLayerGroupVisibility**(`visibility`): `Promise`\<`void`> + +Hide or show layer groups with the given ids. + +##### Parameters + +##### visibility + +[`SetVisibilityRequest`](client.md#setvisibilityrequest) + +##### Returns + +`Promise`\<`void`> + +##### Example + +```typescript +felt.setLayerGroupVisibility({ show: ["layer-group-1", "layer-group-2"], hide: ["layer-group-3"] }); +``` + +#### setLayerGroupLegendVisibility() + +> **setLayerGroupLegendVisibility**(`params`): `Promise`\<`void`> + +Hide or show layer groups with the given ids from the legend. + +##### Parameters + +##### params + +[`SetVisibilityRequest`](client.md#setvisibilityrequest) + +##### Returns + +`Promise`\<`void`> + +##### Example + +```typescript +felt.setLayerGroupLegendVisibility({ show: ["layer-1", "layer-2"], hide: ["layer-3"] }); +``` + +#### getLegendItem() + +> **getLegendItem**(`id`): `Promise`\<`null` | [`LegendItem`](client.md#legenditem)> + +Allows you to get the state of a single legend item. + +##### Parameters + +##### id + +[`LegendItemIdentifier`](client.md#legenditemidentifier) + +##### Returns + +`Promise`\<`null` | [`LegendItem`](client.md#legenditem)> + +##### Example + +```typescript +const legendItem = await felt.getLegendItem({ + id: "legend-item-1", + layerId: "layer-1", +}) +``` + +#### getLegendItems() + +> **getLegendItems**(`constraint`?): `Promise`\<(`null` | [`LegendItem`](client.md#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 + +##### constraint? + +[`LegendItemsConstraint`](client.md#legenditemsconstraint) + +##### Returns + +`Promise`\<(`null` | [`LegendItem`](client.md#legenditem))\[]> + +##### Example + +```typescript +const legendItems = await felt.getLegendItems({layerId: "layer-1"}); +``` + +#### setLegendItemVisibility() + +> **setLegendItemVisibility**(`visibility`): `Promise`\<`void`> + +Hide or show legend items with the given identifiers. + +##### Parameters + +##### visibility + +##### show + +[`LegendItemIdentifier`](client.md#legenditemidentifier)\[] + +##### hide + +[`LegendItemIdentifier`](client.md#legenditemidentifier)\[] + +##### Returns + +`Promise`\<`void`> + +##### Example + +```typescript +felt.setLegendItemVisibility({ + show: [{layerId: "layer-group-1", id: "item-1-0"}], + hide: [{layerId: "layer-group-2", id: "item-2-0"}], +}) +``` + +#### getLayerFilters() + +> **getLayerFilters**(`layerId`): `Promise`\<`null` | [`LayerFilters`](client.md#layerfilters)> + +Get the filters for a layer. + +##### Parameters + +##### layerId + +`string` + +##### Returns + +`Promise`\<`null` | [`LayerFilters`](client.md#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 + +```typescript +const filters = await felt.getLayerFilters("layer-1"); +console.log(filters.combined, filters.style, filters.ephemeral, filters.components); +``` + +#### setLayerFilters() + +> **setLayerFilters**(`params`): `Promise`\<`void`> + +Sets the **ephemeral** filters for a layer. + +##### Parameters + +##### params + +##### layerId + +`string` + +The layer that you want to set the filters for. + +##### filters + +[`Filters`](client.md#filters) + +The filters to set for the layer. This will replace any ephemeral filters +that are currently set for the layer. + +##### 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 + +```typescript +await felt.setLayerFilters({ + layerId: "layer-1", + filters: ["AREA", "gt", 30_000], +}); +``` + +#### getLayerBoundaries() + +> **getLayerBoundaries**(`layerId`): `Promise`\<`null` | [`LayerBoundaries`](client.md#layerboundaries)> + +Get the spatial boundaries that are filtering a layer. + +##### Parameters + +##### layerId + +`string` + +##### Returns + +`Promise`\<`null` | [`LayerBoundaries`](client.md#layerboundaries)> + +##### Remarks + +The return type gives you the boundaries split up into the various sources +that make up the overall boundary for a layer. + +The combined boundary is the intersection of the other sources of boundaries. + +##### Example + +```typescript +const boundaries = await felt.getLayerBoundaries("layer-1"); + +console.log(boundaries?.combined); +console.log(boundaries?.spatialFilters); +console.log(boundaries?.ephemeral); +``` + +#### setLayerBoundary() + +> **setLayerBoundary**(`params`): `Promise`\<`void`> + +Set the [\`ephemeral\`](client.md#ephemeral-1) boundary for one or more layers. + +##### Parameters + +##### params + +##### layerIds + +`string`\[] + +The ids of the layers to set the boundary for. + +##### boundary + +`null` | [`GeometryFilter`](client.md#geometryfilter) + +The boundary to set for the layer. + +Passing `null` clears the ephemeral boundary for the layer. + +##### Returns + +`Promise`\<`void`> + +##### Example + +```typescript +await felt.setLayerBoundary({ + layerIds: ["layer-1", "layer-2"], + boundary: { type: "MultiPolygon", coordinates: [[[100, 0], [101, 0], [101, 1], [100, 1], [100, 0]]] } +}); +``` + +#### getRenderedFeatures() + +> **getRenderedFeatures**(`params`?): `Promise`\<[`LayerFeature`](client.md#layerfeature)\[]> + +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 + +##### params? + +[`GetRenderedFeaturesConstraint`](client.md#getrenderedfeaturesconstraint) + +The constraints to apply to the features returned from the map. + +##### Returns + +`Promise`\<[`LayerFeature`](client.md#layerfeature)\[]> + +##### Example + +```typescript +const features = await felt.getRenderedFeatures(); +``` + +#### getFeature() + +> **getFeature**(`params`): `Promise`\<`null` | [`LayerFeature`](client.md#layerfeature)> + +Get a feature from the map by its ID and layer ID. + +The response is a [LayerFeature](client.md#layerfeature) object, which does not include the +geometry of the feature. + +You may want to use this when you don't need the geometry of a feature, +but you know the ID of the feature you need. + +##### Parameters + +##### params + +##### id + +`string` | `number` + +##### layerId + +`string` + +##### Returns + +`Promise`\<`null` | [`LayerFeature`](client.md#layerfeature)> + +##### Example + +```typescript +const feature = await felt.getFeature({ layerId: "layer-1", id: 123 }); +``` + +#### getFeatures() + +> **getFeatures**(`params`): `Promise`\<\{ `features`: [`LayerFeature`](client.md#layerfeature)\[]; `count`: `number`; `previousPage`: `null` | `string`; `nextPage`: `null` | `string`; }> + +Get a list of layer features. + +##### Parameters + +##### params + +##### layerId + +`string` + +The ID of the layer to get features from. + +##### filters + +[`Filters`](client.md#filters) + +Filters to be applied. These filters will merge with layer's own filters. + +##### sorting + +[`SortConfig`](client.md#sortconfig) + +Attribute to sort by. + +##### boundary + +[`GeometryFilter`](client.md#geometryfilter) + +The spatial boundary to be applied. + +##### search + +`string` + +Search term to search by. + +Search is case-insensitive and looks for matches across all feature properties. + +##### pagination + +`null` | `string` + +Pagination token. It comes from either the `previousPage` or `nextPage` +properties of the previous response. + +##### Returns + +`Promise`\<\{ `features`: [`LayerFeature`](client.md#layerfeature)\[]; `count`: `number`; `previousPage`: `null` | `string`; `nextPage`: `null` | `string`; }> + +The response is an object which contains: + +* `features`: list of [LayerFeature](client.md#layerfeature) objects, which does not include + the geometry of the feature but it does include its bounding box. +* `count`: the total number of features that match the query. +* `previousPage` & `nextPage`: The tokens to pass in the `pagination` param + to navigate between pages. + +##### Remarks + +This list is paginated in sets of 20 features for each page. In order to paginate +between pages, the response includes `previousPage` and `nextPage` that are tokens +that should be sent in the `pagination` params for requesting sibling pages. + +Text search is case-insensitive and looks for matches across all feature properties. + +##### Example + +```typescript +const page1Response = await felt.getFeatures({ + layerId: "layer-1", + search: "abc123", + pagination: undefined, +}); + +// Note that the search term here matches the one for the first page. +if (page1Response.nextPage) { + const page2Response = await felt.getFeatures({ + layerId: "layer-1", + search: "abc123", + pagination: page1Response.nextPage, + }); +} +``` + +#### getGeoJsonFeature() + +> **getGeoJsonFeature**(`params`): `Promise`\<`null` | [`GeoJsonFeature`](client.md#geojsonfeature)> + +Get a feature in GeoJSON format from the map by its ID and layer ID. + +The response is a GeoJSON Feature object with the complete geometry of the +feature. Note that for some *very* large geometries, the response may take a +long time to return, and may return a very large object. + +##### Parameters + +##### params + +##### id + +`string` | `number` + +##### layerId + +`string` + +##### Returns + +`Promise`\<`null` | [`GeoJsonFeature`](client.md#geojsonfeature)> + +##### Example + +```typescript +const feature = await felt.getGeoJsonFeature({ layerId: "layer-1", id: 123 }); +``` + +#### getCategoryData() + +> **getCategoryData**(`params`): `Promise`\<[`GetLayerCategoriesGroup`](client.md#getlayercategoriesgroup)\[]> + +Gets values from a layer grouped by a given attribute. + +##### Parameters + +##### params + +[`GetLayerCategoriesParams`](client.md#getlayercategoriesparams) + +##### Returns + +`Promise`\<[`GetLayerCategoriesGroup`](client.md#getlayercategoriesgroup)\[]> + +##### Remarks + +Groups features in your layer by unique values in the specified attribute and calculates +a value for each group. By default, this value is the count of features in each group. + +You can apply filters in two ways: + +1. At the top level (using `boundary` and `filters`), which affects both what categories + are included and how values are calculated +2. In the `values` configuration, which only affects the values but keeps all categories + +This two-level filtering is particularly useful when you want to compare subsets of data +while maintaining consistent categories. For example, you might want to show the distribution +of all building types in a city, but only count buildings built after 2000 in each category. + +##### Example + +```typescript +// Basic grouping: Count of buildings by type +const buildingsByType = await felt.getCategoryData({ + layerId: "buildings", + attribute: "type" +}); + +// Filtered grouping: Only count buildings in downtown +const downtownBuildingsByType = await felt.getCategoryData({ + layerId: "buildings", + attribute: "type", + boundary: [-122.43, 47.60, -122.33, 47.62] // downtown boundary +}); + +// Advanced: Show all building types, but only sum floor area of recent buildings +const recentBuildingAreaByType = await felt.getCategoryData({ + layerId: "buildings", + attribute: "type", + values: { + filters: ["year_built", "gte", 2000], + aggregation: { + method: "sum", + attribute: "floor_area" + } + } +}); + +// Compare residential density across neighborhoods while only counting recent buildings +const newBuildingDensityByNeighborhood = await felt.getCategoryData({ + layerId: "buildings", + attribute: "neighborhood", + values: { + filters: ["year_built", "gte", 2000], + aggregation: { + method: "avg", + attribute: "units_per_acre" + } + } +}); +``` + +#### getHistogramData() + +> **getHistogramData**(`params`): `Promise`\<[`GetLayerHistogramBin`](client.md#getlayerhistogrambin)\[]> + +Gets a histogram of values from a layer for a given attribute. + +##### Parameters + +##### params + +[`GetLayerHistogramParams`](client.md#getlayerhistogramparams) + +##### Returns + +`Promise`\<[`GetLayerHistogramBin`](client.md#getlayerhistogrambin)\[]> + +##### Remarks + +Creates bins (ranges) for numeric data and counts how many features fall into each bin, +or returns aggregated values for each bin. + +You can control how the bins are created using the `steps` parameter, choosing from +several methods like equal intervals, quantiles, or natural breaks (Jenks), or passing +in the step values directly if you know how you want to bin the data. + +Like getCategoryData, you can apply filters in two ways: + +1. At the top level (using `boundary` and `filters`), which affects both how the bins + are calculated and what features are counted in each bin +2. In the `values` configuration, which only affects what gets counted but keeps the + bin ranges the same + +This is particularly useful when you want to compare distributions while keeping +consistent bin ranges. For example, you might want to compare the distribution of +building heights in different years while using the same height ranges. + +##### Example + +```typescript +// Basic histogram: Building heights in 5 natural break bins +const buildingHeights = await felt.getHistogramData({ + layerId: "buildings", + attribute: "height", + steps: { type: "jenks", count: 5 } +}); + +// Compare old vs new buildings using the same height ranges +const oldBuildingHeights = await felt.getHistogramData({ + layerId: "buildings", + attribute: "height", + steps: [0, 20, 50, 100, 200, 500], + values: { + filters: ["year_built", "lt", 1950] + } +}); + +const newBuildingHeights = await felt.getHistogramData({ + layerId: "buildings", + attribute: "height", + steps: [0, 20, 50, 100, 200, 500], // Same ranges as above + values: { + filters: ["year_built", "gte", 1950] + } +}); +``` + +#### getAggregates() + +> **getAggregates**\<`T`>(`params`): `Promise`\<`Record`\<`T`, `null` | `number`>> + +Calculates a single aggregate value for a layer based on the provided configuration. + +##### Type Parameters + +• **T** *extends* `"avg"` | `"max"` | `"min"` | `"sum"` | `"median"` | `"count"` + +##### Parameters + +##### params + +[`GetLayerCalculationParams`](client.md#getlayercalculationparamst)\<`T`> + +##### Returns + +`Promise`\<`Record`\<`T`, `null` | `number`>> + +##### Remarks + +Performs statistical calculations on your data, like counting features or computing +averages, sums, etc. You can focus your calculation on specific areas or subsets +of your data using boundaries and filters. + +When you request an aggregation other than count, you must specify an attribute to +aggregate on. + +##### Example + +```typescript +// Count all residential buildings +const residentialCount = await felt.getAggregates({ + layerId: "buildings", + filters: ["type", "eq", "residential"], + aggregation: { + methods: ["count"], + } +}); + +// Calculate average home value in a specific neighborhood +const avgHomeValue = await felt.getAggregates({ + layerId: "buildings", + boundary: [-122.43, 47.60, -122.33, 47.62], // neighborhood boundary + aggregation: { + methods: ["avg"], + attribute: "assessed_value" + } +}); + +// Find the maximum building height for buildings built after 2000 +const maxNewBuildingHeight = await felt.getAggregates({ + layerId: "buildings", + filters: ["year_built", "gte", 2000], + aggregation: { + methods: ["max"], + attribute: "height" + } +}); +``` + +#### getPrecomputedAggregates() + +> **getPrecomputedAggregates**(`params`): `Promise`\<\{ `avg`: `null` | `number`; `max`: `null` | `number`; `min`: `null` | `number`; `sum`: `null` | `number`; `count`: `null` | `number`; }> + +Calculates aggregates for spatial cells of a layer. + +##### Parameters + +##### params + +[`GetLayerPrecomputedCalculationParams`](client.md#getlayerprecomputedcalculationparams) + +##### Returns + +`Promise`\<\{ `avg`: `null` | `number`; `max`: `null` | `number`; `min`: `null` | `number`; `sum`: `null` | `number`; `count`: `null` | `number`; }> + +##### Remarks + +Performs statistical calculations on spatial cells of a layer, returning min, max, avg, sum, and count. You can focus your calculation on specific areas or subsets +of your data using boundaries and filters. When using the count method, an attribute is not required. + +##### Example + +```typescript +const aggregates = await felt.getPrecomputedAggregates({ + layerId: "buildings", + gridConfig: { + type: "h3", + resolution: 10, + method: "avg", + attribute: "assessed_value" + }, +}); +``` + +#### getLayerSchema() + +> **getLayerSchema**(`layerId`): `Promise`\<[`LayerSchema`](client.md#layerschema)> + +Get the schema for a layer. + +##### Parameters + +##### layerId + +`string` + +##### Returns + +`Promise`\<[`LayerSchema`](client.md#layerschema)> + +##### Remarks + +The schema describes the structure of the data in a layer, including the attributes +that are available on the features in the layer. + +This can be useful to build generic UIs that need to know the structure of the data in +a layer, such as a dropdown to choose an attribute. + +##### Example + +```typescript +const schema = await felt.getLayerSchema("layer-1"); +const attributeIds = schema.attributes.map((attr) => attr.id); +``` + +#### getMapDetails() + +> **getMapDetails**(): `Promise`\<[`MapDetails`](client.md#mapdetails)> + +Gets the details of the map. + +Use this method to retrieve metadata about the current map, such as +its title, description, and other map-level information. + +##### Returns + +`Promise`\<[`MapDetails`](client.md#mapdetails)> + +A promise that resolves to the map details. + +##### Example + +```typescript +const details = await felt.getMapDetails(); +console.log({ + id: details.id, + title: details.title, + description: details.description, +}); +``` + +#### getSelection() + +> **getSelection**(): `Promise`\<[`EntityNode`](client.md#entitynode)\[]> + +Gets the current selection as a list of entity identifiers. + +Use this method to retrieve the current selection state, which can include +features, elements, or both types of entities. + +##### Returns + +`Promise`\<[`EntityNode`](client.md#entitynode)\[]> + +A promise that resolves to an array of selected entity nodes. + +##### Example + +```typescript +const selection = await felt.getSelection(); +``` + +#### selectFeature() + +> **selectFeature**(`params`): `Promise`\<`void`> + +Selects a feature on a layer. This will show the feature's popup, modal or +sidebar (if configured) and highlight the feature. + +Use this method to programmatically select features, which can be useful for +highlighting specific data points or triggering feature-specific UI. + +##### Parameters + +##### params + +[`FeatureSelection`](client.md#featureselection) + +##### Returns + +`Promise`\<`void`> + +A promise that resolves when the feature is selected. + +##### Example + +```typescript +felt.selectFeature({ + id: 123, + layerId: "my-layer", + showPopup: true, + fitViewport: { maxZoom: 15 }, +}); +``` + +#### clearSelection() + +> **clearSelection**(`params`?): `Promise`\<`void`> + +Clears the current selection (elements, features or both). + +Use this method to programmatically clear the current selection, which can +be useful for resetting the map state or preparing for new selections. + +##### Parameters + +##### params? + +The parameters to clear the selection. If this is not provided, +both features and elements will be cleared. + +##### features + +`boolean` + +Whether to clear the features from the selection. + +##### elements + +`boolean` + +Whether to clear the elements from the selection. + +##### Returns + +`Promise`\<`void`> + +A promise that resolves when the selection is cleared. + +##### Example + +```typescript + +// 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 + +```typescript +{ features: true, elements: true } +``` + +#### setTool() + +> **setTool**(`tool`): `void` + +Sets the tool to use for drawing elements on the map. + +Use this method to programmatically activate drawing tools for users. When a tool +is set, users can draw elements on the map using that tool. Set to `null` to +deactivate all drawing tools. + +##### Parameters + +##### tool + +The tool to set, or `null` to deactivate all tools. + +`null` | [`ToolType`](client.md#tooltype) + +##### Returns + +`void` + +##### Example + +```typescript +// Set the tool to "marker" +await felt.setTool("marker"); + +// put down the tool +await felt.setTool(null); +``` + +#### getTool() + +> **getTool**(): `Promise`\<`null` | [`ToolType`](client.md#tooltype)> + +Gets the current tool, if any is in use. + +Use this method to check which drawing tool is currently active, if any. + +##### Returns + +`Promise`\<`null` | [`ToolType`](client.md#tooltype)> + +A promise that resolves to the current tool, or `null` if no tool is in use. + +##### Example + +```typescript +const tool = await felt.getTool(); // "marker", "polygon", etc. +``` + +#### onToolChange() + +> **onToolChange**(`args`): `VoidFunction` + +Listens for changes to the current tool. + +Use this to react to tool changes, such as updating your UI to reflect +the currently active drawing tool. + +##### Parameters + +##### args + +##### handler + +(`tool`) => `void` + +This callback is called with the current tool whenever the tool changes. + +##### Returns + +`VoidFunction` + +##### Example + +```typescript +const unsubscribe = felt.onToolChange({ + handler: tool => console.log(tool), +}); + +// later on... +unsubscribe(); +``` + +#### setToolSettings() + +> **setToolSettings**(`settings`): `void` + +Sets the settings for the current tool. + +Use this method to configure how drawing tools behave, such as setting colors, +stroke widths, or other tool-specific properties. + +##### Parameters + +##### settings + +[`InputToolSettings`](client.md#inputtoolsettings) + +The settings to set for the specified tool. + +##### Returns + +`void` + +##### Example + +```typescript +// Set the settings for the marker tool +await felt.setToolSettings({ + tool: "marker", + color: "#FE17", +}); +``` + +#### getToolSettings() + +> **getToolSettings**\<`T`>(`tool`): `Promise`\<[`ToolSettingsMap`](client.md#toolsettingsmap)\[`T`]> + +Gets the settings for the chosen tool. + +Use this method to retrieve the current configuration of a drawing tool. + +##### Type Parameters + +• **T** *extends* [`ConfigurableToolType`](client.md#configurabletooltype) + +##### Parameters + +##### tool + +`T` + +The tool to get settings for. + +##### Returns + +`Promise`\<[`ToolSettingsMap`](client.md#toolsettingsmap)\[`T`]> + +A promise that resolves to the settings for the chosen tool. + +##### Example + +```typescript +const settings = await felt.getToolSettings("marker"); +``` + +#### onToolSettingsChange() + +> **onToolSettingsChange**(`args`): `VoidFunction` + +Listens for changes to the settings on all tools. + +Use this to react to tool setting changes, such as updating your UI to +reflect the current tool configuration. + +##### Parameters + +##### args + +##### handler + +(`settings`) => `void` + +##### Returns + +`VoidFunction` + +A function to unsubscribe from the listener. + +##### Example + +```typescript +const unsubscribe = felt.onToolSettingsChange({ + handler: settings => console.log(settings), +}); + +// later on... +unsubscribe(); +``` + +#### createActionTrigger() + +> **createActionTrigger**(`args`): `Promise`\<[`UIActionTriggerCreate`](client.md#uiactiontriggercreate)> + +Creates an action trigger. +Action triggers are rendered on map's left sidebar as a button, +similar to other map extensions like measure and spatial filter. + +The goal of action triggers is to allow users to perform actions on the map +by clicking on a button. + +##### Parameters + +##### args + +[`CreateActionTriggerParams`](client.md#createactiontriggerparams) + +The arguments for the method. + +##### Returns + +`Promise`\<[`UIActionTriggerCreate`](client.md#uiactiontriggercreate)> + +##### Example + +```typescript +await felt.createActionTrigger({ + actionTrigger: { + id: "enablePolygonTool", // optional. Required if you want to update the action trigger later + label: "Draw polygon", + onTrigger: async () => { + felt.setTool("polygon"); + }, + disabled: false, // optional, defaults to false + }, + placement: { at: "start" }, // optional, defaults to { at: "end" } +}); +``` + +#### updateActionTrigger() + +> **updateActionTrigger**(`args`): `Promise`\<[`UIActionTriggerCreate`](client.md#uiactiontriggercreate)> + +Updates an action trigger. + +Action trigger to update is identified by the `id` property. + +##### Parameters + +##### args + +[`UpdateActionTriggerParams`](client.md#updateactiontriggerparams) + +The action trigger to update. + +##### Returns + +`Promise`\<[`UIActionTriggerCreate`](client.md#uiactiontriggercreate)> + +##### Remarks + +Properties provided will override the existing properties. + +##### Example + +```typescript +await felt.updateActionTrigger({ + id: "enablePolygonTool", + label: "Enable polygon tool", // only label changes +}); +``` + +#### deleteActionTrigger() + +> **deleteActionTrigger**(`id`): `void` + +Deletes an action trigger. + +##### Parameters + +##### id + +`string` + +The id of the action trigger to delete. + +##### Returns + +`void` + +##### Example + +```typescript +await felt.deleteActionTrigger("enablePolygonTool"); +``` + +#### createFeatureAction() + +> **createFeatureAction**(`args`): `Promise`\<[`uiFeatureAction`](client.md#uifeatureaction)> + +Creates a feature contextual action. + +##### Parameters + +##### args + +[`CreateFeatureActionParams`](client.md#createfeatureactionparams) + +The arguments for the method. + +##### Returns + +`Promise`\<[`uiFeatureAction`](client.md#uifeatureaction)> + +##### Example + +```typescript +const myAction = await felt.createFeatureAction({ + action: { + label: "Edit feature", + onTrigger: async ({ featureId, layerId }) => { + console.log(`Editing feature ${featureId} in layer ${layerId}`); + }, + layerIds: ["layer-1", "layer-2"], + }, + placement: { at: "start" }, // optional, defaults to { at: "end" } +}); +``` + +#### updateFeatureAction() + +> **updateFeatureAction**(`args`): `Promise`\<[`uiFeatureAction`](client.md#uifeatureaction)> + +Updates a feature contextual action. + +Feature contextual action to update is identified by the `id` property. + +##### Parameters + +##### args + +[`UpdateFeatureActionParams`](client.md#updatefeatureactionparams) + +The feature contextual action to update. + +##### Returns + +`Promise`\<[`uiFeatureAction`](client.md#uifeatureaction)> + +##### Remarks + +Properties provided will override the existing properties. + +##### Example + +```typescript +await felt.updateFeatureAction({ + id: "my-action", + label: "Updated action label", // only label changes +}); +``` + +#### deleteFeatureAction() + +> **deleteFeatureAction**(`id`): `void` + +Deletes a feature contextual action. + +##### Parameters + +##### id + +`string` + +The id of the feature contextual action to delete. + +##### Returns + +`void` + +##### Example + +```typescript +await felt.deleteFeatureAction("my-action"); +``` + +#### createPanelId() + +> **createPanelId**(): `Promise`\<`string`> + +Creates a panel ID. + +In order to create a panel using [createOrUpdatePanel](client.md#createorupdatepanel), you need to create a panel ID first. +Panel IDs are automatically generated to prevent conflicts with other panels. + +##### Returns + +`Promise`\<`string`> + +##### Example + +```typescript +const panelId = await felt.createPanelId(); +``` + +#### createOrUpdatePanel() + +> **createOrUpdatePanel**(`args`): `Promise`\<[`UIPanel`](client.md#uipanel)> + +Creates or updates a panel. + +Panels are rendered on the map's right sidebar and allow you to extend Felt UI +for your own use cases using Felt UI elements (e.g., Text, Button, etc.). + +A panel is identified by its ID, which must be created using [createPanelId](client.md#createpanelid). +Custom IDs are not supported to prevent conflicts with other panels. + +Panels have two main sections: + +* `body` - The main content area of the panel, which is scrollable. +* `footer` - A section that sticks to the bottom of the panel, useful for + action buttons like "Submit" or "Cancel". + +Panel placement is controlled by the `initialPlacement` parameter. By default, +panels are added to the end of the panel stack, but you can specify a different +placement. Note that this placement cannot be changed after the panel is created. + +Element IDs are required for targeted updates and deletions using the other +panel management methods. For complete panel refreshes with this method, +element IDs are optional but recommended for consistency. + +For dynamic content management, consider these approaches: + +* Use this method for complete panel refreshes (replaces all content) +* Use [createPanelElements](client.md#createpanelelements) to add new elements to existing panels +* Use [updatePanelElements](client.md#updatepanelelements) to modify specific existing elements +* Use [deletePanelElements](client.md#deletepanelelements) to remove specific elements + +##### Parameters + +##### args + +[`CreateOrUpdatePanelParams`](client.md#createorupdatepanelparams) + +The arguments for creating or updating the panel. + +##### Returns + +`Promise`\<[`UIPanel`](client.md#uipanel)> + +##### Example + +```typescript +// 1. Create panel ID first (required) +const panelId = await felt.createPanelId(); + +// 2. Define reusable elements +const SELECT = { id: "layer-select", type: "Select", label: "Layer", options: [...] }; +const ANALYZE_BTN = { id: "analyze-btn", type: "Button", label: "Analyze", onClick: handleAnalyze }; +const STATUS_TEXT = { id: "status-text", type: "Text", content: "" }; +const CLEAR_BTN = { id: "clear-btn", type: "Button", label: "Clear", onClick: handleClear }; + +// 3. Initial state +await felt.createOrUpdatePanel({ + panel: { id: panelId, title: "Data Analyzer", body: [SELECT, ANALYZE_BTN] } +}); + +// 4. Loading state (replaces entire panel) +await felt.createOrUpdatePanel({ + panel: { + id: panelId, + title: "Data Analyzer", + body: [SELECT, ANALYZE_BTN, { ...STATUS_TEXT, content: "Loading..." }] + } +}); + +// 5. Results state (replaces entire panel) +await felt.createOrUpdatePanel({ + panel: { + id: panelId, + title: "Data Analyzer", + body: [SELECT, ANALYZE_BTN, { ...STATUS_TEXT, content: "**Results:**\n- Found 150 features" }, CLEAR_BTN] + } +}); +``` + +#### deletePanel() + +> **deletePanel**(`id`): `void` + +Deletes a panel. + +##### Parameters + +##### id + +`string` + +The id of the panel to delete. + +##### Returns + +`void` + +##### Example + +```typescript +await felt.deletePanel("panel-1"); +``` + +#### createPanelElements() + +> **createPanelElements**(`args`): `Promise`\<[`UIPanel`](client.md#uipanel)> + +Creates elements in a panel. + +Use this method to add new elements to an existing panel without replacing +the entire panel content. This is useful for dynamic UI updates. + +##### Parameters + +##### args + +[`CreatePanelElementsParams`](client.md#createpanelelementsparams) + +The arguments for the method. + +##### Returns + +`Promise`\<[`UIPanel`](client.md#uipanel)> + +##### Example + +```typescript +await felt.createPanelElements({ + panelId, + elements: [ + { + element: { type: "Text", content: "Hello, world!" }, + container: "body", + placement: { at: "start" }, + }, + ], +}); +``` + +#### updatePanelElements() + +> **updatePanelElements**(`args`): `Promise`\<[`UIPanel`](client.md#uipanel)> + +Updates an existing element in a panel. This method can only update elements that +already exist in the panel and have an ID. + +Use this method to modify specific elements without replacing the entire panel. +This is more efficient than using [createOrUpdatePanel](client.md#createorupdatepanel) for small changes. + +##### Parameters + +##### args + +[`UpdatePanelElementsParams`](client.md#updatepanelelementsparams) + +The arguments for the method. + +##### Returns + +`Promise`\<[`UIPanel`](client.md#uipanel)> + +##### Example + +```typescript +// 1. Create panel with initial elements +const panelId = await felt.createPanelId(); +const STATUS_TEXT = { id: "status-text", type: "Text", content: "Ready" }; + +await felt.createOrUpdatePanel({ + panel: { + id: panelId, + title: "My Panel", + body: [STATUS_TEXT] + } +}); + +// 2. Update the existing element +await felt.updatePanelElements({ + panelId, + elements: [ + { + element: { + ...STATUS_TEXT, // Reuse the same element structure + content: "Updated content" // Only change what needs updating + }, + }, + ], +}); +``` + +#### deletePanelElements() + +> **deletePanelElements**(`args`): `void` + +Deletes elements from a panel. + +Use this method to remove specific elements from a panel without replacing +the entire panel content. + +##### Parameters + +##### args + +[`DeletePanelElementsParams`](client.md#deletepanelelementsparams) + +The arguments for the method. + +##### Returns + +`void` + +##### Example + +```typescript +await felt.deletePanelElements({ + panelId, + elements: ["element-1", "element-2"], +}); +``` + +#### updateUiControls() + +> **updateUiControls**(`controls`): `void` + +Updates the UI controls on the embedded map. + +Use this method to show or hide various UI controls like the legend, +full screen button, and other map interface elements. + +##### Parameters + +##### controls + +[`UiControlsOptions`](client.md#uicontrolsoptions) + +The controls to update. + +##### Returns + +`void` + +##### Example + +```typescript +// Show some UI controls +await felt.updateUiControls({ + showLegend: true, + fullScreenButton: true, +}); + +// Disable some UI options +await felt.updateUiControls({ + cooperativeGestures: false, + geolocation: false, +}); +``` + +#### setOnMapInteractionsUi() + +> **setOnMapInteractionsUi**(`options`): `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 + +##### options + +[`OnMapInteractionsOptions`](client.md#onmapinteractionsoptions) + +##### Returns + +`void` + +##### Example + +```typescript +// Disable UI when hovering or selecting features +await felt.setOnMapInteractionsUi({ + featureSelectPanel: false, + featureHoverPanel: false, +}); +``` + +#### showLayerDataTable() + +> **showLayerDataTable**(`params`?): `Promise`\<`void`> + +Shows a data table view for the specified layer, optionally sorted by a given attribute. + +The data table displays feature data in a tabular format, making it easy to +browse and analyze layer data. You can control the initial sorting of the table. + +##### Parameters + +##### params? + +Optional parameters for showing the data table. + +##### layerId + +`string` + +The ID of the layer to show data for. + +##### sorting + +[`SortConfig`](client.md#sortconfig) + +Optional sorting configuration for the table. + +##### Returns + +`Promise`\<`void`> + +##### Example + +```typescript +// Show data table with default sorting +await felt.showLayerDataTable({ + layerId: "layer-1", +}); + +// Show data table sorted by height in descending order +await felt.showLayerDataTable({ + layerId: "layer-1", + sorting: { + attribute: "height", + direction: "desc", + }, +}); + +// Show the data table pane with no table visible +await felt.showLayerDataTable(); +``` + +#### hideLayerDataTable() + +> **hideLayerDataTable**(): `Promise`\<`void`> + +Hides the data table. + +##### Returns + +`Promise`\<`void`> + +##### Example + +```typescript +await felt.hideLayerDataTable(); +``` + +#### getViewport() + +> **getViewport**(): `Promise`\<[`ViewportState`](client.md#viewportstate)> + +Gets the current state of the viewport. + +Use this method to retrieve the current center coordinates and zoom level +of the map viewport. + +##### Returns + +`Promise`\<[`ViewportState`](client.md#viewportstate)> + +A promise that resolves to the current viewport state. + +##### Example + +```typescript +// Get current viewport state +const viewport = await felt.getViewport(); +console.log({ + center: viewport.center, + zoom: viewport.zoom, +}); +``` + +#### setViewport() + +> **setViewport**(`viewport`): `void` + +Moves the map to the specified location. + +Use this method to programmatically change the map's viewport to a specific +location and zoom level. The map will animate to the new position. + +##### Parameters + +##### viewport + +[`SetViewportCenterZoomParams`](client.md#setviewportcenterzoomparams) + +##### Returns + +`void` + +##### Example + +```typescript +felt.setViewport({ + center: { latitude: 0, longitude: 0 }, + zoom: 10, +}); +``` + +#### getViewportConstraints() + +> **getViewportConstraints**(): `Promise`\<`null` | [`ViewportConstraints`](client.md#viewportconstraints)> + +Gets the current state of the viewport constraints. + +Use this method to retrieve the current viewport constraints, which limit +where users can pan and zoom on the map. + +##### Returns + +`Promise`\<`null` | [`ViewportConstraints`](client.md#viewportconstraints)> + +A promise that resolves to the current viewport constraints, or `null` if no constraints are set. + +##### Example + +```typescript +// Get current viewport constraints +const constraints = await felt.getViewportConstraints(); +if (constraints) { + console.log({ + bounds: constraints.bounds, + minZoom: constraints.minZoom, + maxZoom: constraints.maxZoom + }); +} else { + console.log("No viewport constraints set"); +} +``` + +#### setViewportConstraints() + +> **setViewportConstraints**(`constraints`): `void` + +Constrains the map viewport so it stays inside certain bounds and/or certain zoom levels. + +Use this method to limit where users can navigate on the map. This is useful +for keeping users focused on a specific area or preventing them from zooming +too far in or out. + +##### Parameters + +##### constraints + +`null` | `Partial`\<[`ViewportConstraints`](client.md#viewportconstraints)> + +##### Returns + +`void` + +##### Examples + +```typescript +felt.setViewportConstraints({ + bounds: [-122.5372532, 37.6652478, -122.1927016, 37.881707], + minZoom: 1, + maxZoom: 23, +}); +``` + +every constraint is optional + +```typescript +felt.setViewportConstraints({ + bounds: [-122.5372532, 37.6652478, -122.1927016, 37.881707], +}); +``` + +if a constraint is null, it will be removed but keeping the others + +```typescript +felt.setViewportConstraints({ bounds: null }); +``` + +if method receives null, it will remove the constraints + +```typescript +felt.setViewportConstraints(null); +``` + +#### fitViewportToBounds() + +> **fitViewportToBounds**(`bounds`): `void` + +Fits the map to the specified bounds. + +Use this method to automatically adjust the viewport to show a specific +geographic area. The map will calculate the appropriate center and zoom +level to fit the bounds within the current map size. + +##### Parameters + +##### bounds + +[`ViewportFitBoundsParams`](client.md#viewportfitboundsparams) + +##### Returns + +`void` + +##### Example + +```typescript +const west = -122.4194; +const south = 37.7749; +const east = -122.4194; +const north = 37.7749; +felt.fitViewportToBounds({ bounds: [west, south, east, north] }); +``` + +### Events + +#### onElementCreate() + +> **onElementCreate**(`args`): `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 [\`onElementCreateEnd\`](client.md#onelementcreateend) listener. + +##### Parameters + +##### args + +##### handler + +(`change`) => `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\`](client.md#onelementcreateend) listener. + +##### Returns + +`VoidFunction` + +A function to unsubscribe from the listener. + +##### Example + +```typescript +const unsubscribe = felt.onElementCreate({ + handler: ({isBeingCreated, element}) => console.log(element.id), +}); + +// later on... +unsubscribe(); +``` + +#### onElementCreateEnd() + +> **onElementCreateEnd**(`args`): `VoidFunction` + +Listens for when a new element is finished being created by a drawing tool. + +This differs from the [\`onElementCreate\`](client.md#onelementcreate) 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. + +##### Parameters + +##### args + +##### handler + +(`params`) => `void` + +The handler to call whenever this event fires. + +##### Returns + +`VoidFunction` + +A function to unsubscribe from the listener. + +##### Example + +```typescript +const unsubscribe = felt.onElementCreateEnd({ + handler: (params) => console.log(params), +}); + +// later on... +unsubscribe(); +``` + +#### onElementChange() + +> **onElementChange**(`args`): `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 [\`onElementCreate\`](client.md#onelementcreate) listener, this will fire when an element is +still being created by a drawing tool. + +You can check the [\`isBeingCreated\`](client.md#isbeingcreated) property to determine if the element is +still being created by a drawing tool. + +##### Parameters + +##### args + +##### options + +\{ `id`: `string`; } + +##### options.id + +`string` + +The id of the element to listen for changes to. + +##### handler + +(`change`) => `void` + +The handler that is called when the element changes. + +##### Returns + +`VoidFunction` + +A function to unsubscribe from the listener. + +##### Example + +```typescript +const unsubscribe = felt.onElementChange({ + options: { id: "element-1" }, + handler: ({element}) => console.log(element.id), +}); + +// later on... +unsubscribe(); +``` + +#### onElementDelete() + +> **onElementDelete**(`args`): `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. + +##### Parameters + +##### args + +##### options + +\{ `id`: `string`; } + +##### options.id + +`string` + +The id of the element to listen for deletions of. + +##### handler + +() => `void` + +The handler that is called when the element is deleted. + +##### Returns + +`VoidFunction` + +A function to unsubscribe from the listener. + +##### Example + +```typescript +const unsubscribe = felt.onElementDelete({ + options: { id: "element-1" }, + handler: () => console.log("element-1 deleted"), +}); + +// later on... +unsubscribe(); +``` + +#### onElementGroupChange() + +> **onElementGroupChange**(`args`): `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. + +##### Parameters + +##### args + +##### options + +\{ `id`: `string`; } + +##### options.id + +`string` + +##### handler + +(`change`) => `void` + +##### Returns + +`VoidFunction` + +A function to unsubscribe from the listener. + +##### Example + +```typescript +const unsubscribe = felt.onElementGroupChange({ + options: { id: "element-group-1" }, + handler: elementGroup => console.log(elementGroup.id), +}); + +// later on... +unsubscribe(); +``` + +#### onPointerClick() + +> **onPointerClick**(`params`): `VoidFunction` + +Allows you to be notified when the user clicks on the map. + +Use this to react to user clicks on the map, such as triggering custom +actions or collecting interaction data. + +##### Parameters + +##### params + +##### handler + +(`event`) => `void` + +##### Returns + +`VoidFunction` + +A function to unsubscribe from the listener. + +##### Example + +```typescript +const unsubscribe = felt.onPointerClick({ + handler: (event) => console.log(event.center, event.features), +}); + +// later on... +unsubscribe(); +``` + +#### onPointerMove() + +> **onPointerMove**(`params`): `VoidFunction` + +Allows you to be notified when the user moves the mouse over the map. + +Use this to track mouse movement and detect features under the cursor, +such as for hover effects or real-time data display. + +##### Parameters + +##### params + +Params for the listener + +##### handler + +(`event`) => `void` + +The handler function + +##### Returns + +`VoidFunction` + +A function to unsubscribe from the listener. + +##### Example + +```typescript +// Track mouse movement and features under cursor +const unsubscribe = felt.onPointerMove({ + handler: (event) => { + console.log("Mouse position:", event.center); + console.log("Features under cursor:", event.features); + } +}); + +// later on... +unsubscribe(); +``` + +#### onLayerChange() + +> **onLayerChange**(`args`): `VoidFunction` + +Adds a listener for when a layer changes. + +##### Parameters + +##### args + +##### options + +\{ `id`: `string`; } + +##### options.id + +`string` + +The id of the layer to listen for changes to. + +##### handler + +(`change`) => `void` + +The handler that is called when the layer changes. + +##### Returns + +`VoidFunction` + +A function to unsubscribe from the listener + +##### Example + +```typescript +const unsubscribe = felt.onLayerChange({ + options: { id: "layer-1" }, + handler: ({layer}) => console.log(layer.bounds), +}); + +// later on... +unsubscribe(); +``` + +#### onLayerGroupChange() + +> **onLayerGroupChange**(`args`): `VoidFunction` + +Adds a listener for when a layer group changes. + +##### Parameters + +##### args + +##### options + +\{ `id`: `string`; } + +##### options.id + +`string` + +##### handler + +(`change`) => `void` + +##### Returns + +`VoidFunction` + +A function to unsubscribe from the listener + +##### Example + +```typescript +const unsubscribe = felt.onLayerGroupChange({ + options: { id: "layer-group-1" }, + handler: ({layerGroup}) => console.log(layerGroup.id), +}); + +// later on... +unsubscribe(); +``` + +#### onLegendItemChange() + +> **onLegendItemChange**(`args`): `VoidFunction` + +Adds a listener for when a legend item changes. + +##### Parameters + +##### args + +##### options + +[`LegendItemIdentifier`](client.md#legenditemidentifier) + +##### handler + +(`change`) => `void` + +##### Returns + +`VoidFunction` + +A function to unsubscribe from the listener + +##### Example + +```typescript +const unsubscribe = felt.onLegendItemChange({ + options: { layerId: "layer-1", id: "item-1-0" }, + handler: ({legendItem}) => console.log(legendItem.visible), +}); + +// later on... +unsubscribe(); +``` + +#### onLayerFiltersChange() + +> **onLayerFiltersChange**(`params`): `VoidFunction` + +Adds a listener for when a layer's filters change. + +##### Parameters + +##### params + +##### options + +\{ `layerId`: `string`; } + +##### options.layerId + +`string` + +##### handler + +(`change`) => `void` + +##### Returns + +`VoidFunction` + +A function to unsubscribe from the listener + +##### Remarks + +This event fires whenever any type of filter changes on the layer, including +ephemeral filters set via the SDK, style-based filters, or filters set through +the Felt UI via Components. + +##### Example + +```typescript +const unsubscribe = felt.onLayerFiltersChange({ + options: { layerId: "layer-1" }, + handler: ({combined, ephemeral, style, components}) => { + console.log("Layer filters updated:", { + combined, // All filters combined + ephemeral, // Filters set via SDK + style, // Filters from layer style + components // Filters from UI components + }); + }, +}); + +// later on... +unsubscribe(); +``` + +#### onLayerBoundariesChange() + +> **onLayerBoundariesChange**(`params`): `VoidFunction` + +Adds a listener for when a layer's spatial boundaries change. + +##### Parameters + +##### params + +##### options + +\{ `layerId`: `string`; } + +##### options.layerId + +`string` + +The id of the layer to listen for boundary changes on. + +##### handler + +(`boundaries`) => `void` + +A function that is called when the boundaries change. + +##### Returns + +`VoidFunction` + +A function to unsubscribe from the listener + +##### Remarks + +This event fires whenever any type of spatial boundary changes on the layer, including +ephemeral boundaries set via the SDK or boundaries set through the Felt UI via +Spatial filter components. + +##### Example + +```typescript +const unsubscribe = felt.onLayerBoundariesChange({ + options: { layerId: "layer-1" }, + handler: ({combined, ephemeral, spatialFilters}) => { + console.log("Layer boundaries updated:", { + combined, // All boundaries combined + ephemeral, // Boundaries set via SDK + spatialFilters // Boundaries set via UI + }); + }, +}); + +// later on... +unsubscribe(); +``` + +#### onSelectionChange() + +> **onSelectionChange**(`params`): `VoidFunction` + +Adds a listener for when the selection changes. + +Use this to react to selection changes, such as updating your UI to reflect +what is currently selected on the map. + +##### Parameters + +##### params + +##### handler + +(`change`) => `void` + +##### Returns + +`VoidFunction` + +A function to unsubscribe from the listener. + +##### Example + +```typescript +const unsubscribe = felt.onSelectionChange({ + handler: ({selection}) => console.log(selection), +}); + +// later on... +unsubscribe(); +``` + +#### onViewportMove() + +> **onViewportMove**(`args`): `VoidFunction` + +Adds a listener for when the viewport changes. + +Use this to react to viewport changes, such as updating your UI or +triggering other actions when users navigate the map. + +##### Parameters + +##### args + +##### handler + +(`viewport`) => `void` + +This callback is called with the current viewport state whenever +the viewport changes. + +##### Returns + +`VoidFunction` + +A function to unsubscribe from the listener. + +##### Example + +```typescript +const unsubscribe = felt.onViewportMove({ + handler: viewport => console.log(viewport.center.latitude), +}); + +// later on... +unsubscribe(); +``` + +#### onViewportMoveEnd() + +> **onViewportMoveEnd**(`args`): `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. + +Use this to react to the end of viewport changes, such as triggering +data loading or analysis when users finish navigating. + +##### Parameters + +##### args + +##### handler + +(`viewport`) => `void` + +##### Returns + +`VoidFunction` + +A function to unsubscribe from the listener. + +##### Example + +```typescript +const unsubscribe = felt.onViewportMoveEnd({ + handler: viewport => console.log(viewport.center.latitude), +}); + +// later on... +unsubscribe(); +``` + +#### onMapIdle() + +> **onMapIdle**(`args`): `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 + +Use this to perform actions when the map is completely stable and ready +for user interaction, such as enabling certain features or triggering +data analysis. + +##### Parameters + +##### args + +##### handler + +() => `void` + +##### Returns + +`VoidFunction` + +A function to unsubscribe from the listener. + +##### Example + +```typescript +const unsubscribe = felt.onMapIdle({ handler: () => console.log("map is idle") }); + +// later on... +unsubscribe(); +``` + +### Properties + +#### iframe + +> `readonly` **iframe**: `null` | `HTMLIFrameElement` + +The iframe element containing the Felt map, if it is an embedded map. + +## FeltEmbedOptions + +### Properties + +#### uiControls? + +> `optional` **uiControls**: [`UiControlsOptions`](client.md#uicontrolsoptions) + +#### initialViewport? + +> `optional` **initialViewport**: [`ViewportCenterZoom`](client.md#viewportcenterzoom) + +#### token? + +> `optional` **token**: `string` + +A short-lived (15 minutes) authentication token to use for showing embeds that are configured to be +private. + +## ElementNode + +References an element on the map. + +### Properties + +#### type + +> **type**: `"element"` + +#### entity + +> **entity**: [`Element`](client.md#element-1) + +## ElementGroupNode + +References an element group. + +### Properties + +#### type + +> **type**: `"elementGroup"` + +#### entity + +> **entity**: [`ElementGroup`](client.md#elementgroup) + +## LayerNode + +References a layer on the map. + +### Properties + +#### type + +> **type**: `"layer"` + +#### entity + +> **entity**: [`Layer`](client.md#layer-1) + +## LayerGroupNode + +References a layer group on the map. + +### Properties + +#### type + +> **type**: `"layerGroup"` + +#### entity + +> **entity**: [`LayerGroup`](client.md#layergroup) + +## FeatureNode + +References a feature on the map. + +### Properties + +#### type + +> **type**: `"feature"` + +#### entity + +> **entity**: [`LayerFeature`](client.md#layerfeature) + +## FeatureSelection + +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 + +```ts +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 + +```ts +true +``` + +## LatLng + +Represents a point in world coordinates. + +### Properties + +#### latitude + +> **latitude**: `number` + +#### longitude + +> **longitude**: `number` + +## GeoJsonFeature + +A GeoJSON feature object, compliant with: +[https://datatracker.ietf.org/doc/html/rfc7946#section-3.2](https://datatracker.ietf.org/doc/html/rfc7946#section-3.2) + +### Properties + +#### type + +> **type**: `"Feature"` + +#### geometry + +> **geometry**: [`GeoJsonGeometry`](client.md#geojsongeometry) + +The feature's geometry + +#### properties + +> **properties**: [`GeoJsonProperties`](client.md#geojsonproperties) + +Properties associated with this feature. + +#### bbox? + +> `optional` **bbox**: \[`number`, `number`, `number`, `number`] + +The bounding box of the feature in \[west, south, east, north] order. + +#### id? + +> `optional` **id**: `string` | `number` + +A value that uniquely identifies this feature in a +[https://tools.ietf.org/html/rfc7946#section-3.2](https://tools.ietf.org/html/rfc7946#section-3.2). + +## PointGeometry + +### Properties + +#### type + +> **type**: `"Point"` + +#### coordinates + +> **coordinates**: [`LngLatTuple`](client.md#lnglattuple) + +## MultiPointGeometry + +A GeoJSON multi-point geometry. + +### Remarks + +You shouldn't expect this to come from Felt - it is here for completeness +of the GeoJSON spec. + +### Properties + +#### type + +> **type**: `"MultiPoint"` + +#### coordinates + +> **coordinates**: [`LngLatTuple`](client.md#lnglattuple)\[] + +## PolygonGeometry + +### Properties + +#### type + +> **type**: `"Polygon"` + +#### coordinates + +> **coordinates**: \[`number`, `number`]\[]\[] + +The coordinates of a polygon. The first array is the exterior ring, and +any subsequent arrays are the interior rings. + +Each ring must have at least 4 points: 3 to make a valid triangle and the +last to close the path, which must be identical to the first. + +## MultiPolygonGeometry + +A GeoJSON multi-polygon geometry. + +### Properties + +#### type + +> **type**: `"MultiPolygon"` + +#### coordinates + +> **coordinates**: \[`number`, `number`]\[]\[]\[] + +## LineStringGeometry + +A GeoJSON line string geometry. + +### Properties + +#### type + +> **type**: `"LineString"` + +#### coordinates + +> **coordinates**: [`LngLatTuple`](client.md#lnglattuple)\[] + +## MultiLineStringGeometry + +A GeoJSON multi-line string geometry. + +### Properties + +#### type + +> **type**: `"MultiLineString"` + +#### coordinates + +> **coordinates**: [`LngLatTuple`](client.md#lnglattuple)\[]\[] + +## SortConfig + +Configuration for sorting data by a specific attribute + +### Properties + +#### direction + +> **direction**: `"asc"` | `"desc"` + +The direction to sort in + +#### attribute + +> **attribute**: `string` + +The attribute to sort by. What this represents depends on the context. +For instance, when sorting features in a data table, the attribute is +the column to sort by. + +## ToolsController + +The Tools controller allows you to let users draw elements on the map. + +### Extended by + +* [`FeltController`](client.md#feltcontroller) + +### Methods + +#### setTool() + +> **setTool**(`tool`): `void` + +Sets the tool to use for drawing elements on the map. + +Use this method to programmatically activate drawing tools for users. When a tool +is set, users can draw elements on the map using that tool. Set to `null` to +deactivate all drawing tools. + +##### Parameters + +##### tool + +The tool to set, or `null` to deactivate all tools. + +`null` | [`ToolType`](client.md#tooltype) + +##### Returns + +`void` + +##### Example + +```typescript +// Set the tool to "marker" +await felt.setTool("marker"); + +// put down the tool +await felt.setTool(null); +``` + +#### getTool() + +> **getTool**(): `Promise`\<`null` | [`ToolType`](client.md#tooltype)> + +Gets the current tool, if any is in use. + +Use this method to check which drawing tool is currently active, if any. + +##### Returns + +`Promise`\<`null` | [`ToolType`](client.md#tooltype)> + +A promise that resolves to the current tool, or `null` if no tool is in use. + +##### Example + +```typescript +const tool = await felt.getTool(); // "marker", "polygon", etc. +``` + +#### onToolChange() + +> **onToolChange**(`args`): `VoidFunction` + +Listens for changes to the current tool. + +Use this to react to tool changes, such as updating your UI to reflect +the currently active drawing tool. + +##### Parameters + +##### args + +##### handler + +(`tool`) => `void` + +This callback is called with the current tool whenever the tool changes. + +##### Returns + +`VoidFunction` + +##### Example + +```typescript +const unsubscribe = felt.onToolChange({ + handler: tool => console.log(tool), +}); + +// later on... +unsubscribe(); +``` + +#### setToolSettings() + +> **setToolSettings**(`settings`): `void` + +Sets the settings for the current tool. + +Use this method to configure how drawing tools behave, such as setting colors, +stroke widths, or other tool-specific properties. + +##### Parameters + +##### settings + +[`InputToolSettings`](client.md#inputtoolsettings) + +The settings to set for the specified tool. + +##### Returns + +`void` + +##### Example + +```typescript +// Set the settings for the marker tool +await felt.setToolSettings({ + tool: "marker", + color: "#FE17", +}); +``` + +#### getToolSettings() + +> **getToolSettings**\<`T`>(`tool`): `Promise`\<[`ToolSettingsMap`](client.md#toolsettingsmap)\[`T`]> + +Gets the settings for the chosen tool. + +Use this method to retrieve the current configuration of a drawing tool. + +##### Type Parameters + +• **T** *extends* [`ConfigurableToolType`](client.md#configurabletooltype) + +##### Parameters + +##### tool + +`T` + +The tool to get settings for. + +##### Returns + +`Promise`\<[`ToolSettingsMap`](client.md#toolsettingsmap)\[`T`]> + +A promise that resolves to the settings for the chosen tool. + +##### Example + +```typescript +const settings = await felt.getToolSettings("marker"); +``` + +#### onToolSettingsChange() + +> **onToolSettingsChange**(`args`): `VoidFunction` + +Listens for changes to the settings on all tools. + +Use this to react to tool setting changes, such as updating your UI to +reflect the current tool configuration. + +##### Parameters + +##### args + +##### handler + +(`settings`) => `void` + +##### Returns + +`VoidFunction` + +A function to unsubscribe from the listener. + +##### Example + +```typescript +const unsubscribe = felt.onToolSettingsChange({ + handler: settings => console.log(settings), +}); + +// later on... +unsubscribe(); +``` + +## PinToolSettings + +### Properties + +#### color + +> **color**: `string` + +The color of the element in some CSS-like format. + +##### Example + +```typescript +"#ABC123"; +"rgb(255, 0, 0)"; +"hsl(200, 100%, 50%)"; +``` + +##### Default + +```ts +"#C93535" +``` + +#### frame + +> **frame**: `null` | `"frame-circle"` | `"frame-square"` + +The frame that is rendered around the Place's symbol. This is +only available for non-emoji symbols. + +#### showInspector + +> **showInspector**: `boolean` + +Whether to show the tool inspector. + +##### Default Value + +`false` + +#### symbol + +> **symbol**: [`PlaceSymbol`](client.md#placesymbol) + +The symbol that is rendered for the Place. + +This can be an emoji by using colon-enclosed characters (e.g. `":smiley:"`) +or one of the symbols available in Felt's symbol library. + +You can see the available symbols in the Felt UI when editing a Place +by hovering a symbol and converting the tooltip to kebab-case. For example, +the "Oil barrel" symbol is `oil-barrel`. + +#### afterCreation + +> **afterCreation**: `"enter name"` | `"add another"` | `"select"` + +What to do after creating the Place element. + +* `"enter name"`: Enter a name for the Place, focusing the name input. +* `"add another"`: Add another Place, leaving the tool still selected. +* `"select"`: Puts the tool down and selects the new Place element. + +##### Default Value + +`"enter name"` + +## LineToolSettings + +### Properties + +#### color + +> **color**: `string` + +The color of the element in some CSS-like format. + +##### Example + +```typescript +"#ABC123"; +"rgb(255, 0, 0)"; +"hsl(200, 100%, 50%)"; +``` + +##### Default + +```ts +"#C93535" +``` + +#### strokeOpacity + +> **strokeOpacity**: `number` + +A value between 0 and 1 that describes the opacity of the element's stroke. + +##### Default + +```ts +1 +``` + +#### strokeWidth + +> **strokeWidth**: `number` + +The width of the element's stroke in pixels. + +##### Default + +```ts +2 +``` + +#### strokeStyle + +> **strokeStyle**: `"solid"` | `"dashed"` | `"dotted"` + +The style of the element's stroke. + +##### Default + +```ts +"solid" +``` + +#### distanceMarker + +> **distanceMarker**: `boolean` + +Whether a distance marker is shown at the midpoint of the path. + +##### Default + +```ts +false +``` + +#### showInspector + +> **showInspector**: `boolean` + +Whether to show the tool inspector. + +##### Default Value + +`false` + +## RouteToolSettings + +### Properties + +#### color + +> **color**: `string` + +The color of the element in some CSS-like format. + +##### Example + +```typescript +"#ABC123"; +"rgb(255, 0, 0)"; +"hsl(200, 100%, 50%)"; +``` + +##### Default + +```ts +"#C93535" +``` + +#### strokeOpacity + +> **strokeOpacity**: `number` + +A value between 0 and 1 that describes the opacity of the element's stroke. + +##### Default + +```ts +1 +``` + +#### strokeWidth + +> **strokeWidth**: `number` + +The width of the element's stroke in pixels. + +##### Default + +```ts +2 +``` + +#### strokeStyle + +> **strokeStyle**: `"solid"` | `"dashed"` | `"dotted"` + +The style of the element's stroke. + +##### Default + +```ts +"solid" +``` + +#### distanceMarker + +> **distanceMarker**: `boolean` + +Whether a distance marker is shown at the midpoint of the path. + +##### Default + +```ts +false +``` + +#### routingMode + +> **routingMode**: `null` | `"driving"` | `"cycling"` | `"walking"` | `"flying"` + +Whether this represents a route, and if so, what mode of transport +is used. + +If this is `null`, the path is not considered to be a route, so while it +can have a `distanceMarker`, it will does not have a start or end cap. + +##### Default + +```ts +null +``` + +#### endCaps + +> **endCaps**: `boolean` + +Whether or not to show Start and End caps on the path. This is +only available if the `routingMode` is set. + +##### Default + +```ts +false +``` + +#### showInspector + +> **showInspector**: `boolean` + +Whether to show the tool inspector. + +##### Default Value + +`false` + +## PolygonToolSettings + +### Properties + +#### color + +> **color**: `string` + +The color of the element in some CSS-like format. + +##### Example + +```typescript +"#ABC123"; +"rgb(255, 0, 0)"; +"hsl(200, 100%, 50%)"; +``` + +##### Default + +```ts +"#C93535" +``` + +#### strokeOpacity + +> **strokeOpacity**: `number` + +A value between 0 and 1 that describes the opacity of the element's stroke. + +##### Default + +```ts +1 +``` + +#### strokeWidth + +> **strokeWidth**: `number` + +The width of the element's stroke in pixels. + +##### Default + +```ts +2 +``` + +#### strokeStyle + +> **strokeStyle**: `"solid"` | `"dashed"` | `"dotted"` + +The style of the element's stroke. + +##### Default + +```ts +"solid" +``` + +#### fillOpacity + +> **fillOpacity**: `number` + +The opacity of the polygon's fill, between 0 and 1. + +##### Default + +```ts +0.25 +``` + +#### areaMarker + +> **areaMarker**: `boolean` + +Whether to show an area marker on the polygon. + +##### Default + +```ts +false +``` + +#### showInspector + +> **showInspector**: `boolean` + +Whether to show the tool inspector. + +##### Default Value + +`false` + +## CircleToolSettings + +### Properties + +#### color + +> **color**: `string` + +The color of the element in some CSS-like format. + +##### Example + +```typescript +"#ABC123"; +"rgb(255, 0, 0)"; +"hsl(200, 100%, 50%)"; +``` + +##### Default + +```ts +"#C93535" +``` + +#### strokeOpacity + +> **strokeOpacity**: `number` + +A value between 0 and 1 that describes the opacity of the element's stroke. + +##### Default + +```ts +1 +``` + +#### strokeWidth + +> **strokeWidth**: `number` + +The width of the element's stroke in pixels. + +##### Default + +```ts +2 +``` + +#### strokeStyle + +> **strokeStyle**: `"solid"` | `"dashed"` | `"dotted"` + +The style of the element's stroke. + +##### Default + +```ts +"solid" +``` + +#### radiusMarker + +> **radiusMarker**: `boolean` + +Whether to show a marker on the circle that indicates the radius + +##### Default + +```ts +false +``` + +#### fillOpacity + +> **fillOpacity**: `number` + +The opacity of the circle's fill. + +##### Default + +```ts +0.25 +``` + +#### showInspector + +> **showInspector**: `boolean` + +Whether to show the tool inspector. + +##### Default Value + +`false` + +## MarkerToolSettings + +### Properties + +#### color + +> **color**: `string` + +The color of the element in some CSS-like format. + +##### Example + +```typescript +"#ABC123"; +"rgb(255, 0, 0)"; +"hsl(200, 100%, 50%)"; +``` + +##### Default + +```ts +"#C93535" +``` + +#### opacity + +> **opacity**: `number` + +The opacity of the marker, between 0 and 1. + +##### Default + +```ts +1 +``` + +#### size + +> **size**: `number` + +The size of the marker, used in conjunction with the `zoom` to determine +the actual size of the marker. + +##### Default + +```ts +10 +``` + +#### showInspector + +> **showInspector**: `boolean` + +Whether to show the tool inspector. + +##### Default Value + +`false` + +## HighlighterToolSettings + +### Properties + +#### color + +> **color**: `string` + +The color of the element in some CSS-like format. + +##### Example + +```typescript +"#ABC123"; +"rgb(255, 0, 0)"; +"hsl(200, 100%, 50%)"; +``` + +##### Default + +```ts +"#C93535" +``` + +#### renderHoles + +> **renderHoles**: `boolean` + +Whether to render the holes of the highlighted area. + +##### Default + +```ts +false +``` + +#### opacity + +> **opacity**: `number` + +The opacity of the highlighter, between 0 and 1. + +##### Default + +```ts +0.5 +``` + +#### showInspector + +> **showInspector**: `boolean` + +Whether to show the tool inspector. + +##### Default Value + +`false` + +#### size + +> **size**: `number` + +## TextToolSettings + +### Properties + +#### color + +> **color**: `string` + +The color of the element in some CSS-like format. + +##### Example + +```typescript +"#ABC123"; +"rgb(255, 0, 0)"; +"hsl(200, 100%, 50%)"; +``` + +##### Default + +```ts +"#C93535" +``` + +#### align + +> **align**: `"center"` | `"left"` | `"right"` + +The alignment of the text, either `left`, `center` or `right`. + +##### Default + +```ts +"center" +``` + +#### style + +> **style**: `"italic"` | `"light"` | `"regular"` | `"caps"` + +The style of the text, either `italic`, `light`, `regular` or `caps`. + +##### Default + +```ts +"regular" +``` + +#### showInspector + +> **showInspector**: `boolean` + +Whether to show the tool inspector. + +##### Default Value + +`false` + +## NoteToolSettings + +### Properties + +#### color + +> **color**: `string` + +The color of the element in some CSS-like format. + +##### Example + +```typescript +"#ABC123"; +"rgb(255, 0, 0)"; +"hsl(200, 100%, 50%)"; +``` + +##### Default + +```ts +"#C93535" +``` + +#### align + +> **align**: `"center"` | `"left"` | `"right"` + +The alignment of the text, either `left`, `center` or `right`. + +##### Default + +```ts +"center" +``` + +#### style + +> **style**: `"italic"` | `"light"` | `"regular"` | `"caps"` + +The style of the text, either `italic`, `light`, `regular` or `caps`. + +##### Default + +```ts +"regular" +``` + +#### showInspector + +> **showInspector**: `boolean` + +Whether to show the tool inspector. + +##### Default Value + +`false` + +## CreateActionTriggerParams + +### Properties + +#### actionTrigger + +> **actionTrigger**: [`UIActionTriggerCreate`](client.md#uiactiontriggercreate) + +#### placement? + +> `optional` **placement**: \{ `after`: `string`; } | \{ `before`: `string`; } | \{ `at`: `"start"` | `"end"`; } + +## UpdateActionTriggerParams + +### Properties + +#### id + +> **id**: `string` + +#### label? + +> `optional` **label**: `string` + +The label of the action trigger. + +#### disabled? + +> `optional` **disabled**: `boolean` + +Whether the action trigger is disabled or not. + +#### type? + +> `optional` **type**: `undefined` + +#### onTrigger()? + +> `optional` **onTrigger**: (`args`) => `void` + +The function to call when the action trigger is triggered. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the action trigger. + +##### Returns + +`void` + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +## CreateFeatureActionParams + +### Properties + +#### action + +> **action**: [`uiFeatureActionCreate`](client.md#uifeatureactioncreate) + +#### placement? + +> `optional` **placement**: \{ `after`: `string`; } | \{ `before`: `string`; } | \{ `at`: `"start"` | `"end"`; } + +## UpdateFeatureActionParams + +### Properties + +#### id + +> **id**: `string` + +#### label? + +> `optional` **label**: `string` + +#### layerIds? + +> `optional` **layerIds**: `string`\[] + +#### geometryTypes? + +> `optional` **geometryTypes**: (`"Polygon"` | `"Point"` | `"Line"` | `"Raster"`)\[] + +#### onTrigger()? + +> `optional` **onTrigger**: (`args`) => `void` + +##### Parameters + +##### args + +##### feature + +[`LayerFeature`](client.md#layerfeature) + +##### Returns + +`void` + +## CreateOrUpdatePanelParams + +The parameters for creating or updating a panel by using [UiController.createOrUpdatePanel](client.md#createorupdatepanel). + +### Properties + +#### panel + +> **panel**: [`UIPanelCreateOrUpdate`](client.md#uipanelcreateorupdate) + +The panel to add. + +#### placement? + +> `optional` **placement**: \{ `after`: `string`; } | \{ `before`: `string`; } | \{ `at`: `"start"` | `"end"`; } + +#### initialPlacement? + +> `optional` **initialPlacement**: \{ `after`: `string`; } | \{ `before`: `string`; } | \{ `at`: `"start"` | `"end"`; } + +The placement of the panel on the right sidebar stack. + +##### Default Value + +`{ at: "end" }` + +## CreatePanelElementsParams + +### Properties + +#### panelId + +> **panelId**: `string` + +#### elements + +> **elements**: `object`\[] + +##### element + +> **element**: [`UIPanelElementCreate`](client.md#uipanelelementcreate) + +##### container? + +> `optional` **container**: `"footer"` | `"body"` | \{ `id`: `string`; } + +The section of the panel to add the element to. +It can be either one of the top-level sections of the panel (`"body"` or `"footer"`) +or a specific container (like [UIGridContainerElement](client.md#uigridcontainerelement)) in the panel (`{ id: string }`). + +##### Default Value + +`"body"` + +##### placement? + +> `optional` **placement**: \{ `after`: `string`; } | \{ `before`: `string`; } | \{ `at`: `"start"` | `"end"`; } + +The placement of the element in the target container (based on the `container` property). + +##### Default Value + +`{ at: "end" }` + +## UpdatePanelElementsParams + +### Properties + +#### panelId + +> **panelId**: `string` + +The ID of the panel to update. + +#### elements + +> **elements**: `object`\[] + +Dictionary of element IDs to the element to update. + +##### element + +> **element**: [`UIPanelElementUpdate`](client.md#uipanelelementupdate) + +## DeletePanelElementsParams + +### Properties + +#### panelId + +> **panelId**: `string` + +#### elements + +> **elements**: `string`\[] + +## UiControlsOptions + +### Properties + +#### showLegend? + +> `optional` **showLegend**: `boolean` + +Whether or not the legend is shown. + +##### Default Value + +```ts +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 + +```ts +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 + +```ts +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 + +```ts +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 + +```ts +true +``` + +#### scaleBar? + +> `optional` **scaleBar**: `boolean` + +Whether or not the scale bar is shown in an embedded map. + +##### Default Value + +```ts +true +``` + +## OnMapInteractionsOptions + +The options for which parts of the Felt UI can be shown when interacting with +features and elements on the map. + +Switching these off can be useful if you add your own click, selection or hover +handlers for features and elements. + +### Properties + +#### featureSelectPanel? + +> `optional` **featureSelectPanel**: `boolean` + +Set this to `false` to prevent the panel that shows information about a selected +feature from being shown. + +#### featureHoverPanel? + +> `optional` **featureHoverPanel**: `boolean` + +Set this to `false` to prevent the panel that shows information about a hovered +feature from being shown. + +#### elementSelectPanel? + +> `optional` **elementSelectPanel**: `boolean` + +Set this to `false` to prevent the panel that shows information about a selected +element from being shown. + +#### linkClickOpen? + +> `optional` **linkClickOpen**: `boolean` + +Set this to `false` to prevent clicking on a map link element from opening that link +in a new tab or window. + +#### imageLightboxOpen? + +> `optional` **imageLightboxOpen**: `boolean` + +Set this to `false` to prevent clicking on an image element from opening the image +in a lightbox. + +## UIActionTriggerCreate + +Represents an action trigger. +It can be added to the map by using the [UiController.createActionTrigger](client.md#createactiontrigger) method. + +### Properties + +#### label + +> **label**: `string` + +The label of the action trigger. + +#### onTrigger() + +> **onTrigger**: (`args`) => `void` + +The function to call when the action trigger is triggered. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the action trigger. + +##### Returns + +`void` + +#### id? + +> `optional` **id**: `string` + +#### disabled? + +> `optional` **disabled**: `boolean` + +Whether the action trigger is disabled or not. + +#### type? + +> `optional` **type**: `undefined` + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +## UIButtonElement + +Represents a button element in a panel. + +
+ Button variants + +
Button variants
+
+ +### Example + +```typescript +{ + type: "Button", + label: "Click me", + onClick: () => alert("Button clicked"), +} +``` + +### Properties + +#### type + +> **type**: `"Button"` + +#### label + +> **label**: `string` + +The label to display in the button. + +#### onClick() + +> **onClick**: (`args`) => `void` + +The action to perform when the button is clicked. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the button. + +##### Returns + +`void` + +#### id + +> **id**: `string` + +The ID of the element. + +#### variant? + +> `optional` **variant**: `"filled"` | `"transparent"` | `"outlined"` + +The style variant of the button. + +* `"filled"`: a button with background. + * `background` color is based on button's `tint` (defaults to `default` tint) +* `"transparent"`: a transparent button that gets a subtle dark background when hovered. + * `text` color is based on button's `tint` (defaults to `default` tint) +* `"outlined"`: a transparent button with a border. + * `text` and `border` colors are based on button's `tint` (defaults to `default` tint) + +##### Default Value + +`"filled"` + +#### tint? + +> `optional` **tint**: `"default"` | `"primary"` | `"accent"` | `"danger"` + +The tint of the button. + +* `"default"`: Felt's theme-based light/dark colors. +* `"primary"`: Felt's primary color (pink). +* `"accent"`: Felt's accent color (blue). +* `"danger"`: Felt's danger color (red). + +##### Default Value + +`"default"` + +#### disabled? + +> `optional` **disabled**: `boolean` + +Whether the button is disabled. + +##### Default Value + +`false` + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +## UIButtonElementCreate + +The parameters for creating a button element. + +See [UIButtonElement](client.md#uibuttonelement) for more details. + +### Remarks + +`id` is optional but recommended if you want to be able to perform updates. + +### Properties + +#### type + +> **type**: `"Button"` + +#### label + +> **label**: `string` + +The label to display in the button. + +#### onClick() + +> **onClick**: (`args`) => `void` + +The action to perform when the button is clicked. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the button. + +##### Returns + +`void` + +#### variant? + +> `optional` **variant**: `"filled"` | `"transparent"` | `"outlined"` + +The style variant of the button. + +* `"filled"`: a button with background. + * `background` color is based on button's `tint` (defaults to `default` tint) +* `"transparent"`: a transparent button that gets a subtle dark background when hovered. + * `text` color is based on button's `tint` (defaults to `default` tint) +* `"outlined"`: a transparent button with a border. + * `text` and `border` colors are based on button's `tint` (defaults to `default` tint) + +##### Default Value + +`"filled"` + +#### tint? + +> `optional` **tint**: `"default"` | `"primary"` | `"accent"` | `"danger"` + +The tint of the button. + +* `"default"`: Felt's theme-based light/dark colors. +* `"primary"`: Felt's primary color (pink). +* `"accent"`: Felt's accent color (blue). +* `"danger"`: Felt's danger color (red). + +##### Default Value + +`"default"` + +#### disabled? + +> `optional` **disabled**: `boolean` + +Whether the button is disabled. + +##### Default Value + +`false` + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### id? + +> `optional` **id**: `string` + +The ID of the element. + +##### Remarks + +If not provided, the element will be assigned a random ID, but it is recommended to provide it +to perform further updates on the element. + +If provided, it must be unique within the UI. + +##### Default Value + +`undefined` + +## UIButtonElementUpdate + +The parameters for updating a button element. + +See [UIButtonElement](client.md#uibuttonelement) for more details. + +### Remarks + +`id` and `type` are required to identify the element to update. + +### Properties + +#### type + +> **type**: `"Button"` + +#### id + +> **id**: `string` + +The ID of the element. + +#### label? + +> `optional` **label**: `string` + +The label to display in the button. + +#### variant? + +> `optional` **variant**: `"filled"` | `"transparent"` | `"outlined"` + +The style variant of the button. + +* `"filled"`: a button with background. + * `background` color is based on button's `tint` (defaults to `default` tint) +* `"transparent"`: a transparent button that gets a subtle dark background when hovered. + * `text` color is based on button's `tint` (defaults to `default` tint) +* `"outlined"`: a transparent button with a border. + * `text` and `border` colors are based on button's `tint` (defaults to `default` tint) + +##### Default Value + +`"filled"` + +#### tint? + +> `optional` **tint**: `"default"` | `"primary"` | `"accent"` | `"danger"` + +The tint of the button. + +* `"default"`: Felt's theme-based light/dark colors. +* `"primary"`: Felt's primary color (pink). +* `"accent"`: Felt's accent color (blue). +* `"danger"`: Felt's danger color (red). + +##### Default Value + +`"default"` + +#### disabled? + +> `optional` **disabled**: `boolean` + +Whether the button is disabled. + +##### Default Value + +`false` + +#### onClick()? + +> `optional` **onClick**: (`args`) => `void` + +The action to perform when the button is clicked. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the button. + +##### Returns + +`void` + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +## UIButtonRowElement + +Represents a row of buttons. + +It is useful to group buttons together and align them. + +Unlike on [UIGridContainerElement](client.md#uigridcontainerelement), buttons do not expand to fill the container. +Instead, they use the space they need and are wrapped to the next line when they overflow. + +## Label + +A label can be added to the button row using the `label` property. + +
+ Label + +
Label
+
+ +```typescript +{ + type: "ButtonRow", + label: "Zoom control", + items: [ + { type: "Button", label: "Increase", onClick: () => {} }, + { type: "Button", label: "Decrease", onClick: () => {} }, + ], +} +``` + +## Alignment + +It is possible to align the button row to the start or end of the container using the `align` property. + +### Start alignment + +
+ Start alignment + +
Start alignment
+
+ +```typescript +{ + type: "ButtonRow", + align: "start", // default value + items: [ + { type: "Button", label: "Button 1", onClick: () => {} }, + { type: "Button", label: "Button 2", onClick: () => {} }, + ], +} +``` + +### End alignment + +
+ End alignment + +
End alignment
+
+ +```typescript +{ + type: "ButtonRow", + align: "end", + items: [ + { type: "Button", label: "Button 1", onClick: () => {} }, + { type: "Button", label: "Button 2", onClick: () => {} }, + ], +} +``` + +## Overflow + +When buttons overflow the container, they are wrapped to the next line. + +
+ Overflow + +
Overflow
+
+ +```typescript +{ + type: "ButtonRow", + items: [ + { type: "Button", label: "Button with a very long text", onClick: () => {} }, + { type: "Button", label: "Button 2", onClick: () => {} }, + { type: "Button", label: "Button 3", onClick: () => {} }, + ], +} +``` + +## With Grid container + +[UIGridContainerElement](client.md#uigridcontainerelement), as a generic container, can render [UIButtonRowElement](client.md#uibuttonrowelement) as well. + +In this example, the combination of [UIGridContainerElement](client.md#uigridcontainerelement) and [UIButtonRowElement](client.md#uibuttonrowelement) is used to layout a footer +where the buttons are aligned to the end of the container and the text is at the start. + +
+ With Grid container + +
With Grid container
+
+ +```typescript +{ + type: "Grid", + grid: "auto-flow / 1fr auto", + rowItemsJustify: "space-between", + rowItemsAlign: "center", + items: [ + { type: "Text", content: "Continue?" }, + { + type: "ButtonRow", + align: "end", + items: [ + { type: "Button", variant: "transparent", label: "Cancel", onClick: () => {} }, + { type: "Button", variant: "filled", tint: "primary", label: "Continue", onClick: () => {} }, + ] + }, + ], +} +``` + +### Properties + +#### type + +> **type**: `"ButtonRow"` + +#### items + +> **items**: [`UIButtonElement`](client.md#uibuttonelement)\[] + +The items to add to the button row. + +#### id + +> **id**: `string` + +The ID of the element. + +#### align? + +> `optional` **align**: `"start"` | `"end"` + +The alignment of the button row. + +##### Default Value + +`"start"` + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### label? + +> `optional` **label**: `string` + +Label text to display above the element and used for screen readers. + +## UIButtonRowElementCreate + +The parameters for creating a button row element. + +See [UIButtonRowElement](client.md#uibuttonrowelement) for more details. + +### Properties + +#### type + +> **type**: `"ButtonRow"` + +#### items + +> **items**: [`UIButtonElementCreate`](client.md#uibuttonelementcreate)\[] + +The items to add to the button row. + +#### align? + +> `optional` **align**: `"start"` | `"end"` + +The alignment of the button row. + +##### Default Value + +`"start"` + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### id? + +> `optional` **id**: `string` + +The ID of the element. + +##### Remarks + +If not provided, the element will be assigned a random ID, but it is recommended to provide it +to perform further updates on the element. + +If provided, it must be unique within the UI. + +##### Default Value + +`undefined` + +#### label? + +> `optional` **label**: `string` + +Label text to display above the element and used for screen readers. + +## UIButtonRowElementUpdate + +The parameters for updating a button row element. + +See [UIButtonRowElement](client.md#uibuttonrowelement) for more details. + +### Properties + +#### type + +> **type**: `"ButtonRow"` + +#### id + +> **id**: `string` + +The ID of the element. + +#### align? + +> `optional` **align**: `"start"` | `"end"` + +The alignment of the button row. + +##### Default Value + +`"start"` + +#### items? + +> `optional` **items**: [`UIButtonElementCreate`](client.md#uibuttonelementcreate)\[] + +The items to add to the button row. + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### label? + +> `optional` **label**: `string` + +Label text to display above the element and used for screen readers. + +## UICheckboxGroupElement + +The parameters for creating a checkbox group element. + +The checkbox group is a control that allows the user to select one or more values from a list of options. + +As a control, the checkbox group can have a label displayed above the checkboxes. + +If no value is provided, `value` is `[]`, the checkbox group will be empty. + +
+ Checkbox group basic + +
+ A checkbox group with a label +
+
+ +```typescript +{ + type: "CheckboxGroup", + label: "Select your hobbies", + options: [ + { label: "👾 Video games", value: "gaming" }, + { label: "🎨 Art", value: "art" }, + { label: "🎤 Singing", value: "singing" }, + { label: "🎬 Movies", value: "movies" }, + ], + value: ["gaming", "art"], + onChange: ({ value, id }) => { } +} +``` + +### Properties + +#### type + +> **type**: `"CheckboxGroup"` + +#### value + +> **value**: `string`\[] = `valueSchema` + +The value of the checkbox group. + +##### Default Value + +`[]` + +#### options + +> **options**: [`UIControlElementOption`](client.md#uicontrolelementoption)\[] + +The options to display in the checkbox group. + +#### onChange() + +> **onChange**: (`args`) => `void` + +The function to call when the value of the checkbox group changes. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### value + +`string`\[] + +Array of the selected values. + +##### id + +`string` + +The id of the checkbox group element. + +##### Returns + +`void` + +#### id + +> **id**: `string` + +The ID of the element. + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### label? + +> `optional` **label**: `string` + +Label text to display above the element and used for screen readers. + +## UICheckboxGroupElementCreate + +The parameters for creating a checkbox group element. + +See [UICheckboxGroupElement](client.md#uicheckboxgroupelement) for more details. + +### Properties + +#### type + +> **type**: `"CheckboxGroup"` + +#### value + +> **value**: `string`\[] = `valueSchema` + +The value of the checkbox group. + +##### Default Value + +`[]` + +#### options + +> **options**: [`UIControlElementOption`](client.md#uicontrolelementoption)\[] + +The options to display in the checkbox group. + +#### onChange() + +> **onChange**: (`args`) => `void` + +The function to call when the value of the checkbox group changes. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### value + +`string`\[] + +Array of the selected values. + +##### id + +`string` + +The id of the checkbox group element. + +##### Returns + +`void` + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### id? + +> `optional` **id**: `string` + +The ID of the element. + +##### Remarks + +If not provided, the element will be assigned a random ID, but it is recommended to provide it +to perform further updates on the element. + +If provided, it must be unique within the UI. + +##### Default Value + +`undefined` + +#### label? + +> `optional` **label**: `string` + +Label text to display above the element and used for screen readers. + +## UICheckboxGroupElementUpdate + +The parameters for updating a checkbox group element. + +See [UICheckboxGroupElement](client.md#uicheckboxgroupelement) for more details. + +### Properties + +#### type + +> **type**: `"CheckboxGroup"` + +#### id + +> **id**: `string` + +The ID of the element. + +#### value? + +> `optional` **value**: `string`\[] = `valueSchema` + +The value of the checkbox group. + +##### Default Value + +`[]` + +#### options? + +> `optional` **options**: [`UIControlElementOption`](client.md#uicontrolelementoption)\[] + +The options to display in the checkbox group. + +#### onChange()? + +> `optional` **onChange**: (`args`) => `void` + +The function to call when the value of the checkbox group changes. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### value + +`string`\[] + +Array of the selected values. + +##### id + +`string` + +The id of the checkbox group element. + +##### Returns + +`void` + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### label? + +> `optional` **label**: `string` + +Label text to display above the element and used for screen readers. + +## UIDividerElement + +Represents a divider element in a panel. +This element is used to separate other elements in a panel. +It is rendered as a gray horizontal line of 1px height. + +### Example + +Divider element is useful to separate sections of a panel. + +```typescript +{ + body: [ + { type: "Text", content: "Contact" }, + { type: "TextInput", placeholder: "Enter your name", ... }, + { type: "TextInput", placeholder: "Enter your email", ... }, + { type: "Divider" }, + { type: "Text", content: "Address" }, + { type: "TextInput", placeholder: "Enter your address", ... }, + ], +} +``` + +### Properties + +#### type + +> **type**: `"Divider"` + +#### id + +> **id**: `string` + +The ID of the element. + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +## UIDividerElementCreate + +The parameters for creating a divider element. + +See [UIDividerElement](client.md#uidividerelement) for more details. + +### Remarks + +`id` is optional but recommended if you want to be able to delete the element. + +### Properties + +#### type + +> **type**: `"Divider"` + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### id? + +> `optional` **id**: `string` + +The ID of the element. + +##### Remarks + +If not provided, the element will be assigned a random ID, but it is recommended to provide it +to perform further updates on the element. + +If provided, it must be unique within the UI. + +##### Default Value + +`undefined` + +## UIDividerElementUpdate + +The parameters for updating a divider element. + +See [UIDividerElement](client.md#uidividerelement) for more details. + +### Remarks + +`id` and `type` are required to identify the element to update. + +### Properties + +#### type + +> **type**: `"Divider"` + +#### id + +> **id**: `string` + +The ID of the element. + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +## uiFeatureActionCreate + +Represents a feature action for creation. +It can be added to the map by using the [UiController.createFeatureAction](client.md#createfeatureaction) method. + +### Properties + +#### label + +> **label**: `string` + +The label of the feature action. + +#### onTrigger() + +> **onTrigger**: (`args`) => `void` + +The function to call when the feature action is triggered. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### feature + +[`LayerFeature`](client.md#layerfeature) + +The feature that triggered the action. + +##### Returns + +`void` + +#### id? + +> `optional` **id**: `string` + +#### layerIds? + +> `optional` **layerIds**: `string`\[] + +The layers to add the action to. Optional. Defaults to all layers. + +#### geometryTypes? + +> `optional` **geometryTypes**: (`"Polygon"` | `"Point"` | `"Line"` | `"Raster"`)\[] + +The geometry type of the features to add the action to. Optional. Defaults to all geometry types. + +#### type? + +> `optional` **type**: `undefined` + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +## UIFlexibleSpaceElement + +Represents a flexible space element in a container. + +When rendered... + +* inside [UIGridContainerElement](client.md#uigridcontainerelement), it will add extra gap between items. It can be controlled by `grid` property. +* inside [UIPanelElement](client.md#uipanelelement) `body` or `footer`, since they work as vertically stacks, it will add extra gap between items. + +### Examples + +Paragraphs with a flexible space between makes them more visually separated. + +```typescript +{ + type: "Panel", + body: [ + { type: "Paragraph", text: "Paragraph 1" }, + { type: "FlexibleSpace" }, + { type: "Paragraph", text: "Paragraph 2" }, + ], +} +``` + +Horizontal stack of buttons with a flexible space between makes them more visually separated. + +```typescript +{ + type: "Grid", + grid: "auto-flow / auto 1fr auto", + items: [ + { type: "Button", label: "Button 1", onClick: () => {} }, + { type: "FlexibleSpace" }, + { type: "Button", label: "Button 2", onClick: () => {} }, + ], +} +``` + +### Properties + +#### type + +> **type**: `"FlexibleSpace"` + +#### id + +> **id**: `string` + +The ID of the element. + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +## UIFlexibleSpaceElementCreate + +The parameters for creating a flexible space element. + +### Remarks + +`id` is optional but recommended if you want to be able to perform updates. + +### Properties + +#### type + +> **type**: `"FlexibleSpace"` + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### id? + +> `optional` **id**: `string` + +The ID of the element. + +##### Remarks + +If not provided, the element will be assigned a random ID, but it is recommended to provide it +to perform further updates on the element. + +If provided, it must be unique within the UI. + +##### Default Value + +`undefined` + +## UIFlexibleSpaceElementUpdate + +The parameters for updating a flexible space element. + +See [UIFlexibleSpaceElement](client.md#uiflexiblespaceelement) for more details. + +### Remarks + +`id` and `type` are required to identify the element to update. + +### Properties + +#### type + +> **type**: `"FlexibleSpace"` + +#### id + +> **id**: `string` + +The ID of the element. + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +## UIGridContainerElement + +Represents a container with a grid layout in a panel. + +By default, the grid items are vertically stacked, +but you can change the grid to use a different layout by +setting the `grid` property to a different value. + +`grid` property is the exact same as CSS's shorthand property `grid`. +[See the MDN documentation for more details](https://developer.mozilla.org/en-US/docs/Web/CSS/grid). + +You can understand [UIPanel](client.md#uipanel) `body` and `footer` properties +as grid containers using default vertical stack layout. + +## Horizontal stack + +As part of CSS Grid Layout capabilities it is possible to create a horizontal stack. + +### Alignment & Distribution + +On horizontal stacks, it is possible to align and distribute the items. + +`verticalAlignment` is used to align the items vertically. By default, items are aligned to the top of the container. +It follows the same values as CSS's `align-items` property. See [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) for more details. + +`horizontalDistribution` is used to justify the items horizontally. By default, items are justified to the start of the container. +It follows the same values as CSS's `justify-content` property. See [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) for more details. + +### Equal width columns + +
+ Horizontal stack + +
Two columns, each sharing 50% of the container width
+
+ +```typescript +{ + type: "Grid", + grid: "auto-flow / 1fr 1fr", + items: [ + { type: "TextInput", label: "Name", value: "" }, + { type: "TextInput", label: "Last name", value: "" }, + ], +} +``` + +## FlexibleSpace element + +`FlexibleSpace` element is a handy solution to allow more control over grid layout. + +If `grid` is not set, `FlexibleSpace` will add some space between the items. +By using `grid` property it is possible to control FlexibleSpace's size. + +### to right align the input + +
+ Flexible space to right align the input + +
Flexible space takes 50% of the container width
+
+ +```typescript +{ + type: "Grid", + grid: "auto-flow / 1fr 1fr", + items: [ + { type: "FlexibleSpace" }, + { type: "TextInput", label: "An input" , value: "" }, + ], +} +``` + +### two columns of buttons with space between them + +
+ Two groups of buttons + +
Two groups of buttons
+
+ +```typescript +{ + type: "Grid", + grid: "auto-flow / auto auto 1fr auto auto", + items: [ + { type: "Button", label: "A" , onClick: () => {} }, + { type: "Button", label: "B" , onClick: () => {} }, + { type: "FlexibleSpace" }, + { type: "Button", label: "C" , onClick: () => {} }, + { type: "Button", label: "D" , onClick: () => {} }, + ], +} +``` + +### Properties + +#### type + +> **type**: `"Grid"` + +#### items + +> **items**: ([`UIButtonElement`](client.md#uibuttonelement) | [`UITextElement`](client.md#uitextelement) | [`UIDividerElement`](client.md#uidividerelement) | [`UITextInputElement`](client.md#uitextinputelement) | [`UISelectElement`](client.md#uiselectelement) | [`UIFlexibleSpaceElement`](client.md#uiflexiblespaceelement) | [`UIButtonRowElement`](client.md#uibuttonrowelement) | [`UICheckboxGroupElement`](client.md#uicheckboxgroupelement) | [`UIRadioGroupElement`](client.md#uiradiogroupelement) | [`UIToggleGroupElement`](client.md#uitogglegroupelement) | [`UIIframeElement`](client.md#uiiframeelement))\[] + +The items to add to the grid container. + +#### id + +> **id**: `string` + +The ID of the element. + +#### grid? + +> `optional` **grid**: `string` + +The grid to use for the container. +It is the exact same as CSS's shorthand property `grid`. + +##### Example + +### horizontal stack + +two columns, the first column is 50px wide, the second column takes the remaining space + +```typescript +{ + type: "Grid", + grid: "auto-flow / 50px 1fr", + items: [...] +} +``` + +##### See + +[https://developer.mozilla.org/en-US/docs/Web/CSS/grid](https://developer.mozilla.org/en-US/docs/Web/CSS/grid) for more details. + +#### verticalAlignment? + +> `optional` **verticalAlignment**: `"center"` | `"top"` | `"bottom"` + +The alignment of the items in the grid. +Only takes effect on horizontal stacks. + +##### Default Value + +`"top"` + +#### horizontalDistribution? + +> `optional` **horizontalDistribution**: `"center"` | `"start"` | `"end"` | `"space-between"` | `"space-around"` | `"space-evenly"` + +The distribution of the items in the grid. +Only takes effect on horizontal stacks. + +##### Default Value + +`"start"` + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +## UIGridContainerElementCreate + +The parameters for creating a grid container element. + +See [UIGridContainerElement](client.md#uigridcontainerelement) for more details. + +### Properties + +#### type + +> **type**: `"Grid"` + +#### items + +> **items**: ([`UIButtonElementCreate`](client.md#uibuttonelementcreate) | [`UITextElementCreate`](client.md#uitextelementcreate) | [`UIDividerElementCreate`](client.md#uidividerelementcreate) | [`UITextInputElementCreate`](client.md#uitextinputelementcreate) | [`UISelectElementCreate`](client.md#uiselectelementcreate) | [`UIFlexibleSpaceElementCreate`](client.md#uiflexiblespaceelementcreate) | [`UIButtonRowElementCreate`](client.md#uibuttonrowelementcreate) | [`UICheckboxGroupElementCreate`](client.md#uicheckboxgroupelementcreate) | [`UIRadioGroupElementCreate`](client.md#uiradiogroupelementcreate) | [`UIToggleGroupElementCreate`](client.md#uitogglegroupelementcreate) | [`UIIframeElementCreate`](client.md#uiiframeelementcreate))\[] + +The items to add to the grid container. + +#### grid? + +> `optional` **grid**: `string` + +The grid to use for the container. +It is the exact same as CSS's shorthand property `grid`. + +##### Example + +### horizontal stack + +two columns, the first column is 50px wide, the second column takes the remaining space + +```typescript +{ + type: "Grid", + grid: "auto-flow / 50px 1fr", + items: [...] +} +``` + +##### See + +[https://developer.mozilla.org/en-US/docs/Web/CSS/grid](https://developer.mozilla.org/en-US/docs/Web/CSS/grid) for more details. + +#### verticalAlignment? + +> `optional` **verticalAlignment**: `"center"` | `"top"` | `"bottom"` + +The alignment of the items in the grid. +Only takes effect on horizontal stacks. + +##### Default Value + +`"top"` + +#### horizontalDistribution? + +> `optional` **horizontalDistribution**: `"center"` | `"start"` | `"end"` | `"space-between"` | `"space-around"` | `"space-evenly"` + +The distribution of the items in the grid. +Only takes effect on horizontal stacks. + +##### Default Value + +`"start"` + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### id? + +> `optional` **id**: `string` + +The ID of the element. + +##### Remarks + +If not provided, the element will be assigned a random ID, but it is recommended to provide it +to perform further updates on the element. + +If provided, it must be unique within the UI. + +##### Default Value + +`undefined` + +## UIGridContainerElementUpdate + +The parameters for updating a grid container element. + +See [UIGridContainerElement](client.md#uigridcontainerelement) for more details. + +### Remarks + +`id` and `type` are required to identify the element to update. + +### Properties + +#### type + +> **type**: `"Grid"` + +#### id + +> **id**: `string` + +The ID of the element. + +#### grid? + +> `optional` **grid**: `string` + +The grid to use for the container. +It is the exact same as CSS's shorthand property `grid`. + +##### Example + +### horizontal stack + +two columns, the first column is 50px wide, the second column takes the remaining space + +```typescript +{ + type: "Grid", + grid: "auto-flow / 50px 1fr", + items: [...] +} +``` + +##### See + +[https://developer.mozilla.org/en-US/docs/Web/CSS/grid](https://developer.mozilla.org/en-US/docs/Web/CSS/grid) for more details. + +#### verticalAlignment? + +> `optional` **verticalAlignment**: `"center"` | `"top"` | `"bottom"` + +The alignment of the items in the grid. +Only takes effect on horizontal stacks. + +##### Default Value + +`"top"` + +#### horizontalDistribution? + +> `optional` **horizontalDistribution**: `"center"` | `"start"` | `"end"` | `"space-between"` | `"space-around"` | `"space-evenly"` + +The distribution of the items in the grid. +Only takes effect on horizontal stacks. + +##### Default Value + +`"start"` + +#### items? + +> `optional` **items**: ([`UIButtonElementCreate`](client.md#uibuttonelementcreate) | [`UITextElementCreate`](client.md#uitextelementcreate) | [`UIDividerElementCreate`](client.md#uidividerelementcreate) | [`UITextInputElementCreate`](client.md#uitextinputelementcreate) | [`UISelectElementCreate`](client.md#uiselectelementcreate) | [`UIFlexibleSpaceElementCreate`](client.md#uiflexiblespaceelementcreate) | [`UIButtonRowElementCreate`](client.md#uibuttonrowelementcreate) | [`UICheckboxGroupElementCreate`](client.md#uicheckboxgroupelementcreate) | [`UIRadioGroupElementCreate`](client.md#uiradiogroupelementcreate) | [`UIToggleGroupElementCreate`](client.md#uitogglegroupelementcreate) | [`UIIframeElementCreate`](client.md#uiiframeelementcreate))\[] + +The items to add to the grid container. + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +## UIIframeElement + +Represents an iframe element in a panel. + +The height of the iframe can be set by using the `height` property +either as a number (measured in pixels) or a string (e.g. “100px” or “50%“). + +By default, the height is calculated following a 16:9 ratio. + +
+ Iframe showing an example website + +
+ Iframe with default height (16:9) +
+
+ +```typescript +{ type: "Iframe", url: "https://www.example.com" } +``` + +
+ Iframe showing an example website with a custom height + +
+ Iframe with custom height +
+
+ +```typescript +{ type: "Iframe", url: "https://www.example.com", height: 300 } +``` + +### Properties + +#### type + +> **type**: `"Iframe"` + +#### url + +> **url**: `string` + +The URL of the iframe. + +#### id + +> **id**: `string` + +The ID of the element. + +#### height? + +> `optional` **height**: `string` | `number` + +The height of the iframe. + +If not provided, the height will be automatically calculated following a 16:9 ratio. + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +## UIIframeElementCreate + +The parameters for creating an iframe element. + +See [UIIframeElement](client.md#uiiframeelement) for more details. + +### Remarks + +`id` is optional but recommended if you want to be able to perform updates. + +### Properties + +#### type + +> **type**: `"Iframe"` + +#### url + +> **url**: `string` + +The URL of the iframe. + +#### height? + +> `optional` **height**: `string` | `number` + +The height of the iframe. + +If not provided, the height will be automatically calculated following a 16:9 ratio. + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### id? + +> `optional` **id**: `string` + +The ID of the element. + +##### Remarks + +If not provided, the element will be assigned a random ID, but it is recommended to provide it +to perform further updates on the element. + +If provided, it must be unique within the UI. + +##### Default Value + +`undefined` + +## UIIframeElementUpdate + +The parameters for updating an iframe element. + +See [UIIframeElement](client.md#uiiframeelement) for more details. + +### Remarks + +`id` and `type` are required to identify the element to update. + +### Properties + +#### type + +> **type**: `"Iframe"` + +#### id + +> **id**: `string` + +The ID of the element. + +#### height? + +> `optional` **height**: `string` | `number` + +The height of the iframe. + +If not provided, the height will be automatically calculated following a 16:9 ratio. + +#### url? + +> `optional` **url**: `string` + +The URL of the iframe. + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +## UIPanel + +A UI panel that can be added to the map using [UiController.createOrUpdatePanel](client.md#createorupdatepanel). + +Panels are containers for UI elements with title, body, footer, and close button. +Body and footer elements are arranged in vertical stacks. + +### Body + +Main content area that scrolls when content exceeds available space. + +### Footer + +Sticky bottom section for action buttons (e.g., Save, Cancel). + +### Close Button + +Optional close icon in header. When `onClickClose` is provided, you must handle +panel cleanup and removal. + +### Example + +```typescript +// 1. Create panel ID +const panelId = await felt.createPanelId(); + +// 2. Create panel with close button and footer +await felt.createOrUpdatePanel({ + panel: { + id: panelId, + title: "My Panel", + body: [ + { type: "Text", content: "Hello, world!" }, + { type: "TextInput", label: "Name", placeholder: "Enter your name" } + ], + footer: [ + { + type: "ButtonRow", + align: "end", + items: [ + { type: "Button", label: "Cancel", onClick: () => handleCancel() }, + { type: "Button", label: "Save", onClick: () => handleSave() } + ] + } + ], + onClickClose: (args) => { + // Clean up any state or resources + cleanupResources(); + // Close the panel + felt.deletePanel(panelId); + } + } +}); +``` + +### Properties + +#### type + +> **type**: `"Panel"` + +#### id + +> **id**: `string` + +The ID of the panel obtained from [UiController.createPanelId](client.md#createpanelid). + +##### Remarks + +Custom IDs are not supported. + +#### title? + +> `optional` **title**: `string` + +The title to display in the panel header. + +#### body? + +> `optional` **body**: [`UIPanelElement`](client.md#uipanelelement)\[] + +The elements to add to the panel body. + +#### footer? + +> `optional` **footer**: [`UIPanelElement`](client.md#uipanelelement)\[] + +The elements to add to the panel footer. + +#### onClickClose()? + +> `optional` **onClickClose**: (`args`) => `void` + +A function to call when panel's close button is clicked. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the panel. + +##### Returns + +`void` + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +## UIPanelCreateOrUpdate + +The parameters for creating a panel by using [UiController.createOrUpdatePanel](client.md#createorupdatepanel). + +### See + +[UIPanel](client.md#uipanel) for more information about panels. + +### Properties + +#### id + +> **id**: `string` + +The ID of the panel obtained from [UiController.createPanelId](client.md#createpanelid). + +##### Remarks + +Custom IDs are not supported. + +#### title? + +> `optional` **title**: `string` + +The title to display in the panel header. + +#### onClickClose()? + +> `optional` **onClickClose**: (`args`) => `void` + +A function to call when panel's close button is clicked. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the panel. + +##### Returns + +`void` + +#### type? + +> `optional` **type**: `"Panel"` + +#### body? + +> `optional` **body**: [`UIPanelElementCreate`](client.md#uipanelelementcreate)\[] + +The elements to add to the panel body. + +#### footer? + +> `optional` **footer**: [`UIPanelElementCreate`](client.md#uipanelelementcreate)\[] + +The elements to add to the panel footer. + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +## UIRadioGroupElement + +The parameters for creating a radio group element. + +The radio group is a control that allows the user to select a single value from a list of options. + +As a control, the radio group can have a label displayed above the radioes. + +If no value is provided, `value` is `undefined`, the radio group will be empty. + +
+ Radio group basic + +
+ A radio buttons group with a label +
+
+ +```typescript +{ + type: "RadioGroup", + label: "Select a side", + options: [ + { label: "🍟", value: "fries" }, + { label: "🍚", value: "rice" }, + { label: "🥗", value: "salad" }, + ], + value: "rice", + onChange: ({ value, id }) => { } +} +``` + +### Properties + +#### type + +> **type**: `"RadioGroup"` + +#### options + +> **options**: [`UIControlElementOption`](client.md#uicontrolelementoption)\[] + +The options to display in the radio group. + +#### onChange() + +> **onChange**: (`args`) => `void` + +The function to call when the value of the radio group changes. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### value + +`undefined` | `string` + +The selected value. + +##### id + +`string` + +The id of the radio group element. + +##### Returns + +`void` + +#### id + +> **id**: `string` + +The ID of the element. + +#### value? + +> `optional` **value**: `string` = `valueSchema` + +The value of the radio group. + +##### Default Value + +`undefined` + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### label? + +> `optional` **label**: `string` + +Label text to display above the element and used for screen readers. + +## UIRadioGroupElementCreate + +The parameters for creating a radio group element. + +See [UIRadioGroupElement](client.md#uiradiogroupelement) for more details. + +### Properties + +#### type + +> **type**: `"RadioGroup"` + +#### options + +> **options**: [`UIControlElementOption`](client.md#uicontrolelementoption)\[] + +The options to display in the radio group. + +#### onChange() + +> **onChange**: (`args`) => `void` + +The function to call when the value of the radio group changes. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### value + +`undefined` | `string` + +The selected value. + +##### id + +`string` + +The id of the radio group element. + +##### Returns + +`void` + +#### value? + +> `optional` **value**: `string` = `valueSchema` + +The value of the radio group. + +##### Default Value + +`undefined` + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### id? + +> `optional` **id**: `string` + +The ID of the element. + +##### Remarks + +If not provided, the element will be assigned a random ID, but it is recommended to provide it +to perform further updates on the element. + +If provided, it must be unique within the UI. + +##### Default Value + +`undefined` + +#### label? + +> `optional` **label**: `string` + +Label text to display above the element and used for screen readers. + +## UIRadioGroupElementUpdate + +The parameters for updating a radio group element. + +See [UIRadioGroupElement](client.md#uiradiogroupelement) for more details. + +### Properties + +#### type + +> **type**: `"RadioGroup"` + +#### id + +> **id**: `string` + +The ID of the element. + +#### value? + +> `optional` **value**: `string` = `valueSchema` + +The value of the radio group. + +##### Default Value + +`undefined` + +#### options? + +> `optional` **options**: [`UIControlElementOption`](client.md#uicontrolelementoption)\[] + +The options to display in the radio group. + +#### onChange()? + +> `optional` **onChange**: (`args`) => `void` + +The function to call when the value of the radio group changes. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### value + +`undefined` | `string` + +The selected value. + +##### id + +`string` + +The id of the radio group element. + +##### Returns + +`void` + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### label? + +> `optional` **label**: `string` + +Label text to display above the element and used for screen readers. + +## UISelectElement + +Represents a select element in a panel. + +### Remarks + +`options` property is required. +`label` property is displayed above the select and used for screen readers. +`value` property is optional, for empty value use `undefined`. +`placeholder` property is displayed in the select when no value is selected. +`search` property is used to enable searching through the options. +`onChange` property is used to handle the value change event. + +### Examples + +### empty select + +```typescript +{ + type: "Select", + options: [{ label: "Option 1", value: "option1" }, { label: "Option 2", value: "option2" }], + value: undefined, + placeholder: "Select an option", + onChange: (args) => console.log(args.value), +} +``` + +### with label + +`label` is displayed above the select and used for screen readers. +`placeholder` is displayed in the select when no value is selected. + +```typescript +{ + type: "Select", + label: "Fruit", + options: [{ label: "Apple", value: "apple" }, { label: "Banana", value: "banana" }], + value: undefined, + placeholder: "Select a fruit", + onChange: (args) => console.log(args.value), +} +``` + +### with search + +```typescript +{ + type: "Select", + options: [{ label: "Option 1", value: "option1" }, { label: "Option 2", value: "option2" }], + value: "option1", + placeholder: "Select an option", + search: true, + onChange: (args) => console.log(args.value), +} +``` + +### Properties + +#### type + +> **type**: `"Select"` + +#### options + +> **options**: [`UIControlElementOption`](client.md#uicontrolelementoption)\[] + +The options to display in the select. + +#### onChange() + +> **onChange**: (`args`) => `void` + +The function to call when the value of the select changes. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### value + +`string` + +The value of the select. + +##### id + +`string` + +The id of the select element. + +##### Returns + +`void` + +#### id + +> **id**: `string` + +The ID of the element. + +#### value? + +> `optional` **value**: `string` + +The value of the select. + +#### placeholder? + +> `optional` **placeholder**: `string` + +The placeholder text to display in the select. + +#### search? + +> `optional` **search**: `boolean` + +Whether the select should allow searching through the options. + +##### Default Value + +`false` + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### label? + +> `optional` **label**: `string` + +Label text to display above the element and used for screen readers. + +## UISelectElementCreate + +The parameters for creating a select element. + +See [UISelectElement](client.md#uiselectelement) for more details. + +### Remarks + +`id` is optional but recommended if you want to be able to perform updates. + +### Properties + +#### type + +> **type**: `"Select"` + +#### options + +> **options**: [`UIControlElementOption`](client.md#uicontrolelementoption)\[] + +The options to display in the select. + +#### onChange() + +> **onChange**: (`args`) => `void` + +The function to call when the value of the select changes. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### value + +`string` + +The value of the select. + +##### id + +`string` + +The id of the select element. + +##### Returns + +`void` + +#### value? + +> `optional` **value**: `string` + +The value of the select. + +#### placeholder? + +> `optional` **placeholder**: `string` + +The placeholder text to display in the select. + +#### search? + +> `optional` **search**: `boolean` + +Whether the select should allow searching through the options. + +##### Default Value + +`false` + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### id? + +> `optional` **id**: `string` + +The ID of the element. + +##### Remarks + +If not provided, the element will be assigned a random ID, but it is recommended to provide it +to perform further updates on the element. + +If provided, it must be unique within the UI. + +##### Default Value + +`undefined` + +#### label? + +> `optional` **label**: `string` + +Label text to display above the element and used for screen readers. + +## UISelectElementUpdate + +The parameters for updating a select element. + +See [UISelectElement](client.md#uiselectelement) for more details. + +### Remarks + +`id` and `type` are required to identify the element to update. + +### Properties + +#### type + +> **type**: `"Select"` + +#### id + +> **id**: `string` + +The ID of the element. + +#### value? + +> `optional` **value**: `string` + +The value of the select. + +#### placeholder? + +> `optional` **placeholder**: `string` + +The placeholder text to display in the select. + +#### search? + +> `optional` **search**: `boolean` + +Whether the select should allow searching through the options. + +##### Default Value + +`false` + +#### options? + +> `optional` **options**: [`UIControlElementOption`](client.md#uicontrolelementoption)\[] + +The options to display in the select. + +#### onChange()? + +> `optional` **onChange**: (`args`) => `void` + +The function to call when the value of the select changes. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### value + +`string` + +The value of the select. + +##### id + +`string` + +The id of the select element. + +##### Returns + +`void` + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### label? + +> `optional` **label**: `string` + +Label text to display above the element and used for screen readers. + +## UITextElement + +Represents a text element in a panel. +Markdown is supported. + +### Examples + +### simple + +```typescript +{ + type: "Text", + content: "Hello, world!", +} +``` + +### with links + +```typescript +{ + type: "Text", + content: "Fill the form https://www.google.com.", +} +``` + +### markdown + +```typescript +{ + type: "Text", + content: "**Hello**, _world_!", +} +``` + +### complex markdown + +Complex markdown syntax is supported like tables, images, quotes, etc. + +```typescript +{ + type: "Text", + content: ` + +# Heading + +This is a paragraph. + +## Subheading + +This is a paragraph. + +| Name | Age | +| ---- | --- | +| John | 25 | +| Jane | 30 | + +![Image](https://via.placeholder.com/150) + +> This is a quote. + +[Link](https://www.google.com) +`, +} +``` + +### Properties + +#### type + +> **type**: `"Text"` + +#### content + +> **content**: `string` + +The text to display in the element. + +#### id + +> **id**: `string` + +The ID of the element. + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +## UITextElementCreate + +The parameters for creating a text element. + +See [UITextElement](client.md#uitextelement) for more details. + +### Remarks + +`id` is optional but recommended if you want to be able to perform updates. + +### Properties + +#### type + +> **type**: `"Text"` + +#### content + +> **content**: `string` + +The text to display in the element. + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### id? + +> `optional` **id**: `string` + +The ID of the element. + +##### Remarks + +If not provided, the element will be assigned a random ID, but it is recommended to provide it +to perform further updates on the element. + +If provided, it must be unique within the UI. + +##### Default Value + +`undefined` + +## UITextElementUpdate + +The parameters for updating a text element. + +See [UITextElement](client.md#uitextelement) for more details. + +### Remarks + +`id` and `type` are required to identify the element to update. + +### Properties + +#### type + +> **type**: `"Text"` + +#### id + +> **id**: `string` + +The ID of the element. + +#### content? + +> `optional` **content**: `string` + +The text to display in the element. + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +## UITextInputElement + +Represents a text input element in a panel. + +### Remarks + +`value` property is required, for empty value use `""`. +`label` property is displayed above the input and used for screen readers. + +### Examples + +### empty input + +```typescript +{ + type: "TextInput", + value: "", + onChange: (args) => console.log(args.value), + placeholder: "Enter your name", +} +``` + +### with label + +```typescript +{ + type: "TextInput", + label: "Name", + value: "Hello", + onChange: (args) => console.log(args.value), + placeholder: "Enter your name", +} +``` + +### Properties + +#### type + +> **type**: `"TextInput"` + +#### value + +> **value**: `string` + +The value of the input. Use `""` for empty values. + +#### id + +> **id**: `string` + +The ID of the element. + +#### placeholder? + +> `optional` **placeholder**: `string` + +The placeholder text to display in the input. + +#### onChange()? + +> `optional` **onChange**: (`args`) => `void` + +The function to call when the value of the input changes. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### value + +`string` + +The value of the input. + +##### id + +`string` + +The id of the input element. + +##### Returns + +`void` + +#### onBlur()? + +> `optional` **onBlur**: (`args`) => `void` + +The function to call when the input is blurred. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### value + +`string` + +The value of the input. + +##### id + +`string` + +The id of the input element. + +##### Returns + +`void` + +#### onFocus()? + +> `optional` **onFocus**: (`args`) => `void` + +The function to call when the input is focused. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### value + +`string` + +The value of the input. + +##### id + +`string` + +The id of the input element. + +##### Returns + +`void` + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### label? + +> `optional` **label**: `string` + +Label text to display above the element and used for screen readers. + +## UITextInputElementCreate + +The parameters for creating a text input element. + +See [UITextInputElement](client.md#uitextinputelement) for more details. + +### Remarks + +`id` is optional but recommended if you want to be able to perform updates. + +### Properties + +#### type + +> **type**: `"TextInput"` + +#### value + +> **value**: `string` + +The value of the input. Use `""` for empty values. + +#### placeholder? + +> `optional` **placeholder**: `string` + +The placeholder text to display in the input. + +#### onChange()? + +> `optional` **onChange**: (`args`) => `void` + +The function to call when the value of the input changes. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### value + +`string` + +The value of the input. + +##### id + +`string` + +The id of the input element. + +##### Returns + +`void` + +#### onBlur()? + +> `optional` **onBlur**: (`args`) => `void` + +The function to call when the input is blurred. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### value + +`string` + +The value of the input. + +##### id + +`string` + +The id of the input element. + +##### Returns + +`void` + +#### onFocus()? + +> `optional` **onFocus**: (`args`) => `void` + +The function to call when the input is focused. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### value + +`string` + +The value of the input. + +##### id + +`string` + +The id of the input element. + +##### Returns + +`void` + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### id? + +> `optional` **id**: `string` + +The ID of the element. + +##### Remarks + +If not provided, the element will be assigned a random ID, but it is recommended to provide it +to perform further updates on the element. + +If provided, it must be unique within the UI. + +##### Default Value + +`undefined` + +#### label? + +> `optional` **label**: `string` + +Label text to display above the element and used for screen readers. + +## UITextInputElementUpdate + +The parameters for updating a text input element. + +See [UITextInputElement](client.md#uitextinputelement) for more details. + +### Remarks + +`id` and `type` are required to identify the element to update. + +### Properties + +#### type + +> **type**: `"TextInput"` + +#### id + +> **id**: `string` + +The ID of the element. + +#### value? + +> `optional` **value**: `string` + +The value of the input. Use `""` for empty values. + +#### placeholder? + +> `optional` **placeholder**: `string` + +The placeholder text to display in the input. + +#### onChange()? + +> `optional` **onChange**: (`args`) => `void` + +The function to call when the value of the input changes. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### value + +`string` + +The value of the input. + +##### id + +`string` + +The id of the input element. + +##### Returns + +`void` + +#### onBlur()? + +> `optional` **onBlur**: (`args`) => `void` + +The function to call when the input is blurred. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### value + +`string` + +The value of the input. + +##### id + +`string` + +The id of the input element. + +##### Returns + +`void` + +#### onFocus()? + +> `optional` **onFocus**: (`args`) => `void` + +The function to call when the input is focused. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### value + +`string` + +The value of the input. + +##### id + +`string` + +The id of the input element. + +##### Returns + +`void` + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### label? + +> `optional` **label**: `string` + +Label text to display above the element and used for screen readers. + +## UIToggleGroupElement + +The parameters for creating a toggle group element. + +## Options + +The options to display in the toggle group are defined using the `options` property. +It can contain one or more options and each option renders a toggle. + +
+ Toggle group basic + +
+ A group with a single option +
+
+ +```typescript +{ + type: "ToggleGroup", + options: [{ label: "Option A", value: "optionA" }], + value: [], + onChange: ({ value, id }) => { } +} +``` + +## Alignment + +By default, the toggles are aligned to the start of the group, +but it can be changed to `end` by setting the `alignment` property to `end`. + +
+ Toggle group end alignment + +
+ The toggles are aligned to the end +
+
+ +```typescript +{ + type: "ToggleGroup", + alignment: "end", + label: "All options", + options: [ + { label: "Option A", value: "optionA" }, + { label: "Option B", value: "optionB" }, + ], + value: ["optionA"], + onChange: ({ value, id }) => { } +} +``` + +## Label + +As a control, the toggle group can have a label displayed above the toggles. + +Toggle group with label + +```typescript +{ + type: "ToggleGroup", + label: "All options", + options: [ + { label: "Option A", value: "optionA" }, + { label: "Option B", value: "optionB" }, + ], + value: ["optionA"], + onChange: ({ value, id }) => { } +} +``` + +### Properties + +#### type + +> **type**: `"ToggleGroup"` + +#### value + +> **value**: `string`\[] = `valueSchema` + +The value of the toggle group. + +##### Default Value + +`[]` + +#### options + +> **options**: [`UIControlElementOption`](client.md#uicontrolelementoption)\[] + +The options to display in the toggle group. + +#### onChange() + +> **onChange**: (`args`) => `void` + +The function to call when the value of the toggle group changes. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### value + +`string`\[] + +Array of the selected values. + +##### id + +`string` + +The id of the toggle group element. + +##### Returns + +`void` + +#### id + +> **id**: `string` + +The ID of the element. + +#### alignment? + +> `optional` **alignment**: `"start"` | `"end"` + +The alignment of the toggle group. + +##### Default Value + +`"start"` + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### label? + +> `optional` **label**: `string` + +Label text to display above the element and used for screen readers. + +## UIToggleGroupElementCreate + +The parameters for creating a toggle group element. + +See [UIToggleGroupElement](client.md#uitogglegroupelement) for more details. + +### Properties + +#### type + +> **type**: `"ToggleGroup"` + +#### value + +> **value**: `string`\[] = `valueSchema` + +The value of the toggle group. + +##### Default Value + +`[]` + +#### options + +> **options**: [`UIControlElementOption`](client.md#uicontrolelementoption)\[] + +The options to display in the toggle group. + +#### onChange() + +> **onChange**: (`args`) => `void` + +The function to call when the value of the toggle group changes. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### value + +`string`\[] + +Array of the selected values. + +##### id + +`string` + +The id of the toggle group element. + +##### Returns + +`void` + +#### alignment? + +> `optional` **alignment**: `"start"` | `"end"` + +The alignment of the toggle group. + +##### Default Value + +`"start"` + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### id? + +> `optional` **id**: `string` + +The ID of the element. + +##### Remarks + +If not provided, the element will be assigned a random ID, but it is recommended to provide it +to perform further updates on the element. + +If provided, it must be unique within the UI. + +##### Default Value + +`undefined` + +#### label? + +> `optional` **label**: `string` + +Label text to display above the element and used for screen readers. + +## UIToggleGroupElementUpdate + +The parameters for updating a toggle group element. + +See [UIToggleGroupElement](client.md#uitogglegroupelement) for more details. + +### Properties + +#### type + +> **type**: `"ToggleGroup"` + +#### id + +> **id**: `string` + +The ID of the element. + +#### alignment? + +> `optional` **alignment**: `"start"` | `"end"` + +The alignment of the toggle group. + +##### Default Value + +`"start"` + +#### value? + +> `optional` **value**: `string`\[] = `valueSchema` + +The value of the toggle group. + +##### Default Value + +`[]` + +#### options? + +> `optional` **options**: [`UIControlElementOption`](client.md#uicontrolelementoption)\[] + +The options to display in the toggle group. + +#### onChange()? + +> `optional` **onChange**: (`args`) => `void` + +The function to call when the value of the toggle group changes. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### value + +`string`\[] + +Array of the selected values. + +##### id + +`string` + +The id of the toggle group element. + +##### Returns + +`void` + +#### onCreate()? + +> `optional` **onCreate**: (`args`) => `void` + +A function to call when the element is created. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### onDestroy()? + +> `optional` **onDestroy**: (`args`) => `void` + +A function to call when the element is destroyed. + +##### Parameters + +##### args + +The arguments passed to the function. + +##### id + +`string` + +The id of the element. + +##### Returns + +`void` + +#### label? + +> `optional` **label**: `string` + +Label text to display above the element and used for screen readers. + +## UIControlElementOption + +An option to display in a control element. + +Control elements are elements that allow the user to select one or more values from a list of options. +This includes: + +* [UIRadioGroupElement](client.md#uiradiogroupelement) +* [UICheckboxGroupElement](client.md#uicheckboxgroupelement) +* [UIToggleGroupElement](client.md#uitogglegroupelement) +* [UISelectElement](client.md#uiselectelement) + +The option can be disabled by setting the `disabled` property to `true`. + +### Examples + +```typescript +{ label: "Option A", value: "optionA" } +``` + +A disabled option + +```typescript +{ label: "Option A", value: "optionA", disabled: true } +``` + +### Properties + +#### label + +> **label**: `string` + +#### value + +> **value**: `string` + +#### disabled? + +> `optional` **disabled**: `boolean` + +## ViewportCenterZoom + +The input type for setting the viewport to a particular center and zoom. + +### Properties + +#### center + +> **center**: [`LatLng`](client.md#latlng) + +The center of the viewport in latitude and longitude. + +#### zoom + +> **zoom**: `number` + +The zoom level of the viewport. + +## ViewportState + +The current state of the viewport, including the derived bounds. + +### Properties + +#### center + +> **center**: [`LatLng`](client.md#latlng) + +The center of the viewport in latitude and longitude. + +[LatLng](client.md#latlng) + +#### zoom + +> **zoom**: `number` + +The zoom level of the viewport. + +[FeltZoom](client.md#feltzoom) + +#### bounds + +> **bounds**: \[`number`, `number`, `number`, `number`] + +The bounding box of the viewport in \[west, south, east, north] order. + +This is derived, and depends on the center and zoom of the viewport, as +well as its size. + +[FeltBoundary](client.md#feltboundary) + +## SetViewportCenterZoomParams + +The parameters for the ViewportController.setViewport | \`setViewport\` method. + +### Properties + +#### center? + +> `optional` **center**: `object` + +##### latitude + +> **latitude**: `number` = `Latitude` + +##### longitude + +> **longitude**: `number` = `Longitude` + +#### zoom? + +> `optional` **zoom**: `number` + +## ViewportConstraints + +The constraints for the viewport. Used to ensure that the viewport stays +within certain bounds and zoom levels. + +### Properties + +#### minZoom + +> **minZoom**: `null` | `number` + +The minimum zoom level for the viewport. + +[FeltZoom](client.md#feltzoom) + +#### maxZoom + +> **maxZoom**: `null` | `number` + +The maximum zoom level for the viewport. + +[FeltZoom](client.md#feltzoom) + +#### bounds + +> **bounds**: `null` | \[`number`, `number`, `number`, `number`] + +The bounds for the viewport. + +[FeltBoundary](client.md#feltboundary) + +## ViewportFitBoundsParams + +The parameters for the ViewportController.fitViewportToBounds | \`fitViewportToBounds\` method. + +### Properties + +#### bounds + +> **bounds**: \[`number`, `number`, `number`, `number`] + +The bounds to fit the viewport to. + +[FeltBoundary](client.md#feltboundary) + +## ElementCreate + +> **ElementCreate**: [`PlaceElementCreate`](client.md#placeelementcreate) | [`PathElementCreate`](client.md#pathelementcreate) | [`PolygonElementCreate`](client.md#polygonelementcreate) | [`CircleElementCreate`](client.md#circleelementcreate) | [`MarkerElementCreate`](client.md#markerelementcreate) | [`HighlighterElementCreate`](client.md#highlighterelementcreate) | [`ImageElementCreate`](client.md#imageelementcreate) | [`TextElementCreate`](client.md#textelementcreate) | [`NoteElementCreate`](client.md#noteelementcreate) + +## ElementUpdate + +> **ElementUpdate**: [`PlaceElementUpdate`](client.md#placeelementupdate) | [`PathElementUpdate`](client.md#pathelementupdate) | [`PolygonElementUpdate`](client.md#polygonelementupdate) | [`CircleElementUpdate`](client.md#circleelementupdate) | [`MarkerElementUpdate`](client.md#markerelementupdate) | [`HighlighterElementUpdate`](client.md#highlighterelementupdate) | [`TextElementUpdate`](client.md#textelementupdate) | [`NoteElementUpdate`](client.md#noteelementupdate) | [`ImageElementUpdate`](client.md#imageelementupdate) + +## Element + +> **Element**: [`PlaceElementRead`](client.md#placeelementread) | [`PathElementRead`](client.md#pathelementread) | [`PolygonElementRead`](client.md#polygonelementread) | [`CircleElementRead`](client.md#circleelementread) | [`MarkerElementRead`](client.md#markerelementread) | [`HighlighterElementRead`](client.md#highlighterelementread) | [`TextElementRead`](client.md#textelementread) | [`NoteElementRead`](client.md#noteelementread) | [`ImageElementRead`](client.md#imageelementread) | [`LinkElementRead`](client.md#linkelementread) + +## FilterLogicGate + +> **FilterLogicGate**: `"and"` | `"or"` + +## FilterExpression + +> **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`] + +## FilterTernary + +> **FilterTernary**: \[[`FilterTernary`](client.md#filterternary) | [`FilterExpression`](client.md#filterexpression) | `null` | `boolean`, [`FilterLogicGate`](client.md#filterlogicgate), [`FilterTernary`](client.md#filterternary) | [`FilterExpression`](client.md#filterexpression) | `null` | `boolean`] + +A `FilterTernary` is a tree structure for combining expressions with logical operators. + +When combining three or more conditions, you must use proper nesting rather than a flat list. + +### Example + +```typescript +// A simple filter with a single condition +const filter = [ + ["AREA", "gt", 30_000], + "and", + ["COLOR", "eq", "red"] +] + +// A complex filter with multiple conditions +const filter = [ + ["AREA", "gt", 30_000], + "and", + [ + ["COLOR", "eq", "red"], + "or", + ["TYPE", "eq", "residential"] + ] +] +``` + +## Filters + +> **Filters**: [`FilterTernary`](client.md#filterternary) | [`FilterExpression`](client.md#filterexpression) | `null` | `boolean` + +Filters can be used to change which features in a layer are rendered. Filters can be +applied to a layer by the LayersController.setLayerFilters | setLayerFilters method on the Felt controller. + +Filters use a tree structure for combining expressions with logical operators, called a [FilterTernary](client.md#filterternary). +When combining three or more conditions, you must use proper nesting rather than a flat list. + +See the examples below for the correct structure to use when building complex filters. + +### 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 +* `is`: Is +* `isnt`: Is not +* `in`: In +* `ni`: Not in + +The allowed boolean operators are: + +* `and`: Logical AND +* `or`: Logical OR + +### Example + +```typescript +// 1. Simple filter: single condition +felt.setLayerFilters({ + layerId: "layer-1", + filters: ["AREA", "gt", 30_000], +}); + +// 2. Basic compound filter: two conditions with AND +felt.setLayerFilters({ + layerId: "layer-1", + filters: [ + ["AREA", "gt", 30_000], // First condition + "and", // Logic operator + ["COLOR", "eq", "red"] // Second condition + ] +}); + +// 3. Complex filter: three or more conditions require nesting +// ⚠️ IMPORTANT: Filters use a tree structure, not a flat list +felt.setLayerFilters({ + layerId: "layer-1", + filters: [ + ["AREA", "gt", 30_000], // First condition + "and", // First logic operator + [ // Nested group starts + ["COLOR", "eq", "red"], // Second condition + "and", // Second logic operator + ["TYPE", "eq", "residential"] // Third condition + ] // Nested group ends + ] +}); + +// 4. Even more complex: four conditions with proper nesting +// Visual structure: +// AND +// / \ +// condition AND +// / \ +// condition AND +// / \ +// condition condition +felt.setLayerFilters({ + layerId: "layer-1", + filters: [ + ["AREA", "gt", 30_000], // First condition + "and", + [ + ["COLOR", "eq", "red"], // Second condition + "and", + [ + ["TYPE", "eq", "residential"], // Third condition + "and", + ["YEAR", "gt", 2000] // Fourth condition + ] + ] + ] +}); + +// 5. Mixed operators: combining AND and OR +// Visual structure: +// AND +// / \ +// condition OR +// / \ +// condition condition +felt.setLayerFilters({ + layerId: "layer-1", + filters: [ + ["AREA", "gt", 30_000], // Must have large area + "and", + [ + ["COLOR", "eq", "red"], // Must be either red + "or", + ["TYPE", "eq", "residential"] // OR residential type + ] + ] +}); +``` + +## GeometryFilter + +> **GeometryFilter**: [`FeltBoundary`](client.md#feltboundary) | [`PolygonGeometry`](client.md#polygongeometry) | [`MultiPolygonGeometry`](client.md#multipolygongeometry) | [`LngLatTuple`](client.md#lnglattuple)\[] + +The common type for filtering data by a spatial boundary. + +This can be either: + +* `FeltBoundary`: a \[w, s, e, n] bounding box +* `PolygonGeometry`: a GeoJSON Polygon geometry +* `MultiPolygonGeometry`: a GeoJSON MultiPolygon geometry +* `LngLatTuple[]`: a list of coordinates describing a single ring of a polygon + +## AggregationMethod + +> **AggregationMethod**: `"avg"` | `"max"` | `"min"` | `"sum"` | `"median"` + +The method to use for the aggregation. + +## PrecomputedAggregationMethod + +> **PrecomputedAggregationMethod**: `"avg"` | `"max"` | `"min"` | `"sum"` | `"count"` + +The method to use for the precomputed aggregation. + +## GridType + +> **GridType**: `"h3"` + +The type of grid to use for precomputed aggregate values. + +## GridConfig + +> **GridConfig**: [`CountGridConfig`](client.md#countgridconfig) | [`AggregatedGridConfig`](client.md#aggregatedgridconfig) + +Describes the type of grid to use for precomputed aggregate values. + +## LayerProcessingStatus + +> **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. + +## Layer + +> **Layer**: [`RasterLayer`](client.md#rasterlayer) | [`VectorLayer`](client.md#vectorlayer) | [`DataOnlyLayer`](client.md#dataonlylayer) + +## FeltTiledVectorSource + +> **FeltTiledVectorSource**: `object` + +A tiled vector source is a layer that is populated from data the has been uploaded +to Felt, and processed into vector tiles. + +### Type declaration + +#### type + +> **type**: `"felt"` + +Identifies this as a tiled vector source. Typically, these tiles will have been +uploaded to and processed by Felt. + +#### tileTemplateUrl + +> **tileTemplateUrl**: `string` + +The template URL used for fetching tiles. + +## LegendDisplay + +> **LegendDisplay**: `"default"` | `"nameOnly"` + +Describes how the layer is displayed in the legend. + +There are two display modes: + +1. Default: + * Shows layer name and caption + * Shows representation of the layer's viz (e.g. color swatches, proportional symbols) + +
+ Default layer legend + +
Default layer legend
+
+ +2. Name-only (compact display): + * Shows only layer name and caption + * Hides representation of the layer's viz + +
+ Name-only layer legend + +
Name-only layer legend
+
+ +## LayerSchemaAttribute + +> **LayerSchemaAttribute**: [`LayerSchemaNumericAttribute`](client.md#layerschemanumericattribute) | [`LayerSchemaTextAttribute`](client.md#layerschematextattribute) | [`LayerSchemaBooleanAttribute`](client.md#layerschemabooleanattribute) | [`LayerSchemaDateAttribute`](client.md#layerschemadateattribute) | [`LayerSchemaDateTimeAttribute`](client.md#layerschemadatetimeattribute) + +A single attribute from the layer schema. + +### Remarks + +Each feature in a layer has a set of attributes, and these types describe the +structure of a single attribute, including things like id, display name, type, and sample values. + +## MapDetails + +> **MapDetails**: `object` + +The details of a map. + +### Type declaration + +#### id + +> **id**: `string` + +The id of the map. + +#### title + +> **title**: `string` + +The title of the map. + +#### description + +> **description**: `string` | `null` + +The description of the map. + +## EntityNode + +> **EntityNode**: [`ElementNode`](client.md#elementnode) | [`ElementGroupNode`](client.md#elementgroupnode) | [`LayerNode`](client.md#layernode) | [`LayerGroupNode`](client.md#layergroupnode) | [`FeatureNode`](client.md#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 + +## LngLatTuple + +> **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. + +## GeoJsonProperties + +> **GeoJsonProperties**: `Record`\<`string`, `unknown`> + +A GeoJSON properties object. + +## GeoJsonGeometry + +> **GeoJsonGeometry**: [`PointGeometry`](client.md#pointgeometry) | [`PolygonGeometry`](client.md#polygongeometry) | [`LineStringGeometry`](client.md#linestringgeometry) | [`MultiLineStringGeometry`](client.md#multilinestringgeometry) | [`MultiPolygonGeometry`](client.md#multipolygongeometry) | [`MultiPointGeometry`](client.md#multipointgeometry) + +A GeoJSON geometry of any type + +## FeltZoom + +> **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. + +## FeltBoundary + +> **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]`. + +## SortDirection + +> **SortDirection**: `"asc"` | `"desc"` + +Specifies the direction to sort data in + +## ToolType + +> **ToolType**: `"circle"` | `"highlighter"` | `"line"` | `"link"` | `"marker"` | `"note"` | `"pin"` | `"polygon"` | `"route"` | `"text"` + +## ConfigurableToolType + +> **ConfigurableToolType**: `Exclude`\<[`ToolType`](client.md#tooltype), `"link"`> + +## InputToolSettings + +> **InputToolSettings**: `object` & `Partial`\<[`PinToolSettings`](client.md#pintoolsettings)> | `object` & `Partial`\<[`LineToolSettings`](client.md#linetoolsettings)> | `object` & `Partial`\<[`RouteToolSettings`](client.md#routetoolsettings)> | `object` & `Partial`\<[`PolygonToolSettings`](client.md#polygontoolsettings)> | `object` & `Partial`\<[`CircleToolSettings`](client.md#circletoolsettings)> | `object` & `Partial`\<[`MarkerToolSettings`](client.md#markertoolsettings)> | `object` & `Partial`\<[`HighlighterToolSettings`](client.md#highlightertoolsettings)> | `object` & `Partial`\<[`TextToolSettings`](client.md#texttoolsettings)> | `object` & `Partial`\<[`NoteToolSettings`](client.md#notetoolsettings)> + +The parameters for changing the settings of each tool. + +## ToolSettingsChangeEvent + +> **ToolSettingsChangeEvent**: `object` & [`PinToolSettings`](client.md#pintoolsettings) | `object` & [`LineToolSettings`](client.md#linetoolsettings) | `object` & [`RouteToolSettings`](client.md#routetoolsettings) | `object` & [`PolygonToolSettings`](client.md#polygontoolsettings) | `object` & [`CircleToolSettings`](client.md#circletoolsettings) | `object` & [`MarkerToolSettings`](client.md#markertoolsettings) | `object` & [`HighlighterToolSettings`](client.md#highlightertoolsettings) | `object` & [`TextToolSettings`](client.md#texttoolsettings) | `object` & [`NoteToolSettings`](client.md#notetoolsettings) + +The result of listening for changes to the settings of each tool. + +## ToolSettingsMap + +> **ToolSettingsMap**: `object` + +### Type declaration + +#### pin + +> **pin**: [`PinToolSettings`](client.md#pintoolsettings) + +#### line + +> **line**: [`LineToolSettings`](client.md#linetoolsettings) + +#### route + +> **route**: [`RouteToolSettings`](client.md#routetoolsettings) + +#### polygon + +> **polygon**: [`PolygonToolSettings`](client.md#polygontoolsettings) + +#### circle + +> **circle**: [`CircleToolSettings`](client.md#circletoolsettings) + +#### marker + +> **marker**: [`MarkerToolSettings`](client.md#markertoolsettings) + +#### highlighter + +> **highlighter**: [`HighlighterToolSettings`](client.md#highlightertoolsettings) + +#### text + +> **text**: [`TextToolSettings`](client.md#texttoolsettings) + +#### note + +> **note**: [`NoteToolSettings`](client.md#notetoolsettings) + +## PlaceFrame + +> **PlaceFrame**: `"frame-circle"` | `"frame-square"` | `null` + +## PlaceSymbol + +> **PlaceSymbol**: `"dot"` | `"square"` | `"diamond"` | `"triangle"` | `"x"` | `"plus"` | `"circle-line"` | `"circle-slash"` | `"star"` | `"heart"` | `"hexagon"` | `"octagon"` | `"pedestrian"` | `"bicycle"` | `"wheelchair"` | `"airport"` | `"car"` | `"bus"` | `"train"` | `"truck"` | `"ferry"` | `"sailboat"` | `"electric-service"` | `"gas-service"` | `"blood-clinic"` | `"badge"` | `"traffic-light"` | `"traffic-cone"` | `"road-sign-caution"` | `"person"` | `"restroom"` | `"house"` | `"work"` | `"letter"` | `"hotel"` | `"factory"` | `"hospital"` | `"religious-facility"` | `"school"` | `"government"` | `"university"` | `"bank"` | `"landmark"` | `"museum"` | `"clothing"` | `"shopping"` | `"store"` | `"bar"` | `"pub"` | `"cafe"` | `"food"` | `"park"` | `"amusement-park"` | `"camping-tent"` | `"cabin"` | `"picnic"` | `"water-refill"` | `"trailhead"` | `"guidepost"` | `"viewpoint"` | `"camera"` | `"us-football"` | `"football"` | `"tennis"` | `"binoculars"` | `"swimming"` | `"zap"` | `"battery-full"` | `"battery-half"` | `"battery-low"` | `"boom"` | `"radar"` | `"wind-turbine"` | `"solar-panel"` | `"antenna"` | `"telephone-pole"` | `"oil-well"` | `"oil-barrel"` | `"railroad-track"` | `"bridge"` | `"lighthouse"` | `"lock-closed"` | `"lock-open"` | `"wifi"` | `"trash"` | `"recycle"` | `"tree"` | `"flower"` | `"leaf"` | `"fire"` | `"mountain"` | `"snowy-mountain"` | `"volcano"` | `"island"` | `"wave"` | `"hot-springs"` | `"water"` | `"lake"` | `"ocean"` | `"animal"` | `"bird"` | `"duck"` | `"dog"` | `"fish"` | `"beach"` | `"wetland"` | `"sun"` | `"moon"` | `"cloud"` | `"partial-sun"` | `"rain"` | `"lightning"` | `"snowflake"` | `"wind"` | `"snow"` | `"fog"` | `"sleet"` | `"hurricane"` | `"warning"` | `"parking"` | `"info"` | `"circle-exclamation"` | `"circle-triangle"` | `"circle-x"` | `"circle-plus"` | `` `:${string}:` `` & `object` + +## uiFeatureAction + +> **uiFeatureAction**: `object` + +Represents a feature action after creation (with generated id). + +### Type declaration + +#### id + +> **id**: `string` + +#### label + +> **label**: `string` + +#### onTrigger() + +> **onTrigger**: (`args`) => `void` + +##### Parameters + +##### args + +##### feature + +[`LayerFeature`](client.md#layerfeature) + +##### Returns + +`void` + +#### layerIds? + +> `optional` **layerIds**: `string`\[] + +#### geometryTypes? + +> `optional` **geometryTypes**: (`"Polygon"` | `"Point"` | `"Line"` | `"Raster"`)\[] + +## PlacementForUIElement + +> **PlacementForUIElement**: \{ `after`: `string`; } | \{ `before`: `string`; } | \{ `at`: `"start"` | `"end"`; } + +Used in [UiController.createOrUpdatePanel](client.md#createorupdatepanel) to specify the position of a panel in the stack +and in [UiController.createPanelElements](client.md#createpanelelements) to specify the position of an element in a panel. + +In both cases, the default value is `{ at: "end" }`. + +## UIPanelElement + +> **UIPanelElement**: [`UIButtonElement`](client.md#uibuttonelement) | [`UITextElement`](client.md#uitextelement) | [`UIDividerElement`](client.md#uidividerelement) | [`UITextInputElement`](client.md#uitextinputelement) | [`UISelectElement`](client.md#uiselectelement) | [`UIFlexibleSpaceElement`](client.md#uiflexiblespaceelement) | [`UIButtonRowElement`](client.md#uibuttonrowelement) | [`UICheckboxGroupElement`](client.md#uicheckboxgroupelement) | [`UIRadioGroupElement`](client.md#uiradiogroupelement) | [`UIToggleGroupElement`](client.md#uitogglegroupelement) | [`UIIframeElement`](client.md#uiiframeelement) | [`UIGridContainerElement`](client.md#uigridcontainerelement) + +## UIPanelElementCreate + +> **UIPanelElementCreate**: [`UIButtonElementCreate`](client.md#uibuttonelementcreate) | [`UITextElementCreate`](client.md#uitextelementcreate) | [`UIDividerElementCreate`](client.md#uidividerelementcreate) | [`UITextInputElementCreate`](client.md#uitextinputelementcreate) | [`UISelectElementCreate`](client.md#uiselectelementcreate) | [`UIFlexibleSpaceElementCreate`](client.md#uiflexiblespaceelementcreate) | [`UIButtonRowElementCreate`](client.md#uibuttonrowelementcreate) | [`UICheckboxGroupElementCreate`](client.md#uicheckboxgroupelementcreate) | [`UIRadioGroupElementCreate`](client.md#uiradiogroupelementcreate) | [`UIToggleGroupElementCreate`](client.md#uitogglegroupelementcreate) | [`UIIframeElementCreate`](client.md#uiiframeelementcreate) | [`UIGridContainerElementCreate`](client.md#uigridcontainerelementcreate) + +This is a union of all the possible elements that can be created inside panel's body or footer. + +### Remarks + +For the sake of convenience, `id` is optional but recommended if you want to be able to perform updates. + +## UIPanelElementUpdate + +> **UIPanelElementUpdate**: [`UIButtonElementUpdate`](client.md#uibuttonelementupdate) | [`UITextElementUpdate`](client.md#uitextelementupdate) | [`UITextInputElementUpdate`](client.md#uitextinputelementupdate) | [`UISelectElementUpdate`](client.md#uiselectelementupdate) | [`UIDividerElementUpdate`](client.md#uidividerelementupdate) | [`UIButtonRowElementUpdate`](client.md#uibuttonrowelementupdate) | [`UICheckboxGroupElementUpdate`](client.md#uicheckboxgroupelementupdate) | [`UIRadioGroupElementUpdate`](client.md#uiradiogroupelementupdate) | [`UIToggleGroupElementUpdate`](client.md#uitogglegroupelementupdate) | [`UIGridContainerElementUpdate`](client.md#uigridcontainerelementupdate) | [`UIFlexibleSpaceElementUpdate`](client.md#uiflexiblespaceelementupdate) | [`UIIframeElementUpdate`](client.md#uiiframeelementupdate) + +This is a union of all the possible elements that can be updated inside panel's body or footer (excluding Divider and FlexibleSpace elements because they cannot be updated). + +### Remarks + +`id` and `type` are required to identify the element to update. + +## Felt + +> `const` **Felt**: `object` + +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, returning a promise that resolves +to a [FeltController](client.md#feltcontroller) object that you can use to control the map. + +##### Parameters + +##### container + +`HTMLElement` + +The container element to embed the map into. + +##### mapId + +`string` + +The ID of the map to embed. + +##### options? + +[`FeltEmbedOptions`](client.md#feltembedoptions) + +The options to configure the map. + +##### Returns + +`Promise`\<[`FeltController`](client.md#feltcontroller)> + +A promise for a [FeltController](client.md#feltcontroller). + +#### connect() + +Binds to an existing Felt map iframe. + +##### Parameters + +##### feltWindow + +`Pick`\<`Window`, `"postMessage"`> + +The iframe element containing the Felt map. + +##### Returns + +`Promise`\<[`FeltController`](client.md#feltcontroller)> + +# Visibility + +## SetVisibilityRequest + +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`\[] diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index b53d1f51..43c682d5 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -1,5 +1,23 @@ # @feltmaps/js-sdk +## 1.10.0-next.1 + +### Minor Changes + +* 34b9ed3: Add feature actions + +## 1.10.0-next.0 + +### Minor Changes + +* 3d9527b: Add duplicateLayer method + +## 1.9.0 + +### Minor Changes + +* 7e4034f: Add support for legendDisplay on the layer + ## 1.8.0 ### Minor Changes diff --git a/docs/Layers/DataOnlyLayer.md b/docs/Layers/DataOnlyLayer.md index c03ae315..ee7509de 100644 --- a/docs/Layers/DataOnlyLayer.md +++ b/docs/Layers/DataOnlyLayer.md @@ -64,6 +64,16 @@ Whether the layer is shown in the legend or not. *** +## legendDisplay + +> **legendDisplay**: `"default"` | `"nameOnly"` + +The display mode for the layer's legend. + +See [LegendDisplay](LegendDisplay.md) for more details. + +*** + ## style > **style**: `object` diff --git a/docs/Layers/LayerCommon.md b/docs/Layers/LayerCommon.md index 10d59745..dbd2cee5 100644 --- a/docs/Layers/LayerCommon.md +++ b/docs/Layers/LayerCommon.md @@ -64,6 +64,16 @@ Whether the layer is shown in the legend or not. *** +## legendDisplay + +> **legendDisplay**: `"default"` | `"nameOnly"` + +The display mode for the layer's legend. + +See [LegendDisplay](LegendDisplay.md) for more details. + +*** + ## style > **style**: `object` diff --git a/docs/Layers/LayersController.md b/docs/Layers/LayersController.md index 220362da..15410372 100644 --- a/docs/Layers/LayersController.md +++ b/docs/Layers/LayersController.md @@ -268,6 +268,36 @@ await felt.deleteLayer("layer-1"); *** +## duplicateLayer() + +> **duplicateLayer**(`id`: `string`): `Promise`\<[`Layer`](Layer.md)> + +Duplicate a layer from the map by its id. + +### Parameters + +| Parameter | Type | +| --------- | -------- | +| `id` | `string` | + +### Returns + +`Promise`\<[`Layer`](Layer.md)> + +The duplicated layer. + +### Remarks + +This will create an ephemeral copy of the layer, just for the duration of the session. The duplicated layer will not be persisted to the map. + +### Example + +```typescript +const duplicatedLayer = await felt.duplicateLayer("layer-1"); +``` + +*** + ## getLayerGroup() > **getLayerGroup**(`id`: `string`): `Promise`\<`null` | [`LayerGroup`](LayerGroup.md)> diff --git a/docs/Layers/LegendDisplay.md b/docs/Layers/LegendDisplay.md new file mode 100644 index 00000000..9a7deef7 --- /dev/null +++ b/docs/Layers/LegendDisplay.md @@ -0,0 +1,27 @@ +*** + +> **LegendDisplay**: `"default"` | `"nameOnly"` + +Describes how the layer is displayed in the legend. + +There are two display modes: + +1. Default: + * Shows layer name and caption + * Shows representation of the layer's viz (e.g. color swatches, proportional symbols) + +
+ Default layer legend + +
Default layer legend
+
+ +2. Name-only (compact display): + * Shows only layer name and caption + * Hides representation of the layer's viz + +
+ Name-only layer legend + +
Name-only layer legend
+
diff --git a/docs/Layers/README.md b/docs/Layers/README.md index d98fe053..dcff327c 100644 --- a/docs/Layers/README.md +++ b/docs/Layers/README.md @@ -79,6 +79,7 @@ independently of the Layer, so you can turn on and off each category or class in * [LegendItemIdentifier](LegendItemIdentifier.md) * [LegendItemsConstraint](LegendItemsConstraint.md) * [LegendItemChangeCallbackParams](LegendItemChangeCallbackParams.md) +* [LegendDisplay](LegendDisplay.md) # Stats diff --git a/docs/Layers/RasterLayer.md b/docs/Layers/RasterLayer.md index 94533a4b..fe5fb2cf 100644 --- a/docs/Layers/RasterLayer.md +++ b/docs/Layers/RasterLayer.md @@ -64,6 +64,16 @@ Whether the layer is shown in the legend or not. *** +## legendDisplay + +> **legendDisplay**: `"default"` | `"nameOnly"` + +The display mode for the layer's legend. + +See [LegendDisplay](LegendDisplay.md) for more details. + +*** + ## style > **style**: `object` diff --git a/docs/Layers/UpdateLayerParams.md b/docs/Layers/UpdateLayerParams.md index 59fc6b1f..281b4e30 100644 --- a/docs/Layers/UpdateLayerParams.md +++ b/docs/Layers/UpdateLayerParams.md @@ -20,6 +20,16 @@ Changes whether the layer is shown in the legend. *** +## legendDisplay? + +> `optional` **legendDisplay**: `"default"` | `"nameOnly"` + +Changes the layer's legend display mode. + +See [LegendDisplay](LegendDisplay.md) for more details. + +*** + ## name? > `optional` **name**: `string` diff --git a/docs/Layers/VectorLayer.md b/docs/Layers/VectorLayer.md index 716958ef..f402dcf2 100644 --- a/docs/Layers/VectorLayer.md +++ b/docs/Layers/VectorLayer.md @@ -64,6 +64,16 @@ Whether the layer is shown in the legend or not. *** +## legendDisplay + +> **legendDisplay**: `"default"` | `"nameOnly"` + +The display mode for the layer's legend. + +See [LegendDisplay](LegendDisplay.md) for more details. + +*** + ## style > **style**: `object` diff --git a/docs/Main/FeltController.md b/docs/Main/FeltController.md index 86e4db19..4b646247 100644 --- a/docs/Main/FeltController.md +++ b/docs/Main/FeltController.md @@ -567,6 +567,36 @@ await felt.deleteLayer("layer-1"); *** +## duplicateLayer() + +> **duplicateLayer**(`id`: `string`): `Promise`\<[`Layer`](../Layers/Layer.md)> + +Duplicate a layer from the map by its id. + +### Parameters + +| Parameter | Type | +| --------- | -------- | +| `id` | `string` | + +### Returns + +`Promise`\<[`Layer`](../Layers/Layer.md)> + +The duplicated layer. + +### Remarks + +This will create an ephemeral copy of the layer, just for the duration of the session. The duplicated layer will not be persisted to the map. + +### Example + +```typescript +const duplicatedLayer = await felt.duplicateLayer("layer-1"); +``` + +*** + ## getLayerGroup() > **getLayerGroup**(`id`: `string`): `Promise`\<`null` | [`LayerGroup`](../Layers/LayerGroup.md)> @@ -1719,6 +1749,96 @@ await felt.deleteActionTrigger("enablePolygonTool"); *** +## createFeatureAction() + +> **createFeatureAction**(`args`: [`CreateFeatureActionParams`](../UI/CreateFeatureActionParams.md)): `Promise`\<[`uiFeatureAction`](../UI/uiFeatureAction.md)> + +Creates a feature contextual action. + +### Parameters + +| Parameter | Type | Description | +| --------- | ----------------------------------------------------------------- | ----------------------------- | +| `args` | [`CreateFeatureActionParams`](../UI/CreateFeatureActionParams.md) | The arguments for the method. | + +### Returns + +`Promise`\<[`uiFeatureAction`](../UI/uiFeatureAction.md)> + +### Example + +```typescript +const myAction = await felt.createFeatureAction({ + action: { + label: "Edit feature", + onTrigger: async ({ featureId, layerId }) => { + console.log(`Editing feature ${featureId} in layer ${layerId}`); + }, + layerIds: ["layer-1", "layer-2"], + }, + placement: { at: "start" }, // optional, defaults to { at: "end" } +}); +``` + +*** + +## updateFeatureAction() + +> **updateFeatureAction**(`args`: [`UpdateFeatureActionParams`](../UI/UpdateFeatureActionParams.md)): `Promise`\<[`uiFeatureAction`](../UI/uiFeatureAction.md)> + +Updates a feature contextual action. + +Feature contextual action to update is identified by the `id` property. + +### Parameters + +| Parameter | Type | Description | +| --------- | ----------------------------------------------------------------- | ---------------------------------------- | +| `args` | [`UpdateFeatureActionParams`](../UI/UpdateFeatureActionParams.md) | The feature contextual action to update. | + +### Returns + +`Promise`\<[`uiFeatureAction`](../UI/uiFeatureAction.md)> + +### Remarks + +Properties provided will override the existing properties. + +### Example + +```typescript +await felt.updateFeatureAction({ + id: "my-action", + label: "Updated action label", // only label changes +}); +``` + +*** + +## deleteFeatureAction() + +> **deleteFeatureAction**(`id`: `string`): `void` + +Deletes a feature contextual action. + +### Parameters + +| Parameter | Type | Description | +| --------- | -------- | -------------------------------------------------- | +| `id` | `string` | The id of the feature contextual action to delete. | + +### Returns + +`void` + +### Example + +```typescript +await felt.deleteFeatureAction("my-action"); +``` + +*** + ## createPanelId() > **createPanelId**(): `Promise`\<`string`> diff --git a/docs/UI/CreateFeatureActionParams.md b/docs/UI/CreateFeatureActionParams.md new file mode 100644 index 00000000..1ac7a1ce --- /dev/null +++ b/docs/UI/CreateFeatureActionParams.md @@ -0,0 +1,13 @@ +*** + +# Properties + +## action + +> **action**: [`uiFeatureActionCreate`](uiFeatureActionCreate.md) + +*** + +## placement? + +> `optional` **placement**: \{ `after`: `string`; } | \{ `before`: `string`; } | \{ `at`: `"start"` | `"end"`; } diff --git a/docs/UI/README.md b/docs/UI/README.md index 420e59e3..7a457afd 100644 --- a/docs/UI/README.md +++ b/docs/UI/README.md @@ -11,6 +11,8 @@ UI features such as the legend and the full screen button. * [CreateActionTriggerParams](CreateActionTriggerParams.md) * [UpdateActionTriggerParams](UpdateActionTriggerParams.md) +* [CreateFeatureActionParams](CreateFeatureActionParams.md) +* [UpdateFeatureActionParams](UpdateFeatureActionParams.md) * [CreateOrUpdatePanelParams](CreateOrUpdatePanelParams.md) * [CreatePanelElementsParams](CreatePanelElementsParams.md) * [UpdatePanelElementsParams](UpdatePanelElementsParams.md) @@ -30,6 +32,7 @@ UI features such as the legend and the full screen button. * [UIDividerElement](UIDividerElement.md) * [UIDividerElementCreate](UIDividerElementCreate.md) * [UIDividerElementUpdate](UIDividerElementUpdate.md) +* [uiFeatureActionCreate](uiFeatureActionCreate.md) * [UIFlexibleSpaceElement](UIFlexibleSpaceElement.md) * [UIFlexibleSpaceElementCreate](UIFlexibleSpaceElementCreate.md) * [UIFlexibleSpaceElementUpdate](UIFlexibleSpaceElementUpdate.md) @@ -60,6 +63,7 @@ UI features such as the legend and the full screen button. # Type Aliases +* [uiFeatureAction](uiFeatureAction.md) * [PlacementForUIElement](PlacementForUIElement.md) * [UIPanelElement](UIPanelElement.md) * [UIPanelElementCreate](UIPanelElementCreate.md) diff --git a/docs/UI/UIPanelCreate.md b/docs/UI/UIPanelCreate.md new file mode 100644 index 00000000..d522d60c --- /dev/null +++ b/docs/UI/UIPanelCreate.md @@ -0,0 +1,96 @@ +*** + +The parameters for creating a panel by using [UiController.createPanel](UiController.md#createpanel). + +# See + +[UIPanel](UIPanel.md) for more information about panels. + +# Remarks + +`id` is optional but recommended if you want to be able to perform updates. + +# Properties + +## body + +> **body**: [`UIPanelElementsCreate`](UIPanelElementsCreate.md)\[] + +The elements to add to the panel body. + +*** + +## title? + +> `optional` **title**: `string` + +The title to display in the panel header. + +*** + +## onClickClose()? + +> `optional` **onClickClose**: () => `void` + +A function to call when panel's close button is clicked. + +### Returns + +`void` + +*** + +## type? + +> `optional` **type**: `"Panel"` + +*** + +## footer? + +> `optional` **footer**: [`UIPanelElementsCreate`](UIPanelElementsCreate.md)\[] + +The elements to add to the panel footer. + +*** + +## onCreate()? + +> `optional` **onCreate**: () => `void` + +A function to call when the element is created. + +### Returns + +`void` + +*** + +## onDestroy()? + +> `optional` **onDestroy**: () => `void` + +A function to call when the element is destroyed. + +### Returns + +`void` + +*** + +## id? + +> `optional` **id**: `string` + +The ID of the element. + +### Remarks + +If not provided, the element will be assigned a random ID, but it is recommended to provide it +to perform further updates on the element. + +If provided, it must be unique within the UI. + +### Default Value + +`undefined` diff --git a/docs/UI/UiController.md b/docs/UI/UiController.md index 2a3f2ea5..6a9f3868 100644 --- a/docs/UI/UiController.md +++ b/docs/UI/UiController.md @@ -107,6 +107,96 @@ await felt.deleteActionTrigger("enablePolygonTool"); *** +## createFeatureAction() + +> **createFeatureAction**(`args`: [`CreateFeatureActionParams`](CreateFeatureActionParams.md)): `Promise`\<[`uiFeatureAction`](uiFeatureAction.md)> + +Creates a feature contextual action. + +### Parameters + +| Parameter | Type | Description | +| --------- | ----------------------------------------------------------- | ----------------------------- | +| `args` | [`CreateFeatureActionParams`](CreateFeatureActionParams.md) | The arguments for the method. | + +### Returns + +`Promise`\<[`uiFeatureAction`](uiFeatureAction.md)> + +### Example + +```typescript +const myAction = await felt.createFeatureAction({ + action: { + label: "Edit feature", + onTrigger: async ({ featureId, layerId }) => { + console.log(`Editing feature ${featureId} in layer ${layerId}`); + }, + layerIds: ["layer-1", "layer-2"], + }, + placement: { at: "start" }, // optional, defaults to { at: "end" } +}); +``` + +*** + +## updateFeatureAction() + +> **updateFeatureAction**(`args`: [`UpdateFeatureActionParams`](UpdateFeatureActionParams.md)): `Promise`\<[`uiFeatureAction`](uiFeatureAction.md)> + +Updates a feature contextual action. + +Feature contextual action to update is identified by the `id` property. + +### Parameters + +| Parameter | Type | Description | +| --------- | ----------------------------------------------------------- | ---------------------------------------- | +| `args` | [`UpdateFeatureActionParams`](UpdateFeatureActionParams.md) | The feature contextual action to update. | + +### Returns + +`Promise`\<[`uiFeatureAction`](uiFeatureAction.md)> + +### Remarks + +Properties provided will override the existing properties. + +### Example + +```typescript +await felt.updateFeatureAction({ + id: "my-action", + label: "Updated action label", // only label changes +}); +``` + +*** + +## deleteFeatureAction() + +> **deleteFeatureAction**(`id`: `string`): `void` + +Deletes a feature contextual action. + +### Parameters + +| Parameter | Type | Description | +| --------- | -------- | -------------------------------------------------- | +| `id` | `string` | The id of the feature contextual action to delete. | + +### Returns + +`void` + +### Example + +```typescript +await felt.deleteFeatureAction("my-action"); +``` + +*** + ## createPanelId() > **createPanelId**(): `Promise`\<`string`> diff --git a/docs/UI/UpdateFeatureActionParams.md b/docs/UI/UpdateFeatureActionParams.md new file mode 100644 index 00000000..af8e1bdf --- /dev/null +++ b/docs/UI/UpdateFeatureActionParams.md @@ -0,0 +1,42 @@ +*** + +# Properties + +## id + +> **id**: `string` + +*** + +## label? + +> `optional` **label**: `string` + +*** + +## layerIds? + +> `optional` **layerIds**: `string`\[] + +*** + +## geometryTypes? + +> `optional` **geometryTypes**: (`"Polygon"` | `"Point"` | `"Line"` | `"Raster"`)\[] + +*** + +## onTrigger()? + +> `optional` **onTrigger**: (`args`: \{ `feature`: [`LayerFeature`](../Layers/LayerFeature.md); }) => `void` + +### Parameters + +| Parameter | Type | +| -------------- | ------------------------------------------------------------ | +| `args` | \{ `feature`: [`LayerFeature`](../Layers/LayerFeature.md); } | +| `args.feature` | [`LayerFeature`](../Layers/LayerFeature.md) | + +### Returns + +`void` diff --git a/docs/UI/UpdatePanelParams.md b/docs/UI/UpdatePanelParams.md new file mode 100644 index 00000000..1baf96e3 --- /dev/null +++ b/docs/UI/UpdatePanelParams.md @@ -0,0 +1,75 @@ +*** + +# Properties + +## id + +> **id**: `string` + +The ID of the element. + +*** + +## title? + +> `optional` **title**: `string` + +The title to display in the panel header. + +*** + +## onClickClose()? + +> `optional` **onClickClose**: () => `void` + +A function to call when panel's close button is clicked. + +### Returns + +`void` + +*** + +## type? + +> `optional` **type**: `"Panel"` + +*** + +## body? + +> `optional` **body**: [`UIPanelElementsCreate`](UIPanelElementsCreate.md)\[] + +The elements to add to the panel body. + +*** + +## footer? + +> `optional` **footer**: [`UIPanelElementsCreate`](UIPanelElementsCreate.md)\[] + +The elements to add to the panel footer. + +*** + +## onCreate()? + +> `optional` **onCreate**: () => `void` + +A function to call when the element is created. + +### Returns + +`void` + +*** + +## onDestroy()? + +> `optional` **onDestroy**: () => `void` + +A function to call when the element is destroyed. + +### Returns + +`void` diff --git a/docs/UI/uiFeatureAction.md b/docs/UI/uiFeatureAction.md new file mode 100644 index 00000000..5d1258eb --- /dev/null +++ b/docs/UI/uiFeatureAction.md @@ -0,0 +1,38 @@ +*** + +> **uiFeatureAction**: \{ `id`: `string`; `label`: `string`; `onTrigger`: (`args`: \{ `feature`: [`LayerFeature`](../Layers/LayerFeature.md); }) => `void`; `layerIds`: `string`\[]; `geometryTypes`: (`"Polygon"` | `"Point"` | `"Line"` | `"Raster"`)\[]; } + +Represents a feature action after creation (with generated id). + +# Type declaration + +## id + +> **id**: `string` + +## label + +> **label**: `string` + +## onTrigger() + +> **onTrigger**: (`args`: \{ `feature`: [`LayerFeature`](../Layers/LayerFeature.md); }) => `void` + +### Parameters + +| Parameter | Type | +| -------------- | ------------------------------------------------------------ | +| `args` | \{ `feature`: [`LayerFeature`](../Layers/LayerFeature.md); } | +| `args.feature` | [`LayerFeature`](../Layers/LayerFeature.md) | + +### Returns + +`void` + +## layerIds? + +> `optional` **layerIds**: `string`\[] + +## geometryTypes? + +> `optional` **geometryTypes**: (`"Polygon"` | `"Point"` | `"Line"` | `"Raster"`)\[] diff --git a/docs/UI/uiFeatureActionCreate.md b/docs/UI/uiFeatureActionCreate.md new file mode 100644 index 00000000..9318786f --- /dev/null +++ b/docs/UI/uiFeatureActionCreate.md @@ -0,0 +1,97 @@ +*** + +Represents a feature action for creation. +It can be added to the map by using the [UiController.createFeatureAction](UiController.md#createfeatureaction) method. + +# Properties + +## label + +> **label**: `string` + +The label of the feature action. + +*** + +## onTrigger() + +> **onTrigger**: (`args`: \{ `feature`: [`LayerFeature`](../Layers/LayerFeature.md); }) => `void` + +The function to call when the feature action is triggered. + +### Parameters + +| Parameter | Type | Description | +| -------------- | ------------------------------------------------------------ | -------------------------------------- | +| `args` | \{ `feature`: [`LayerFeature`](../Layers/LayerFeature.md); } | The arguments passed to the function. | +| `args.feature` | [`LayerFeature`](../Layers/LayerFeature.md) | The feature that triggered the action. | + +### Returns + +`void` + +*** + +## id? + +> `optional` **id**: `string` + +*** + +## layerIds? + +> `optional` **layerIds**: `string`\[] + +The layers to add the action to. Optional. Defaults to all layers. + +*** + +## geometryTypes? + +> `optional` **geometryTypes**: (`"Polygon"` | `"Point"` | `"Line"` | `"Raster"`)\[] + +The geometry type of the features to add the action to. Optional. Defaults to all geometry types. + +*** + +## type? + +> `optional` **type**: `undefined` + +*** + +## onCreate()? + +> `optional` **onCreate**: (`args`: \{ `id`: `string`; }) => `void` + +A function to call when the element is created. + +### Parameters + +| Parameter | Type | Description | +| --------- | -------------------- | ------------------------------------- | +| `args` | \{ `id`: `string`; } | The arguments passed to the function. | +| `args.id` | `string` | The id of the element. | + +### Returns + +`void` + +*** + +## onDestroy()? + +> `optional` **onDestroy**: (`args`: \{ `id`: `string`; }) => `void` + +A function to call when the element is destroyed. + +### Parameters + +| Parameter | Type | Description | +| --------- | -------------------- | ------------------------------------- | +| `args` | \{ `id`: `string`; } | The arguments passed to the function. | +| `args.id` | `string` | The id of the element. | + +### Returns + +`void` diff --git a/docs/_media/legend-default.png b/docs/_media/legend-default.png new file mode 100644 index 00000000..9090992d Binary files /dev/null and b/docs/_media/legend-default.png differ diff --git a/docs/_media/legend-name-only.png b/docs/_media/legend-name-only.png new file mode 100644 index 00000000..7275b3ae Binary files /dev/null and b/docs/_media/legend-name-only.png differ diff --git a/etc/js-sdk.api.md b/etc/js-sdk.api.md index 63d7687c..5d02e792 100644 --- a/etc/js-sdk.api.md +++ b/etc/js-sdk.api.md @@ -4,206 +4,211 @@ ```ts -import { au as AggregatedGridConfig } from './controller-Dpyt1fNF.js'; -import { av as AggregationConfig } from './controller-Dpyt1fNF.js'; -import { aw as AggregationMethod } from './controller-Dpyt1fNF.js'; -import { C as CircleElementCreate } from './controller-Dpyt1fNF.js'; -import { a as CircleElementRead } from './controller-Dpyt1fNF.js'; -import { b as CircleElementUpdate } from './controller-Dpyt1fNF.js'; -import { b8 as CircleToolSettings } from './controller-Dpyt1fNF.js'; -import { b9 as ConfigurableToolType } from './controller-Dpyt1fNF.js'; -import { ax as CountGridConfig } from './controller-Dpyt1fNF.js'; -import { bp as CreateActionTriggerParams } from './controller-Dpyt1fNF.js'; -import { K as CreateLayersFromGeoJsonParams } from './controller-Dpyt1fNF.js'; -import { bq as CreateOrUpdatePanelParams } from './controller-Dpyt1fNF.js'; -import { br as CreatePanelElementsParams } from './controller-Dpyt1fNF.js'; -import { O as DataOnlyLayer } from './controller-Dpyt1fNF.js'; -import { bs as DeletePanelElementsParams } from './controller-Dpyt1fNF.js'; -import { E as Element_2 } from './controller-Dpyt1fNF.js'; -import { c as ElementChangeCallbackParams } from './controller-Dpyt1fNF.js'; -import { d as ElementCreate } from './controller-Dpyt1fNF.js'; -import { e as ElementGroup } from './controller-Dpyt1fNF.js'; -import { f as ElementGroupChangeCallbackParams } from './controller-Dpyt1fNF.js'; -import { aM as ElementGroupNode } from './controller-Dpyt1fNF.js'; -import { aN as ElementNode } from './controller-Dpyt1fNF.js'; -import { B as ElementsController } from './controller-Dpyt1fNF.js'; -import { g as ElementUpdate } from './controller-Dpyt1fNF.js'; -import { aO as EntityNode } from './controller-Dpyt1fNF.js'; -import { aP as FeatureNode } from './controller-Dpyt1fNF.js'; -import { aQ as FeatureSelection } from './controller-Dpyt1fNF.js'; -import { aU as FeltBoundary } from './controller-Dpyt1fNF.js'; -import { F as FeltController } from './controller-Dpyt1fNF.js'; -import { Q as FeltTiledVectorSource } from './controller-Dpyt1fNF.js'; -import { aV as FeltZoom } from './controller-Dpyt1fNF.js'; -import { an as FilterExpression } from './controller-Dpyt1fNF.js'; -import { ao as FilterLogicGate } from './controller-Dpyt1fNF.js'; -import { aq as Filters } from './controller-Dpyt1fNF.js'; -import { ap as FilterTernary } from './controller-Dpyt1fNF.js'; -import { R as GeoJsonDataVectorSource } from './controller-Dpyt1fNF.js'; -import { aW as GeoJsonFeature } from './controller-Dpyt1fNF.js'; -import { S as GeoJsonFileVectorSource } from './controller-Dpyt1fNF.js'; -import { aX as GeoJsonGeometry } from './controller-Dpyt1fNF.js'; -import { aY as GeoJsonProperties } from './controller-Dpyt1fNF.js'; -import { W as GeoJsonUrlVectorSource } from './controller-Dpyt1fNF.js'; -import { ar as GeometryFilter } from './controller-Dpyt1fNF.js'; -import { G as GetElementGroupsConstraint } from './controller-Dpyt1fNF.js'; -import { h as GetElementsConstraint } from './controller-Dpyt1fNF.js'; -import { ay as GetLayerCalculationParams } from './controller-Dpyt1fNF.js'; -import { az as GetLayerCategoriesGroup } from './controller-Dpyt1fNF.js'; -import { aA as GetLayerCategoriesParams } from './controller-Dpyt1fNF.js'; -import { X as GetLayerGroupsConstraint } from './controller-Dpyt1fNF.js'; -import { aB as GetLayerHistogramBin } from './controller-Dpyt1fNF.js'; -import { aC as GetLayerHistogramParams } from './controller-Dpyt1fNF.js'; -import { aD as GetLayerPrecomputedCalculationParams } from './controller-Dpyt1fNF.js'; -import { Y as GetLayersConstraint } from './controller-Dpyt1fNF.js'; -import { Z as GetRenderedFeaturesConstraint } from './controller-Dpyt1fNF.js'; -import { aE as GridConfig } from './controller-Dpyt1fNF.js'; -import { aF as GridType } from './controller-Dpyt1fNF.js'; -import { H as HighlighterElementCreate } from './controller-Dpyt1fNF.js'; -import { i as HighlighterElementRead } from './controller-Dpyt1fNF.js'; -import { j as HighlighterElementUpdate } from './controller-Dpyt1fNF.js'; -import { ba as HighlighterToolSettings } from './controller-Dpyt1fNF.js'; -import { I as ImageElementCreate } from './controller-Dpyt1fNF.js'; -import { k as ImageElementRead } from './controller-Dpyt1fNF.js'; -import { l as ImageElementUpdate } from './controller-Dpyt1fNF.js'; -import { bb as InputToolSettings } from './controller-Dpyt1fNF.js'; -import { J as InteractionsController } from './controller-Dpyt1fNF.js'; -import { aZ as LatLng } from './controller-Dpyt1fNF.js'; -import { _ as Layer } from './controller-Dpyt1fNF.js'; -import { as as LayerBoundaries } from './controller-Dpyt1fNF.js'; -import { $ as LayerChangeCallbackParams } from './controller-Dpyt1fNF.js'; -import { a0 as LayerCommon } from './controller-Dpyt1fNF.js'; -import { ad as LayerFeature } from './controller-Dpyt1fNF.js'; -import { at as LayerFilters } from './controller-Dpyt1fNF.js'; -import { a1 as LayerGroup } from './controller-Dpyt1fNF.js'; -import { a2 as LayerGroupChangeCallbackParams } from './controller-Dpyt1fNF.js'; -import { aR as LayerGroupNode } from './controller-Dpyt1fNF.js'; -import { aS as LayerNode } from './controller-Dpyt1fNF.js'; -import { a3 as LayerProcessingStatus } from './controller-Dpyt1fNF.js'; -import { af as LayerSchema } from './controller-Dpyt1fNF.js'; -import { ag as LayerSchemaAttribute } from './controller-Dpyt1fNF.js'; -import { ah as LayerSchemaBooleanAttribute } from './controller-Dpyt1fNF.js'; -import { ai as LayerSchemaCommonAttribute } from './controller-Dpyt1fNF.js'; -import { aj as LayerSchemaDateAttribute } from './controller-Dpyt1fNF.js'; -import { ak as LayerSchemaDateTimeAttribute } from './controller-Dpyt1fNF.js'; -import { al as LayerSchemaNumericAttribute } from './controller-Dpyt1fNF.js'; -import { am as LayerSchemaTextAttribute } from './controller-Dpyt1fNF.js'; -import { aJ as LayersController } from './controller-Dpyt1fNF.js'; -import { a4 as LegendItem } from './controller-Dpyt1fNF.js'; -import { a5 as LegendItemChangeCallbackParams } from './controller-Dpyt1fNF.js'; -import { a6 as LegendItemIdentifier } from './controller-Dpyt1fNF.js'; -import { a7 as LegendItemsConstraint } from './controller-Dpyt1fNF.js'; -import { a_ as LineStringGeometry } from './controller-Dpyt1fNF.js'; -import { bc as LineToolSettings } from './controller-Dpyt1fNF.js'; -import { L as LinkElementRead } from './controller-Dpyt1fNF.js'; -import { a$ as LngLatTuple } from './controller-Dpyt1fNF.js'; -import { aK as MapDetails } from './controller-Dpyt1fNF.js'; -import { D as MapInteractionEvent } from './controller-Dpyt1fNF.js'; -import { M as MarkerElementCreate } from './controller-Dpyt1fNF.js'; -import { m as MarkerElementRead } from './controller-Dpyt1fNF.js'; -import { n as MarkerElementUpdate } from './controller-Dpyt1fNF.js'; -import { bd as MarkerToolSettings } from './controller-Dpyt1fNF.js'; -import { aL as MiscController } from './controller-Dpyt1fNF.js'; -import { aG as MultiAggregationConfig } from './controller-Dpyt1fNF.js'; -import { b0 as MultiLineStringGeometry } from './controller-Dpyt1fNF.js'; -import { b1 as MultiPointGeometry } from './controller-Dpyt1fNF.js'; -import { b2 as MultiPolygonGeometry } from './controller-Dpyt1fNF.js'; -import { N as NoteElementCreate } from './controller-Dpyt1fNF.js'; -import { o as NoteElementRead } from './controller-Dpyt1fNF.js'; -import { p as NoteElementUpdate } from './controller-Dpyt1fNF.js'; -import { be as NoteToolSettings } from './controller-Dpyt1fNF.js'; -import { bt as OnMapInteractionsOptions } from './controller-Dpyt1fNF.js'; -import { P as PathElementCreate } from './controller-Dpyt1fNF.js'; -import { q as PathElementRead } from './controller-Dpyt1fNF.js'; -import { r as PathElementUpdate } from './controller-Dpyt1fNF.js'; -import { bf as PinToolSettings } from './controller-Dpyt1fNF.js'; -import { s as PlaceElementCreate } from './controller-Dpyt1fNF.js'; -import { t as PlaceElementRead } from './controller-Dpyt1fNF.js'; -import { u as PlaceElementUpdate } from './controller-Dpyt1fNF.js'; -import { bg as PlaceFrame } from './controller-Dpyt1fNF.js'; -import { bw as PlacementForUIElement } from './controller-Dpyt1fNF.js'; -import { bh as PlaceSymbol } from './controller-Dpyt1fNF.js'; -import { b3 as PointGeometry } from './controller-Dpyt1fNF.js'; -import { v as PolygonElementCreate } from './controller-Dpyt1fNF.js'; -import { w as PolygonElementRead } from './controller-Dpyt1fNF.js'; -import { x as PolygonElementUpdate } from './controller-Dpyt1fNF.js'; -import { b4 as PolygonGeometry } from './controller-Dpyt1fNF.js'; -import { bi as PolygonToolSettings } from './controller-Dpyt1fNF.js'; -import { aH as PrecomputedAggregationMethod } from './controller-Dpyt1fNF.js'; -import { a8 as RasterBand } from './controller-Dpyt1fNF.js'; -import { a9 as RasterLayer } from './controller-Dpyt1fNF.js'; -import { aa as RasterLayerSource } from './controller-Dpyt1fNF.js'; -import { ae as RasterValue } from './controller-Dpyt1fNF.js'; -import { bj as RouteToolSettings } from './controller-Dpyt1fNF.js'; -import { aT as SelectionController } from './controller-Dpyt1fNF.js'; -import { cd as SetViewportCenterZoomParams } from './controller-Dpyt1fNF.js'; -import { b5 as SetVisibilityRequest } from './controller-Dpyt1fNF.js'; -import { b6 as SortConfig } from './controller-Dpyt1fNF.js'; -import { b7 as SortDirection } from './controller-Dpyt1fNF.js'; -import { T as TextElementCreate } from './controller-Dpyt1fNF.js'; -import { y as TextElementRead } from './controller-Dpyt1fNF.js'; -import { A as TextElementUpdate } from './controller-Dpyt1fNF.js'; -import { bk as TextToolSettings } from './controller-Dpyt1fNF.js'; -import { bo as ToolsController } from './controller-Dpyt1fNF.js'; -import { bl as ToolSettingsChangeEvent } from './controller-Dpyt1fNF.js'; -import { bm as ToolSettingsMap } from './controller-Dpyt1fNF.js'; -import { bn as ToolType } from './controller-Dpyt1fNF.js'; -import { cb as UIActionTriggerCreate } from './controller-Dpyt1fNF.js'; -import { bz as UIButtonElement } from './controller-Dpyt1fNF.js'; -import { bA as UIButtonElementCreate } from './controller-Dpyt1fNF.js'; -import { bB as UIButtonElementUpdate } from './controller-Dpyt1fNF.js'; -import { bX as UIButtonRowElement } from './controller-Dpyt1fNF.js'; -import { bY as UIButtonRowElementCreate } from './controller-Dpyt1fNF.js'; -import { bZ as UIButtonRowElementUpdate } from './controller-Dpyt1fNF.js'; -import { b_ as UICheckboxGroupElement } from './controller-Dpyt1fNF.js'; -import { b$ as UICheckboxGroupElementCreate } from './controller-Dpyt1fNF.js'; -import { c0 as UICheckboxGroupElementUpdate } from './controller-Dpyt1fNF.js'; -import { ca as UIControlElementOption } from './controller-Dpyt1fNF.js'; -import { cc as UiController } from './controller-Dpyt1fNF.js'; -import { U as UiControlsOptions } from './controller-Dpyt1fNF.js'; -import { bI as UIDividerElement } from './controller-Dpyt1fNF.js'; -import { bJ as UIDividerElementCreate } from './controller-Dpyt1fNF.js'; -import { bK as UIDividerElementUpdate } from './controller-Dpyt1fNF.js'; -import { bF as UIFlexibleSpaceElement } from './controller-Dpyt1fNF.js'; -import { bG as UIFlexibleSpaceElementCreate } from './controller-Dpyt1fNF.js'; -import { bH as UIFlexibleSpaceElementUpdate } from './controller-Dpyt1fNF.js'; -import { bU as UIGridContainerElement } from './controller-Dpyt1fNF.js'; -import { bV as UIGridContainerElementCreate } from './controller-Dpyt1fNF.js'; -import { bW as UIGridContainerElementUpdate } from './controller-Dpyt1fNF.js'; -import { c7 as UIIframeElement } from './controller-Dpyt1fNF.js'; -import { c8 as UIIframeElementCreate } from './controller-Dpyt1fNF.js'; -import { c9 as UIIframeElementUpdate } from './controller-Dpyt1fNF.js'; -import { bx as UIPanel } from './controller-Dpyt1fNF.js'; -import { by as UIPanelCreateOrUpdate } from './controller-Dpyt1fNF.js'; -import { bR as UIPanelElement } from './controller-Dpyt1fNF.js'; -import { bS as UIPanelElementCreate } from './controller-Dpyt1fNF.js'; -import { bT as UIPanelElementUpdate } from './controller-Dpyt1fNF.js'; -import { c1 as UIRadioGroupElement } from './controller-Dpyt1fNF.js'; -import { c2 as UIRadioGroupElementCreate } from './controller-Dpyt1fNF.js'; -import { c3 as UIRadioGroupElementUpdate } from './controller-Dpyt1fNF.js'; -import { bO as UISelectElement } from './controller-Dpyt1fNF.js'; -import { bP as UISelectElementCreate } from './controller-Dpyt1fNF.js'; -import { bQ as UISelectElementUpdate } from './controller-Dpyt1fNF.js'; -import { bC as UITextElement } from './controller-Dpyt1fNF.js'; -import { bD as UITextElementCreate } from './controller-Dpyt1fNF.js'; -import { bE as UITextElementUpdate } from './controller-Dpyt1fNF.js'; -import { bL as UITextInputElement } from './controller-Dpyt1fNF.js'; -import { bM as UITextInputElementCreate } from './controller-Dpyt1fNF.js'; -import { bN as UITextInputElementUpdate } from './controller-Dpyt1fNF.js'; -import { c4 as UIToggleGroupElement } from './controller-Dpyt1fNF.js'; -import { c5 as UIToggleGroupElementCreate } from './controller-Dpyt1fNF.js'; -import { c6 as UIToggleGroupElementUpdate } from './controller-Dpyt1fNF.js'; -import { bu as UpdateActionTriggerParams } from './controller-Dpyt1fNF.js'; -import { ab as UpdateLayerParams } from './controller-Dpyt1fNF.js'; -import { bv as UpdatePanelElementsParams } from './controller-Dpyt1fNF.js'; -import { aI as ValueConfiguration } from './controller-Dpyt1fNF.js'; -import { ac as VectorLayer } from './controller-Dpyt1fNF.js'; -import { V as ViewportCenterZoom } from './controller-Dpyt1fNF.js'; -import { ce as ViewportConstraints } from './controller-Dpyt1fNF.js'; -import { ch as ViewportController } from './controller-Dpyt1fNF.js'; -import { cf as ViewportFitBoundsParams } from './controller-Dpyt1fNF.js'; -import { cg as ViewportState } from './controller-Dpyt1fNF.js'; -import { z } from './controller-Dpyt1fNF.js'; +import { av as AggregatedGridConfig } from './controller-BcZvbm-Y.js'; +import { aw as AggregationConfig } from './controller-BcZvbm-Y.js'; +import { ax as AggregationMethod } from './controller-BcZvbm-Y.js'; +import { C as CircleElementCreate } from './controller-BcZvbm-Y.js'; +import { a as CircleElementRead } from './controller-BcZvbm-Y.js'; +import { b as CircleElementUpdate } from './controller-BcZvbm-Y.js'; +import { b9 as CircleToolSettings } from './controller-BcZvbm-Y.js'; +import { ba as ConfigurableToolType } from './controller-BcZvbm-Y.js'; +import { ay as CountGridConfig } from './controller-BcZvbm-Y.js'; +import { bq as CreateActionTriggerParams } from './controller-BcZvbm-Y.js'; +import { br as CreateFeatureActionParams } from './controller-BcZvbm-Y.js'; +import { K as CreateLayersFromGeoJsonParams } from './controller-BcZvbm-Y.js'; +import { bs as CreateOrUpdatePanelParams } from './controller-BcZvbm-Y.js'; +import { bt as CreatePanelElementsParams } from './controller-BcZvbm-Y.js'; +import { O as DataOnlyLayer } from './controller-BcZvbm-Y.js'; +import { bu as DeletePanelElementsParams } from './controller-BcZvbm-Y.js'; +import { E as Element_2 } from './controller-BcZvbm-Y.js'; +import { c as ElementChangeCallbackParams } from './controller-BcZvbm-Y.js'; +import { d as ElementCreate } from './controller-BcZvbm-Y.js'; +import { e as ElementGroup } from './controller-BcZvbm-Y.js'; +import { f as ElementGroupChangeCallbackParams } from './controller-BcZvbm-Y.js'; +import { aN as ElementGroupNode } from './controller-BcZvbm-Y.js'; +import { aO as ElementNode } from './controller-BcZvbm-Y.js'; +import { B as ElementsController } from './controller-BcZvbm-Y.js'; +import { g as ElementUpdate } from './controller-BcZvbm-Y.js'; +import { aP as EntityNode } from './controller-BcZvbm-Y.js'; +import { aQ as FeatureNode } from './controller-BcZvbm-Y.js'; +import { aR as FeatureSelection } from './controller-BcZvbm-Y.js'; +import { aV as FeltBoundary } from './controller-BcZvbm-Y.js'; +import { F as FeltController } from './controller-BcZvbm-Y.js'; +import { Q as FeltTiledVectorSource } from './controller-BcZvbm-Y.js'; +import { aW as FeltZoom } from './controller-BcZvbm-Y.js'; +import { ao as FilterExpression } from './controller-BcZvbm-Y.js'; +import { ap as FilterLogicGate } from './controller-BcZvbm-Y.js'; +import { ar as Filters } from './controller-BcZvbm-Y.js'; +import { aq as FilterTernary } from './controller-BcZvbm-Y.js'; +import { R as GeoJsonDataVectorSource } from './controller-BcZvbm-Y.js'; +import { aX as GeoJsonFeature } from './controller-BcZvbm-Y.js'; +import { S as GeoJsonFileVectorSource } from './controller-BcZvbm-Y.js'; +import { aY as GeoJsonGeometry } from './controller-BcZvbm-Y.js'; +import { aZ as GeoJsonProperties } from './controller-BcZvbm-Y.js'; +import { W as GeoJsonUrlVectorSource } from './controller-BcZvbm-Y.js'; +import { as as GeometryFilter } from './controller-BcZvbm-Y.js'; +import { G as GetElementGroupsConstraint } from './controller-BcZvbm-Y.js'; +import { h as GetElementsConstraint } from './controller-BcZvbm-Y.js'; +import { az as GetLayerCalculationParams } from './controller-BcZvbm-Y.js'; +import { aA as GetLayerCategoriesGroup } from './controller-BcZvbm-Y.js'; +import { aB as GetLayerCategoriesParams } from './controller-BcZvbm-Y.js'; +import { X as GetLayerGroupsConstraint } from './controller-BcZvbm-Y.js'; +import { aC as GetLayerHistogramBin } from './controller-BcZvbm-Y.js'; +import { aD as GetLayerHistogramParams } from './controller-BcZvbm-Y.js'; +import { aE as GetLayerPrecomputedCalculationParams } from './controller-BcZvbm-Y.js'; +import { Y as GetLayersConstraint } from './controller-BcZvbm-Y.js'; +import { Z as GetRenderedFeaturesConstraint } from './controller-BcZvbm-Y.js'; +import { aF as GridConfig } from './controller-BcZvbm-Y.js'; +import { aG as GridType } from './controller-BcZvbm-Y.js'; +import { H as HighlighterElementCreate } from './controller-BcZvbm-Y.js'; +import { i as HighlighterElementRead } from './controller-BcZvbm-Y.js'; +import { j as HighlighterElementUpdate } from './controller-BcZvbm-Y.js'; +import { bb as HighlighterToolSettings } from './controller-BcZvbm-Y.js'; +import { I as ImageElementCreate } from './controller-BcZvbm-Y.js'; +import { k as ImageElementRead } from './controller-BcZvbm-Y.js'; +import { l as ImageElementUpdate } from './controller-BcZvbm-Y.js'; +import { bc as InputToolSettings } from './controller-BcZvbm-Y.js'; +import { J as InteractionsController } from './controller-BcZvbm-Y.js'; +import { a_ as LatLng } from './controller-BcZvbm-Y.js'; +import { _ as Layer } from './controller-BcZvbm-Y.js'; +import { at as LayerBoundaries } from './controller-BcZvbm-Y.js'; +import { $ as LayerChangeCallbackParams } from './controller-BcZvbm-Y.js'; +import { a0 as LayerCommon } from './controller-BcZvbm-Y.js'; +import { ae as LayerFeature } from './controller-BcZvbm-Y.js'; +import { au as LayerFilters } from './controller-BcZvbm-Y.js'; +import { a1 as LayerGroup } from './controller-BcZvbm-Y.js'; +import { a2 as LayerGroupChangeCallbackParams } from './controller-BcZvbm-Y.js'; +import { aS as LayerGroupNode } from './controller-BcZvbm-Y.js'; +import { aT as LayerNode } from './controller-BcZvbm-Y.js'; +import { a3 as LayerProcessingStatus } from './controller-BcZvbm-Y.js'; +import { ag as LayerSchema } from './controller-BcZvbm-Y.js'; +import { ah as LayerSchemaAttribute } from './controller-BcZvbm-Y.js'; +import { ai as LayerSchemaBooleanAttribute } from './controller-BcZvbm-Y.js'; +import { aj as LayerSchemaCommonAttribute } from './controller-BcZvbm-Y.js'; +import { ak as LayerSchemaDateAttribute } from './controller-BcZvbm-Y.js'; +import { al as LayerSchemaDateTimeAttribute } from './controller-BcZvbm-Y.js'; +import { am as LayerSchemaNumericAttribute } from './controller-BcZvbm-Y.js'; +import { an as LayerSchemaTextAttribute } from './controller-BcZvbm-Y.js'; +import { aK as LayersController } from './controller-BcZvbm-Y.js'; +import { a4 as LegendDisplay } from './controller-BcZvbm-Y.js'; +import { a5 as LegendItem } from './controller-BcZvbm-Y.js'; +import { a6 as LegendItemChangeCallbackParams } from './controller-BcZvbm-Y.js'; +import { a7 as LegendItemIdentifier } from './controller-BcZvbm-Y.js'; +import { a8 as LegendItemsConstraint } from './controller-BcZvbm-Y.js'; +import { a$ as LineStringGeometry } from './controller-BcZvbm-Y.js'; +import { bd as LineToolSettings } from './controller-BcZvbm-Y.js'; +import { L as LinkElementRead } from './controller-BcZvbm-Y.js'; +import { b0 as LngLatTuple } from './controller-BcZvbm-Y.js'; +import { aL as MapDetails } from './controller-BcZvbm-Y.js'; +import { D as MapInteractionEvent } from './controller-BcZvbm-Y.js'; +import { M as MarkerElementCreate } from './controller-BcZvbm-Y.js'; +import { m as MarkerElementRead } from './controller-BcZvbm-Y.js'; +import { n as MarkerElementUpdate } from './controller-BcZvbm-Y.js'; +import { be as MarkerToolSettings } from './controller-BcZvbm-Y.js'; +import { aM as MiscController } from './controller-BcZvbm-Y.js'; +import { aH as MultiAggregationConfig } from './controller-BcZvbm-Y.js'; +import { b1 as MultiLineStringGeometry } from './controller-BcZvbm-Y.js'; +import { b2 as MultiPointGeometry } from './controller-BcZvbm-Y.js'; +import { b3 as MultiPolygonGeometry } from './controller-BcZvbm-Y.js'; +import { N as NoteElementCreate } from './controller-BcZvbm-Y.js'; +import { o as NoteElementRead } from './controller-BcZvbm-Y.js'; +import { p as NoteElementUpdate } from './controller-BcZvbm-Y.js'; +import { bf as NoteToolSettings } from './controller-BcZvbm-Y.js'; +import { bv as OnMapInteractionsOptions } from './controller-BcZvbm-Y.js'; +import { P as PathElementCreate } from './controller-BcZvbm-Y.js'; +import { q as PathElementRead } from './controller-BcZvbm-Y.js'; +import { r as PathElementUpdate } from './controller-BcZvbm-Y.js'; +import { bg as PinToolSettings } from './controller-BcZvbm-Y.js'; +import { s as PlaceElementCreate } from './controller-BcZvbm-Y.js'; +import { t as PlaceElementRead } from './controller-BcZvbm-Y.js'; +import { u as PlaceElementUpdate } from './controller-BcZvbm-Y.js'; +import { bh as PlaceFrame } from './controller-BcZvbm-Y.js'; +import { bz as PlacementForUIElement } from './controller-BcZvbm-Y.js'; +import { bi as PlaceSymbol } from './controller-BcZvbm-Y.js'; +import { b4 as PointGeometry } from './controller-BcZvbm-Y.js'; +import { v as PolygonElementCreate } from './controller-BcZvbm-Y.js'; +import { w as PolygonElementRead } from './controller-BcZvbm-Y.js'; +import { x as PolygonElementUpdate } from './controller-BcZvbm-Y.js'; +import { b5 as PolygonGeometry } from './controller-BcZvbm-Y.js'; +import { bj as PolygonToolSettings } from './controller-BcZvbm-Y.js'; +import { aI as PrecomputedAggregationMethod } from './controller-BcZvbm-Y.js'; +import { a9 as RasterBand } from './controller-BcZvbm-Y.js'; +import { aa as RasterLayer } from './controller-BcZvbm-Y.js'; +import { ab as RasterLayerSource } from './controller-BcZvbm-Y.js'; +import { af as RasterValue } from './controller-BcZvbm-Y.js'; +import { bk as RouteToolSettings } from './controller-BcZvbm-Y.js'; +import { aU as SelectionController } from './controller-BcZvbm-Y.js'; +import { ci as SetViewportCenterZoomParams } from './controller-BcZvbm-Y.js'; +import { b6 as SetVisibilityRequest } from './controller-BcZvbm-Y.js'; +import { b7 as SortConfig } from './controller-BcZvbm-Y.js'; +import { b8 as SortDirection } from './controller-BcZvbm-Y.js'; +import { T as TextElementCreate } from './controller-BcZvbm-Y.js'; +import { y as TextElementRead } from './controller-BcZvbm-Y.js'; +import { A as TextElementUpdate } from './controller-BcZvbm-Y.js'; +import { bl as TextToolSettings } from './controller-BcZvbm-Y.js'; +import { bp as ToolsController } from './controller-BcZvbm-Y.js'; +import { bm as ToolSettingsChangeEvent } from './controller-BcZvbm-Y.js'; +import { bn as ToolSettingsMap } from './controller-BcZvbm-Y.js'; +import { bo as ToolType } from './controller-BcZvbm-Y.js'; +import { ce as UIActionTriggerCreate } from './controller-BcZvbm-Y.js'; +import { bC as UIButtonElement } from './controller-BcZvbm-Y.js'; +import { bD as UIButtonElementCreate } from './controller-BcZvbm-Y.js'; +import { bE as UIButtonElementUpdate } from './controller-BcZvbm-Y.js'; +import { b_ as UIButtonRowElement } from './controller-BcZvbm-Y.js'; +import { b$ as UIButtonRowElementCreate } from './controller-BcZvbm-Y.js'; +import { c0 as UIButtonRowElementUpdate } from './controller-BcZvbm-Y.js'; +import { c1 as UICheckboxGroupElement } from './controller-BcZvbm-Y.js'; +import { c2 as UICheckboxGroupElementCreate } from './controller-BcZvbm-Y.js'; +import { c3 as UICheckboxGroupElementUpdate } from './controller-BcZvbm-Y.js'; +import { cd as UIControlElementOption } from './controller-BcZvbm-Y.js'; +import { ch as UiController } from './controller-BcZvbm-Y.js'; +import { U as UiControlsOptions } from './controller-BcZvbm-Y.js'; +import { bL as UIDividerElement } from './controller-BcZvbm-Y.js'; +import { bM as UIDividerElementCreate } from './controller-BcZvbm-Y.js'; +import { bN as UIDividerElementUpdate } from './controller-BcZvbm-Y.js'; +import { cf as uiFeatureAction } from './controller-BcZvbm-Y.js'; +import { cg as uiFeatureActionCreate } from './controller-BcZvbm-Y.js'; +import { bI as UIFlexibleSpaceElement } from './controller-BcZvbm-Y.js'; +import { bJ as UIFlexibleSpaceElementCreate } from './controller-BcZvbm-Y.js'; +import { bK as UIFlexibleSpaceElementUpdate } from './controller-BcZvbm-Y.js'; +import { bX as UIGridContainerElement } from './controller-BcZvbm-Y.js'; +import { bY as UIGridContainerElementCreate } from './controller-BcZvbm-Y.js'; +import { bZ as UIGridContainerElementUpdate } from './controller-BcZvbm-Y.js'; +import { ca as UIIframeElement } from './controller-BcZvbm-Y.js'; +import { cb as UIIframeElementCreate } from './controller-BcZvbm-Y.js'; +import { cc as UIIframeElementUpdate } from './controller-BcZvbm-Y.js'; +import { bA as UIPanel } from './controller-BcZvbm-Y.js'; +import { bB as UIPanelCreateOrUpdate } from './controller-BcZvbm-Y.js'; +import { bU as UIPanelElement } from './controller-BcZvbm-Y.js'; +import { bV as UIPanelElementCreate } from './controller-BcZvbm-Y.js'; +import { bW as UIPanelElementUpdate } from './controller-BcZvbm-Y.js'; +import { c4 as UIRadioGroupElement } from './controller-BcZvbm-Y.js'; +import { c5 as UIRadioGroupElementCreate } from './controller-BcZvbm-Y.js'; +import { c6 as UIRadioGroupElementUpdate } from './controller-BcZvbm-Y.js'; +import { bR as UISelectElement } from './controller-BcZvbm-Y.js'; +import { bS as UISelectElementCreate } from './controller-BcZvbm-Y.js'; +import { bT as UISelectElementUpdate } from './controller-BcZvbm-Y.js'; +import { bF as UITextElement } from './controller-BcZvbm-Y.js'; +import { bG as UITextElementCreate } from './controller-BcZvbm-Y.js'; +import { bH as UITextElementUpdate } from './controller-BcZvbm-Y.js'; +import { bO as UITextInputElement } from './controller-BcZvbm-Y.js'; +import { bP as UITextInputElementCreate } from './controller-BcZvbm-Y.js'; +import { bQ as UITextInputElementUpdate } from './controller-BcZvbm-Y.js'; +import { c7 as UIToggleGroupElement } from './controller-BcZvbm-Y.js'; +import { c8 as UIToggleGroupElementCreate } from './controller-BcZvbm-Y.js'; +import { c9 as UIToggleGroupElementUpdate } from './controller-BcZvbm-Y.js'; +import { bw as UpdateActionTriggerParams } from './controller-BcZvbm-Y.js'; +import { bx as UpdateFeatureActionParams } from './controller-BcZvbm-Y.js'; +import { ac as UpdateLayerParams } from './controller-BcZvbm-Y.js'; +import { by as UpdatePanelElementsParams } from './controller-BcZvbm-Y.js'; +import { aJ as ValueConfiguration } from './controller-BcZvbm-Y.js'; +import { ad as VectorLayer } from './controller-BcZvbm-Y.js'; +import { V as ViewportCenterZoom } from './controller-BcZvbm-Y.js'; +import { cj as ViewportConstraints } from './controller-BcZvbm-Y.js'; +import { cm as ViewportController } from './controller-BcZvbm-Y.js'; +import { ck as ViewportFitBoundsParams } from './controller-BcZvbm-Y.js'; +import { cl as ViewportState } from './controller-BcZvbm-Y.js'; +import { z } from './controller-BcZvbm-Y.js'; import { z as z_2 } from 'zod'; export { AggregatedGridConfig } @@ -226,6 +231,8 @@ export { CountGridConfig } export { CreateActionTriggerParams } +export { CreateFeatureActionParams } + export { CreateLayersFromGeoJsonParams } export { CreateOrUpdatePanelParams } @@ -481,6 +488,8 @@ export { LayerSchemaTextAttribute } export { LayersController } +export { LegendDisplay } + export { LegendItem } export { LegendItemChangeCallbackParams } @@ -631,6 +640,10 @@ export { UIDividerElementCreate } export { UIDividerElementUpdate } +export { uiFeatureAction } + +export { uiFeatureActionCreate } + export { UIFlexibleSpaceElement } export { UIFlexibleSpaceElementCreate } @@ -691,6 +704,8 @@ export { UIToggleGroupElementUpdate } export { UpdateActionTriggerParams } +export { UpdateFeatureActionParams } + export { UpdateLayerParams } export { UpdatePanelElementsParams } diff --git a/minimalTheme.mjs b/minimalTheme.mjs new file mode 100644 index 00000000..7fd38e91 --- /dev/null +++ b/minimalTheme.mjs @@ -0,0 +1,76 @@ +import { MarkdownTheme, MarkdownThemeContext } from "typedoc-plugin-markdown"; + +/** + * @param {import('typedoc-plugin-markdown').MarkdownApplication} app + */ +export function load(app) { + app.renderer.defineTheme("customTheme", MyMarkdownTheme); +} + +class MyMarkdownTheme extends MarkdownTheme { + render(page, template) { + const defaultValue = super.render(page, template); + if ( + page.filename.endsWith("CHANGELOG.md") || + page.filename.endsWith("docs/README.md") + ) { + return defaultValue; + } else { + // Remove extra newlines and simplify headers + return defaultValue + .replace(/^##/gm, "#") + .replace(/\n{3,}/g, "\n\n") + .replace(/\*\*\*\n/g, ""); + } + } + + getRenderContext(page) { + return new MyMarkdownThemeContext(this, page, this.application.options); + } + + // this puts all the docs just inside their module directory, not nested for types, interfaces, etc. + getTemplateMapping(kind) { + const prev = super.getTemplateMapping(kind); + if (!prev) return prev; + prev.directory = "."; + + return prev; + } +} + +class MyMarkdownThemeContext extends MarkdownThemeContext { + _oldPartials = this.partials; + + // customise partials + partials = { + ...this.partials, + // Simplify hierarchy display + hierarchy: (model, options) => { + if (model.types[0].qualifiedName.endsWith("Controller")) { + return this._oldPartials.hierarchy(model, options); + } + }, + // Remove inheritance section + inheritance: () => {}, + // Simplify property display + property: (model, options) => { + const defaultValue = this._oldPartials.property(model, options); + if (!defaultValue) return defaultValue; + + // Remove redundant property descriptions and simplify format + return defaultValue + .replace(/>\s*\*\*([^*]+)\*\*:\s*`([^`]+)`/g, "**$1**: `$2`") + .replace(/\n{3,}/g, "\n\n") + .replace(/\*\*\*\n/g, ""); + }, + // Simplify type display + type: (model, options) => { + const defaultValue = this._oldPartials.type(model, options); + if (!defaultValue) return defaultValue; + + return defaultValue + .replace(/\n{3,}/g, "\n\n") + .replace(/\*\*\*\n/g, ""); + } + }; +} diff --git a/package-lock.json b/package-lock.json index 931ba28a..c2bbc12c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@feltmaps/js-sdk", - "version": "1.6.0", + "version": "1.9.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@feltmaps/js-sdk", - "version": "1.6.0", + "version": "1.9.0", "license": "MIT", "devDependencies": { "@arethetypeswrong/cli": "^0.17.4", diff --git a/package.json b/package.json index 39212d74..1acbcb0c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@feltmaps/js-sdk", - "version": "1.8.0", + "version": "1.10.0-next.1", "description": "An SDK for Felt maps", "keywords": [ "felt", @@ -62,6 +62,8 @@ "scripts": { "build:compile": "tsup && ./scripts/dtsroll.sh", "build:docs": "typedoc", + "build:docs-minimal": "typedoc --options typedoc-minimal.json", + "build:docs-llm": "tsx scripts/process-docs.ts", "build": "npm run build:compile && npm run build:docs", "changeset": "changeset", "check:api": "npm run build:compile && attw --pack . --profile node16 && api-extractor run", diff --git a/src/modules/elements/index.ts b/src/modules/elements/index.ts index d1610dd6..7c7d2a4a 100644 --- a/src/modules/elements/index.ts +++ b/src/modules/elements/index.ts @@ -50,6 +50,6 @@ export type { TextElementUpdate, } from "./types"; -export type { ElementsController } from "./controller"; +// export type { ElementsController } from "./controller"; import type { ToolsController } from "../tools"; diff --git a/src/modules/interactions/index.ts b/src/modules/interactions/index.ts index 005acdc7..10611761 100644 --- a/src/modules/interactions/index.ts +++ b/src/modules/interactions/index.ts @@ -7,4 +7,4 @@ */ export type { MapInteractionEvent } from "./types"; -export type { InteractionsController } from "./controller"; +// export type { InteractionsController } from "./controller"; diff --git a/src/modules/layers/controller.ts b/src/modules/layers/controller.ts index 9f4f4842..78707790 100644 --- a/src/modules/layers/controller.ts +++ b/src/modules/layers/controller.ts @@ -62,6 +62,7 @@ export const layersController = ( ), updateLayer: method(feltWindow, "updateLayer", convertFileSourceToDataSource), deleteLayer: method(feltWindow, "deleteLayer"), + duplicateLayer: method(feltWindow, "duplicateLayer"), // groups getLayerGroup: method(feltWindow, "getLayerGroup"), @@ -345,6 +346,19 @@ export interface LayersController { */ deleteLayer(id: string): Promise; + /** + * Duplicate a layer from the map by its id. + * + * @remarks This will create an ephemeral copy of the layer, just for the duration of the session. The duplicated layer will not be persisted to the map. + * + * @example + * ```typescript + * const duplicatedLayer = await felt.duplicateLayer("layer-1"); + * ``` + * @returns The duplicated layer. + */ + duplicateLayer(id: string): Promise; + // GROUPS /** diff --git a/src/modules/layers/features/types.ts b/src/modules/layers/features/types.ts index e0406e1e..5ac43d06 100644 --- a/src/modules/layers/features/types.ts +++ b/src/modules/layers/features/types.ts @@ -1,6 +1,6 @@ -import type { LayersController } from "~/modules/layers"; +import type { LayersController } from "~/modules/layers/controller"; import type { FeltController } from "~/modules/main/controller"; -import type { SelectionController } from "~/modules/selection"; +import type { SelectionController } from "~/modules/selection/controller"; import type { FeltBoundary, GeoJsonFeature, diff --git a/src/modules/layers/img/legend-default.png b/src/modules/layers/img/legend-default.png new file mode 100644 index 00000000..9090992d Binary files /dev/null and b/src/modules/layers/img/legend-default.png differ diff --git a/src/modules/layers/img/legend-name-only.png b/src/modules/layers/img/legend-name-only.png new file mode 100644 index 00000000..7275b3ae Binary files /dev/null and b/src/modules/layers/img/legend-name-only.png differ diff --git a/src/modules/layers/index.ts b/src/modules/layers/index.ts index 0f982f37..07d375cb 100644 --- a/src/modules/layers/index.ts +++ b/src/modules/layers/index.ts @@ -31,6 +31,7 @@ export type { LayerGroup, LayerGroupChangeCallbackParams, LayerProcessingStatus, + LegendDisplay, LegendItem, LegendItemChangeCallbackParams, LegendItemIdentifier, @@ -83,4 +84,4 @@ export type { ValueConfiguration, } from "./stats/types"; -export type { LayersController } from "./controller"; +// export type { LayersController } from "./controller"; diff --git a/src/modules/layers/schema.ts b/src/modules/layers/schema.ts index 79748bd4..3d08fb49 100644 --- a/src/modules/layers/schema.ts +++ b/src/modules/layers/schema.ts @@ -68,6 +68,8 @@ const UpdateLayerMessage = methodMessage("updateLayer", UpdateLayerSchema); const DeleteLayerMessage = methodMessage("deleteLayer", z.string()); +const DuplicateLayerMessage = methodMessage("duplicateLayer", z.string()); + // LAYER GROUPS const GetGroupMessage = methodMessage("getLayerGroup", z.string()); const GetGroupsMessage = methodMessage( @@ -209,7 +211,7 @@ export const layersSchema = { CreateLayersFromGeoJsonMessage, DeleteLayerMessage, UpdateLayerMessage, - + DuplicateLayerMessage, GetGroupMessage, GetGroupsMessage, SetLayerGroupVisibilityMessage, @@ -261,7 +263,7 @@ export type LayersSchema = { >; updateLayer: Method>; deleteLayer: Method>; - + duplicateLayer: Method>; getLayerGroup: Method>; getLayerGroups: Method>; setLayerGroupVisibility: Method< diff --git a/src/modules/layers/types.ts b/src/modules/layers/types.ts index 6c7286cf..4a95c939 100644 --- a/src/modules/layers/types.ts +++ b/src/modules/layers/types.ts @@ -74,6 +74,13 @@ export interface LayerCommon { */ shownInLegend: boolean; + /** + * The display mode for the layer's legend. + * + * See {@link LegendDisplay} for more details. + */ + legendDisplay: LegendDisplay; + /** * The FSL style for the layer. * @@ -308,6 +315,35 @@ const GeoJsonFileVectorSourceSchema = z.object({ export interface GeoJsonFileVectorSource extends zInfer {} +const LegendDisplaySchema = z.enum(["default", "nameOnly"]); + +/** + * Describes how the layer is displayed in the legend. + * + * There are two display modes: + * + * 1. Default: + * - Shows layer name and caption + * - Shows representation of the layer's viz (e.g. color swatches, proportional symbols) + * + *
+ * Default layer legend + *
Default layer legend
+ *
+ * + * 2. Name-only (compact display): + * - Shows only layer name and caption + * - Hides representation of the layer's viz + * + *
+ * Name-only layer legend + *
Name-only layer legend
+ *
+ * + * @group Legend Items + */ +export type LegendDisplay = z.infer; + /** * The parameters for the {@link LayersController.updateLayer} method. */ @@ -324,6 +360,13 @@ export const UpdateLayerSchema = z.object({ */ shownInLegend: z.boolean().optional(), + /** + * Changes the layer's legend display mode. + * + * See {@link LegendDisplay} for more details. + */ + legendDisplay: LegendDisplaySchema.optional(), + /** * Changes the name of the layer. */ diff --git a/src/modules/misc/index.ts b/src/modules/misc/index.ts index 6f803fb3..c8c2dcb9 100644 --- a/src/modules/misc/index.ts +++ b/src/modules/misc/index.ts @@ -5,4 +5,4 @@ */ export type { MapDetails } from "./types"; -export type { MiscController } from "./controller"; +// export type { MiscController } from "./controller"; diff --git a/src/modules/selection/index.ts b/src/modules/selection/index.ts index 3a4dc2d4..76b664df 100644 --- a/src/modules/selection/index.ts +++ b/src/modules/selection/index.ts @@ -11,4 +11,4 @@ export type { LayerNode, } from "./types"; -export type { SelectionController } from "./controller"; +// export type { SelectionController } from "./controller"; diff --git a/src/modules/tools/index.ts b/src/modules/tools/index.ts index 9aa3ccf0..7e04a3e4 100644 --- a/src/modules/tools/index.ts +++ b/src/modules/tools/index.ts @@ -46,4 +46,4 @@ export type { export type { ToolsController } from "./controller"; -import type { ElementsController } from "../elements"; +// import type { ElementsController } from "../elements"; diff --git a/src/modules/ui/controller.ts b/src/modules/ui/controller.ts index 209ab499..c98e4730 100644 --- a/src/modules/ui/controller.ts +++ b/src/modules/ui/controller.ts @@ -2,15 +2,18 @@ import { method, methodWithListeners } from "~/lib/interface"; import type { SortConfig } from "~/modules/shared/types"; import type { CreateActionTriggerParams, + CreateFeatureActionParams, CreateOrUpdatePanelParams, CreatePanelElementsParams, DeletePanelElementsParams, UiControlsOptions, UiOnMapInteractionsOptions, UpdateActionTriggerParams, + UpdateFeatureActionParams, UpdatePanelElementsParams, } from "./types"; import type { UIActionTriggerCreate } from "./uiElements/UIActionTrigger"; +import type { UIFeatureAction } from "./uiElements/UIFeatureAction"; import type { UIPanel } from "./uiElements/UIPanel"; /** @@ -57,6 +60,18 @@ export const uiController = ( UIActionTriggerCreate >(feltWindow, "updateActionTrigger"), deleteActionTrigger: method(feltWindow, "deleteActionTrigger"), + + createFeatureAction: methodWithListeners< + "createFeatureAction", + CreateFeatureActionParams, + UIFeatureAction + >(feltWindow, "createFeatureAction"), + updateFeatureAction: methodWithListeners< + "updateFeatureAction", + UpdateFeatureActionParams, + UIFeatureAction + >(feltWindow, "updateFeatureAction"), + deleteFeatureAction: method(feltWindow, "deleteFeatureAction"), }); /** @@ -138,6 +153,65 @@ export interface UiController { */ deleteActionTrigger(id: string): void; + /** + * Creates a feature contextual action. + * + * @param args - The arguments for the method. + * @param args.action - The action to create. + * @param args.placement - The placement of the action. Optional. Defaults to `{ at: "end" }`. + * + * @example + * ```typescript + * const myAction = await felt.createFeatureAction({ + * action: { + * label: "Edit feature", + * onTrigger: async ({ featureId, layerId }) => { + * console.log(`Editing feature ${featureId} in layer ${layerId}`); + * }, + * layerIds: ["layer-1", "layer-2"], + * }, + * placement: { at: "start" }, // optional, defaults to { at: "end" } + * }); + * ``` + */ + createFeatureAction( + args: CreateFeatureActionParams, + ): Promise; + + /** + * Updates a feature contextual action. + * + * Feature contextual action to update is identified by the `id` property. + * + * @remarks + * Properties provided will override the existing properties. + * + * @param args - The feature contextual action to update. + * + * @example + * ```typescript + * await felt.updateFeatureAction({ + * id: "my-action", + * label: "Updated action label", // only label changes + * }); + * ``` + */ + updateFeatureAction( + args: UpdateFeatureActionParams, + ): Promise; + + /** + * Deletes a feature contextual action. + * + * @param id - The id of the feature contextual action to delete. + * + * @example + * ```typescript + * await felt.deleteFeatureAction("my-action"); + * ``` + */ + deleteFeatureAction(id: string): void; + /** * Creates a panel ID. * diff --git a/src/modules/ui/index.ts b/src/modules/ui/index.ts index 7603f0f6..19413a61 100644 --- a/src/modules/ui/index.ts +++ b/src/modules/ui/index.ts @@ -6,12 +6,14 @@ */ export type { CreateActionTriggerParams, + CreateFeatureActionParams, CreateOrUpdatePanelParams, CreatePanelElementsParams, DeletePanelElementsParams, UiOnMapInteractionsOptions as OnMapInteractionsOptions, UiControlsOptions, UpdateActionTriggerParams, + UpdateFeatureActionParams, UpdatePanelElementsParams, } from "./types"; @@ -101,4 +103,11 @@ export type { UIControlElementOption } from "./uiElements/base"; export type { UIActionTriggerCreate } from "./uiElements/UIActionTrigger"; -export type { UiController } from "./controller"; + +export type { + UIFeatureAction as uiFeatureAction, + UIFeatureActionCreate as uiFeatureActionCreate, +} from "./uiElements/UIFeatureAction"; + + +// export type { UiController } from "./controller"; diff --git a/src/modules/ui/schema.ts b/src/modules/ui/schema.ts index 1641d4ce..9f6d0705 100644 --- a/src/modules/ui/schema.ts +++ b/src/modules/ui/schema.ts @@ -5,15 +5,18 @@ import type { zInfer } from "~/lib/utils"; import { SortConfigSchema } from "../shared/types"; import { CreateActionTriggerParamsClonableSchema, + CreateFeatureActionParamsClonableSchema, CreateOrUpdatePanelParamsClonableSchema, CreatePanelElementsClonableSchema, DeletePanelElementsParamsSchema, UiControlsOptionsSchema, UiOnMapInteractionsOptionsSchema, UpdateActionTriggerParamsClonableSchema, + UpdateFeatureActionParamsClonableSchema, UpdatePanelElementsParamsClonableSchema, } from "./types"; import type { uiActionTriggerSchema } from "./uiElements/UIActionTrigger"; +import type { uiFeatureActionSchema } from "./uiElements/UIFeatureAction"; import type { uiPanelCreateSchema } from "./uiElements/UIPanel"; const CreateActionTriggerMessage = methodMessage( @@ -31,6 +34,21 @@ const DeleteActionTriggerMessage = methodMessage( z.string(), ); +const CreateFeatureActionMessage = methodMessage( + "createFeatureAction", + CreateFeatureActionParamsClonableSchema, +); + +const UpdateFeatureActionMessage = methodMessage( + "updateFeatureAction", + UpdateFeatureActionParamsClonableSchema, +); + +const DeleteFeatureActionMessage = methodMessage( + "deleteFeatureAction", + z.string(), +); + const CreatePanelIdMessage = methodMessage("createPanelId", z.void()); const CreateOrUpdatePanelMessage = methodMessage( @@ -86,6 +104,10 @@ export const uiSchema = { UpdateActionTriggerMessage, DeleteActionTriggerMessage, + CreateFeatureActionMessage, + UpdateFeatureActionMessage, + DeleteFeatureActionMessage, + CreatePanelIdMessage, CreateOrUpdatePanelMessage, DeletePanelMessage, @@ -115,6 +137,16 @@ export type UiSchema = { >; deleteActionTrigger: Method>; + createFeatureAction: Method< + zInfer, + zInfer + >; + updateFeatureAction: Method< + zInfer, + zInfer + >; + deleteFeatureAction: Method>; + createPanelId: Method>; createOrUpdatePanel: Method< zInfer, diff --git a/src/modules/ui/types.ts b/src/modules/ui/types.ts index 2af942ef..f8509548 100644 --- a/src/modules/ui/types.ts +++ b/src/modules/ui/types.ts @@ -7,6 +7,11 @@ import { uiActionTriggerSchema, type UIActionTriggerCreate, } from "./uiElements/UIActionTrigger"; +import { + uiFeatureActionSchema, + type UIFeatureAction, + type UIFeatureActionCreate, +} from "./uiElements/UIFeatureAction"; import { type UIFlexibleSpaceElementCreate } from "./uiElements/UIFlexibleSpaceElement"; import { uiPanelCreateSchema, @@ -50,6 +55,38 @@ export interface UpdateActionTriggerParams id: zInfer["id"]; } +const CreateFeatureActionParamsSchema = z.object({ + action: uiFeatureActionSchema.create, + placement: placementForUiElementSchema.optional(), +}); + +export const CreateFeatureActionParamsClonableSchema = z.object({ + action: uiFeatureActionSchema.clonable, + placement: placementForUiElementSchema.optional(), +}); + +/** + * @public + */ +export interface CreateFeatureActionParams + extends zInfer { + action: UIFeatureActionCreate; + placement?: PlacementForUIElement; +} + +const UpdateFeatureActionParamsSchema = uiFeatureActionSchema.update; + +export const UpdateFeatureActionParamsClonableSchema = + uiFeatureActionSchema.clonable.partial().required({ id: true }); + +/** + * @public + */ +export interface UpdateFeatureActionParams + extends Omit, "id"> { + id: zInfer["id"]; +} + const CreateOrUpdatePanelParamsSchema = z.object({ panel: uiPanelCreateSchema.params, placement: placementForUiElementSchema.optional(), diff --git a/src/modules/ui/uiElements/UIFeatureAction.ts b/src/modules/ui/uiElements/UIFeatureAction.ts new file mode 100644 index 00000000..81430cc3 --- /dev/null +++ b/src/modules/ui/uiElements/UIFeatureAction.ts @@ -0,0 +1,88 @@ +import { z } from "zod"; +import type { zInfer } from "~/lib/utils"; +import type { LayerFeature } from "~/modules/layers/features/types"; +import type { UiController } from "../controller"; +import { + makeUpdateSchema, + uiElementBaseCreateSchema, + uiElementBaseSchema, + type UIElementLifecycle, +} from "./base"; + +const uiFeatureActionBaseSchema = z.object({ + type: z.literal("FeatureAction"), + + /** + * The label of the feature action. + */ + label: z.string(), + + /** + * The function to call when the feature action is triggered. + */ + onTrigger: z + .function() + .args(z.object({ feature: z.custom() })) + .returns(z.void()), + + /** + * The layers to add the action to. Optional. Defaults to all layers. + */ + layerIds: z.array(z.string()).optional(), + + /** + * The geometry type of the features to add the action to. Optional. Defaults to all geometry types. + */ + geometryTypes: z + .array(z.enum(["Polygon", "Line", "Point", "Raster"])) + .optional(), +}); + +export const uiFeatureActionSchema = { + read: uiElementBaseSchema + .extend(uiFeatureActionBaseSchema.shape) + .extend({ id: z.string() }), + create: uiElementBaseCreateSchema.params + .extend(uiFeatureActionBaseSchema.shape) + .extend({ type: z.undefined() }), + clonable: uiElementBaseCreateSchema.clonable + .extend(uiFeatureActionBaseSchema.shape) + .extend({ type: z.undefined() }) + .extend({ onTrigger: z.string() }), + // Add the missing update schema + update: makeUpdateSchema( + uiElementBaseCreateSchema.params + .extend(uiFeatureActionBaseSchema.shape) + .extend({ type: z.undefined() }), + ), +}; + +/** + * Represents a feature action for creation. + * It can be added to the map by using the {@link UiController.createFeatureAction} method. + */ +export interface UIFeatureActionCreate + extends UIElementLifecycle, + Omit< + zInfer, + "onCreate" | "onDestroy" + > { + /** + * The function to call when the feature action is triggered. + * + * @param args - The arguments passed to the function. + * @param args.feature - The feature that triggered the action. + */ + onTrigger: (args: { feature: LayerFeature }) => void; +} + +/** + * Represents a feature action after creation (with generated id). + */ +export type UIFeatureAction = { + id: string; + label: string; + layerIds?: string[]; + geometryTypes?: Array<"Polygon" | "Point" | "Line" | "Raster">; + onTrigger: (args: { feature: LayerFeature }) => void; +}; diff --git a/src/modules/viewport/index.ts b/src/modules/viewport/index.ts index 93b9410e..f6c982e8 100644 --- a/src/modules/viewport/index.ts +++ b/src/modules/viewport/index.ts @@ -12,4 +12,4 @@ export type { ViewportState, } from "./types"; -export type { ViewportController } from "./controller"; +// export type { ViewportController } from "./controller"; diff --git a/typedoc-minimal.json b/typedoc-minimal.json new file mode 100644 index 00000000..11b39a39 --- /dev/null +++ b/typedoc-minimal.json @@ -0,0 +1,50 @@ +{ + "$schema": "https://typedoc-plugin-markdown.org/schema.json", + "disableSources": true, + "out": "./docs-minimal", + "entryPoints": ["src/client.ts"], + "sort": ["kind", "required-first", "source-order"], + "plugin": [ + "typedoc-plugin-zod", + "typedoc-plugin-markdown", + "typedoc-plugin-remark", + "./minimalTheme.mjs" + ], + "projectDocuments": ["./CHANGELOG.md"], + "groupOrder": ["Controller", "Methods", "Interfaces", "Type Aliases"], + "cleanOutputDir": true, + "indexFormat": "list", + "parametersFormat": "list", + "interfacePropertiesFormat": "list", + "classPropertiesFormat": "list", + "enumMembersFormat": "list", + "typeDeclarationFormat": "list", + "propertyMembersFormat": "list", + + "expandParameters": false, + "expandObjects": false, + + "categoryOrder": ["Controller", "*"], + + "hideBreadcrumbs": true, + "hidePageHeader": true, + "hidePageTitle": true, + "hideGroupHeadings": true, + + "treatWarningsAsErrors": false, + + // don't enable this, because it breaks references to some types on some pages, + // even though it gives us nice syntax highlighting. + "useCodeBlocks": false, + + "tableColumnSettings": { + "hideInherited": true, + "hideDefaults": false + }, + + "outputFileStrategy": "modules", + "flattenOutputFiles": false, + "theme": "customTheme", + "readme": "./src/docs_api_readme_prepend.md", + "mergeReadme": true +}