> 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/dynamic-components/components/map.md).

# Map

The Avonni Map component shows Salesforce records as markers, shapes or custom icons on Google Maps or Leaflet, with search, filters, clustering, drawing, route planning and header actions.

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

[Reactive Map and Data Table](/dynamic-components/tutorials/reactive-components/maps-and-geolocation/reactive-map-and-data-table.md): select an Account in a Data Table, and the Map shows where it is.
{% endhint %}

## Configuration

Select the Map on the canvas to open the **Edit Map** panel (**Properties**, **Interactions**, **Style**). The sections below follow the Properties tab; its groups depend on the map **Type**.

### Data Source

Where the map gets its locations.

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Manual</strong></td><td>Enter data directly into the component configuration.</td><td></td></tr><tr><td><strong>Variable</strong></td><td>This is useful for data that changes based on user interactions or other component logic.</td><td></td></tr><tr><td><strong>Query</strong></td><td>This is the most common option for displaying Salesforce records.</td><td></td></tr></tbody></table>

### Data Mapping

With a Query or Variable source, map your Salesforce fields to the marker attributes.

{% tabs %}
{% tab title="Google Maps" %}
**Location**: address fields, or **Latitude** and **Longitude**.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fgit-blob-68daebafb0b8671d5cfb37455aedd8539fe18370%2F2025-06-16_11-33-05.png?alt=media" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Leaflet" %}
**Location**: **Latitude** and **Longitude**, no address fields, plus an optional **City** for the route stop list and route file. **Image Source**, **Infos** (links: **Label**, **URL**) and **Fields** fill the popup.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FKXDNBAJ8htF03DGbx1Qn%2Fmap-builder-data-mapping.png?alt=media" alt="Data Mappings section of the Edit Map panel for a Leaflet map that reads Account records from a query. Title maps to Account Name, Description to the Industry field, Type is Default, Location maps Latitude, Longitude and City to the billing fields, Image Source maps to Photo URL, Infos holds one item named Visit website, Fields lists Industry and Employees, and Value maps to Id." width="320"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

**Type** sets the marker shape, the styling fields its fill color, stroke and scale. Map them to formula fields to color-code markers, for example Accounts by industry.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fgit-blob-556c0ecf4fbc88af60648bef70b67644846bafb7%2F2025-06-16_11-40-16.png?alt=media" alt="" width="162"><figcaption></figcaption></figure>

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FbnSOfwBjdvWbq6YKBzbO%2Fmap-marker-types.png?alt=media" alt="A Leaflet map of the west side of Chicago with six markers in two rows. Top row, left to right: a red pin, a blue pin and a blue circle. Bottom row: a blue rectangle, a blue pentagon and an orange star."><figcaption><p>Top: Default, Pin, Circle. Bottom: Rectangle, Polygon, Custom Icon (an SVG star).</p></figcaption></figure>

| Type            | Draws                     | Needs                                    |
| --------------- | ------------------------- | ---------------------------------------- |
| **Default**     | Standard map pin          |                                          |
| **Circle**      | Circular area             | **Radius**, in meters                    |
| **Rectangle**   | Rectangular area          | **Bounds**: north, south, east, west     |
| **Polygon**     | Multi-sided shape         | **Paths**: latitude and longitude points |
| **Pin**         | Classic pin, icon styling |                                          |
| **Custom Icon** | Fully custom icon         | SVG path                                 |

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fgit-blob-7148b6dd76c253dbd245a44db0af5e56cbd9e61a%2F2025-06-16_11-41-34.png?alt=media" alt="" width="158"><figcaption></figcaption></figure>

| Mapping           | What it does                                                             |
| ----------------- | ------------------------------------------------------------------------ |
| **Filters**       | Fields offered as filters. Only these appear in the filter menu.         |
| **Search Fields** | Mapped fields the search covers. Default: every searchable mapped field. |

### Content

#### Type

**Google Maps** (default) geocodes addresses: best under 100 markers. **Leaflet**, open source, handles thousands of markers and adds clustering, drawing, route planning and GeoJSON.

{% tabs %}
{% tab title="Google Maps" %}

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FBV7pHsGVCFPaudhnCPn9%2Fmap-type-google.png?alt=media" alt="Five Chicago customer sites on Google Maps: four red pins near the lakeshore, from Edgewater in the north to just southwest of the Loop, and a blue circle over Hyde Park. The Map and Satellite buttons sit at the top left, the Street View and zoom controls on the right."><figcaption><p>Shape markers, like this circle, work on Google Maps too.</p></figcaption></figure>
{% endtab %}

{% tab title="Leaflet" %}

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FRBqxlnlEGk1BR7uQRPei%2Fmap-type-leaflet.png?alt=media" alt="The same five Chicago customer sites on a Leaflet map with OpenStreetMap tiles: four red pins near the lakeshore and a blue circle over Hyde Park. The popup of the northern pin is open and reads Northwind Traders, Andersonville office. Zoom buttons sit at the bottom right."><figcaption><p>The same records on Leaflet, one popup open.</p></figcaption></figure>
{% endtab %}
{% endtabs %}

|                         | Google Maps                        | Leaflet                                      |
| ----------------------- | ---------------------------------- | -------------------------------------------- |
| **Marker position**     | Address, or latitude and longitude | Latitude and longitude only                  |
| **Map Center Location** | Coordinates or address             | Coordinates                                  |
| **Own groups**          | None                               | Marker Clustering, Draw, Route, Popup, Image |

{% hint style="info" %}
With Leaflet, add `https://tile.openstreetmap.org` to **Trusted Sites** in your Salesforce org, or the map tiles do not load.
{% endhint %}

#### Display and Controls

| Setting                                                         | What it does                                                                                       | Only on     |
| --------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | ----------- |
| **List View**                                                   | List beside the map: **Visible**, **Hidden** or **Auto** (default, shown with several markers).    | Google Maps |
| **List Title**                                                  | Heading above the list.                                                                            | Google Maps |
| **Zoom Level**                                                  | Initial zoom, 0 (world) to 23 (building).                                                          |             |
| **Disable Dragging**                                            | No panning.                                                                                        |             |
| **Disable Scroll Wheel Zooming**, **Disable Double Click Zoom** | No zoom by scroll wheel, or by double-click. Only while dragging is allowed.                       |             |
| **Hide Zoom Controls**                                          | No zoom buttons.                                                                                   |             |
| **Disable Default UI**                                          | No Map and Satellite buttons.                                                                      | Google Maps |
| **Show Footer**                                                 | Footer bar below the map.                                                                          | Google Maps |
| **Zoom Controls Position**                                      | Bottom Right (default), Bottom Left, Top Right, Top Left.                                          | Leaflet     |
| **Tile Layer**                                                  | Custom tile URL template, replacing OpenStreetMap.                                                 | Leaflet     |
| **Selected Marker Value**                                       | Marker pre-selected on load, by value, for example a list's selected record.                       |             |
| **Enable Multi-Select Markers**                                 | Ctrl+click (Cmd+click on a Mac) selects several markers, returned in **Selected Markers sObject**. | Leaflet     |

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FxCsEripTUnvFKlzVFWTI%2Fmap-list-view.png?alt=media" alt="A Google map of Chicago with five red pins and, on its right, a list titled Customer Sites (5). Each entry has a green location icon, the site name as a link and its address: Atlas Logistics, 300 W Adams St, Chicago, IL; Blue Finch Retail, 2200 N Clark St; Northwind Traders, 5300 N Clark St; Redwood Supply Co, 1800 S Halsted St; Juniper Health, 1500 E 53rd St."><figcaption><p>List View: each entry shows the marker title and address.</p></figcaption></figure>

### Map Center Location

Where the map centers on load. Bind any field to a Variable resource to move the center as the end user works on the page.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fgit-blob-3ca7e1d91cfbd899a88d9ce4ae0cd294990ddf26%2F2025-06-16_11-45-25.png?alt=media" alt=""><figcaption></figcaption></figure>

| Setting                                                       | What it does                                                     | Only on     |
| ------------------------------------------------------------- | ---------------------------------------------------------------- | ----------- |
| **Latitude**, **Longitude**                                   | Decimal coordinates.                                             |             |
| **Street**, **City**, **State**, **Postal Code**, **Country** | Center geocoded from an address.                                 | Google Maps |
| **Display As Marker**                                         | Center marker: one of the six marker types, with its attributes. |             |

### Marker Clustering *(Leaflet only)*

Groups nearby markers into numbered clusters, so large datasets stay fast and readable.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FzgsTbiH9lgDGP6SQRCbI%2Fmap-clustering.png?alt=media" alt="A Leaflet map of the Chicago area with forty customer sites grouped into clusters. Green circles read 4, 6, 5, 5 and 2, a yellow circle over downtown Chicago reads 17, and one site near Naperville, with no neighbour close enough, shows as a plain marker."><figcaption><p>Each cluster counts its markers; a lone marker stays plain.</p></figcaption></figure>

| Setting                           | What it does                                                  |
| --------------------------------- | ------------------------------------------------------------- |
| **Enable Marker Clustering**      | Clustering on.                                                |
| **Coverage On Hover**             | Hovering a cluster outlines its markers' area.                |
| **Max Cluster Radius**            | Max distance, in pixels, from the central marker. Default 80. |
| **Disable Clustering Zoom Level** | No clustering at this zoom and below.                         |

### Draw *(Leaflet only)*

End users draw shapes, a sales territory for example, and can save them as a Salesforce file.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Ffk2Rk2VjOEZMzIkn7ur5%2Fmap-draw.png?alt=media" alt="A Leaflet map titled Sales territories with five red markers in Chicago. A polygon outlined and filled in blue covers the north side and two of the markers. At the bottom right, the drawing toolbar shows Line, Polygon, Circle and Marker buttons, then Edit and Delete, above the zoom buttons, and a Save button sits in the bottom right corner of the map."><figcaption><p>A territory loaded from GeoJSON, the toolbar and the Save button.</p></figcaption></figure>

| Setting                               | What it does                                                                                                            |
| ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| **Enable Draw**                       | Drawing toolbar on. Updates the **Draw GeoJSON Value** output.                                                          |
| **Draw GeoJSON Value**                | Shapes pre-loaded on the map (GeoJSON object or array). Hidden when saving as a file.                                   |
| **Toolbar**                           | Line, Polygon, Circle, Marker, Edit, Delete. Requires **Enable Draw**.                                                  |
| **Toolbar Position**                  | Bottom Right (default), Bottom Left, Top Right, Top Left.                                                               |
| **Save as Content Document**          | Saves the drawing as a Salesforce file (ContentDocument). Requires **Enable Draw**; the five settings below require it. |
| **Auto Save Content Document**        | Saves with no button click.                                                                                             |
| **Content Document Id**               | Existing file to update instead of a new one.                                                                           |
| **Content Document Title**            | File title. Default "Avonni Map Drawing Document".                                                                      |
| **Content Document Linked Entity Id** | Record the file is linked to.                                                                                           |
| **Save Button Label**                 | Manual save button. Default "Save".                                                                                     |

### Route *(Leaflet only)*

End users turn the map's markers into a multi-stop driving route, then open each stop in a navigation app or export the itinerary.

{% embed url="<https://www.youtube.com/watch?feature=youtu.be&v=Evnvxc4vYEc>" %}

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F3MVyQKBoX3uQ5mSU8U0o%2Frouting-route-panel.png?alt=media" alt="A map of Chicago with five numbered stops joined by a driving route. The Route panel on the right lists the five stops in order with an arrival time for each stop after the first, and shows the departure and arrival times, the total duration, and the Optimize and Clear actions."><figcaption><p>A calculated route, panel overlaid. With Mapbox, each stop shows its arrival time.</p></figcaption></figure>

{% hint style="info" %}
Routing is enabled once per package by an administrator, with your own routing provider API key. Until then, the **Route** group shows enablement guidance: see [Enable Map Routing](/dynamic-components/components/map/enable-map-routing.md).
{% endhint %}

#### Route Group Settings

The settings below **Show Route Panel** require it.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FnabYldp6ItKCwbVHULBD%2Fmap-builder-route.png?alt=media" alt="Edit Map panel in the Component Builder, Properties tab of a Leaflet map. Data Source, Content, Map Center Location, Marker Clustering and Draw are folded. The Route group is open: Show Route Panel on, Disable Multi-Stop Selection off, Position set to Right, Display Overlaid on the Map on, Opened by Default on. Header, Popup, Image, Filter and Search are folded below it." width="320"><figcaption></figcaption></figure>

| Setting                          | What it does                                                                                      |
| -------------------------------- | ------------------------------------------------------------------------------------------------- |
| **Show Route Panel**             | **Route** button (route icon) in the header actions, opening the Route panel.                     |
| **Disable Multi-Stop Selection** | No **Add Multiple Stops**: one marker at a time.                                                  |
| **Position**                     | **Right** (default) or **Left**.                                                                  |
| **Display Overlaid on the Map**  | Panel over the map, **Route** button on the map (in the header on a narrow map, such as a phone). |
| **Opened by Default**            | Panel open on load.                                                                               |

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FZN2PQgysl6p63das97iB%2Fmap-route-beside.png?alt=media" alt="A Leaflet map titled Customer visits with the Route panel as a column on its right, outside the map. In the header, the Route button is selected. Five numbered stops in Chicago are joined by straight lines in the order of the list, and the panel lists them under Starting point, with Settings and the Calculate route button below."><figcaption><p>Not overlaid: a column beside the map, toggled by the Route button. Straight lines until calculated.</p></figcaption></figure>

#### In the Route Panel

{% stepper %}
{% step %}

#### **Add stops**

Click a marker or its popup's **Add Stop** (**Remove Stop** undoes it), or draw a rectangle or lasso with **Add Multiple Stops**. Up to 25 stops; at the limit the panel says so.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F4LrIjWgO7DmiO0wTnjqF%2Fmap-route-multi-stop.png?alt=media" alt="Part of a Leaflet map with the Route panel open. At the top of the map, Add Multiple Stops has opened into two buttons, a rectangle tool, selected, and a lasso tool. Two stops, Atlas Logistics and Blue Finch Retail, are numbered 1 and 2 on the map and listed in the panel above Settings and Calculate route. Three markers not yet in the route are still red pins."><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### **Choose a starting point**

Any record on the map, or **My position** (the browser's location).
{% endstep %}

{% step %}

#### **Reorder or optimize**

Drag the stops into order, or click **Optimize** for the shortest drive; the first stop, or the starting point, stays first. **Undo**, **Redo** and **Clear** sit in the panel header.
{% endstep %}

{% step %}

#### **Calculate the route**

**Calculate route** draws the roads and each stop's distance and drive time from the previous one.
{% endstep %}

{% step %}

#### **Hand off or export**

Each stop's menu: **Remove**, **Google Maps**, **Waze**. Once calculated, the download button beside **Calculate route** saves a CSV.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FxQGSPUhhw4W1q20WQbxE%2Fmap-route-stop-menu.png?alt=media" alt="The Route panel after a five-stop route is calculated: 8:00 AM to 10:49 AM, 2 hr 49 min, then the Starting point search and the five stops with their arrival times. The menu of stop 2, Blue Finch Retail, is open on three actions: Remove, Google Maps and Waze. At the bottom, the Calculate route button is greyed out and a download button sits beside it." width="320"><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

#### Route Panel Settings

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F2ilJUygjcfImCpdanGBo%2Fmap-route-settings.png?alt=media" alt="The Route panel with its Settings section open. Lunch start 12:00 p.m., Lunch end 1:00 p.m., End of day 6:00 p.m., Visit duration (minutes) 30, Timing set to Leave at, Date Nov 14, 2026, Time 8:00 a.m., then three switches, Avoid ferries, Avoid highways and Avoid tolls, all off. The Calculate route button sits at the bottom of the panel." width="320"><figcaption><p>Leave at, with its Date and Time. The other values are defaults.</p></figcaption></figure>

| Setting                                                | What it does                                                                                                                                                                                      | Default                 |
| ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- |
| **Timing**                                             | **Leave now**, **Leave at**, **Arrive by**; the last two add **Date** and **Time**. Mapbox only (traffic).                                                                                        | Leave now. Time 8:00 AM |
| **Visit duration (minutes)**                           | Time at each stop, delaying the later ones; first and last stops excluded (ten stops, eight visits).                                                                                              | 30                      |
| **Lunch start**, **Lunch end**                         | A route under way at lunch start, driving or at a stop, pauses for the window and later stops shift. No break if it leaves after lunch starts. End after start, between departure and end of day. | 12:00 PM to 1:00 PM     |
| **End of day**                                         | Last time on the road. A later stop turns orange (marker, drive, number), flagged **Past end of day**. None is dropped.                                                                           | 6:00 PM                 |
| **Avoid ferries**, **Avoid highways**, **Avoid tolls** | Sent to the provider and the Google Maps links.                                                                                                                                                   | Off                     |

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FFl5k9nxeqQX6E8xCwTKl%2Fmap-route-end-of-day.png?alt=media" alt="A Leaflet map titled Customer visits with five numbered stops in Chicago and the calculated driving route. The Route panel on the right reads 11:00 AM to 3:08 PM, 4 hr 8 min, followed by a red note: This route finishes after the end of day. Remove a stop, or start earlier. Stops 1 to 4 are blue and show their arrival times. Stop 5, Juniper Health, is orange, arrives at 3:08 PM and is flagged Past end of day, and the last leg of the route, from stop 4 to stop 5, is drawn in orange."><figcaption><p>Past the end of day: orange stop and drive, and a note to remove a stop or start earlier.</p></figcaption></figure>

<details>

<summary>Optimize, arrival times, navigation and CSV export</summary>

**Optimize.** Mapbox orders the stops itself, unless an administrator turned that off in [Enable Map Routing](/dynamic-components/components/map/enable-map-routing.md). Other providers, routes over twelve stops, or the option off: ordered by proximity.

**Arrival times.** Mapbox only (traffic model): departure, arrival, total and per stop, visits and lunch included, so the total is the length of the day.

**Navigation is per stop.** A directions URL holds nine waypoints at most, three on mobile; one stop at a time has no ceiling and works on every device.

**CSV.** `route_<date>.csv`: Stop Number, Record Name, City (from the **City** mapping), Arrival Time (when the provider supplied it), Distance (km), Duration (min), Google Maps, Waze. Whether its link columns are tappable depends on the app: CSV has no hyperlink format.

</details>

### Header

A title bar above the map, with header actions.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F9HCUkcGApLS1RtXa8zal%2Fmap-header.png?alt=media" alt="The header of a Leaflet map: a green location icon as the avatar, the caption Plan the day&#x27;s route from the map above the title Customer visits, and on the right two action buttons, Log Visit and Share, followed by an open menu that holds a third action, Refresh. The top of the map, with two red markers, shows below."><figcaption><p>Visible Actions Buttons at 2: the third action moves into the menu.</p></figcaption></figure>

| Setting                               | What it does                                                                                                     |
| ------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
| **Title**                             | Header heading.                                                                                                  |
| **Caption**                           | Smaller label above the title.                                                                                   |
| **Avatar**                            | **Image** URL, **Fallback Icon Name** or **Initials**. Size and variant (Circle, Square) under advanced options. |
| **Help Text**                         | Hoverable info icon.                                                                                             |
| **Is Joined**                         | No bottom border or shadow: flush on the component below.                                                        |
| **Actions**                           | Buttons with **Label**, **Name**, **Icon Name**, optional **Disabled** and **Hidden**.                           |
| **Visible Actions Buttons**           | Buttons shown before the rest overflow into a menu.                                                              |
| **Hide Actions**, **Disable Actions** | Hide, or disable without hiding, every action button.                                                            |
| **Show More Details Panel**           | Side panel with record details for the selected marker.                                                          |

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fgit-blob-191d5d93f20c78304fd318004bd9d53430cc7520%2F2025-06-16_11-46-39.png?alt=media" alt=""><figcaption></figcaption></figure>

### Popup *(Leaflet only)*

A marker click opens its popup, filled from the Leaflet data mappings.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FG0CgDh3IwZThdUy7fjaP%2Fmap-popup.png?alt=media" alt="A Leaflet map titled Customer visits with the popup of Juniper Health open above its marker. The popup shows an illustration across its top, the title Juniper Health, the description Hyde Park clinic, a Visit website link, the fields Industry, Healthcare and Employees, 240, and an Add Stop button. A route button sits at the top right of the map."><figcaption><p>Image, link and fields from the data mapping; Add Stop when routing is on.</p></figcaption></figure>

| Setting                 | Group | What it does                                                                               |
| ----------------------- | ----- | ------------------------------------------------------------------------------------------ |
| **Width**               | Popup | Maximum width in pixels. 300 when empty.                                                   |
| **Image Fallback**      | Image | Shown when the image fails to load.                                                        |
| **Position**            | Image | **Left** (default), **Right**, **Top**, **Bottom**, **Background**.                        |
| **Size**                | Image | **Small**, **Medium**, **Large** (default). Width for Left and Right, height otherwise.    |
| **Width**, **Height**   | Image | Pixels, overriding **Size**: width for Left and Right, height for Top, Bottom, Background. |
| **Crop Fit**            | Image | **Cover** (default), **Contain**, **Fill**, **None**.                                      |
| **Crop Position X / Y** | Image | Anchor along each axis, in percent.                                                        |

Records at the exact same coordinates share one marker whose popup pages through them (arrows, counter), no location edited. Point markers only, not Circle, Rectangle or Polygon; a record with no **Title** is skipped.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fs8PfFpq4STznTK1rCJTC%2Fmap-same-address.png?alt=media" alt="A map marker popup showing the first of three records, with arrows and a 1 / 3 counter"><figcaption><p>Three accounts registered at one address, all reachable from a single marker.</p></figcaption></figure>

### Filter

How the filter menu appears; fields come from **Filters** in Data Mapping.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FpvVDTMazFq9drxStZT4Q%2Fmap-filters-overlay.png?alt=media" alt="A Leaflet map titled Customer sites with five customer sites in Chicago. A Search sites box sits at the top left of the map and two filter buttons, Industry and Account Type, at the top right. The Industry filter is open and its filter mode menu lists Equals, selected, then Not Equals, Empty and Not Empty, over the list of industries. A Clear link and 5 of 5 sit at the bottom of the filter."><figcaption><p>Overlaid search and filters, a Filter mode menu open.</p></figcaption></figure>

| Setting                         | What it does                                                                                              |
| ------------------------------- | --------------------------------------------------------------------------------------------------------- |
| **Type**                        | **Horizontal** (default, above the map), **Popover** (from a filter button) or **Panel** (side panel).    |
| **Display Overlaid on the Map** | Filters over the map, not in the header. Horizontal and Popover only; Panel overlays from **Side Panel**. |
| **Use Record Picklist Values**  | Picklist options from the loaded records, not the full value set.                                         |
| **Use Cascading Filter Values** | An applied filter narrows the others to matching records. Overrides **Use Record Picklist Values**.       |

<details>

<summary>Filter operators</summary>

Each filter's **Filter mode** selector offers operators by field type. Nothing to configure.

| Field type                                       | Operators                                                                                                                                                              |
| ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Text, picklist, multi-select picklist, lookup    | **Equals** (default), **Not Equals**, **Empty**, **Not Empty**                                                                                                         |
| Number, currency, percent, date, date/time, time | **Between** (default), **Not Between**, **Equals**, **Not Equals**, **Less Than**, **Less or Equal**, **Greater Than**, **Greater or Equal**, **Empty**, **Not Empty** |
| Checkbox                                         | No selector: always equality                                                                                                                                           |

**Empty** and **Not Empty** take no value, so they hide the value input.

</details>

### Search

Finds markers by text.

| Setting         | What it does                                                                                                                                                                |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Show Search** | Search bar on.                                                                                                                                                              |
| **Placeholder** | Default "Search". Requires **Show Search**.                                                                                                                                 |
| **Position**    | Header **Left** (default), **Right**, **Center**, **Fill**; **Panel** (side panel); **Overlaid on the Map** (back in the header on a narrow map). Requires **Show Search**. |

### Side Panel

Holds the filters or search set to **Panel**. On a narrow map, such as a phone, filters become a popover and search moves to the header.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FXLJ2GfmbqseQkjM6PGbz%2Fmap-side-panel.png?alt=media" alt="A Leaflet map titled Customer sites with a side panel on its left. The panel holds a Search sites box, an Industry filter listing Healthcare, Manufacturing, Retail, Technology and Transportation, an Account Type filter with Customer - Direct checked and Prospect unchecked, and a Clear all selections button. Both filters show an Equals filter mode button. The header reads 3 items found, Filtered by Account Type, and carries two actions, Log Visit and Share, and the button that shows or hides the panel. Three markers remain on the map."><figcaption><p>Beside the map, by default; Clear all selections resets every filter.</p></figcaption></figure>

| Setting                         | What it does                                                                                               | Only when    |
| ------------------------------- | ---------------------------------------------------------------------------------------------------------- | ------------ |
| **Position**                    | **Left** (default) or **Right**.                                                                           |              |
| **Display Overlaid on the Map** | Panel over the map, opened from a button on it. With the Route panel also overlaid, one is open at a time. |              |
| **Closed by Default**           | Starts closed.                                                                                             | Not overlaid |
| **Hide Toggle Button**          | Hides the header button that opens and closes the panel.                                                   | Not overlaid |
| **Opened by Default**           | Open on load.                                                                                              | Overlaid     |
| **Reset Button Label**          | Button that clears the filters. Default "Clear all selections".                                            |              |

### Set Component Visibility

Show or hide the Map on conditions: see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md).

## Interactions

[Interactions](/dynamic-components/component-builder/interactions.md) define what happens when the end user acts on the Map. Set them in the **Interactions** tab of the Edit Map panel.

| Interaction              | Fires when the end user                                                                                                                                                  | Output                                                               | Only on |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------- | ------- |
| **Marker Select**        | Clicks a marker. Not with the Route panel open (the click adds a stop; outputs unchanged). At a shared address, outputs follow the record shown; paging does not refire. | **Selected Marker**, **Selected Marker SObject** (Query or Variable) |         |
| **Header Action Click**  | Clicks the header action set in **Target Name**.                                                                                                                         | **Clicked Header Action Name**                                       |         |
| **Drawing Created**      | Completes a drawing, to store or process.                                                                                                                                | **Draw GeoJSON Value**                                               | Leaflet |
| **Marker Created**       | Places a toolbar marker.                                                                                                                                                 | **Created Marker**                                                   | Leaflet |
| **Save As Button Click** | Clicks the manual save button (drawing saved as a ContentDocument).                                                                                                      |                                                                      | Leaflet |

## Output Variables

Use them elsewhere on the page, for example **Selected Marker SObject** to show the clicked Account beside the map.

| Output variable                           | Type                           | Returns                                                                         | Filled on                |
| ----------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------- | ------------------------ |
| **Selected Marker**                       | Object                         | Value, title, description, location (Latitude, Longitude)                       | Marker click             |
| **Selected Marker SObject**               | Record (SObject)               | The marker's record (Query or Variable)                                         | Marker click             |
| **Selected Marker Value**                 | Text (String)                  | The marker's value                                                              | Marker click             |
| **Selected Markers sObject**              | Record Collection (SObject\[]) | Every selected record, with **Enable Multi-Select Markers** (Query or Variable) | Marker click             |
| **Created Marker**                        | Object                         | New marker's Latitude, Longitude                                                | Toolbar marker (Leaflet) |
| **Draw GeoJSON Value**                    | Text (String)                  | Drawn shapes as GeoJSON, to persist to a record                                 | Drawing change (Leaflet) |
| **Clicked Header Action Name**            | Text (String)                  | Clicked action's name                                                           | Header action click      |
| **Number of Items**                       | Integer                        | Markers loaded                                                                  | Loaded markers change    |
| **Visible Width (km)**                    | Integer                        | Visible width at the current zoom                                               | Center or zoom change    |
| **Center Latitude**, **Center Longitude** | Number                         | Map center                                                                      | Load; each pan (Leaflet) |
| **Zoom Level**                            | Text (String)                  | Current zoom                                                                    | Each zoom (Leaflet)      |

## Styling

Set from the **Style** tab. "Border" below means Border Color, Size, Style and Radius.

| Tab                     | Styles                   | Properties                                                                                                                                                                                                                                                                                                                                            | Only on |
| ----------------------- | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| **Margin**, **Padding** | Outer, inner spacing     | Top, Right, Bottom, Left                                                                                                                                                                                                                                                                                                                              |         |
| **Size**                | Dimensions               | Width, Height                                                                                                                                                                                                                                                                                                                                         |         |
| **Border**              | Map border               | Border                                                                                                                                                                                                                                                                                                                                                |         |
| **Header**              | Header                   | Background Color; Padding Top, Right, Bottom, Left; Margin Bottom                                                                                                                                                                                                                                                                                     |         |
| **Filters Panel**       | Filters and search panel | Panel: Background Color, Border. Labels: Background, Color (each plus Active, Hover), Collapse Icon Color, Font Size, Font Weight. Options: Color, Checkbox Border Color, Load More Button Text Color (plus Active, Hover). Reset Button: Background, Text and Border Color, Border Size, Border Radius; Background and Border Color Hover and Active |         |
| **Map Markers**         | Marker popup             | Background Color. Title: Text Color, Font Size, Style, Weight. Description: Color, Font Size, Style, Weight, Line Clamp. Info: Text, Link, Link Hover Color, Font Size, Style, Weight. Fields: Background Color, Border, Spacing Inline, Spacing Block. Fields Label, Fields Value: Color, Font Size, Style, Weight                                   | Leaflet |
| **Selected Marker**     | Selected marker          | Scale                                                                                                                                                                                                                                                                                                                                                 | Leaflet |
| **Zoom Controls**       | Zoom buttons             | Text, Background, Shadow Color; Border                                                                                                                                                                                                                                                                                                                | Leaflet |
| **Draw Controls**       | Draw toolbar buttons     | Background, Shadow Color; Border                                                                                                                                                                                                                                                                                                                      | Leaflet |
| **Route Panel**         | Route panel              | Panel: Background Color, Border. Header: Background Color, Color, Font Size, Font Weight                                                                                                                                                                                                                                                              | Leaflet |

## Troubleshooting Common Issues

| Problem                                   | Cause and fix                                                                                                                                                                                         |
| ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| No Route button                           | Routing is Leaflet only: set **Type** (Content) to **Leaflet**, turn on **Show Route Panel**.                                                                                                         |
| The Route group shows enablement guidance | Routing is off for this package: an administrator enables it in the **Avonni Components** app, **Settings** tab. See [Enable Map Routing](/dynamic-components/components/map/enable-map-routing.md).  |
| Straight line instead of roads            | Provider unreachable or quota spent (the panel says which); the line keeps the stop order. If every route falls back, activate the `Avonni_Route_Mapbox` and `Avonni_Route_ORS` Remote Site Settings. |
| A stop cannot be routed to                | No road near it; the message names it. Fix its coordinates or drop it.                                                                                                                                |
| No Timing setting, no arrival times       | OpenRouteService has no traffic model: times are Mapbox only, and the CSV omits **Arrival Time**.                                                                                                     |

***

## Build with AI

**MCP name:** `dcMap` · **Toolset:** `dynamic`

Ask your AI assistant: *"Create an Avonni Dynamic Component with a Map showing my Accounts as markers, with the list view visible and a search bar."*

The `avonni-dynamic-components` skill generates the component's metadata file locally. Nothing is deployed. Styling hooks are available through the MCP server's `get_component_styles` tool.

<a href="/dynamic-components/build-with-ai/setup.md" class="button secondary" data-icon="wand-magic-sparkles">Set up the AI assistant</a>


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.avonnicomponents.com/dynamic-components/components/map.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.