Popup interactions

Looking to customize what’s shown when clicking or hovering on data on a map? You’ve come to the right place. Use the Interaction section of a layer’s style editor to configure how users can interact with features or pixels in a layer.

Popup interactions

Popups provide a way to display a layer’s attributes on click or hover. Popups are the default interactions for vector layers, and can be further configured from the Interaction section of a layer’s style editor.

Click on the Contents row to customize the layout and contents of popups. You can:

• Choose between a table and list layout

• Set the popup title

• Provide an image URL attribute to display at the top of the popup

• Add and remove attributes shown in the popup. You can edit the label and add custom formatting for each attribute.

Custom AI and iframe popups

Custom HTML and iframe popups allow you to fully customize the contents and layout of layer interactions within Felt. The iframe popups allow you to show external websites when clicking or hovering on a feature, while Custom HTML lets you build a custom interface and layout all within Felt.

Custom AI popups (HTML/CSS)

Share your vision and ideas with Felt's AI to help you 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 fully customizable popup content within Felt. From the Interaction section of a layer’s style editor, set Type to Custom HTML, which will open configuration settings. You can always return to the configuration settings by clicking on Edit... in the Content row.

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 popups

Use iframe interactions to open other websites inside Felt when clicking or hovering on features in a layer. From the Interaction section of a layer’s style editor, set Type to iframe, which will open configuration settings. You can always return to the configuration settings by clicking on Edit... in the Content row.

iframe interactions can use attributes in your data to point to feature-specific URLs. If you have a URL attribute in your data, click the Add attribute button and select the URL attribute.

iframe URLs can also be a mix of static text and dynamic data. In the example below, the Unique Squirrel ID attribute is used to point each feature to a different URL.

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. You can specify the width and height of the interaction’s container via the Width and Height input fields, and provide an attribute to use as the title with the Title field. Use the Header setting to control the visibility of the top-bar.

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

Raster interactions

Raster layers have interactions disabled by default. To show raster pixel values on hover or click, click the + icon on the Interaction row 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 – button that’s shown when hovering over the section header.

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