Interactions

The Interactions menu allows to configure different kinds of pop-ups that appear when you click or hover on a map feature. You can customize the content of the pop-up by renaming and formatting the properties, or changing the style (light, dark…) of the window.

In the Interactions tab of Builder, you will see the list of your current layers. The pop-ups will be configured individually for each layer. By default, they’re deactivated.

If you activate the pop-up, you can select different configurations for Click and Hover. For both configurations, the default style is None and no pop-up will be shown.

Click on the dropdown to see all available styling options. The styles for the Pop-up window are available in both configurations, but the Info Panel is only available for the ‘Click’ configuration.

To add a pop-up to the map, select a style and add the properties you want to be displayed by clicking on Add a field.

In this example, we have selected the ‘Click’ configuration with a black style, using the storetype property.

When working with aggregated data sources, you will need to select an aggregation operation for your columns.

Connections to Redshift clusters only support aggregation of categorical properties by any value.

To add all properties at once, click on Add all or None to add or remove all of them. Also, you can customise the name of the label to be displayed by clicking on the default name.

Once you have configured the content, click on any feature on the map and it will be displayed in a pop-up window.

Now, let´s display the information on a slider that appears from the right side of the screen by selecting the option ‘Info panel’ from the dropdown.

In this example, the information is displayed more clearly in a new info panel, and a pin marks the location of the selected feature in the map.

To enable feature highlighting when hovering or clicking, you must include a unique identifier, designated as 'geoid', for each geometry feature in your dataset.

We are going to add some additional properties and rename all of them with a more suitable label. Go to Add a field and select the properties revenue and size_m2. As shown in the image below, the new changes are updated directly in the Info Panel.

At any time, you can close the info panel by clicking on the “X” or you can revert to the default property values by clicking on the reset overrides button from the Iterations tab.

You can also customize your popups by adding images or modifying the styling. Let’s show an example of how to edit the HTML of the pop-ups. For this purpose, click on Switch to HTML mode button.

A template will be generated to reflect the selected fields, and the appearance of the popup will be the same. Click on Edit HTML to start editing.

When you click on Edit HTML, a new dialog will appear. You can modify the content directly by typing on the template in a quick and easy way.

Let’s do some changes in the content, for example, we can add an image and change the background color. Then, click on Apply changes.

If you want to go back to the standard mode, click on Switch to field list mode button.

A new message will appear warning you that the current changes applied will be lost when switching back to the standard mode. Click on Continue to keep the new changes or click on Cancel if you don’t want to keep them.