> For the complete documentation index, see [llms.txt](https://help.felt.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.felt.com/developer-platform/extensions.md).

# Extensions

Turn any map into an interactive application — build custom extensions with AI or add pre-built tools in a few clicks.

{% embed url="<https://youtu.be/0bB6JY-3SCc>" %}

Extensions let you add interactivity to your Felt map, whether that means enabling viewers to search, measure, or filter your data with pre-built tools like [Find](#find), [Measure](#measure), and [Spatial filter](#spatial-filter), or creating a complete application with [Custom extensions](#create-a-custom-extension-with-felt-ai). With extensions, you can transform your map into a purpose-built interactive experience tailored to specific workflows all without writing code.

{% hint style="success" %}
**Extensions** are available on the Enterprise plan. [Contact sales](https://felt.com/sales) to upgrade.
{% endhint %}

## Examples

#### Neighborhood comparison tool

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2F9KJ3zPqydDmw67RimosP%2F686ecfd33bdd674450f5fd6d_neighborhood-comparison.gif?alt=media&amp;token=b10c2ce7-4ac6-4090-bec7-67da64e15dc5" alt="" width="563"><figcaption><p><em>Build an application that compares neighborhoods and summarizes land use patterns</em></p></figcaption></figure>

#### Data animations

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FP6vHmfQaUWfgoZ6iR1OI%2F686ecfe47189a44fb1cc30ed_river-animation.gif?alt=media&amp;token=73a26854-89d2-4949-b51a-8c63a7cf0687" alt="" width="563"><figcaption><p><em>Animate the flow of the Mississippi River Basin from its headwaters to the Gulf of Mexico</em></p></figcaption></figure>

#### Interactive data

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2Fo3qg1zv1o84NsVgLKXLo%2F686ecfa63bdd560ae06dcd55_commuter-flows.gif?alt=media&amp;token=9b238686-938d-4b20-9ca0-c4653c381961" alt="" width="563"><figcaption><p><em>Build a tool that draws lines to all destination counties on click with travel mode options and filters</em></p></figcaption></figure>

## Create a custom extension with Felt AI

1. Click **Developer Platform** (![](https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FOhxtHyEnA0PP0KmPsMk8%2Fbolt.svg?alt=media\&token=c0e3eaf0-444f-4616-b6c5-adc62595cf51)) in the [toolbar](/getting-started/tour-the-interface.md#toolbar) and select the option for **Custom extension**
2. Extensions editor opens in a split view:

   1. **the left side** includes the AI prompt area where you describe what you want your custom extension to do, and a code editor that displays the generated code with the option to refine. You can view logs in the Console tab of the prompt area as you test your extension.
   2. **the right side** shows a live preview of your map with your custom extensions

   <figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FSrQyXQ4M9FRTO3cNZvHx%2Fai-extensions.webp?alt=media&amp;token=e4cf2f5d-6fe6-48a0-b155-5aa9394a76c1" alt=""><figcaption></figcaption></figure>
3. Describe the specific interaction or workflow you want by typing in the prompt area. Examples:
   1. "Build an application that compares neighborhoods and summarizes land use patterns"
   2. "When someone clicks a point, show a popup with the nearest 3 schools"
   3. "Add a sidebar that plays an animation of the data over time."
4. After a prompt is submitted, Felt AI will generate code based on your prompt and you will see the code editor update.
   1. You can modify the code directly in the code editor and hit **Run** to see the updates in the preview map.
5. Click **Save** once you have a working extension.
6. The custom extension will appear in your map’s legend.

## Polished UI

Custom extensions let you go beyond [pre-built](#pre-built-extensions) ones to create complete, purpose-built applications with polished [UI components](https://developers.felt.com/js-sdk/ui-components) like:

* **Buttons:** Quick actions viewers can click
* **Panels:** Sidebars that display summaries, stats, or workflows
* **Forms:** Inputs for viewers to enter text or select options
* **Embedded content:** Charts or dashboards from other sites displayed in your panel

[UI elements](https://developers.felt.com/js-sdk/ui-components) automatically match Felt’s design so everything looks polished and integrated. They can be rendered as buttons in the legend or panels on the right side of the map, and can draw ephemeral data (ex: isochrones) on the map based on a user interaction like a click.

## Managing extensions

Clicking on the extension in the legend allows editors to reopen the editor, rename the extension, or access additional options like copy/duplicate/delete.

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FJjuygEzr7c4d05XMeZxT%2Fimage.png?alt=media&amp;token=16edcea9-9532-4d64-adee-0db0637a80d0" alt="" width="375"><figcaption></figcaption></figure>

## Debugging

* Test your extension by exiting edit mode on the map (click the pink **Done** button top-right). Extensions can only run when viewing the map in view mode
* Only members with editor permissions can see/modify the extension code to debug.
* To find a layer ID to feed into an extension, click on **···** next to the layer in the legend, then select **Actions** > **Copy ID for API**. Note: the same data on two different maps will have a unique layer ID per map.
* Errors will appear in the **`AI assistant`** tab with a brief summary of the issue. Use Felt AI to fix the errors by clicking the **`Fix errors`** option:
* The Console tab in the prompt area shows more detailed debugging and verbose logging
* Clipboard helpers in the editor let you easily copy your map’s viewport or layer IDs
* Click on **···** next to the extension in the legend to copy, cut, duplicate, and delete extensions.

## Tips

* **Saved extensions are automatically shared** when you share your map - viewers will see the interactive functionality without needing any special access.
* Extensions run when your map is in View mode only. While in Edit mode for your map, extensions are disabled so you can edit your map safely. You can still open the extensions editor at any time to edit your extension.
* The preview shows exactly how your custom extension will work before you save or share it
* The overflow menu in the editor offers helpful options like word wrap, auto-run, and delete
* Viewers won’t see your custom extension until you save it
* If you want to go further, see the [Felt SDK API reference](https://developers.felt.com/js-sdk-api-reference/) for details on everything the SDK can do

## Pre-built extensions

Felt provides three pre-built extensions you can add with just a few clicks.

### Find

The Find extension enables map viewers to search locations and layers by entering keywords in the search box.

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FmtvTm3h4QYUItM8s7nTP%2FScreenshot_2024-08-14_at_1.19.56_PM.png?alt=media&amp;token=1d9a8f41-c648-473f-a08e-32e0d7fc16f1" alt="" width="302"><figcaption></figcaption></figure>

To add Find:

* Click **Developer Platform** in the toolbar
* Give your find tool a title
* Choose whether results include search from all layers, specific layers, or locations (places and addresses).

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FhMluOC1ryze1g75f4AbE%2Fimage%201.png?alt=media&amp;token=f5db0997-31ae-4df3-83aa-334c5e0d797e" alt="" width="334"><figcaption></figcaption></figure>

### Measure

The Measure extension provides map viewers with tools to measure distances and areas directly on the map. A measurement also breaks down what the measured shape contains, layer by layer — see [Layer breakdown](/annotations/annotations.md#layer-breakdown).

{% hint style="info" %}
Measure is also available directly on any map by right-clicking the map — see [Measuring](/annotations/annotations.md#measuring). No extension is required for that. Adding the Measure extension instead is useful when you want to give it a custom name, restrict which measurement types viewers can use, and keep it always visible in the legend for viewers.
{% endhint %}

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2F8XVvLFTIHag3GhzN5yPU%2Fimage.png?alt=media&amp;token=953ff88f-e04d-4bbd-9281-e043b0315f85" alt="" width="375"><figcaption></figcaption></figure>

To add Measure:

* Click **Developer Platform** in the toolbar
* Optionally rename the tool.
* Choose which measurement types to offer map viewers: line, polygon, circle, driving, cycling, walking, or flight great arc.

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FfqjfPOHhhiQ1tTFXqKxE%2FScreenshot_2024-08-14_at_1.10.55_PM.png?alt=media&amp;token=71283f3b-8ea4-4a2d-9f3e-66a038e6d660" alt="" width="318"><figcaption></figcaption></figure>

### Spatial filter

The Spatial filter extension lets someone reading the map draw a shape and narrow the layers it targets to the area inside it. Selecting a filter opens a panel with a result for each targeted layer and the measurements of the shape that was drawn, and it can hand the filtered data back as a download.

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FmpDOfT83NsixU4zJt3jp%2F8cdd084e-6618-4aa8-9e28-b7519568a2fb.png?alt=media&amp;token=ac24858c-95e6-440d-bc60-59d58abda029" alt="" width="375"><figcaption></figcaption></figure>

To add Spatial filter:

* Click **Developer Platform** in the toolbar and choose **Spatial filter**
* Optionally rename the tool in **Title**.
* Under **Types**, choose the shapes that can be drawn: **Polygon**, **Circle**, or both.
* Under **Filter results from…**, turn on each layer the filter applies to. Vector and raster layers are both eligible, and a single filter can target a mix of the two.

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FBwu0aY8OvNKQt9Kf4BpV%2Fimage%202.png?alt=media&amp;token=05e360b6-197c-4b74-9fc5-4a084bc3757a" alt="" width="331"><figcaption></figcaption></figure>

A raster layer is eligible once Felt has indexed it and read its bands. A layer that streams pre-rendered tiles from a remote tile service can't be filtered, and its toggle stays disabled with a note explaining why.

#### Drawing a filter

Spatial filters run when the map is in View mode. Click the tool in the legend, choose **Polygon** or **Circle** if both are offered, then click on the map to draw the shape. **Done** closes the panel and leaves the filter in place; the trash icon removes it.

The map then shows only what falls inside the shape: features outside it are hidden from a targeted vector layer, and pixels outside it are hidden from a targeted raster layer. Drawing more than one shape filters to their combined area. A filter is visible only to the person who drew it and is cleared when they leave the map.

#### Reading the results

The panel shows one result per targeted layer, titled after the layer:

* A vector layer shows a feature count — **Count of Parcels**. A feature counts when its geometry intersects the shape, so lines and polygons that fall only partly inside are counted in full.
* A raster layer shows a statistic for the area — **Average of Elevation**, the mean value of the band the layer is styled by. A raster styled by category shows **Majority of Land cover** instead: the most common value inside the shape, named as the legend names it. When the layer has more than one band, the title names the band that was read as well — **Average of Worldclim Band 1**. A pixel counts toward the statistic when its center falls inside the shape.

Below the results, **Measurements** describes the shape itself: **Radius**, **Perimeter**, and **Area** for a circle, **Perimeter** and **Area** for a polygon.

#### Exporting the filtered area

Exporting from the filter panel is available to members with Edit access, and to everyone else once **Export data** is turned on in your [map’s settings](/dashboards-and-apps/map-settings.md). A download icon then appears at the top of the filter panel for anyone who is logged in. Without logging in, a person can filter interactively but can't export.

The download menu offers the formats the targeted layers can produce:

* Vector layers: GeoPackage, GeoJSON, CSV, Shapefile, KML, or GeoParquet
* Raster layers: GeoTIFF

A filter that targets both kinds of layer lists both sets and exports each layer in the formats it supports. Layers the shape doesn't reach are left out of the menu. For what each format is good for, see [Exporting data](/sharing-and-collaboration/exporting/exporting-data.md).

Every export covers the area drawn. A vector export holds the whole of each feature that intersects the shape, with the layer's attribute filters applied as well. A GeoTIFF is clipped to the shape: it keeps the source raster's coordinate system, resolution, and bands, pixel values pass through unchanged, and the area outside the shape is masked out — an alpha band is added when the raster has no other way to mark masked pixels. A GeoTIFF carries no attribute table, so attribute filters don't apply to it.

If the shape covers more ground than Felt can write as a GeoTIFF at that layer's resolution, the export fails and asks for a smaller shape. If the shape and the raster don't overlap at all, it reports that there is nothing inside the shape to write.

Spatial filters work great alongside other [components](/dashboards-and-apps/components.md) set to **Update based on other filters**. In the image below, the statistic and bar chart components are set to update based on other filters, such that they show risk stats for the spatially-filtered region. Components reading a raster layer respond to a spatial filter the same way. Lines and polygons that partially intersect the spatial filter are fully counted in calculated statistics, and a raster pixel is counted when its center falls inside the filter.

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FZrUMdD8eyGUj2KzrK6Gg%2Fimage.png?alt=media&amp;token=7c1ae878-f4d1-4714-971b-b7b602444aea" alt="" width="375"><figcaption></figcaption></figure>

## Frequently asked questions

<details>

<summary>What are extensions in Felt?</summary>

Extensions add custom interactivity to your Felt maps, transforming them into purpose-built interactive applications. You can build them by describing what you want in natural language — Felt AI generates the code — or by writing the JS SDK code yourself.

</details>

<details>

<summary>Do I need coding experience to build extensions?</summary>

No. You describe what you want in natural language, and Felt AI generates the necessary code using the JS SDK. You can edit the generated code directly if you want to, but you don't have to.

</details>

<details>

<summary>Who can access extensions?</summary>

This feature is only available to admins and editors who are using Felt on the Enterprise plan. To upgrade, you need to contact sales.

</details>

<details>

<summary>What happens when I share a map with a custom extension?</summary>

When you share your map, your custom application is live and ready for viewers to use immediately—no extra setup or deployment needed.

</details>

<details>

<summary>Can I modify the generated code?</summary>

Yes, you can modify the code directly in the code editor and click Run to see the updates in the preview map.

</details>

<details>

<summary>What are some example use cases for extensions?</summary>

* **Neighborhood comparison tool**: Compare neighborhoods and summarize land use patterns
* **Data animations**: Animate the flow of the Mississippi River Basin from headwaters to the Gulf of Mexico
* **Interactive data tools**: Draw lines to destination counties on click with travel mode options and filters

</details>

<details>

<summary>What technology powers extensions?</summary>

Extensions are built on Felt's JS SDK. Felt AI generates the SDK code from your natural language descriptions, and you can edit that code directly in the editor.

</details>

<details>

<summary>Where does my custom extension appear after saving?</summary>

The custom extension will appear in your map's legend when editing a map.

</details>

<details>

<summary>Where does the extension code run?</summary>

Everything happens right in Felt and runs on Felt's scalable cloud infrastructure. You can preview, adjust, and save your extension with no extra setup or deployment required.

</details>

<details>

<summary>I need to find a layer ID to feed into my prompt for an extension. Where can I find this layer ID?</summary>

Click on **···** for the layer in the legend, then select **Actions** > **Copy ID for API**. This will copy the unique identifier for the layer on the map you're building the extension.

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FqiHPwxznp5f3OFO3w7Bz%2Fimage.png?alt=media&amp;token=aea99362-80fc-40e4-b042-8454a69c73be" alt="" width="375"><figcaption></figcaption></figure>

Note: the same data on two different maps will have a unique layer ID per map.

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://help.felt.com/developer-platform/extensions.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
