Page cover image

🔄Map

The Map Component showcases an array of records on an interactive map.

The Map is also available as an Experience Cloud Component.

v5.3 New Feature Alert: Explore the Power of Leaflet Maps! Learn how Leaflet can enhance your mapping experience and why you might choose Leaflet over Google Maps.

Overview

The Avonni Map Component shows a map of a specific place. It can help you get a sense of location or get directions. You can zoom in, move around, and put markers on the map. It's also fully customizable to fit your needs.

Tutorials

NameDescriptionIllustration

The Map with Details component, integrating Avonni Map and Formatted Value elements, showcases important account details.

Learn to modify marker shapes, define custom paths, adjust color schemes, and much more.

Configuring the Map

Choose a Map Type

The Avonni Map component provides two map-type options - Google Maps and Leaflet Maps.

Google Maps

This option is based on Salesforce's Lightning Map component, which uses data and imagery from Google Maps to display one or more locations.

Leaflet Maps

This option leverages the Leaflet JavaScript library, a popular open-source tool for creating interactive maps. Leaflet Maps offer greater flexibility and enhanced performance compared to Google Maps.

Choose Google Maps if:

  • You value a familiar user experience: Users are likely already comfortable with Google Maps, minimizing the learning curve.

  • You require built-in features like street view and satellite imagery, but Google Maps offers a rich set of features out of the box.

  • Your mapping needs are relatively straightforward and don't involve a large number of markers: Google Maps is a great fit for your needs as it can handle standard mapping tasks with ease.

Please note that a maximum of 100 markers can be shown on the map simultaneously when using Google Maps.

Choose Leaflet Maps if:

  • You need highly interactive maps: Leaflet excels at creating maps that respond to user actions. For example, imagine an Airbnb-style map where you can zoom and scroll to different areas. A Leaflet map would automatically refresh and display only the relevant listings based on your current view. This kind of dynamic filtering is a major advantage of using Leaflet

  • You have many markers to display: unlike Google Maps, Leaflet can easily display many markers without limitations.

When using Leaflet Maps, ensure each address you want to display on the map has its latitude and longitude coordinates. Without these coordinates, Leaflet won't be able to place the markers on the map correctly.

Understanding these key differences lets you decide which map type best aligns with your needs and priorities within your Salesforce screen flow.


Single or Multiple Markers

The Avonni Map Component provides a dynamic way to visualize geographical data by displaying markers on a map. This component offers flexibility in presenting location-based information, allowing for either a single marker or multiple markers. Understanding the configuration process for these two options is key to effectively utilizing this component.

Single Marker Setup

  • Function: Focuses on showcasing one specific location.

  • Configuration: It can be easily set up by either manually entering the location or utilizing Salesforce flow variables combined with mapped values to determine the exact position.

  • Ideal Use: Perfect for highlighting a key location, like your company's main office or event location.

Multiple Markers Setup

  • Purpose: Designed to display several locations on the map.

  • Configuration Process: Involves a detailed setup, including selecting a Data Source and completing Data Mappings.

  • Applications: It helps depict various locations, such as different office branches, customer locations, or various regional data points, offering a comprehensive and detailed map view.


Data Source for Multiple Markers

The "Data Source" section will only appear in the properties panel if you choose the "Multiple Markers" option.

Choosing the right Data Source is crucial when displaying multiple markers on the Avonni Map Component. Your choice directly affects how the markers appear and what they represent. Here's a simple overview of the three main Data Source types:

NameDescription

This is the simplest option for displaying fixed locations. You can manually enter the latitude and longitude coordinates for each marker.

It is ideal for displaying locations that change based on data within your Salesforce flow. You can link the marker coordinates to flow variables, allowing for dynamic updates as the flow progresses.

The most versatile option lets you pull location data directly from Salesforce objects or custom queries. This is ideal for displaying markers based on complex criteria or large datasets.

Understanding these Data Source options will help you visualize various locations on your Avonni Map Component.

Data Mappings

To display your Salesforce data correctly on the map, you must match (or "map") your Salesforce fields to the corresponding attributes within the Avonni Map Component. For example, you would typically map a Salesforce field containing addresses to the 'address' attribute in the map component. Ensuring accurate data mappings is essential for the map to display the correct information.

Mapping the Location section is vital for correctly placing markers on the map.

Customizing the Map Marker

The "Type" attribute unfolds many customization options, allowing users to tailor each marker to meet specific visualization needs.

Overview of Marker Types in Avonni Map

  • Default: The most basic marker type, perfect for straightforward location displays.

  • Circle: A clean, circular marker with adjustable size (radius). Customize the fill color, transparency (opacity), and outline (stroke).

  • Rectangle: Provides a larger space for adding information or detail to your marker. Set precise boundaries using latitude coordinates. Customize the fill and stroke-like the circle marker.

  • Polygon: Create unique, multi-sided shapes to represent locations. Use the "Paths" feature to design your custom marker shape flexibly. Customize the fill and stroke just like the circle and rectangle markers.

  • Pin: A simple, customizable pin-shaped marker. Change the fill color and stroke (outline) for a clean, professional look.

  • Custom Icon: Upload your own SVG image file to create a unique marker that aligns with your brand or specific needs

What is an SVG Path?

  • In the context of Avonni Maps, an SVG Path is used to create custom shapes for marker icons. Instead of standard icons, you can design your own, making them unique to your application.

Creating an SVG (Scalable Vector Graphics) Path can vary in complexity depending on the design you want to achieve. Many online SVG editors or graphic design software can generate these basic shapes with minimal effort.

  • Customize the appearance of map elements to match your design. You can adjust:

    • Fill Color and Opacity: Change the color and transparency of shapes on the map (e.g., countries, regions).

    • Stroke Attributes: Control the border color, thickness, and style around map shapes.

    • Scale: Set the zoom level of the map to focus on specific areas or show a broader view

This concise breakdown covers the range of marker types available in the Avonni Map, each with its own set of customizable features to cater to different visualization strategies.

Other Settings

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.

Customizing the Center Point

By default, the map centers on a predetermined location. However, you have full control over adjusting this focus point based on your specific needs.

Using Coordinates

For precise control, specify the exact latitude and longitude where you want the map centered. This is useful if you need to highlight specific geographic coordinates.

Using Address Components

If you prefer a more intuitive approach, use address elements to define the center location:

  • Country (required): The country of the address.

  • State/Province (optional): The state or province of the address.

  • City (required): The city of the address.

  • Street (optional): The street address.

  • Postal Code (optional): The postal code of the address

Dynamically Setting the Center Point with Flow Variables

You can dynamically use flow variables to determine the map's center point for even greater flexibility. This is especially useful when the desired location changes based on user input or other flow data.

Example:

  1. Define a Flow Variable: Create a record variable or text variable within your flow to hold the location information

Adjusting a Zoom Level

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.

The Header section gives you control over the appearance and functionality of your Map header.

AttributeDescription

Title

Define a meaningful title for your Map. It introduces the timeline's content and is a key element of the visual hierarchy.

Caption

Use the caption field to add a brief description or supplementary information for your Map. This can be especially useful for providing context or additional details about the table data.

Icon

You can add an icon to your header to enhance its visual appeal or to help convey the Map's purpose or content at a glance.

Is Joined

This property, when activated, gives the header a square, shadowless bottom border. This makes the header blend seamlessly with another component, making the Map appear as a continuous, unified element.

Buttons

Add interactive buttons to your header to enable specific actions from the interaction pane. This provides additional functionality and enhances user engagement with the Map.

Filtering options

The "Filtering Option" allows you to add a filter menu that appears as a popover. When this feature is enabled, all the fields designated as filters will be displayed in this popover, keeping the list uncluttered and focused.

Search Engine Options

The "Searchable" toggle lets you specify whether the records within a particular column can be searched. When activated, a search bar is made available. Additionally, you can set placeholder text for the search bar and determine its position with available values: left, right, center, and fill.

Activating Search: To make a column searchable, toggle on the "Searchable" option in the configuration settings of your Avonni Map Component.

Setting Placeholder Text: Customize the search bar by adding placeholder text to guide users.

Positioning the Search Bar: Use the position attribute to set the location of the search bar. Options include:

  • left: Aligns the search bar to the left.

  • right: Aligns the search bar to the right.

  • center: Centers the search bar.

  • fill: Expands the search bar to fill the available space.

Choosing a list view

This function displays or hides the list of locations. Valid values are visible, hidden, or auto. The default value is auto, which shows the list only when multiple markers are present.

Adding Interactions

Interactions define what happens when users interact with the Map component. A list of interactions is available here.

Here are the available interactions for the Map component:

  • On Marker Select: The event is fired when the marker is selected.

  • On Header Action: The event is fired when pressing button actions.

Last updated