# Interactions

Builder interactions allow you to configure various UI options to display the attributes associated with a layer. Interactions are disabled by default but can be enabled for each individual layer using the toggle button. Once enabled, you can choose from the following options:

* **Click**: Users can extract insights by clicking on a feature rendered on the map.
* **Hover**: Users can extract insights by hovering over a feature on the map.

<figure><img src="https://3029946802-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FybPdpmLltPkzGFvz7m8A%2Fuploads%2Fgit-blob-6860795b96576bd7a968a477389565bb637210ba%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

## Highlighting

For vector sources, features that are clicked or hovered over will be highlighted in a distinct style, provided the source includes a column named `geoid` (serving as a unique identifier) or is of a spatial index type.

<figure><img src="https://3029946802-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FybPdpmLltPkzGFvz7m8A%2Fuploads%2Fgit-blob-2533f8293b0f71ccc0b9716c900525ce97ddb1d8%2Fimage.png?alt=media" alt=""><figcaption><p>Highlighting applied on inspected feature</p></figcaption></figure>

{% hint style="info" %}
Highlighting features for interactions are not available for raster layers.
{% endhint %}

## Interaction styles

Interactions can be displayed in two formats:

* **Pop-up windows**: Click and hoover-type interactions can be styled in various themes, such as light, dark ,etc.
* **Info panel**: Click-type interactions can also appears in the right-side panel with a default style.

<figure><img src="https://3029946802-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FybPdpmLltPkzGFvz7m8A%2Fuploads%2Fgit-blob-af814bfbc15d18d90b87b3bfac44b79d49358d9b%2Fimage.png?alt=media" alt=""><figcaption><p>Click-type interaction displayed as info panel</p></figcaption></figure>

## Configuring properties

Interactions can be customized either manually or through custom HTML code, with support for properties in vector layers and both properties and custom expressions in raster layers:

* **Adding Properties Manually**: For vector layers, users can set labels and customize formats for their properties. For raster layers, users can configure bands (properties) and also define *custom expressions* to enhance data visualization and analysis.

<figure><img src="https://3029946802-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FybPdpmLltPkzGFvz7m8A%2Fuploads%2Fgit-blob-10fa6ecad7f1b184158e4b3c5ae2e7cacee7184a%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

* **Using HTML Custom Code**: This method offers flexibility for both vector and raster layers. While vector layers allow users to design tailored interaction layouts using properties, raster layers support both properties and custom expressions for advanced configurations.

<figure><img src="https://3029946802-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FybPdpmLltPkzGFvz7m8A%2Fuploads%2Fgit-blob-a3f5c60a9c30f293865d371a93a78a08c46dca24%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

Interactions make it easy to explore and understand your map data by showing details about features. You can use pop-ups, which appear next to a selected or hovered feature, or info panels, which display detailed information on the right side of the map.

<figure><img src="https://3029946802-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FybPdpmLltPkzGFvz7m8A%2Fuploads%2Fgit-blob-494974d624702787576ab7f5a8f0e783108b5a29%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

## Types of Interactions

There are two primary types of interactions available:

1. **Click Interactions**: Retrieve information when you click on a feature in the map.
2. **Hover Interactions**: Display information when you hover over a feature in the map.

### Click-type interactions

**Non-aggregated layers**

* **How it works**: Information is retrieved directly from the server when you click on points, lines, or polygons.
* **Highlighting**: Features are automatically highlighted when clicked.

**Aggregated layers**

* **How it works**: Information is calculated on your computer for aggregated data (e.g., spatial indexes, cluster, etc.).
* **Aggregation operation**: You’ll need to specify how data is aggregated (e.g., totals, averages).

#### Navigating stacked and overlapping features

When you click a location where multiple features in a layer share the same space - overlapping polygons, overlapping lines, or multiple records sharing the same geometry (for example, repeated features or time-series rows at the same address) - the popup and the info panel display pagination controls so you can step through every feature at that location.

Use the previous and next arrows to move across each feature. A counter indicates your position (for example, "2 of 7"). As you paginate, the highlight on the map updates to show the feature currently inspected.

Pagination is available in both **pop-up** and **info panel** display modes.

<figure><img src="https://3029946802-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FybPdpmLltPkzGFvz7m8A%2Fuploads%2FNxB8l42Pe1SBMRaZ7JK1%2Fimage.png?alt=media&#x26;token=de4e3db0-ebcf-4052-adfa-e96c5b72fbad" alt=""><figcaption></figcaption></figure>

### **Hover-type Interactions**

**Non-aggregated layers**

* **How it works**: Information is retrieved on your computer for individual points, lines, or polygons when you hover over them.
* **Highlighting**: Requires a unique identifier column named `geoid`to enable highlighting.
* **Limitations**:
  * Up to 5 columns of information can be displayed.
  * Column character values are limited to 150.

**Aggregated layers**

* **How it works**: Information is calculated on your computer for grouped data when you hover over it.
* **Aggregation operation**: You’ll need to specify how data is aggregated (e.g., totals, averages).

{% hint style="info" %}
Connections to Redshift clusters only support the aggregation of **categorical properties** by **any value** for styling and interactions.
{% endhint %}

<figure><img src="https://3029946802-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FybPdpmLltPkzGFvz7m8A%2Fuploads%2Fgit-blob-3041b5bf0e4c53290ae8fc743bc651d4efc73c69%2FClick%20Type%20Interactions.gif?alt=media" alt=""><figcaption></figcaption></figure>

## Customizing interaction interface

You can use the menu to choose between a **pop-up window** (displayed next to the feature on the map) or an **info panel** (added to the right-side panel).

You can add attributes by including them as a list or customize pop-ups to meet your specific requirements using **HTML**. With HTML customization, you can add images, modify styles, and more to create tailored user experiences.

<figure><img src="https://3029946802-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FybPdpmLltPkzGFvz7m8A%2Fuploads%2Fgit-blob-76ffc76a0c2c21df5154b2c9ba42e19afe339467%2FCustomUI.gif?alt=media" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.carto.com/carto-user-manual/maps/interactions.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
