# Linking Data Table and Map for Dynamic Locations

## Overview

This guide explains how to connect an Avonni Data Table and an Avonni Map component in your Experience Cloud site to create a dynamic, interactive display. By linking the two components, selecting an account in the Data Table updates the Map to show related locations, enhancing user engagement.

### Benefits

Linking these components allows your site to respond to user selections in real time, providing a focused and intuitive way to explore account locations without manual refreshes.

<figure><img src="/files/5GoxgjXaD5TBXKQJ4Gxp" alt=""><figcaption></figcaption></figure>

## Setting Up the Integration

### **Configuring the Data Table**

{% stepper %}
{% step %}

#### Add the Data Table Component

* Place an Avonni Data Table component on your Experience Cloud page to display account information.
* *Why this?* The Data Table serves as the starting point, showing account details for user selection
  {% endstep %}

{% step %}

#### Name the Data Table

* In the Data Table’s Properties Panel, set the **API Name** to `accountsDatatable`.
* *Why this?* The API name acts as a unique identifier, allowing other components (like the Map) to recognize and react to it.

<figure><img src="/files/PinJMLA18HzbyLw5XzTv" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Limit to One Selection

* In the Data Table’s properties, find the **Max Row Selection** setting and set it to `1.`
* *Why this?* Limiting to one row ensures the Map displays locations for a single account, keeping the experience clear and focused.

<figure><img src="/files/MBhEU9FkgeeKHUcQO0YW" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

### Configuring the Avonni Map

{% stepper %}
{% step %}

#### Add the Map Component

* Place an Avonni Map component on the same page (e.g., name it `relatedLocationsMap`).
* *Why this?* The Map will display location data based on the selected account.
  {% endstep %}

{% step %}

#### Set the Data Source

* In the Map’s Properties Panel, go to the **Data Source** section.
* Select **Query Data Source** and choose the **Account** object (or the object with location data).
* *Why this?* The query fetches location data dynamically from Salesforce
  {% endstep %}

{% step %}

#### Filter the Results

* Add a filter condition in the query settings:
* Why this? This filter ensures the Map shows only locations linked to the account selected in the Data Table, using the selected record’s ID

<figure><img src="/files/zO2CY2y7uzm7jPnjCUgq" alt="" width="563"><figcaption></figcaption></figure>

| Field         | Operator | Value                                     |
| ------------- | -------- | ----------------------------------------- |
| Account ID    | Equals   | `{{accountsDatatable.selectedRecord.Id}}` |
| {% endstep %} |          |                                           |

{% step %}

#### Map the Fields

* Configure the Map to display location markers by mapping fields (e.g., set `Latitude` and `Longitude` fields from the Account object or a related object).
* *Why this?* Proper field mapping tells the Map where to place markers based on the queried data.
  {% endstep %}
  {% endstepper %}

## Outcome

When a user selects an account in the Data Table, the Map automatically updates to show only the locations associated with that account. This creates a seamless, interactive experience, allowing visitors to explore data efficiently.

## Troubleshooting Common Issues

* **Map Not Updating:** Ensure the accountsDatatable API name matches exactly and that Max Row Selection is set to 1. Check the filter syntax ({{accountsDatatable.selectedRecord.Id}}).
* **No Locations Displayed:** Verify the Account object or related object has latitude and longitude fields, and confirm the query returns data.
* **Performance Issues:** Simplify the query or reduce the number of records if the Map loads slowly.
* **If Issues Persist:** Contact our support team at <support@avonni.com> for assistance


---

# 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.avonnicomponents.com/experience-cloud/tutorials/reactive-components/linking-data-table-and-map-for-dynamic-locations.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.