AX - Map

Overview

AX - Map is a Lightning App Builder component that displays your Salesforce records as interactive location markers on a map on record pages, app pages, and home pages.

Use it to visualize any records with location data—whether stored as addresses or latitude/longitude coordinates. Users can click markers to view record details, search and filter locations, and navigate directly to records on the map.

Perfect for territory planning, customer proximity views, asset tracking, service areas, or any scenario where geographic context helps users understand their data.

Getting Started

Use this simple tutorial to learn the basics of the Map component and start building your use cases.

Key features

• Data Integration: Retrieves records from any Salesforce object as map markers.

• Flexible Locations: Uses addresses or coordinates for marker placement.

• Interactivity: Supports clickable markers, filters, search, and restricted map controls.

• Customization: Dynamic titles, descriptions, and styled headers.

• Dynamic Bindings: Leverages {{Record.FieldApiName}} for context-aware displays.

• Visual Options: Card-style display and UI control toggles for tailored UX.

Component Comparison

This is a streamlined version of the Map component designed for quick implementation in Lightning App Builder's drag-and-drop interface. If you need more advanced options like custom marker styling, marker click actions, advanced map controls, custom popup designs, or specialized geolocation features, consider using the Map component in Dynamic Components for complete customization capabilities.

Use Cases

• Account Page: Map related Contacts, offices, or site visits.

• Opportunity Page: Visualize store or partner locations for deals.

• Custom Object Page: Display service locations, delivery points, or project sites.

• Sales Territory Dashboard: Show active Accounts or Leads by region with filters.

• Service Operations Overview: Plot technician routes or case locations.

• Event Planning View: Map event venues or marketing zones.

---

Configuration

Add the Map component to a Lightning Record Page in App Builder and configure via the Properties Panel.

Public Properties

These control data, markers, and behavior.

Property	Label	Type	Description	Example
sObjectApiName	Object Api Name	String	API name of the Salesforce object for records (e.g., Account, Lead).	Account
filter	Filter	String	SOQL WHERE clause to filter records (e.g., Status = 'Active').	Region__c = 'West'
orderBy	Order By	String	Field API name for sorting records (e.g., Name).	LastModifiedDate
limit	Maximum Number of Records	Integer	Maximum records to display as markers.	50
headerTitle	Header Title	String	Main title above map (e.g., “Service Locations”).	"Customer Map"
headerCaption	Header Caption	String	Subheading for context (e.g., “Filtered by Territory”).	"Active Accounts"
headerIconName	Header Icon Name	String	SLDS icon for header (e.g., standard:address).	utility:map
showSearch	Show Search	Boolean	Displays search bar for keyword searches on fields.	On
filterableFields	Filter Fields	String	Comma-separated field API names for filter panel (e.g., Region__c,OwnerId).	Region__c,Type
titleFieldName	Title Field Name	String	Field for marker titles (e.g., Name, Subject).	Name
descriptionFieldName	Description Field Name	String	Field for marker descriptions (e.g., Description, Summary__c).	Description
streetFieldName	Street Field Name	String	Field for street address (e.g., BillingStreet).	BillingStreet
cityFieldName	City Field Name	String	Field for city (e.g., BillingCity).	BillingCity
postalCodeFieldName	Postal Code Field Name	String	Field for postal/ZIP code (e.g., BillingPostalCode).	BillingPostalCode
stateFieldName	State Field Name	String	Field for state/province (e.g., BillingState).	BillingState
countryFieldName	Country Field Name	String	Field for country (e.g., BillingCountry).	BillingCountry
latitudeFieldName	Latitude Field Name	String	Field for latitude (used if no address fields).	Latitude__c
longitudeFieldName	Longitude Field Name	String	Field for longitude (used if no address fields).	Longitude__c
disableDragging	Disable Dragging	Boolean	Prevents moving the map by dragging.	Off
disableScrollwheelZooming	Disable Scrollwheel Zooming	Boolean	Disables zooming via mouse scroll.	Off
disableDoubleClickZoom	Disable Double Click Zoom	Boolean	Disables zooming via double-click.	Off
disableDefaultUi	Disable Default UI	Boolean	Hides default map UI controls (e.g., zoom, street view).	Off
displayAsCard	Display as Card	Boolean	Wraps map in a styled card container.	On

Best Practice: Use address fields (street, city, etc.) for ease or lat/long for precision; bind {{Record.FieldApiName}} in filters or headers for dynamic context. Test filterableFields for relevance.

Style Properties

Customize visuals (via Style Panel or Properties).

• Layout: Margin (outer spacing), Padding (inner spacing), Size (width/height).

• Header/Markers: Adjust fonts, colors, backgrounds, or borders for titles and markers.

• Card Styling: Customize borders/radius if displayAsCard is On.

Tip: Use card styling for polished dashboards; disable UI controls for static maps. (Placeholder for screenshot: Styled map with markers.)

---

Use Case Examples

Example 1: Account Contacts Map

Scenario: Display a geographic view of all contacts related to an account, showing their mailing addresses on an interactive map with role-based filtering for territory management.

Steps

1

Navigate to Lightning App Builder

Edit your Account record page

2

Drag the AX - Map component onto your page layout

3

Configure Data Source

• Set Object Api Name to Contact

• Set Filter to AccountId = {{Record.Id}} (shows contacts related to current account)

4

Configure Marker Information

• Set Title Field Name to Name (displays contact names on map markers)

• Set Description Field Name to Title (shows job titles in marker details)

5

Configure Address Fields

• Set Street Field Name to MailingStreet

• Set City Field Name to MailingCity

• Set Postal Code to MailingPostalCode

• Set Country Field Name to MailingCountry

6

Enable Search and Filtering

• Check Show Search for keyword searching

• Set Filterable Fields to Title (allows filtering by contact roles)

7

Customize Header

• Set Header Title to Contacts for {{Record.Name}} (dynamic header with account name)

• Set Header Icon Name to standard:contact

• Check Disable Dragging to prevent accidental map movement

8

Save & review

Result: An interactive map showing contact locations with role-based filtering and clickable markers that provide contact details, perfect for territory planning and relationship management

Example 2: Accounts Map Overview

Scenario: Empower your sales team with a geographical overview of your company's accounts.

1

Navigate to Lightning App Builder

Edit your Account record page

2

Drag the AX - Map component onto your page layout

3

Configure Data Source

• Set Object Api Name to Account

4

Configure Marker Information

• Set Title Field Name to Name (displays contact names on map markers)

• Set Description Field Name to Title (shows job titles in marker details)

5

Configure Address Fields

• Set Street Field Name to BillingStreet

• Set City Field Name to BillingCity

• Set Postal Code to BillingPostalCode

• Set Country Field Name to BillingCountry

6

Enable Search and Filtering

• Check Show Search for keyword searching

• Set Filterable Fields to Industry (allows filtering by account industry)

7

Customize Header

• Set Header Title to Accounts Overview

• Set Header Caption to World map

• Set Header Icon Name to standard:account

• Check Disable Dragging to prevent accidental map movement

• Check Show more details panel to activate a side panel when users click on a record

• Check Enable record create to let your users create accounts directly from the map

8

Save & review

Example 3: Service Locations Dashboard

Scenario: Create a comprehensive dashboard view of active service locations using GPS coordinates, with regional filtering and search capabilities for operational management.

Prerequisites: This example assumes you have created a custom Service Location object (Service_Location__c) with custom fields including Status__c (picklist for Active/Inactive), Latitude__c and Longitude__c (number fields for GPS coordinates), and Region__c (picklist or text field for geographic regions).

Steps

1

Navigate to Lightning App Builder

Edit your Service Dashboard page

2

Drag the AX - Map component onto your page layout

3

Configure Data Source

• Set sObjectApiName to Service_Location__c (or your custom object name)

• Set filter to Status__c = 'Active' (shows only active service locations)

4

Configure Location Information

• Set titleFieldName to Name (displays location names on map markers)

• Set latitudeFieldName to Latitude__c (uses stored GPS latitude coordinates)

• Set longitudeFieldName to Longitude__c (uses stored GPS longitude coordinates)

5

Configure Dashboard Display

• Check displayAsCard for professional container styling

• Leave disableDefaultUi unchecked to keep standard map controls (zoom, street view)

6

Enable Search and Filtering

• Check showSearch for keyword searching across location names

• Set filterableFields to Region__c (allows filtering by geographic regions)

7

Configure Marker Interaction

Set markers to display location details when clicked

8

Save and test the dashboard functionality

Result: A professional dashboard map showing active service locations with regional filtering, search capabilities, and detailed location information accessible through interactive markers

---

Key Considerations

• Location Fields: Use address fields for geocoding or lat/long for precision; ensure at least one set is mapped.

• Dynamic Bindings: Leverage {{Record.FieldApiName}} for filters/headers on Record Pages.

• Performance: Set limit for large datasets; test filters to avoid overload.

• Map Controls: Disable dragging/zooming for static views; keep UI for interactive dashboards.

• Interactions: Bind marker data (e.g., ID via titleFieldName) for navigations or flows.

• Accessibility: Ensure clear titles/captions; test marker clickability with keyboards.

---

Troubleshooting Common Issues

• No Markers Shown: Verify sObjectApiName, filter, and location fields (address or lat/long); check permissions.

• Bindings Fail: Confirm {{Record.FieldApiName}} context; test in Record Page preview.

• Filters/Search Missing: Enable showSearch/filterableFields; map relevant fields.

• Map Not Interactive: Check disableDragging/disableDefaultUi are Off; test permissions.

• Marker Overlap: Use limit to reduce markers; consider clustering in Screen Flows.

• Layout Issues: Adjust Style Panel for size/margins; test card display on mobile.

---

Summary

The Avonni Map component provides dynamic, location-based visualizations for Salesforce records, with filtering and interaction options. It's ideal for sales, service, and event planning on Lightning Record Pages.

Need More Advanced Features?

This App Builder version provides essential mapping functionality with simple configuration. For advanced capabilities like custom marker designs, interactive click actions, and specialized geolocation workflows, explore the Map component in Dynamic Components for more customization options.