Interactions

Add hover effects, popups, and clickable features to create engaging interactive maps.

Last updated 2 months ago

Was this helpful?

Interactions

Add hover effects, popups, and clickable features to create engaging interactive maps.

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.

Popups provide a simple 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.

Popups update in real time! Click on a feature to see changes as you make them.

iframe and Custom HTML interactions

iframe and Custom HTML interactions allow you to fully customize the contents and layout of layer interactions within Felt. iframe interactions 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.

iframe interactions

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

Custom HTML interactions

View the full code for the example above

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .aqi-container {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
            padding: 16px;
            padding-top: 8px;
            border-radius: 8px;
            min-width: 300px;
        }

        .reading-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            border-radius: 6px;
            text-align: center;
        }

        .reading-label {
            font-weight: 500;
            font-size: 18px;
            margin-bottom: 8px;
        }

        .reading-value {
            font-size: 36px;
            font-weight: 700;
            line-height: 1.2;
        }

        .missing {
            background-color: #eaeaea;
            color: #000;
        }

        .good {
            background-color: #00e400;
            color: #000;
        }

        .moderate {
            background-color: #ffff00;
            color: #000;
        }

        .sensitive {
            background-color: #ff7e00;
            color: #fff;
        }

        .unhealthy {
            background-color: #ff0000;
            color: #fff;
        }

        .very-unhealthy {
            background-color: #8f3f97;
            color: #fff;
        }

        .hazardous {
            background-color: #7e0023;
            color: #fff;
        }
    </style>
</head>
<body>
    {% assign value = PM25_AQI | default: '-' %}

    {% if value == "-" %}
        {% assign class_name = 'missing' %}
    {% elsif value <= 50 %}
        {% assign class_name = 'good' %}
    {% elsif value <= 100 %}
        {% assign class_name = 'moderate' %}
    {% elsif value <= 150 %}
        {% assign class_name = 'sensitive' %}
    {% elsif value <= 200 %}
        {% assign class_name = 'unhealthy' %}
    {% elsif value <= 300 %}
        {% assign class_name = 'very-unhealthy' %}
    {% else %}
        {% assign class_name = 'hazardous' %}
    {% endif %}


   <div class="aqi-container">
        <div id="pm25" class="reading-container {{ class_name }}">
            <span class="reading-label">AQI</span>
            <div class="reading-value">{{ value }}</div>
        </div>
    </div>
</body>
</html>

Custom HTML interactions allow you to fully customize the contents of your popups 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.

Layout options

iframe and Custom HTML content can be shown in four different layouts: Popup, Left sidebar, Right sidebar, or Modal. Use the Layout control inside the Contents modal to set where on the map the interaction is shown. You can also 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.

Four iframe / Custom HTML layouts: popup, modal, left sidebar, and right sidebar.

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.