Popup interactions

Popups provide a way to display a layer’s attributes on click or hover. Popups interactions are enabled by default for vector layers and disabled by default for raster layers. There are three types of popups for vector data: standard, iframe, and custom HTML. You can control and customize the popup behavior using the Interaction section of a layer’s style editor.

Standard popups

Configure standard popups

1. In edit mode, open the style editor for the layer

2. Scroll to the bottom of the style editor to the Interaction section

   
3. Click on the dropdown next to Contents to customize the layout and contents. Add a title, configure an image, and reorder, remove and format attributes. See Content Settingsfor more info.

Layouts

Felt provides two display options for the standard popup type: Table and List.

• Table view is more compact and has keys and values displayed on the same row

• List view is less compact and has keys and values listed ordered in a list format

Table

List

Content Settings

Within the Contents settings, you can control what appears in the popup menus:

• Choose a layout

• Add, remove, and reorder attributes

• Select a popup Title attribute

• Add an image attribute (must be a public image URL)

• Edit attribute names (double-click on the attribute name)

• Format the values (click 123 when hovering over an attribute)

Custom HTML (with AI)

Custom HTML popups allow you to customize the contents and layout of layer interactions within Felt. Share your vision and ideas with Felt's AI agent to design polished popups in no time. Adding prompts to Felt's AI LLM will automatically result in clean, standard HTML (Liquid), CSS, and JavaScript that you can further modify and extend. These popups can include photos, interactive charts, dropdowns, and more.

Create a custom popup

1. In edit mode, open the style editor for the layer

2. Scroll to the bottom of the style editor to the Interaction section

3. Click on the dropdown next to Type and select Custom HTML

4. The popup interface will open

   

   1. the left side: code editor (HTML/CSS/JS) and AI prompt area to chat with Felt AI (plus console logging for debugging)

   2. the center: previews (desktop & mobile available)

   3. the right side: layout controls (see Layout options)

5. Describe what you the popup to display by typing in the AI prompt area (see Prompt examples)

6. Review the generated HTML/CSS code and preview the pop ups in both Desktop and Mobile mode. You can modify the code directly in the code editor, and all edits are applied immediately.

7. Click Save (top right) once you are finished editing the popup

8. Test the popup experience by clicking on a feature in your map

Prompt examples

• "Create a popup with tabs showing property details, demographics, and transit data in separate card layouts with the property photo at the top"

• "Show a bar chart comparing this location's sales data to regional averages"

• "Add an expandable section that shows basic info first, with a Show Details button"

Examples

Create custom popups that reflect your organization's identity, with brand colors, photos, typography, and logos applied automatically.

Quickly create popups with expandable sections or tabbed navigation, so users can explore details of complex data without being overwhelmed.

Write your own

You can also utilize pre-written HTML, CSS, and Javascript to control what appears when interacting with features. Felt uses the Liquid Template Language to make it easy to quickly build your custom HTML popups. Liquid includes features like iteration, conditional branching, and helpful filters to easily format text. Note: for security reasons, third-party iframe embeds might not work within custom HTML popups.

iframe

Use iframe interactions to load and display external websites inside Felt when clicking or hovering on features in layers. iframe interactions can use attributes in your data to point to feature-specific URLs. You can also add URL-related attributes from your data by clicking the plus button in the editor and select the URL attribute.

Configure iframe popups

1. From the Interaction section of a layer’s style editor, set Type to iframe

2. The popup interface will open

   

   1. the left side: iframe builder (add attributes from the data with the plus sign)

   2. the center: previews (desktop & mobile available)

   3. the right side: layout controls (see Layout options)

3. Configure your iframe URL from static text and/or attributes. See Examples below.

   1. To add an attribute to the URL, click on the plus sign at the top of the builder and select the attribute to include in the iframe URL. Attributes have double curly brackets surrounding them.

      
4. Review the URL and preview the popups in both Desktop and Mobile modes.

5. Click Save (top right) once you are finished editing the popup

6. Test the popup experience by clicking on a feature in your map

Examples

iframe URLs can be created from static text, a URL attribute in the data, or a mix of static text and data attributes.

Static URLs

Load a static URL into the builder to load the same website for all feature in the layer

URL attribute

Point to attribute URLs in the data so different features show their associated URLs. Attributes will have double curly brackets surrounding the attribute name in the builder to indicate dynamic data.

Mix of static and dynamic attributes

In this example an attribute as used as part of a URL to load different content on a website per feature popup. The Unique Squirrel ID attribute is used to point each feature to a different URL. Attributes will have double curly brackets surrounding the attribute name in the builder to indicate dynamic data.

Troubleshooting iframes that won’t load

When a URL won’t load within an iframe but loads normally otherwise, it is likely because the website’s response headers prevent the website from being embedded. To resolve the issue, add a Content-Security Policy response header to the embedded website.

Layout options

Use the Layout control inside the setup modal to control where the popup is shown: popup card, left sidebar, right sidebar, or popup modal.

You can provide an attribute to use as the title with the Title field and specify the width and height of the interaction’s container via the Width and Height input fields.

Use the Header setting to control the visibility of the top-bar.

• Standard headers show the layer name, the Title, and overflow menu

• Compact headers show the overflow menu

• None removes any header option from the pop up

Custom and iframe popup content can be shown in four different layouts: Popup, Modal, Right sidebar, or Left sidebar.

Raster interactions

Raster layers have interactions disabled by default. To show raster pixel values on hover or click, click the dropdown next to the Show control within the Interaction section of your raster layer's style editor.

Interaction behavior

Interactions can be shown on click, only when clicking on labels, or on both hover and click. Configure when interactions are shown using the Show control from within the Interaction section of the layer style editor.

Looking to turn off interactions on a layer? Click the "On click" dropdown next to Show and select Never.

When clicking on area with overlapping interactive features, arrows are provided to step between features.