# 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="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FoWSe2ZTSlhp5XtnoOwsw%2F2024-05-28_20-19-59%20(1).gif?alt=media&#x26;token=82d53307-a26c-4761-b958-6dd981dc28b0" 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="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F5aMWFzJhbAu3rGL7UNKp%2F2024-05-28_20-13-44.png?alt=media&#x26;token=36ef5275-afe2-4788-a1ea-5e40166fe9c6" 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="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FiVmuxP4MrEHxzbhZAfYZ%2F2024-05-28_20-13-442.png?alt=media&#x26;token=86b2f772-adc0-4574-91c3-3103e4a7db1c" 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="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F7Gn1wW4kpmaBd7EMNFKm%2F2024-05-28_20-15-50.png?alt=media&#x26;token=13e2ec7c-f7b5-421b-b865-e8f00358ae0c" 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