Map
Overview
The Avonni Map Component enhances Salesforce Experience Cloud websites by integrating interactive maps. This document outlines the various settings available for customizing the map component.
The Avonni Map is a Reactive Data Component
🎥 Tutorials
Name | Description |
---|---|
Learn to display records on Experience Cloud using Avonni Map. |
Configuring the Map
Understanding the configuration process, particularly the Data Source and Data Mappings sections, is crucial to use this component effectively.
Data Source Configuration
The Data Source section is where you connect the Avonni Map with your Salesforce data. You have two options.
Data Source Type | Description | Use Case |
---|---|---|
Manual Data Source | Manually input data into the data table. | Ideal for non-dynamic data, testing, and demos. |
Query | Create a query to auto-populate the table with Salesforce data. | Suited for dynamic, real-time, and large datasets. |
Data Mappings Configuration
In the Data Mappings section, you can activate your Map component by specifying how the fields should be mapped. This involves aligning fields like location coordinates from your Data Source configuration with the relevant map attributes.
You must focus on the Location section to ensure that your Data Mappings are set up correctly, particularly for 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 that can be used to filter and refine the markers displayed on the map component.
Other Settings
List view
This function displays or hides the list of locations. Valid values are visible, hidden, or auto. This value defaults to auto, which shows the list only when multiple markers are present.
Zoom Level
In the map component, you can adjust the zoom level to focus on different areas, from the world to individual buildings. If you don't set a zoom level, the map will automatically adjust to show all the markers you've placed on it.
The Properties panel has an option to set the zoom manually. 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 zoom 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.
Map Component UI behavior
These settings allow you to control how users interact with the map, providing a more streamlined and focused user experience. From disabling specific zoom and drag functions to adding valuable features like a search bar or a footer, each setting has a distinct purpose:
Setting | Description |
---|---|
Disable Dragging | Prevents moving the map through click-and-drag, keeping it in a fixed position. |
Hide Zoom Controls | Removes the zoom in/out controls, maintaining a consistent zoom level on the map. |
Disable Scrollwheel Zooming | Stops the map from zooming in or out with the mouse wheel, ensuring a steady zoom level. |
Disable Double Click Zoom | Disables zooming in when double-clicking on the map, maintaining a fixed zoom level. |
Disable Default UI | Removes standard map interface elements like street view toggle, providing a cleaner map display. |
Show Footer | Displays a footer on the map for additional information such as map data sources or a legend. |
Searchable | Adds a search bar to the map, enabling users to find and zoom in on specific locations or points easily. |
Map center location
When using multiple markers on the map, the map will automatically focus on a central point near the middle of all the markers. It calculates this point based on their locations.
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.
Interaction Type | Description |
---|---|
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. |
Settings
Name | Description |
---|---|
List Title | Set a title for your map list. |
List View | This feature is particularly useful for users to see a detailed list of the places or items on the map.
|
Zoom Level | 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 zoom level generally shows:
|
Disable Dragging | Prevent users from dragging the map view. |
Hide Zoom Controls | Remove the zoom in/out controls from the map |
Disable Scrollwheel Zooming | Turn off zooming using the mouse scroll wheel |
Disable Double Click | Prevent double-clicking from zooming in on the map |
Disable Default UI | Remove the standard Google Maps interface for a cleaner look |
Show Footer | Add a footer section to the map component |
Searchable | Enable a search function within the map |
Data Source |
|
Map Center Location | Specify the initial central point of the map |
Filtering Options | Set up filters for the map, displayed as a popover |
Search Engine Options |
|
Size |
"
|
Last updated