One component, everywhere you build

Put your Salesforce records on a map. Anywhere you build.

Plot accounts, sites, and assets, then plan the day on the same map: pick the stops, get the road route and the drive time to each one. In Screen Flows, on Lightning pages, and in Experience Cloud, configured with clicks.

Start freeExplore the documentation
25
stops in one route
6
marker types, custom SVG included
0
lines of Apex
Route planning

Plan a day of visits without leaving the map

Tuesday, five site visits around Austin. The rep picks the five sites on the map, and the Map draws the road route between them, stop by stop.

Avonni Map on a Salesforce Home page: five Austin site visits joined by the road route, and the Route panel listing each stop with its arrival time, 1:00 PM to 3:31 PM, 2 hr 31 min
1

Build the route on the map

Click markers to add stops, or draw a box or a lasso around several at once. Start from any record on the map or from your own position. Up to 25 stops.

2

Read the day at a glance

The Route panel gives the distance and drive time to each stop. With a Mapbox key, it adds an arrival time at every stop and the length of the whole day, visits and lunch included.

3

Rework it in seconds

Drag the stops into a new order, or let the Map optimize it. Open any stop in Google Maps or Waze, or export the day as a CSV.

Set up once per org, in a few minutes
1
Get a key from OpenRouteService or Mapbox.
2
Add the provider as a Remote Site Setting.
3
In the Avonni Settings tab, enable routing and paste the key.

Routing runs on the Leaflet map. Avonni hosts no routing service: the request goes from your org to the provider you picked.

Read the routing setup
Same component, every surface

One map. Four places to put it.

The same map engine follows you across Salesforce. What changes is where it lives and how you add it, not what it can do.

Avonni Map in a Salesforce screen flow: Choose a service location, with service centers plotted around Chicago and a Next button
Screen Flows

In a Flow screen

Drop the map component onto any Flow screen and point it at a collection of records. Users see them plotted, select a marker, and pass the choice downstream, or build a route through them on the screen.

Flow Screen ComponentsSee the Map for Flows landingRead the Screen Flow components guide
Avonni Map on a Salesforce Account record page: Mueller Distribution, with an Accounts nearby map of seven Austin sites, search and Industry filter on the map
Lightning pages

On a record or app page

Build it visually with the dcMap component in Dynamic Components, wire a query with no Apex, and drop the result onto any Lightning page in App Builder.

Dynamic Components
Avonni Map on the SolarOps customer portal, an Experience Cloud site: service centers near you around Austin, on the map and in a list, for the signed-in member
Experience Cloud

On a portal or site

Add the AX-Map to any Experience Cloud page. It respects your sharing rules and guest access, so external users see only the locations they should.

Experience Cloud Components
<avonni-dd-leaflet-map
  query={accountQuery}
  mapping={mapping}
  cluster
  routing
  search-fields={searchFields}>
</avonni-dd-leaflet-map>
LWC / code

In your own component

Developers drop avonni-dd-leaflet-map straight into an LWC template with documented attributes. Same map, in the markup you already own.

LWC Components
Where teams use it

Built for the work people actually do

Narrow the map without leaving it

Tick an industry and the map falls to the sites that match. Search and filters sit in the header or right on the map, so it keeps its full width.

Open a site, read the whole record

Click a pin and its popup shows the fields you picked, so the team reads the record without leaving the page.

Pick a site, hand it to the next screen

In a screen flow, the user picks a marker and the next screen opens on that site, record already loaded.

And more, without code
v
Marker clustering
v
Custom SVG markers
v
Several records at one address
v
Select several markers
v
Drawing tools
v
List view of records
In a real org

Map, configured for one job.

Avonni Map in step 2 of a Salesforce screen flow: a roof outline drawn as a polygon on OpenStreetMap tiles, with drawing tools and a Save survey button
center
Screen Flows

Site survey inside a flow

A technician traces the roof on a live map, in step 2 of a screen flow, and the shape is saved as a file on the work order.

See the configuration
All use cases
Live in the Playground

The Map, in 30+ live examples.

Real screens built with Avonni, one industry job each. Open one to see it run and copy its code, or try the Map on its own and change any property live.

Try the Map live →
Home care visit report, built with Avonni components
Screen Flows · Healthcare
Home care visit report
Open it live →
Field service work order, built with Avonni components
Lightning Pages · Manufacturing
Field service work order
Open it live →
Store events and locator, built with Avonni components
Experience Sites · Retail
Store events and locator
Open it live →

The native map shows pins. Avonni maps let people work.

Salesforce's standard map component plots records as pins on Google Maps. Avonni adds a second map engine, clustering, drawing, filters on the map, and routes between your records, all configured with clicks.

See it on a Flow
2
map engines: Google and Leaflet
Any
object with an address or coordinates
Built-in
clustering, drawing, and filters on the map
Video tutorials

See the Map built, step by step

Build a Dynamic User Activity Report in Salesforce Flow Builder with Avonni Components
20:22
Screen Flows

Build a Dynamic User Activity Report in Salesforce Flow Builder with Avonni Components

Pick a user and see their metrics, accounts on a map, and account details, all on one screen.

Advanced
Tutorial
Build a "No-Code" Salesforce Map for Instant Account Insights (Flow Tutorial)
11:10
Screen Flows

Build a "No-Code" Salesforce Map for Instant Account Insights (Flow Tutorial)

Accounts on a map colored by industry, with account details that open in a side panel on click.

Intermediate
Tutorial
Customize Map Markers in Salesforce Flows (Avonni Map Tutorial)
8:35
Screen Flows

Customize Map Markers in Salesforce Flows (Avonni Map Tutorial)

Change map marker colors and opacity in a screen flow, and color markers from field values.

Beginner
Tips & tricks
How to Create Reactive, Interactive Maps in Salesforce Experience Cloud with no-code
8:26
Experience Sites

How to Create Reactive, Interactive Maps in Salesforce Experience Cloud with no-code

On an Experience Cloud site, link a data table to a map so the map follows the user's selection.

Intermediate
Tutorial
Build a Dynamic, Reactive Map in Salesforce Screen Flows with Avonni Components: No Code
14:32
Screen Flows

Build a Dynamic, Reactive Map in Salesforce Screen Flows with Avonni Components: No Code

A screen flow with a map of accounts and a details panel that updates when you select an account.

Beginner
Tutorial
All video tutorials
Questions

Map, answered

Which package is the Map in?

It ships across the Avonni suite. The Flow version is in Flow Screen Components, the Lightning-page version in Dynamic Components, and the portal version in Experience Cloud Components. One subscription covers all three.

Does it use Google Maps or Leaflet?

Both. Pick Google Maps or Leaflet per map. Leaflet uses OpenStreetMap tiles, which you allow by adding the tile URL to your org's Trusted Sites. Clustering, drawing, and route planning run on Leaflet.

Can the Map plan a route?

Yes. Users pick up to 25 stops on a Leaflet map and get the road route, with the distance and drive time to each stop. With a Mapbox key, the panel also gives an arrival time at every stop and works out the fastest order for routes of up to 12 stops. An admin turns routing on once per org, with an OpenRouteService or Mapbox key.

Does route planning send data outside Salesforce?

Only once an admin turns it on. Each route request goes from your org to the provider you picked, OpenRouteService or Mapbox, with your own key, and carries the coordinates of the stops. Avonni hosts no routing service, and each route counts against your plan with the provider.

Doesn't Salesforce Maps plan routes too?

Yes. Salesforce Maps is a separate product, licensed per user, with automated routes and schedules. The Avonni Map adds routes to the map you already configure in a flow, on a page, or on a portal, with your own provider key.

Can users draw on the map?

Yes. With Leaflet, drawing tools let users sketch shapes on the map, and you can save the result back to Salesforce as a file on a record. When they plan a route, users can also draw a box or a lasso to add every marker inside it as a stop.

Something missing on the Map? Users ask, we ship. See what shipped →

Other components

See where another component runs, and how it is configured.

Data TableKanbanCalendarTimelineListPivot TableChatBrowse all components

Put your records on the map

Install free from the AppExchange and add a map to your first Flow, page, or portal today. Talk to us when you are ready to scale.

Start freeTalk to sales