Map
The Avonni Map shows a map of a specific place. It can help you get a sense of location or get directions.
Tutorials
Getting Started
Customization
Step 1 — Choose Your Map Type
This is the most important decision. Everything else depends on it.
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.
Please note that up to 100 markers can be displayed on the map simultaneously in Google Maps.
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.
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.
Step 2 — Set Up Your Markers
Single Marker
Use this to highlight one specific location. Enter a street address directly or pull it from a Salesforce field.
Example: A flow that opens on an Account record and shows the account's billing address on the map.
Multiple Markers
Display a collection of locations from a Salesforce object. The setup has two parts:
Choose a data source — where the location data comes from
Map the fields — which Salesforce fields contain the address or coordinates
Data Source Options
Manual
Enter coordinates directly in the component
Fixed locations that never change
Variable
Connect to a Flow variable
Locations that change as the flow runs
Query
Pull from a Salesforce object or custom query
Large datasets, complex filters, or record-driven maps
Tip
For most "show all records on a map" use cases, use Query and point it at your object (Accounts, Contacts, custom objects, etc.)
Data Mappings
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.
Mapping the Location section is vital for correctly placing markers on the map.
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.
Clustering Settings
Coverage on Hover
Hovering over a cluster shows the boundary it covers
Max Cluster Radius
How far (in pixels) from a pin before it joins a cluster. Default: 80px. Increase to create fewer, larger clusters.
Disable Clustering at Zoom Level
Below this zoom level, all individual pins display — useful so users can always see exact locations when zoomed in
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
Select Leaflet as your map type
Toggle on Draw Feature in the component settings
The drawing toolbar appears on the map
Available Drawing Tools
📍 Marker
Pin a specific address or point of interest
➖ Line
Show a route, path, or connection between locations
▨ Polygon
Outline a territory, service area, or neighborhood
⭕ Circle
Define a delivery radius or zone of influence
✏️ Edit
Resize or reposition existing shapes
🗑️ Delete
Remove unwanted drawings
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.
Enable Save as Content Document in the component settings
Set Content Document Linked Entity ID to the record's ID — typically
{!recordId}from your flow variable(Optional) Enable Auto Save Content Document to save changes automatically without a manual save step
Optional settings
Content Document ID
Load an existing Content Document rather than creating a new one
Content Document Title
Custom file name — default is "Avonni Map Drawing Document." Example: Map Drawings - {!Account.Name}
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:
Property to use
GeoJSON Value
Draw Content Document ID
Users can edit?
❌
✅
Best for
Showing assigned territories a user can't change
Starting from a boundary and letting users reshape it
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.
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
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.
This property only applies when Leaflet is selected as the map type. Google Maps tiles are not user-replaceable
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.
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
.geojsonfile 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.
Save your GeoJSON as a Salesforce File
Enter its Content Document ID in the Draw Content Document ID field
This automatically enables the drawing toolbar
Users can move, resize, add, or delete shapes
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.
Map Display Settings
Centering the Map
By default, the map auto-centers to fit all markers. You can override this in four ways:
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 (1–22 on desktop, 1–20 on mobile):
1
The entire world
5
A continent
10
A city
15
Street-level
20
Individual buildings
Header
The Header section gives you control over the appearance and functionality of your Map header.
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)
List View
Controls the sidebar list of locations alongside the map.
auto (default)
Shows the list only when multiple markers are present
visible
Always shows the list
hidden
Always hides the list
Filtering & Search
Filtering Option: Adds a filter menu (popover) so users can narrow down which markers are shown
Searchable: Adds a search bar to the map. Configure placeholder text and position (
left,right,center,fill)
Marker Customization
The Type attribute controls each marker's visual style.
Default
Standard map pin
Circle
Round marker — set radius, fill color, opacity, and stroke
Rectangle
Box marker — set boundaries using lat/long, fill, and stroke
Polygon
Custom multi-sided shape — define paths, fill, and stroke
Pin
Classic teardrop pin — customize fill color and stroke
Custom Icon
Upload your own SVG for full brand-aligned markers
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).
→ Tutorial: Customize the Map Marker
Map Interactions
Wire up map events to Flow actions using these triggers:
On Marker Select
User clicks a pin
Show a detail panel, navigate to a record, or filter a related list
On Header Action
User clicks a header button
Trigger a search, apply a filter, or open a modal
On Marker Drag
User drags a pin to a new location
Update lat/long coordinates on a record
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.
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. Use this to display record details on the next screen or update the record in a subsequent flow element.
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.
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.
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.
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
Clicked Header Action Name
Text (String)
The name of the header action button the user clicked. Use in a Decision element to route the flow based on which header button was pressed.
Map Metadata
Number of Items
Integer
The total number of markers currently loaded on the map. Useful for displaying a count or making decisions when the map has no markers.
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.
Troubleshooting
The map loads but no markers appear
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 of Street, City, State, Postal Code, Country, or Latitude + Longitude to a populated field on the source object. Confirm the records actually contain a value (not all blank).
Markers show in Google Maps mode but disappear when switching to Leaflet
Leaflet only supports markers placed by Latitude + Longitude. Address-based fields (Street, City, etc.) are ignored by Leaflet because it doesn't include geocoding.
Either stay on Google Maps for address-based maps, or populate Latitude/Longitude fields on the records (Salesforce auto-fills these for standard Address fields when geocoding rules are enabled).
Dragging a marker visually moves it, but the new position isn't saved on the record
The Latitude and Longitude fields aren't mapped in Data Mappings, or the running user has no Edit FLS on those fields. The component writes the new coordinates back to the mapped fields — without them, the change is purely visual.
In Data Mappings, map both Latitude and Longitude to writeable number fields on the source object, 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 (geocoding service or Maps API). For Leaflet: the Tile Layer URL is invalid or unreachable from the user's network.
In Google Maps mode, check Setup → Maps and Location Settings. In Leaflet mode, leave the Tile Layer field blank to use the default OpenStreetMap layer.
Drawings made on the map (polygons, rectangles, circles) aren't saved
The component is configured for drawing but Auto Save Content Document is off and no Save As Button is shown. Drawings stay in memory until they're explicitly saved as a ContentDocument.
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. Without it, drawings save as standalone files in the user's Files area, not as attachments to a record.
Map Content Document Linked Entity Id to a record ID variable (typically {!recordId}). The drawing will then appear under Files on that record.
Marker clustering doesn't activate
Cluster is on, but Clustering only works in Google Maps mode with Latitude + Longitude mappings. It's ignored in Leaflet mode and for address-based markers.
Switch to Google Maps and confirm Latitude + Longitude are mapped.
The map doesn't filter by {!recordId} even though {!recordId} is referenced
The Data Source is set to Variable instead of Query, so server-side filtering doesn't apply. Variable mode shows whatever's in the variable.
Either switch to Query mode and add a Query Filter that references {!recordId}, or filter the variable upstream with a Get Records element that takes {!recordId} as a filter.
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 or blank.
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 event is being intercepted by an interaction that opens a Flow Panel without populating the output.
Add a Decision element after the screen to handle the empty case, and confirm the Marker Select interaction (if any) is wired correctly in the Interactions tab.
Last updated
Was this helpful?