# AX - Map

## Overview

**AX - Map** is an Experience Cloud component that displays Salesforce records as interactive location markers on Experience Sites pages.

Use it to show portal users locations based on address fields or latitude/longitude coordinates—like nearby service locations, customer sites, store finder results, or event venues. Users can click markers to see record details and navigate to records. Pull location data from any standard or custom object in Experience Builder.

Perfect for store locators, service territory maps, event location finders, customer proximity views, or anywhere portal users need to visualize geographic data.

{% hint style="success" %}
The Avonni Map is a [Reactive Data Component](https://docs.avonnicomponents.com/experience-cloud/getting-started/reactive-components)
{% endhint %}

***

## Getting Started

Use this simple tutorial to learn the basics of the Map component and start building your use cases.

{% @arcade/embed flowId="ZiiaXHHeJ3PWe6UcgYBN" url="<https://app.arcade.software/share/ZiiaXHHeJ3PWe6UcgYBN>" %}

***

## Tutorials

| Name                                                                                                                                                                                   | Description                                                    |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
| [**Set up the map to show record details information**](https://docs.avonnicomponents.com/experience-cloud/tutorials/components/map/set-up-the-map-to-show-record-details-information) | Learn to display records on Experience Cloud using Avonni Map. |

***

## Configuring the Map

Understanding the configuration process, particularly the Data Source and Data Mappings sections, is crucial to using this component effectively.

### Data Source Configuration

The Data Source section is where you connect the Avonni Map with your Salesforce data. You have two options.

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FcxKsH0r2uGFwHkcF9gfD%2F2023-12-10_22-25-09.png?alt=media&#x26;token=e996b746-052d-47a4-9643-bd7333c51e9d" alt=""><figcaption></figcaption></figure>

| Data Source Type       | Description                                                     | Use Case                                           |
| ---------------------- | --------------------------------------------------------------- | -------------------------------------------------- |
| **Manual Data Source** | Manually input data into the data table.                        | Ideal for non-dynamic data, testing, and demos.    |
| **Query**              | Create a query to auto-populate the table with Salesforce data. | Suited for dynamic, real-time, and large datasets. |

### Data Mappings Configuration

In the Data Mappings section, you can activate your Map component by specifying how the fields should be mapped. This involves aligning fields, such as location coordinates from your Data Source configuration, with the relevant map attributes.

<details>

<summary>Data Model Sharing with Avonni Map</summary>

**Adherence to Salesforce Data Sharing Rules:**

* **Respecting Org Settings:** Avonni Components fully comply with the existing data-sharing configurations and access settings of your Salesforce organization.
* **No Interference Policy:** These components do not alter or affect your pre-established data-sharing rules in any way.
* **Controlled Visibility and Access:** The ability to view and interact with records through Avonni Components is governed by your organization's defined sharing settings and user permissions

</details>

You must focus on the Location section to ensure your Data Mappings are set up correctly, especially when mapping locations. Here's why:

1. **Configuring Data Mappings**: To ensure the Map component displays the correct information, you must map Salesforce data fields to their corresponding location labels. For instance, you'll map a Salesforce field containing street addresses to the 'street' label in the Map component, city names to the 'city' label, and so on.
2. **Importance of Accuracy**: Accurate mappings are vital. The Map component might display incorrect information if the wrong Salesforce field is mapped to a location label. For example, if the 'city' field is incorrectly mapped to the 'postal code' label, the map might show a location in an entirely different city or even a different country.

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FTUmSPkrYMTVIgKitJ4hY%2F2023-12-10_21-19-47.png?alt=media&#x26;token=3bd85485-77ac-4e05-aea7-e6532ba739f0" alt="" width="375"><figcaption></figcaption></figure>

#### Filters

The Filters attribute lets you choose specific fields to filter and refine the markers displayed in the map component.

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FIMKNOfl9gBmLgj4J96kr%2F2023-12-10_22-22-43.png?alt=media&#x26;token=8a50bace-4e25-4bbe-b2a1-a41f52f7449b" alt="" width="375"><figcaption></figcaption></figure>

### Other Settings

#### List view

This function displays or hides the list of locations. Valid values are visible, hidden, or auto. This value defaults to auto, which shows the list only when multiple markers are present.

#### Zoom Level

In the map component, you can adjust the zoom level to focus on different areas, from the world to individual buildings. If you don't set a zoom level, the map will automatically adjust to show all the markers you've placed on it.

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FlKiTOGlm9meh72iI6oyC%2F2023-12-10_22-19-25.png?alt=media&#x26;token=cbad8da6-4d6d-410f-9c74-35363919319f" alt="" width="375"><figcaption></figcaption></figure>

The Properties panel has an option to set the zoom manually. The zoom levels range from 1 to 22 on desktop browsers and 1 to 20 on mobile devices.

Here's a quick guide to what each zoom level generally shows:

* Level 1: The entire world
* Level 5: A continent or large landmass
* Level 10: A city
* Level 15: Street-level details
* Level 20: Individual buildings

Refer to the Google Maps API documentation on [Zoom Levels](https://developers.google.com/maps/documentation/javascript/overview#zoom-levels) for more in-depth information.

#### Map Component UI behavior

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FoyqBuczzWYU6mkmxUXyu%2F2023-12-10_22-30-28.png?alt=media&#x26;token=1c1bc9b6-befa-4dd5-bd04-d9e4a0d14d51" alt="" width="375"><figcaption></figcaption></figure>

These settings allow you to control how users interact with the map, providing a more streamlined and focused user experience. From disabling specific zoom and drag functions to adding valuable features like a search bar or a footer, each setting has a distinct purpose:

<table><thead><tr><th width="255">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Disable Dragging</strong></td><td>Prevents moving the map through click-and-drag, keeping it in a fixed position.</td></tr><tr><td><strong>Hide Zoom Controls</strong></td><td>Removes the zoom in/out controls, maintaining a consistent zoom level on the map.</td></tr><tr><td><strong>Disable Scrollwheel Zooming</strong></td><td>Stops the map from zooming in or out with the mouse wheel, ensuring a steady zoom level.</td></tr><tr><td><strong>Disable Double Click Zoom</strong></td><td>Disables zooming in when double-clicking on the map, maintaining a fixed zoom level.</td></tr><tr><td><strong>Disable Default UI</strong></td><td>Removes standard map interface elements like street view toggle, providing a cleaner map display.</td></tr><tr><td><strong>Show Footer</strong></td><td>Displays a footer on the map for additional information such as map data sources or a legend.</td></tr><tr><td><strong>Searchable</strong></td><td>Adds a search bar to the map, enabling users to find and zoom in on specific locations or points easily.</td></tr></tbody></table>

#### Map center location

When multiple markers are on the map, it will automatically focus on a central point near the middle of all markers. It calculates this point based on their locations.

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fl62QUoutkdckePeDY727%2F2023-12-10_22-20-19.png?alt=media&#x26;token=8f5c5612-4820-4ef9-a112-ae3b81d91be0" alt="" width="375"><figcaption></figcaption></figure>

***

## Interactions

For the Map component, it features an "on Select" interaction. This function lets you specify what action should occur when users click on a map marker.

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F4wdNTTVPjaOZSvfAS2WT%2F2023-12-10_21-29-59.png?alt=media&#x26;token=7860fbe0-0489-4457-808e-616ec8a9f1f8" alt="" width="375"><figcaption></figcaption></figure>

<table><thead><tr><th width="228">Interaction Type</th><th>Description</th></tr></thead><tbody><tr><td><a href="../properties-panel/interactions/show-toast"><strong>Show Toast</strong></a></td><td>Displays a brief pop-up notification on the screen, providing quick feedback or information after clicking a map marker.</td></tr><tr><td><a href="../properties-panel/interactions/navigate"><strong>Navigate</strong></a></td><td>Redirects the user to a different page in your site or URL, guiding them to more detailed information about the clicked location.</td></tr><tr><td><a href="../properties-panel/interactions/open-alert-modal"><strong>Open Alert Modal</strong></a></td><td>Opens a modal window with an alert message, presenting important information or warnings about the selected location.</td></tr><tr><td><a href="../properties-panel/interactions/open-confirm"><strong>Open Confirm</strong></a></td><td>Triggers a confirmation dialog box, used for actions that require additional user confirmation, like event attendance.</td></tr><tr><td><a href="../properties-panel/interactions/open-flow-dialog"><strong>Open Flow Dialog</strong></a></td><td>Opens a dialog that runs a Salesforce Flow, initiating workflows or processes related to the clicked location.</td></tr></tbody></table>

***

## Settings

{% tabs %}
{% tab title="🎛️ Properties" %}

| Name                            | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **List Title**                  | Set a title for your map list.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| **List View**                   | <p>This feature is particularly useful for users to see a detailed list of the places or items on the map.</p><ul><li><strong>Auto</strong>: Automatically determines the best view.</li><li><strong>Visible</strong>: Keeps the list view always visible.</li><li><strong>Hidden</strong>: Hides the list view.</li></ul>                                                                                                                                                                                            |
| **Zoom Level**                  | <p>The zoom levels range from 1 to 22 on desktop browsers and 1 to 20 on mobile devices.</p><p>Here's a quick guide to what each zoom level generally shows:</p><ul><li>Level 1: The entire world</li><li>Level 5: A continent or large landmass</li><li>Level 10: A city</li><li>Level 15: Street-level details</li><li>Level 20: Individual buildings</li></ul>                                                                                                                                                     |
| **Disable Dragging**            | Prevent users from dragging the map view.                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| **Hide Zoom Controls**          | Remove the zoom in/out controls from the map                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| **Disable Scrollwheel Zooming** | Turn off zooming using the mouse scroll wheel                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| **Disable Double Click**        | Prevent double-clicking from zooming in on the map                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| **Disable Default UI**          | Remove the standard Google Maps interface for a cleaner look                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| **Show Footer**                 | Add a footer section to the map component                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| **Searchable**                  | Enable a search function within the map                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| **Data Source**                 | <ul><li><strong>Manual</strong>: Add map markers manually.</li><li><strong>Query</strong>: Use Salesforce data with data mapping for automatic marker placement</li></ul>                                                                                                                                                                                                                                                                                                                                             |
| **Map Center Location**         | Specify the initial central point of the map                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| **Filtering Options**           | Set up filters for the map, displayed as a popover                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| **Search Engine Options**       | <ul><li><strong>Placeholder</strong>: Text displayed in the search bar before input.</li><li><strong>Position</strong>: Choose from left, right, center, or fill for the position of the search bar</li></ul>                                                                                                                                                                                                                                                                                                         |
| **Size**                        | <ul><li><strong>Width & Height</strong>: Specify the dimensions of the map component.</li></ul><p>"<strong><code>Overflow</code></strong>" refers to how content that exceeds the boundaries of its container is handled or displayed. When the content inside a layout component is too large to fit within the assigned dimensions (height and width), the overflow setting determines what happens to the excess content.</p><ul><li><strong>Overflow</strong>: Control how overflow content is managed.</li></ul> |
| {% endtab %}                    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |

{% tab title="🎨 Styling" %}

{% endtab %}
{% endtabs %}

***

## Use Case Examples

### Example 1 : Reactive Account Map

{% @arcade/embed flowId="Dxon9206UTTMphdamjrL" url="<https://app.arcade.software/share/Dxon9206UTTMphdamjrL>" %}

Bring your account data to life with an interactive map that responds instantly to user selections. By connecting the Map component to your Accounts Data Table, you can display precise billing locations the moment a rep clicks on any account record.

***

#### **What You'll Achieve**

* **Context-aware mapping:** The map automatically updates to display the selected account's billing location based on the rep's choice in the data table
* **Streamlined account navigation:** Reps can visually locate accounts without ever leaving the page

***

#### **Before You Begin**

* **Accounts Data Table component:** Ensure an Accounts Data Table component is already placed on the page with the API name `AccountsTable`

***

#### **How to Set It Up**

{% stepper %}
{% step %}

#### **Add the Map component**

* Drag the AX – Map component onto the Experience Builder canvas
  {% endstep %}

{% step %}

#### **Configure the component**

* Set the API name to `MapAccount`
* Set the type to `Leaflet`
  {% endstep %}

{% step %}

#### **Set a data source**

* Create a query on the Account object
* Apply the following filter: Id = `{{AccountsTable.selectedRecord.Id}}`
  {% endstep %}

{% step %}

#### **Set data mappings**

* Set Title to `Account Name`
* Under Location, set Latitude to `Billing Latitude` and Longitude to `Billing Longitude`
  {% endstep %}

{% step %}

#### **Preview your work**

* Launch the preview, select a record in the Accounts Data Table, and confirm the map updates to reflect the corresponding billing location
  {% endstep %}
  {% endstepper %}

### Example 2 : Customer Order Tracking

{% @arcade/embed flowId="tiVuRRBHNCbcUb5qoGQL" url="<https://app.arcade.software/share/tiVuRRBHNCbcUb5qoGQL>" %}

Give your customers real-time visibility into where their orders are. By mapping geolocation data directly from the Order object, you can build a transparent, intuitive tracking experience that keeps customers informed every step of the way.

***

#### **What You'll Achieve**

* **Live order visibility:** Customers can see the current location of their order plotted on an interactive map
* **Trust through transparency:** A clear, visual tracking experience reduces support inquiries and improves customer satisfaction

***

#### **Before You Begin**

* **Custom Geolocation field:** Ensure a custom Geolocation field has been created on the Order object to store real-time tracking coordinates

***

#### **How to Set It Up**

{% stepper %}
{% step %}

#### **Add the Map component**

* Drag the AX – Map component onto the Experience Builder canvas
  {% endstep %}

{% step %}

#### **Configure the component**

* Set the API name to `TrackingMap`
* Set the type to `Leaflet Map`
  {% endstep %}

{% step %}

#### **Set a data source**

* Create a query on the Order object
  {% endstep %}

{% step %}

#### **Set data mappings**

* Set Title to `Order Number`
* Set Type to `Pin`
* Under Location, set Latitude to `Tracking Geolocation (Latitude)` and Longitude to `Tracking Geolocation (Longitude)`
  {% endstep %}

{% step %}

#### **Preview your work**

* Launch the preview and verify that each order appears as a pin on the map at its correct tracked location
  {% endstep %}
  {% endstepper %}