Map
The Map Component showcases an array of records on an interactive map.
Last updated
The Map Component showcases an array of records on an interactive map.
Last updated
The Map is also available as an Experience Cloud Component.
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.
Catogorized those!!!
Building a map with instant account insights
The Avonni Map component provides two map-type options - Google Maps and Leaflet 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.
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.
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 many markers. Google Maps is a great fit for these needs, as it can easily handle standard mapping tasks.
Please note that a maximum of 100 markers can be shown on the map simultaneously when using Google Maps.
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.
The Avonni Map Component lets you show locations on a map using markers. Depending on your needs, you can choose to display a single marker or multiple markers. This section will explain how to set up both options.
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.
This section explains using markers to show multiple locations on your Avonni Map.
Multiple markers help visualize various locations, such as:
Different office branches
Customer locations
Regional data points
Setting up multiple markers involves a few steps:
Choose the right data source: This is important because it determines how your markers will appear and what information they will represent.
Complete data mappings: You must connect your Salesforce data to the map component.
When you want to display multiple markers on your map, picking the right Data Source is important. It determines what the markers will look like and what they'll show. Let's look at the three main ways to get data for your map:
| Name | Description |
|---|---|
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.
Connect your Salesforce fields to the Avonni Map attributes so they show the correct information. For example, link your "Address" field to the "address" attribute on the map.
Mapping the Location section is vital for correctly placing markers on the map.
The "Type" attribute unfolds many customization options, allowing users to tailor each marker to meet specific visualization needs.
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.
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.
Tutorial: How to customize the Map Marker.
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.
By default, the map centers on a predetermined location. However, you can adjust this focus point based on your needs.
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.
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
For even greater flexibility, you can dynamically use flow variables to determine the map's center point. This is especially useful when the desired location changes based on user input or other flow data.
Example:
Define a Flow Variable: Create a record variable or text variable within your flow to hold the location information
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.
| Attribute | Description |
|---|---|
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. |
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.
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.
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.
The Map component lets you control what happens when users do different things.
Here's a breakdown of the available interactions:
This action happens when someone clicks or taps on a marker on the map.
This action is triggered when someone clicks or taps on any buttons you've added to the map's header.
This action occurs when a user clicks and drags a marker to a new location on the map.
You can use these interactions to trigger different actions in your flow, like showing more information about a location, filtering the map data, or updating records.
