AX - Map
Overview
AX - Map is an Experience Cloud component that displays Salesforce records as interactive location markers on Experience Sites pages.
Use it to show portal users locations based on address fields or latitude/longitude coordinates—like nearby service locations, customer sites, store finder results, or event venues. Users can click markers to see record details and navigate to records. Pull location data from any standard or custom object in Experience Builder.
Perfect for store locators, service territory maps, event location finders, customer proximity views, or anywhere portal users need to visualize geographic data.
The Avonni Map is a Reactive Data Component
Getting Started
Use this simple tutorial to learn the basics of the Map component and start building your use cases.
Configuration
Understanding the configuration process, particularly the Data Source and Data Mappings sections, is crucial to using this component effectively.
Data Source
The Data Source section is where you connect the Avonni Map with your Salesforce data. You have two options.
Manual
Manually enter map markers.
Ideal for non-dynamic data, testing, and demos.
Query
Create a query to auto-populate the map with Salesforce data.
Suited for dynamic, real-time, and large datasets.
Data Mapping
In the Data Mappings section, you can activate your Map component by specifying how the fields should be mapped. This involves aligning fields, such as location coordinates from your Data Source configuration, with the relevant map attributes.
Data Model Sharing with Avonni Map
Adherence to Salesforce Data Sharing Rules:
Respecting Org Settings: Avonni Components fully comply with the existing data-sharing configurations and access settings of your Salesforce organization.
No Interference Policy: These components do not alter or affect your pre-established data-sharing rules in any way.
Controlled Visibility and Access: The ability to view and interact with records through Avonni Components is governed by your organization's defined sharing settings and user permissions
You must focus on the Location section to ensure your Data Mappings are set up correctly, especially when mapping locations. Here's why:
Configuring Data Mappings: To ensure the Map component displays the correct information, you must map Salesforce data fields to their corresponding location labels. For instance, you'll map a Salesforce field containing street addresses to the 'street' label in the Map component, city names to the 'city' label, and so on.
Importance of Accuracy: Accurate mappings are vital. The Map component might display incorrect information if the wrong Salesforce field is mapped to a location label. For example, if the 'city' field is incorrectly mapped to the 'postal code' label, the map might show a location in an entirely different city or even a different country.
Filters
The Filters attribute lets you choose specific fields to filter and refine the markers displayed in the map component.
Per-Marker Settings
With a Manual data source, each marker row you add exposes its own fields:
Title and Description label the marker and its popup.
Location places the marker, using either address fields (Street, City, State, Postal Code, Country) or Latitude/Longitude.
Type sets the marker's shape — the same options as Center Location (
default,Circle,Rectangle,Polygon,Pin,CustomIcon).Shape markers add color controls — Fill Color/Fill Opacity and Stroke Color/Stroke Opacity/Stroke Weight — plus shape geometry: Radius (circles), Bounds (rectangles), or Paths (polygons).
Icon sets a custom marker icon, and an On Select interaction can fire when the marker is clicked.
Map Settings
Type selects the map engine — Google Maps (default) or Leaflet. Choose Google Maps for the familiar Salesforce Lightning map — the simplest option, but it caps the display at 1,000 markers. Choose Leaflet for larger datasets (no marker cap), custom map tiles, or advanced shape markers (circles, polygons, rectangles).
List Title sets a title for the list of locations, and List View controls whether that list appears: auto (shown only when multiple markers are present — the default), visible (always shown), or hidden.
Zoom Level sets the initial zoom. If left unset, the map automatically adjusts to show all the markers you've placed on it.
The zoom levels range from 1 to 22 on desktop browsers and 1 to 20 on mobile devices. Here's a quick guide to what each level generally shows:
Level 1: The entire world
Level 5: A continent or large landmass
Level 10: A city
Level 15: Street-level details
Level 20: Individual buildings
Refer to the Google Maps API documentation on Zoom Levels for more in-depth information.
Hide Zoom Controls removes the zoom in/out controls, and Zoom Controls Position sets where those controls appear on the map.
The following toggles control how users interact with the map, for a more streamlined, focused experience:
Disable Dragging prevents moving the map by click-and-drag. Disable Scrollwheel Zooming stops mouse-wheel zoom. Disable Double Click Zoom disables zoom on double-click. Disable Default UI removes standard map interface elements (like the street-view toggle) for a cleaner display.
Draggable Markers lets users drag markers to reposition them, and Disable Auto Pan Markers stops the map from automatically panning to keep markers in view.
Show Footer displays a footer on the map (useful for data sources or a legend), and Show Search adds a search bar so users can find and zoom to a specific location.
Header Actions add action buttons to the map's header.
Center Location
By default, when multiple markers are on the map it focuses on a central point computed from their locations. The Center Location setting overrides this:
Latitude and Longitude set the exact center coordinates — these take priority over the address fields.
Street, City, State, Postal Code, and Country center the map by address when coordinates aren't provided.
Display as Marker shows the center point as its own marker on the map.
Marker Type sets that marker's shape —
default,Circle,Rectangle,Polygon,Pin, orCustomIcon— with shape-specific Marker Type Attributes (such as radius, bounds, or path).
Clustering
Cluster Attributes group nearby markers so dense maps stay readable:
Cluster turns clustering on.
Max Cluster Radius sets how far, in pixels, a cluster reaches from its central marker (defaults to 80).
Disable Clustering at Zoom stops clustering at and below a chosen zoom level.
Show Coverage on Hover outlines the bounds of a cluster's markers when the user hovers over it.
Filtering & Search
Filters (set in Data Mappings, above) choose which fields users can filter markers on, and Filter Menu Attributes control the filter menu — its type (horizontal, popover, or panel), the picklist filter sort order, whether empty picklist values are hidden, and whether filter values cascade.
Search Engine Attributes configure the search bar (requires Show Search): its Placeholder text and Position (left, right, center, or fill).
Interactions
For the Map component, it features an "on Select" interaction. This function lets you specify what action should occur when users click on a map marker.
Displays a brief pop-up notification on the screen, providing quick feedback or information after clicking a map marker.
Redirects the user to a different page in your site or URL, guiding them to more detailed information about the clicked location.
Opens a modal window with an alert message, presenting important information or warnings about the selected location.
Triggers a confirmation dialog box, used for actions that require additional user confirmation, like event attendance.
Opens a dialog that runs a Salesforce Flow, initiating workflows or processes related to the clicked location.
Styling
Controls the map's dimensions (Width / Height / Overflow).
Controls the outer spacing around the map.
Controls the inner spacing of the map.
Use Cases
Learn to display records on Experience Cloud using Avonni Map.
Example 1 : Reactive Account Map
Bring your account data to life with an interactive map that responds instantly to user selections. By connecting the Map component to your Accounts Data Table, you can display precise billing locations the moment a rep clicks on any account record.
What You'll Achieve
Context-aware mapping: The map automatically updates to display the selected account's billing location based on the rep's choice in the data table
Streamlined account navigation: Reps can visually locate accounts without ever leaving the page
Before You Begin
Accounts Data Table component: Ensure an Accounts Data Table component is already placed on the page with the API name
AccountsTable
How to Set It Up
Example 2 : Customer Order Tracking
Give your customers real-time visibility into where their orders are. By mapping geolocation data directly from the Order object, you can build a transparent, intuitive tracking experience that keeps customers informed every step of the way.
What You'll Achieve
Live order visibility: Customers can see the current location of their order plotted on an interactive map
Trust through transparency: A clear, visual tracking experience reduces support inquiries and improves customer satisfaction
Before You Begin
Custom Geolocation field: Ensure a custom Geolocation field has been created on the Order object to store real-time tracking coordinates
How to Set It Up
Mis à jour
Ce contenu vous a-t-il été utile ?