Map
The Map Component showcases an array of records on an interactive map.
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
Name | Description | Illustration |
---|---|---|
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
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: 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.
Significance: These settings are critical as they not only determine the placement of each marker but also how they visually represent related Salesforce data.
Applications: Useful for depicting 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.
The proper Data Source is key when setting up multiple markers in the Avonni Map Component. This choice dictates how markers are displayed, whether they represent static locations, dynamically change with Salesforce data, or are derived from complex queries. We'll briefly cover the three main Data Source types - Manual, Variable, and Query - to guide you in effectively visualizing multiple locations on your map.
Data Source Type | Use Case | When to Use |
---|---|---|
Manual | Manually entering data for each marker, ideal for a fixed set of locations. | When the locations are static and predefined. |
Variable | Dynamically displaying markers based on variable collections in Salesforce. | When marker locations reflect real-time data from Salesforce records. |
Fetching data based on a specific query, pulling various records or data points. | Ideal for complex data retrieval or when sourcing. Using a 'Get Records' collection is not necessary with this method, as the query itself is powerful enough to simplify your flow. |
Data Mappings
Aligning Salesforce fields with the Avonni Map attributes is crucial for accurate data representation.
Implementation:
Map fields such as location coordinates from your 'Get Records' collection to the corresponding map attributes.
Mapping the Location section is vital for correctly placing markers on the map.
Customizing the Map Marker
The "Type"
Field feature unfolds many customization options, allowing users to tailor each marker to meet specific visualization needs.
Overview of Marker Types in Avonni Map
1. Default
Offers a standard marker icon for simple, straightforward location representation.
2. Circle
Provides a clean, organized look with a customizable radius for size control.
Additional Customizations: Fill in the color, opacity, and stroke attributes.
3. Rectangle
Larger visual area for better visibility and detail.
Bounds Latitudes: Precisely define rectangular boundaries.
Customization Options: Similar to the circle, fill and stroke.
4. Polygon
Creative multi-sided shapes for unique representation.
Paths Specification: Create custom shapes with complete flexibility.
Customization Attributes: Same as circle and rectangle, allowing for detailed design adjustments.
5. Custom Icon
Ultimate customization with brand-specific or thematic icons.
SVG Path: Design specialized icons.
What is an SVG Path?
SVG stands for Scalable Vector Graphics. It's a way to create and display vector images on web pages.
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, Stroke Attributes, and Scale: Fully adjustable to suit various map backgrounds and scales.
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.
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
If you'd like the map to focus on a different point, you can manually set the center location using the "center" attribute. You have a couple of options for doing this:
Using Coordinates: You can specify the latitude and longitude to pinpoint the exact location where you want the map to be centered.
Using Address Elements: You can also use address components like Country, State, City, and Postal Code to set the center location. Including the street is optional.
Note that the format for setting the center location is the same as for placing map markers. However, you can't add a title, icon, or description to the center point.
Adjusting a 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.
You can find an option in the Properties panel to manually set the zoom. 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.
Header
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. |
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
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.
Adding Interactions
Interactions define what will happen when users interact with the Map component. You can find a list of interactions 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 buttons actions.
Specifications
Name | Type | Description |
---|---|---|
| String | Displays or hides the list of locations. Valid values are Passing in an invalid value hides the list view. |
| String | Provides the heading title for the markers. Required if specifying multiple markers. The title is displayed below the map as a header for the list of clickable addresses. |
| String | Provides the value of the currently selected marker. Returns undefined if you don’t pass value to map-markers. |
| Boolean | If present, the footer element is displayed below the map. The footer shows an 'Open in Google Maps' link that opens an external window to display the selected marker location in Google Maps. |
| String | The zoom levels as defined by Google Maps API. If a zoom level is not specified, a default zoom level is applied to accommodate all markers on the map. |
| MapMarker[] | One or more objects with the address or latitude and longitude to be displayed on the map. If latitude and longitude are provided, the address is ignored. |
Last updated