# Extensions

{% 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](#custom-extensions). With Extensions, you can transform your map into a purpose-built interactive experience tailored to specific workflows all without writing code.

{% hint style="success" %}
This feature is only available to customers on the [Enterprise plan](https://felt.com/pricing). To upgrade, [contact sales](https://felt.com/sales).
{% endhint %}

## Custom AI extensions

Custom extensions let you turn any map into an interactive application without writing any code. Felt AI leverages the [JS SDK](https://app.gitbook.com/o/pBjb4u9vDMMo5uYBgN6o/s/0eksRydsZ8lvtEIxgbY5/) to generate the tools, panels, and workflows you describe in natural language. Everything happens right in Felt: you can preview, adjust, and save your extension with no extra setup or deployment. When you share your map, your application is live and ready for viewers to use.

### **How to create a custom extension using AI**

1. Click **App development**![](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](https://help.felt.com/getting-started/tour-the-interface#toolbar) and select the option for **Custom extension** ![](https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FvvwctpVCfoSnofnSzOfF%2Fsparkle.svg?alt=media\&token=936b53d7-212d-41fb-87b7-a73e032b65d3)
2. Extensions editor opens in a split view:&#x20;

   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%2Fj3ZkfIYyR7FKo6XnUT3p%2Fai-extensions.webp?alt=media&#x26;token=192a36cc-56cc-4710-a18b-de5b9a847949" 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.&#x20;
6. The custom extension will appear in your map’s legend.&#x20;

### Polished UI

Custom AI 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

### 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&#x26;token=16edcea9-9532-4d64-adee-0db0637a80d0" alt="" width="375"><figcaption></figcaption></figure>

### Debugging

* Test your extension by exiting **`Edit`** mode on the map (click 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.&#x20;
* To find a layer ID to feed into an extension, click on **`...`** next to the layer in the legend, then select **`Actions`** > **`Copy layer 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:

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2Fmsdc5ojSM5PJuvz7s1sd%2FScreenshot%202025-09-18%20at%2011.31.43%E2%80%AFAM.png?alt=media&#x26;token=9e115950-e516-4a78-b673-954b54f69062" alt="" width="375"><figcaption></figcaption></figure>

* 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
* Extensions use [Felt's UI components](https://developers.felt.com/js-sdk/ui-components), which can be rendered as buttons in the legend or panels on the right-side of the map. They can also draw ephemeral data (ex: isochrones) on the map based on a user interaction like a click
* [UI elements](https://developers.felt.com/js-sdk/ui-components) automatically match Felt’s design so everything looks polished and integrated
* 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&#x26;token=1d9a8f41-c648-473f-a08e-32e0d7fc16f1" alt="" width="302"><figcaption></figcaption></figure>

To add Find:

* Click **Extensions** 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&#x26;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.

<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&#x26;token=953ff88f-e04d-4bbd-9281-e043b0315f85" alt="" width="375"><figcaption></figcaption></figure>

To add Measure:

* Click **Extensions** 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&#x26;token=71283f3b-8ea4-4a2d-9f3e-66a038e6d660" alt="" width="318"><figcaption></figcaption></figure>

### Spatial filter

The spatial filter component enables viewers to filter layers and export the filtered results by drawing a shape on the map. Selecting a spatial filter shows the number of features filtered, along with details about the size and shape of the filtered region.

<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&#x26;token=ac24858c-95e6-440d-bc60-59d58abda029" alt="" width="375"><figcaption></figcaption></figure>

To add Spatial Filter:

* Click **Extensions** in the toolbar
* Optionally rename the tool.
* Choose which shapes viewers can draw (polygon, circle, or both).
* Select which map layers the filter applies to.

<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&#x26;token=05e360b6-197c-4b74-9fc5-4a084bc3757a" alt="" width="331"><figcaption></figcaption></figure>

To let viewers export filtered results, turn on **Export data** in your [map’s settings](https://help.felt.com/dashboards-and-apps/map-settings). Once the setting is on, a download icon will be available to all logged-in viewers from the spatial filter panel.

* Logged-in viewers can download results as GeoPackage, GeoJSON, or CSV
* Logged-out viewers can filter interactively but cannot download data

Spatial filters work great alongside other [components](https://help.felt.com/dashboards-and-apps/dashboard-components) 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. Lines and polygons that partially intersect the spatial filter are fully counted in calculated statistics.

<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&#x26;token=7c1ae878-f4d1-4714-971b-b7b602444aea" alt="" width="375"><figcaption></figcaption></figure>