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
Set up the map to show record details information	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.

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 that your Data Mappings are set up correctly, particularly for mapping locations. Here's why:

1. 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.

2. 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
Show Toast	Displays a brief pop-up notification on the screen, providing quick feedback or information after clicking a map marker.
Navigate	Redirects the user to a different page in your site or URL, guiding them to more detailed information about the clicked location.
Open Alert Modal	Opens a modal window with an alert message, presenting important information or warnings about the selected location.
Open Confirm	Triggers a confirmation dialog box, used for actions that require additional user confirmation, like event attendance.
Open Flow Dialog	Opens a dialog that runs a Salesforce Flow, initiating workflows or processes related to the clicked location.

Settings

🎛️ Properties

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. Auto: Automatically determines the best view. Visible: Keeps the list view always visible. Hidden: Hides the list view.
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: 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
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	Manual: Add map markers manually. Query: Use Salesforce data with data mapping for automatic marker placement
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	Placeholder: Text displayed in the search bar before input. Position: Choose from left, right, center, or fill for the position of the search bar
Size	Width & Height: Specify the dimensions of the map component. "Overflow" refers to how content that exceeds the boundaries of its container is handled or displayed. When the content inside a layout component is too large to fit within the assigned dimensions (height and width), the overflow setting determines what happens to the excess content. Overflow: Control how overflow content is managed.

🎨 Styling