Map
The Avonni Map shows a map of a specific place. It can help you get a sense of location or get directions.
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
Customization
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.
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.
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.
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.
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 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.
Mapping the Location section is vital for correctly placing markers on the map.
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.orgmust 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:
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):
1
The entire world
5
A continent
10
A city
15
Street-level
20
Individual buildings
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 so users can narrow down which markers are shown. Use Type to choose where the filters appear: Horizontal (default, inline above the map), Popover (a filter button), or Panel (a collapsible side panel beside the map).
Map Display Settings
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)
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
Interactions
Interactions 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.
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.
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.
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.
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.
Customizes the border.
Color: Border color.
Size: Border thickness.
Style: Border style (solid, dashed, etc.).
Radius: Corner rounding.
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.
Adjusts display when opened as a modal dialog inside a Flow screen.
Width: Dialog width.
Height: Dialog height.
Background Color: Dialog background color.
Adjusts display when opened as a side panel inside a Flow screen.
Width: Panel width.
Background Color: Panel background color.
Controls the background color of Leaflet map markers.
Color: Marker background color.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Others
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
The most common Map issues, grouped by how they show up. If the map worked before and broke after you changed a setting, start with the first table.
After Editing the Component
Markers disappeared after changing the Data Source or the source object
The field mappings from the previous setup no longer apply, so the component finds no location fields to read
Reopen Data Mappings in the Properties tab and re-map at least the Location section for the new source
Markers disappeared after switching from Google Maps to Leaflet
Leaflet places markers only by Latitude + Longitude. Address fields are ignored because Leaflet cannot geocode
Map Latitude and Longitude in Data Mappings, or switch back to Google Maps for address-based records
The map no longer recenters when the mapped Center Location changes
Display Center as Marker is on. At runtime, the component stops applying center updates coming from variables because it cannot tell a user pan apart from a variable change. The Component Builder preview still recenters, which makes this easy to miss
Turn off Display Center as Marker when the center must follow a flow variable
The map is configured correctly but shows nothing at runtime (preview is fine)
With Data Source set to Variable, the collection is empty when the screen loads: the Get Records or Assignment element feeding it has not run yet
Place the Get Records element before the screen and confirm the variable is populated on every path that reaches the screen
Error Messages and Blank Maps
Toast: "Error creating your content document" when saving drawings
Content Document Linked Entity Id does not resolve to a valid record ID at runtime, or the running user cannot create Files
Set Content Document Linked Entity Id to a real record ID (typically {!recordId}) and confirm the running user can create Files on that record
Toast: "Error updating your content document"
The file referenced by Content Document Id was deleted, or the running user has no edit access to it
Clear Content Document Id so the component creates a new file, or restore access to the existing one
Toast: "The file you are trying to upload is too large"
The GeoJSON or drawing file exceeds the 12MB Apex heap size limit that Salesforce enforces when the component reads the file
Simplify the geometry or split the data into files under 12MB
The map shows a gray empty area instead of tiles
Google Maps: map settings are disabled in Setup. Leaflet: the tile server is blocked or the custom Tile Layer URL is invalid. The default OpenStreetMap server needs to be trusted by your org
Google: check Setup > Maps and Location Settings. Leaflet: add https://tile.openstreetmap.org to Setup > Trusted URLs, and clear Tile Layer to return to the default server
Markers, Outputs, and Browsers
No markers appear at all
The records have no usable location data. A marker needs 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 and confirm the records contain values
Single marker mode shows no marker
Every location field is empty at runtime, so the component hides the marker without an error
Make sure at least one location value (Latitude + Longitude, City, State, Postal Code, or Country) is set when the screen loads
Marker clustering has no effect
Clustering is a Leaflet-only feature, or Enable Marker Clustering is off
Switch Map Type to Leaflet and turn on Enable Marker Clustering
The map ignores a {!recordId} filter
The Data Source is Variable, so no server-side filtering applies
Use the Query data source and add a query filter that references {!recordId}
Output variables stay empty after the screen
Output variables only populate after the user interacts with the map. Dragged outputs also require Draggable Markers to be on
Enable the matching feature, and add a Decision element after the screen to handle the empty case
A dragged marker's new position is not saved to the record
Dragging only updates the Dragged Marker output variables. The component writes nothing to Salesforce on its own
After the screen, add an Update Records element that saves Dragged Marker Latitude and Dragged Marker Longitude to the record
Marker clicks do nothing in Firefox (Chrome works)
A Firefox-specific conflict between Salesforce Lightning Web Security and the map library blocked click handling in older package versions
Update Avonni Flow Screen Components to 6.30.0 or later (and Experience Components to 1.25.0 or later when the flow runs on an Experience site)
On an Experience Cloud site, the header menu dropdowns are cut off behind the map
The map draws above the standard theme header
In the site's CSS editor, add .forceCommunityThemeHeaderBase { z-index: 91; } to raise the header and its menus above the map
Last updated
Was this helpful?