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

# Map

## Overview

The Avonni Map displays interactive geographic data using Google Maps or Leaflet. It visualizes Salesforce records as markers on a configurable map, and supports marker clustering, drawing tools, GeoJSON overlays, and custom tile layers for advanced geospatial use cases.

***

## Tutorials

### Getting Started

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Building a dynamic map component</strong></td><td></td><td></td><td><a href="/files/fGfpFsbu4Ud6eBR9nsQW">/files/fGfpFsbu4Ud6eBR9nsQW</a></td><td><a href="/spaces/dHOej9Pd5IxJNGEJMZKW/pages/ycDXF0y2Fj6NpL8x9es3">/spaces/dHOej9Pd5IxJNGEJMZKW/pages/ycDXF0y2Fj6NpL8x9es3</a></td></tr><tr><td><strong>Building a map with instant account insights</strong></td><td></td><td></td><td><a href="/files/KVhv83basvz2hxWluWqe">/files/KVhv83basvz2hxWluWqe</a></td><td><a href="/spaces/dHOej9Pd5IxJNGEJMZKW/pages/jK2xfO1WUsBVjK7AbcFZ">/spaces/dHOej9Pd5IxJNGEJMZKW/pages/jK2xfO1WUsBVjK7AbcFZ</a></td></tr><tr><td><strong>Building a "No-Code" Salesforce Map for Instant Account Insights [VIDEO]</strong></td><td></td><td></td><td><a href="/files/tUlqZvVIlivnacfznmwn">/files/tUlqZvVIlivnacfznmwn</a></td><td><a href="https://youtu.be/4JgAJE3if-0">https://youtu.be/4JgAJE3if-0</a></td></tr></tbody></table>

### Customization

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Customize the Map Marker</strong></td><td></td><td></td><td><a href="/files/IaCInTpDkXG8AH2XtURb">/files/IaCInTpDkXG8AH2XtURb</a></td><td><a href="/pages/cL2pAFYtsL60RKrhISDb">/pages/cL2pAFYtsL60RKrhISDb</a></td></tr><tr><td><strong>How to customize the Map Marker (Video)</strong></td><td></td><td></td><td><a href="/files/IaCInTpDkXG8AH2XtURb">/files/IaCInTpDkXG8AH2XtURb</a></td><td><a href="https://youtu.be/aXr176E4vKs">https://youtu.be/aXr176E4vKs</a></td></tr></tbody></table>

***

## Leaflet-Only Features

The features below are only available when **Leaflet Maps** is selected as your map type.

### Marker Clustering

When you have hundreds of pins, the map becomes unreadable. Clustering solves this by grouping nearby pins into a numbered circle.

**How it works:**

* **Zoomed out:** Pins in the same area merge into a single circle — e.g., a circle showing "50" means 50 accounts in that region.
* **Zooming in:** The circle splits into smaller clusters, then individual pins.

> **Example:** A map of 600 customer accounts. Zoomed out, users see 4–5 regional clusters. Zooming into a city reveals individual account pins.

<figure><img src="/files/3PwwhxYY6r4wYZQ0Yqfs" alt=""><figcaption></figcaption></figure>

### Clustering Settings

<table><thead><tr><th width="299.703125">Setting</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Coverage on Hover</strong></td><td>Hovering over a cluster shows the boundary it covers</td></tr><tr><td><strong>Max Cluster Radius</strong></td><td>How far (in pixels) from a pin before it joins a cluster. Default: 80px. Increase to create fewer, larger clusters.</td></tr><tr><td><strong>Disable Clustering at Zoom Level</strong></td><td>Below this zoom level, all individual pins display — useful so users can always see exact locations when zoomed in</td></tr></tbody></table>

### Drawing & Annotations

The Draw feature turns your map into an interactive canvas. Users can draw directly on the map and save those drawings to a Salesforce record.

> **Example:** A territory planning flow where a manager draws a polygon around a new sales zone, and it saves automatically to the related Opportunity.

**Enabling Drawing**

1. Select **Leaflet** as your map type
2. Toggle on **Draw Feature** in the component settings
3. The drawing toolbar appears on the map

<figure><img src="/files/jUW5utFUX11Hw1pOrj62" alt=""><figcaption></figcaption></figure>

**Available Drawing Tools**

<table><thead><tr><th width="169.8203125">Tool</th><th>Use It to</th></tr></thead><tbody><tr><td>📍 <strong>Marker</strong></td><td>Pin a specific address or point of interest</td></tr><tr><td>➖ <strong>Line</strong></td><td>Show a route, path, or connection between locations</td></tr><tr><td>▨ <strong>Polygon</strong></td><td>Outline a territory, service area, or neighborhood</td></tr><tr><td>⭕ <strong>Circle</strong></td><td>Define a delivery radius or zone of influence</td></tr><tr><td>✏️ <strong>Edit</strong></td><td>Resize or reposition existing shapes</td></tr><tr><td>🗑️ <strong>Delete</strong></td><td>Remove unwanted drawings</td></tr></tbody></table>

You can choose which tools to show and where the toolbar appears (top-left, top-right, bottom-left, bottom-right).

**Saving Drawings to a Salesforce Record**

Drawings are saved as a **Content Document** (Salesforce File) linked to a record.

1. Enable **Save as Content Document** in the component settings
2. Set **Content Document Linked Entity ID** to the record's ID — typically `{!recordId}` from your flow variable
3. *(Optional)* Enable **Auto Save Content Document** to save changes automatically without a manual save step

**Optional settings**

<table><thead><tr><th width="210.3671875">Setting</th><th>Purpose</th></tr></thead><tbody><tr><td><strong>Content Document ID</strong></td><td>Load an existing Content Document rather than creating a new one</td></tr><tr><td><strong>Content Document Title</strong></td><td>Custom file name — default is "Avonni Map Drawing Document." Example: <code>Map Drawings - {!Account.Name}</code></td></tr></tbody></table>

### GeoJSON — Territories & Custom Boundaries

GeoJSON lets you overlay custom shapes on the map — county lines, sales territories, zip code boundaries, or any other polygon. Think of it as a "stencil layer" on top of the map.

**Two ways to use GeoJSON:**

<table><thead><tr><th width="181.09765625"></th><th>Static (Read-Only)</th><th>Editable</th></tr></thead><tbody><tr><td><strong>Property to use</strong></td><td>GeoJSON Value</td><td>Draw Content Document ID</td></tr><tr><td><strong>Users can edit?</strong></td><td>❌</td><td>✅</td></tr><tr><td><strong>Best for</strong></td><td>Showing assigned territories a user can't change</td><td>Starting from a boundary and letting users reshape it</td></tr></tbody></table>

### **Custom Tile Layer (Basemap Style)**

By default, the Leaflet map uses OpenStreetMap tiles. The **Tile Layer** property lets you swap in any Leaflet-compatible tile server — useful for brand-aligned styling, satellite imagery, dark mode, or specialized basemaps like terrain and topographic.

<figure><img src="/files/9Yq9uTTv3e8Gz0sUsy6F" alt=""><figcaption></figcaption></figure>

**How it works**

In the **Map** section of the property editor (under Advanced), set **Tile Layer** to a tile URL template using `{z}`, `{x}`, `{y}` placeholders. Leaflet handles the swap automatically.

**Common tile layer URLs**

| Style                              | URL template                                                                                    | Best for                            |
| ---------------------------------- | ----------------------------------------------------------------------------------------------- | ----------------------------------- |
| **OpenStreetMap** *(default)*      | `https://tile.openstreetmap.org/{z}/{x}/{y}.png`                                                | General-purpose maps                |
| **Carto Positron** (clean light)   | `https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png`                                   | Dashboards, data viz                |
| **Carto Dark Matter** (dark)       | `https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png`                                    | Analytics dashboards, dark themes   |
| **Esri World Imagery** (satellite) | `https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}` | Field ops, real estate, agriculture |
| **OpenTopoMap** (terrain)          | `https://a.tile.opentopomap.org/{z}/{x}/{y}.png`                                                | Outdoor, rural logistics            |

> **Example:** A logistics dashboard uses Carto Dark Matter tiles so colored pins and clusters stand out against a low-contrast background.

{% hint style="info" %}
This property only applies when **Leaflet** is selected as the map type. Google Maps tiles are not user-replaceable.
{% endhint %}

{% hint style="warning" %}
**Warning**

Some tile providers (Mapbox, MapTiler, Stadia Maps) require an API key inside the URL and enforce usage limits. The default OpenStreetMap endpoint is fine for prototyping, but it isn't suitable for production traffic — review each provider's terms of service before going live.
{% endhint %}

### Displaying Static GeoJSON

Set the **GeoJSON Value** property using one of:

* A single GeoJSON object (one shape)
* An array of GeoJSON objects (multiple shapes)
* A **Content Document ID** pointing to a `.geojson` file in Salesforce Files *(recommended for large datasets — max file size: 12MB)*

> **Example:** Show a rep their assigned region as a shaded polygon. They can see it, but can't modify it.

### Loading Editable GeoJSON

Use **Draw Content Document ID** to load a starting set of shapes that users can then modify.

1. Save your GeoJSON as a Salesforce File
2. Enter its Content Document ID in the **Draw Content Document ID** field
3. This automatically enables the drawing toolbar
4. Users can move, resize, add, or delete shapes
5. To save changes, enable **Save as Content Document** — without this, edits are lost when the flow advances

> **Example:** A customer success manager loads a territory polygon for a key account, adjusts the boundary to match a new agreement, and saves it back to the record.

***

## Configuration

To configure it, click the component on the Flow screen. The Edit Map Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.

### Map Type

This is the most important decision. Everything else depends on it.

|                          | Google Maps                | Leaflet Maps                    |
| ------------------------ | -------------------------- | ------------------------------- |
| **Best for**             | Simple, address-based maps | Data-heavy or interactive maps  |
| **Marker limit**         | 100 markers                | Unlimited                       |
| **Location input**       | Street address             | Latitude + Longitude (required) |
| **Marker clustering**    | ❌                          | ✅                               |
| **Draw shapes on map**   | ❌                          | ✅                               |
| **GeoJSON territories**  | ❌                          | ✅                               |
| **Airbnb-style refresh** | ❌                          | ✅                               |

#### Google Maps — Use When...

You have street addresses and fewer than 100 locations to show. No extra data prep needed — paste in `123 Main St, New York` and it just works.

> **Example:** A "Contact Us" page showing your 5 regional offices.

<figure><img src="/files/hjLhxOLsrxsc8UECIfoN" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
Please note that up to 100 markers can be displayed on the map simultaneously in Google Maps.
{% endhint %}

#### Leaflet Maps — Use When...

You need to handle large datasets, draw custom shapes, or build something interactive. The trade-off: every location must have **latitude and longitude coordinates** — Leaflet cannot geocode a street address on its own.

> **Example:** A field sales rep opens a flow and sees all 800 accounts in their region, clustered by area. As they zoom into a city, individual pins appear. They draw a polygon around a new prospect area and save it to the record.

{% hint style="danger" %}
**Important**

Before using Leaflet, make sure your Salesforce records have latitude/longitude fields populated. If they don't, you'll need to geocode your addresses first.
{% endhint %}

<figure><img src="/files/23OXqXpKSVjEwSsAEoss" alt=""><figcaption></figcaption></figure>

### Data Source

Set **Mode** to **Single** to place one fixed marker (enter an address directly or pull it from a Salesforce field). Set it to **Multiple** to display a collection of locations from a Salesforce object — then choose a data source below.

<figure><img src="/files/ht5rAvkzEg6qFLmxaudU" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="130.611328125">Option</th><th>What it does</th><th>When to use</th></tr></thead><tbody><tr><td><a href="/pages/N1uTGxMW16RfbM4g39MR"><strong>Manual</strong></a></td><td>Enter coordinates directly in the component</td><td>Fixed locations that never change</td></tr><tr><td><a href="/pages/ziXlgb71wxsEEwGKKCqQ"><strong>Variable</strong></a></td><td>Connect to a Flow variable</td><td>Locations that change as the flow runs</td></tr><tr><td><a href="/pages/viMlx8xVDeuY59H0WnZo"><strong>Query</strong></a></td><td>Pull from a Salesforce object or custom query</td><td>Large datasets, complex filters, or record-driven maps</td></tr></tbody></table>

{% hint style="success" %}
**Tip**

For most "show all records on a map" use cases, use **Query** and point it at your object (Accounts, Contacts, custom objects, etc.)
{% endhint %}

### Data Mapping

Once you've chosen a data source, map your Salesforce fields to the component's location attributes. At minimum, you need to map the **Location** section — this is what places the pins on the map.

<figure><img src="/files/gcXg7Uir5sxw7CZcBBgx" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Mapping the Location section is vital for correctly placing markers on the map.
{% endhint %}

### Properties

The flat main properties control the map's type, mode, marker display, and basic behavior.

* **Map Type** — select **Google Maps** or **Leaflet**. When Leaflet is selected, `https://tile.openstreetmap.org` must be added to Trusted Sites in your Salesforce org.
* **Mode** — **Single** (one marker) or **Multiple** (a collection of markers from a data source).
* **List View** — controls the sidebar list of locations: **Auto** (shows only when multiple markers exist), **Visible** (always shown), or **Hidden** (always hidden).
* **List Title** — custom title shown above the marker list.
* **Disable Dragging** — prevents the user from panning the map.
* **Disable Default UI** — hides the default map controls (zoom, fullscreen, etc.).
* **Show Footer** — shows a footer below the map.
* **Selected Marker Value** — pre-select a specific marker by its value when the map loads.

### Zoom

* **Hide Zoom Controls** — hides the zoom in/out buttons.

### Center Location

By default, the map auto-centers to fit all markers. Override with:

<figure><img src="/files/BrbziDpU27SCmGKCybYP" alt=""><figcaption></figcaption></figure>

| Method                   | When to use                                                              |
| ------------------------ | ------------------------------------------------------------------------ |
| **Default**              | Let the map decide — works well for most cases                           |
| **Lat/Long coordinates** | Pin the center to a specific geographic point                            |
| **Address fields**       | Use country + city (required) + optional street/postal code              |
| **Flow variables**       | Dynamically center based on record data — e.g., `{!Account.BillingCity}` |

**Display Center as Marker:** Enable this to place a visible pin at the center point you've set — useful for "find locations near this address" flows.

**Zoom Level** — set the initial zoom manually (0–22 on desktop, 0–20 on mobile):

<table><thead><tr><th width="122.23046875">Level</th><th>What you see</th></tr></thead><tbody><tr><td>1</td><td>The entire world</td></tr><tr><td>5</td><td>A continent</td></tr><tr><td>10</td><td>A city</td></tr><tr><td>15</td><td>Street-level</td></tr><tr><td>20</td><td>Individual buildings</td></tr></tbody></table>

<figure><img src="/files/p3w7cTwjYQUkSQsyXTnl" alt=""><figcaption></figcaption></figure>

### Search

* **Searchable** — adds a search bar to the map. Configure placeholder text and position (left, right, center, fill).
* **Search Fields** — list of SObject field API names to search across using the search input.
* **Filtering Option** — adds a filter menu (popover) so users can narrow down which markers are shown.

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

<figure><img src="/files/butuLpcXxDPYVpEYTAN3" alt=""><figcaption></figcaption></figure>

### Map Display Settings

#### Header

The Header section gives you control over the appearance and functionality of your Map header.

| Attribute     | Purpose                                                            |
| ------------- | ------------------------------------------------------------------ |
| **Title**     | Label for the map — shown at the top                               |
| **Caption**   | Short description or context                                       |
| **Icon**      | Visual indicator of map purpose                                    |
| **Is Joined** | Removes shadow/border so the map blends with an adjacent component |
| **Buttons**   | Action buttons in the header — wired to interactions (see below)   |

### Marker Customization

The **Type** attribute controls each marker's visual style.

<table><thead><tr><th width="177.89453125">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Default</strong></td><td>Standard map pin</td></tr><tr><td><strong>Circle</strong></td><td>Round marker — set radius, fill color, opacity, and stroke</td></tr><tr><td><strong>Rectangle</strong></td><td>Box marker — set boundaries using lat/long, fill, and stroke</td></tr><tr><td><strong>Polygon</strong></td><td>Custom multi-sided shape — define paths, fill, and stroke</td></tr><tr><td><strong>Pin</strong></td><td>Classic teardrop pin — customize fill color and stroke</td></tr><tr><td><strong>Custom Icon</strong></td><td>Upload your own SVG for full brand-aligned markers</td></tr></tbody></table>

<figure><img src="/files/ekQUNuTFJYePsShpsYMJ" alt=""><figcaption></figcaption></figure>

**Common styling options (all shape types):**

* **Fill Color & Opacity** — background color and transparency
* **Stroke** — border color, thickness, and style
* **Scale** — zoom level the marker is optimized for

> **What's an SVG Path?** It's a set of drawing instructions used to create custom icon shapes. You can generate SVG paths using any vector design tool (Figma, Illustrator, online SVG editors).
>
> <mark style="color:green;">**→ Tutorial:**</mark> [<mark style="color:green;">**Customize the Map Marker**</mark>](/flow/tutorials/components/map/customize-the-map-marker.md)

## Interactions

[Interactions](/flow/component-builder/interactions-panel.md) define what happens when users interact with the Map. Configure them from the **Interactions** tab of the Edit Map panel.

### Header Action Click

Fires when the user clicks a header action button. The `clickedHeaderActionName` output variable is set to the name of the button that was clicked, so you can branch on which action was triggered.

### Marker Created

Fires when the user places a new marker on the map using the drawing tools. Use this to capture the new marker's position via the `createdMarkerLatitude` and `createdMarkerLongitude` output variables.

### Marker Drag

Fires when the user drags a marker to a new location. Requires **Draggable Markers** to be enabled. Use this to update coordinates on the corresponding record via the `draggedMarkerLatitude`, `draggedMarkerLongitude`, and related output variables.

### Marker Select

Fires when the user clicks a marker on the map. Use this to navigate to a record, display details on the next screen, or drive conditional logic based on the selected marker's value.

### Save As Button Click

Fires when the user clicks the Save As button. Only available when **Save as Content Document** is enabled. Use this to trigger a custom save flow or display a confirmation before the drawing is persisted.

<figure><img src="/files/NPjMFFwG0dnGqFYZaEBN" alt=""><figcaption></figcaption></figure>

***

## Styling

The **Style** tab gives you fine-grained control over the Map's appearance. Configure it from the **Style** tab of the Edit Map panel.

{% tabs %}
{% tab title="Margin" %}
Controls outer spacing.

* **Top:** Space above the component.
* **Right:** Space to the right of the component.
* **Bottom:** Space below the component.
* **Left:** Space to the left of the component.
  {% endtab %}

{% tab title="Padding" %}
Controls inner spacing.

* **Top:** Inner space at the top.
* **Right:** Inner space on the right.
* **Bottom:** Inner space at the bottom.
* **Left:** Inner space on the left.
  {% endtab %}

{% tab title="Size" %}
Controls dimensions.

* **Width:** Component width.
* **Height:** Component height.
* **Min Width:** Minimum width constraint.
* **Max Width:** Maximum width constraint.
* **Min Height:** Minimum height constraint.
* **Max Height:** Maximum height constraint.
* **Overflow:** How overflowing content is handled.
  {% endtab %}

{% tab title="Border" %}
Customizes the border.

* **Color:** Border color.
* **Size:** Border thickness.
* **Style:** Border style (solid, dashed, etc.).
* **Radius:** Corner rounding.
  {% endtab %}

{% tab title="Header" %}
Styles the optional header above the content.

* **Color:** Header background color.
* **Title Text Color:** Color of the header title text.
* **Title Font Size:** Font size of the header title.
* **Title Font Style:** Font style of the header title.
* **Title Font Weight:** Font weight of the header title.
* **Subtitle Text Color:** Color of the header subtitle text.
* **Subtitle Font Size:** Font size of the header subtitle.
* **Icon Color:** Color of the header icon.
* **Action Color:** Color of the header action buttons.
  {% endtab %}

{% tab title="Flow Dialog" %}
Adjusts display when opened as a modal dialog inside a Flow screen.

* **Width:** Dialog width.
* **Height:** Dialog height.
* **Background Color:** Dialog background color.
  {% endtab %}

{% tab title="Flow Panel" %}
Adjusts display when opened as a side panel inside a Flow screen.

* **Width:** Panel width.
* **Background Color:** Panel background color.
  {% endtab %}

{% tab title="Map Markers Background" %}
Controls the background color of Leaflet map markers.

* **Color:** Marker background color.
  {% endtab %}

{% tab title="Map Markers Title" %}
Styles the title text inside Leaflet map marker popups.

* **Text Color:** Color of the marker title.
* **Font Size:** Font size of the marker title.
* **Font Style:** Font style of the marker title.
* **Font Weight:** Font weight of the marker title.
  {% endtab %}

{% tab title="Map Markers Description" %}
Styles the description text inside Leaflet map marker popups.

* **Color:** Color of the marker description text.
* **Font Size:** Font size of the description.
* **Font Style:** Font style of the description.
* **Font Weight:** Font weight of the description.
* **Line Clamp:** Maximum number of visible lines before truncation.
  {% endtab %}

{% tab title="Map Markers Info" %}
Styles the info section inside Leaflet map marker popups.

* **Text Color:** Color of the info text.
* **Link Color:** Color of links in the info section.
* **Link Color Hover:** Color of links on hover.
* **Font Size:** Font size of the info text.
* **Font Style:** Font style of the info text.
* **Font Weight:** Font weight of the info text.
  {% endtab %}

{% tab title="Map Markers Fields" %}
Styles the field rows inside Leaflet map marker popups.

* **Background Color:** Background color of the fields area.
* **Border Color:** Border color of the fields area.
* **Border Size:** Border thickness of the fields area.
* **Border Style:** Border style of the fields area.
* **Border Radius:** Corner rounding of the fields area.
* **Spacing Inline:** Horizontal (inline) padding inside the fields area.
* **Spacing Block:** Vertical (block) padding inside the fields area.
  {% endtab %}

{% tab title="Map Markers Fields Label" %}
Styles the label portion of each field row inside Leaflet map marker popups.

* **Color:** Label text color.
* **Font Size:** Label font size.
* **Font Style:** Label font style.
* **Font Weight:** Label font weight.
  {% endtab %}

{% tab title="Map Markers Fields Value" %}
Styles the value portion of each field row inside Leaflet map marker popups.

* **Color:** Value text color.
* **Font Size:** Value font size.
* **Font Style:** Value font style.
* **Font Weight:** Value font weight.
  {% endtab %}

{% tab title="Zoom Controls" %}
Styles the zoom in/out controls on Leaflet maps.

* **Text Color:** Color of the zoom control icons/text.
* **Background Color:** Background color of the zoom controls.
* **Shadow Color:** Shadow color around the zoom controls.
* **Border Color:** Border color of the zoom controls.
* **Border Size:** Border thickness of the zoom controls.
* **Border Style:** Border style of the zoom controls.
* **Border Radius:** Corner rounding of the zoom controls.
  {% endtab %}
  {% endtabs %}

## Output Variables

The Map exposes several output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Map component, and pick the output variable you need.

### Marker Selection

When users click a marker on the map, these variables update automatically.

| Output variable                   | Type             | What it returns                                                           |
| --------------------------------- | ---------------- | ------------------------------------------------------------------------- |
| **Selected Marker Value**         | Text (String)    | The value (usually the record ID or name) of the marker the user clicked. |
| **Selected Marker SObject Value** | Record (SObject) | The full Salesforce record associated with the selected marker.           |

> **Example:** When a user clicks a marker on an Account map, use **Selected Marker SObject Value** to display the Account's details on the next screen or pre-fill a form for a follow-up Task.

### Marker Dragging

When users drag a marker to a new location (requires **Draggable Markers** to be enabled), these variables capture the new position and the marker data.

| Output variable                    | Type                           | What it returns                                                           |
| ---------------------------------- | ------------------------------ | ------------------------------------------------------------------------- |
| **Dragged Marker Value**           | Text (String)                  | The value (usually the record ID or name) of the marker the user dragged. |
| **Dragged Marker SObject Value**   | Record (SObject)               | The full Salesforce record of the marker that was dragged.                |
| **Dragged Marker Latitude**        | Text (String)                  | The new latitude of the dragged marker.                                   |
| **Dragged Marker Longitude**       | Text (String)                  | The new longitude of the dragged marker.                                  |
| **Dragged Map Markers**            | Collection                     | All markers with their updated positions after dragging.                  |
| **Dragged Map Markers Serialized** | Text (String)                  | All dragged markers as a JSON string.                                     |
| **Dragged Map Markers SObject**    | Record Collection (SObject\[]) | All markers with updated positions as a collection of Salesforce records. |

> **Example:** A field technician drags a marker to correct a site location. After the screen, use **Dragged Marker Latitude** and **Dragged Marker Longitude** with an **Update Records** element to save the corrected coordinates back to the record.

### Marker Creation

When users create a new marker on the map (via the drawing tools), these variables capture the new marker's position.

| Output variable              | Type          | What it returns                            |
| ---------------------------- | ------------- | ------------------------------------------ |
| **Created Marker Latitude**  | Text (String) | The latitude of the newly created marker.  |
| **Created Marker Longitude** | Text (String) | The longitude of the newly created marker. |

> **Example:** A dispatcher creates a new marker on the map to mark a delivery location. Use **Created Marker Latitude** and **Created Marker Longitude** to create a new record with those coordinates.

### Drawing Tools

When users use the drawing tools on the map, these variables capture the drawn shapes.

| Output variable         | Type          | What it returns                                                                                                                                          |
| ----------------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Draw GeoJSON Value**  | Text (String) | The GeoJSON representation of all shapes drawn on the map. Use this to save the drawn area to a record or pass it to an Apex action for spatial queries. |
| **Content Document Id** | Text (String) | The ID of the Content Document if the drawing was saved as a file (when **Save As Content Document** is enabled).                                        |

> **Example:** A territory manager draws a polygon on the map to define a sales territory. Use **Draw GeoJSON Value** to store the territory boundaries in a custom field on a Territory record.

### Header Actions

| Output variable                | Type          | What it returns                                        |
| ------------------------------ | ------------- | ------------------------------------------------------ |
| **Clicked Header Action Name** | Text (String) | The name of the header action button the user clicked. |

### Others

| Output variable        | Type       | What it returns                                                                                                                                                                                                                          |
| ---------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Number of Items**    | Integer    | The total number of markers currently loaded on the map.                                                                                                                                                                                 |
| **Visible Width (km)** | Integer    | The visible width of the map in kilometers at the current zoom level. Useful for dynamically adjusting queries or filtering based on the map's visible area.                                                                             |
| **Center**             | Collection | The current center configuration of the map, including the location (Latitude, Longitude, and address fields such as City, State, and Country) and display settings. Updates when the center is changed programmatically or by the user. |

***

## Troubleshooting Common Issues

* **No markers appear on the map** — The records have no usable location data. A marker requires either Latitude + Longitude, or at least one of City, State, Postal Code, or Country. In Data Mappings, map at least one location field to a populated field on the source object and confirm the records contain a value.
* **Markers show in Google Maps but disappear when switching to Leaflet** — Leaflet only supports markers placed by Latitude + Longitude; address-based fields are ignored because Leaflet doesn't include geocoding. Either stay on Google Maps for address-based maps, or populate Latitude/Longitude fields on the records.
* **Dragging a marker visually moves it but the new position isn't saved** — The Latitude and Longitude fields aren't mapped in Data Mappings, or the running user has no Edit FLS on those fields. Map both Latitude and Longitude to writeable number fields and grant Edit FLS to the running user.
* **The map shows a gray empty area instead of tiles** — For Google Maps, a Salesforce-side configuration is missing; for Leaflet, the Tile Layer URL is invalid or unreachable. In Google Maps mode check Setup → Maps and Location Settings; in Leaflet mode leave Tile Layer blank to use the default OpenStreetMap layer.
* **Drawings made on the map aren't saved** — Auto Save Content Document is off and no Save As Button is shown, so drawings stay in memory until explicitly saved. Toggle Auto Save Content Document on, or display the Save As Button so users can save manually.
* **Drawings are saved but not attached to a specific record** — The Content Document Linked Entity Id is empty. Map Content Document Linked Entity Id to a record ID variable (typically `{!recordId}`).
* **Marker clustering doesn't activate** — Clustering only works in Leaflet mode with Latitude + Longitude mappings; it is ignored in Google Maps mode. Switch to Leaflet and confirm Latitude + Longitude are mapped.
* **The map doesn't filter by `{!recordId}` even though it's referenced** — The Data Source is set to Variable instead of Query, so server-side filtering doesn't apply. Switch to Query mode and add a Query Filter that references `{!recordId}`.
* **Single marker mode shows no marker even with values entered** — At least one location field must be populated; the component silently hides the marker if every location field is empty. Make sure at least one of Latitude+Longitude, City, State, Postal Code, or Country is filled at runtime.
* **The selected marker output variable is always empty** — The user hasn't clicked a marker yet, or the Marker Select interaction intercepts without populating the output. Add a Decision element after the screen to handle the empty case, and confirm the interaction is wired correctly.

***


---

# 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:

```
GET https://docs.avonnicomponents.com/flow/flow-components/map.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.