> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-map.md).

# 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](/experience-cloud/getting-started/reactive-components.md)
{% endhint %}

{% hint style="info" %}
**See it in a real project**

[Site survey inside a flow](https://docs.avonnicomponents.com/projects/use-cases/inside-a-flow/site-survey-inside-a-flow): A roof traced on a live map inside a flow, saved as a file.
{% endhint %}

## Getting Started

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

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

## Configuration

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

### Data Source

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%2Fgit-blob-bbf1f2f063b341c369b9068021f67942974a6f9a%2F2023-12-10_22-25-09.png?alt=media" alt=""><figcaption></figcaption></figure>

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

### Data Mapping

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%2Fgit-blob-7848d483a66f625b0cbf6c26b57f58080cd18808%2F2023-12-10_21-19-47.png?alt=media" 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%2Fgit-blob-3ac8b3a621aefba55ff2347011210e7ecc213ca0%2F2023-12-10_22-22-43.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

#### Per-Marker Settings

With a **Manual** data source, each marker row you add exposes its own fields:

* **Title** and **Description** label the marker and its popup.
* **Location** places the marker, using either address fields (Street, City, State, Postal Code, Country) or **Latitude**/**Longitude**.
* **Type** sets the marker's shape — the same options as Center Location (`default`, `Circle`, `Rectangle`, `Polygon`, `Pin`, `CustomIcon`).
* Shape markers add color controls — **Fill Color**/**Fill Opacity** and **Stroke Color**/**Stroke Opacity**/**Stroke Weight** — plus shape geometry: **Radius** (circles), **Bounds** (rectangles), or **Paths** (polygons).
* **Icon** sets a custom marker icon, and an **On Select** interaction can fire when the marker is clicked.

### Map Settings

**Type** selects the map engine — **Google Maps** (default) or **Leaflet**. Choose **Google Maps** for the familiar Salesforce Lightning map — the simplest option, but it caps the display at 1,000 markers. Choose **Leaflet** for larger datasets (no marker cap), custom map tiles, or advanced shape markers (circles, polygons, rectangles).

**List Title** sets a title for the list of locations, and **List View** controls whether that list appears: `auto` (shown only when multiple markers are present — the default), `visible` (always shown), or `hidden`.

**Zoom Level** sets the initial zoom. If left unset, the map automatically adjusts 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%2Fgit-blob-e8077d188c49827b414011b0310d7a20d9d0dd8f%2F2023-12-10_22-19-25.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

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 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.

**Hide Zoom Controls** removes the zoom in/out controls, and **Zoom Controls Position** sets where those controls appear on the map.

The following toggles control how users interact with the map, for a more streamlined, focused experience:

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-4f292b11b9f0c9fc47242ce6689c7e79f49a20e1%2F2023-12-10_22-30-28.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

**Disable Dragging** prevents moving the map by click-and-drag. **Disable Scrollwheel Zooming** stops mouse-wheel zoom. **Disable Double Click Zoom** disables zoom on double-click. **Disable Default UI** removes standard map interface elements (like the street-view toggle) for a cleaner display.

**Draggable Markers** lets users drag markers to reposition them, and **Disable Auto Pan Markers** stops the map from automatically panning to keep markers in view.

**Show Footer** displays a footer on the map (useful for data sources or a legend), and **Show Search** adds a search bar so users can find and zoom to a specific location.

**Header Actions** add action buttons to the map's header.

### Center Location

By default, when multiple markers are on the map it focuses on a central point computed from their locations. The **Center Location** setting overrides this:

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-b61b45f81768cf3581dd9e1e4cf7fc3e6309af01%2F2023-12-10_22-20-19.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

* **Latitude** and **Longitude** set the exact center coordinates — these take priority over the address fields.
* **Street**, **City**, **State**, **Postal Code**, and **Country** center the map by address when coordinates aren't provided.
* **Display as Marker** shows the center point as its own marker on the map.
* **Marker Type** sets that marker's shape — `default`, `Circle`, `Rectangle`, `Polygon`, `Pin`, or `CustomIcon` — with shape-specific **Marker Type Attributes** (such as radius, bounds, or path).

### Clustering

**Cluster Attributes** group nearby markers so dense maps stay readable:

* **Cluster** turns clustering on.
* **Max Cluster Radius** sets how far, in pixels, a cluster reaches from its central marker (defaults to 80).
* **Disable Clustering at Zoom** stops clustering at and below a chosen zoom level.
* **Show Coverage on Hover** outlines the bounds of a cluster's markers when the user hovers over it.

### Filtering & Search

**Filters** (set in Data Mappings, above) choose which fields users can filter markers on, and **Filter Menu Attributes** control the filter menu — its **type** (`horizontal`, `popover`, or `panel`), the picklist filter sort order, whether empty picklist values are hidden, and whether filter values cascade.

**Search Engine Attributes** configure the search bar (requires **Show Search**): its **Placeholder** text and **Position** (`left`, `right`, `center`, or `fill`).

## 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%2Fgit-blob-c87ac55cf141423c489466dbaf1948f458789c70%2F2023-12-10_21-29-59.png?alt=media" 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="/experience-cloud/properties-panel/interactions/show-toast.md"><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="/experience-cloud/properties-panel/interactions/navigate.md"><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="/experience-cloud/properties-panel/interactions/open-alert-modal.md"><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="/experience-cloud/properties-panel/interactions/open-confirm.md"><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="/experience-cloud/properties-panel/interactions/open-flow-dialog.md"><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>

## Styling

{% tabs %}
{% tab title="Size" %}
Controls the map's dimensions (Width / Height / Overflow).
{% endtab %}

{% tab title="Margin" %}
Controls the outer spacing around the map.
{% endtab %}

{% tab title="Padding" %}
Controls the inner spacing of the map.
{% endtab %}
{% endtabs %}

## Use Cases

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

### Example 1 : Reactive Account Map

{% @arcade/embed url="<https://app.arcade.software/share/Dxon9206UTTMphdamjrL>" flowId="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 url="<https://app.arcade.software/share/tiVuRRBHNCbcUb5qoGQL>" flowId="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 %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-map.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.