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.
This is the map you probably use every day! It's familiar, easy to use, and comes with features like street view and satellite imagery. It's an excellent choice for more straightforward maps, especially if you don't need to show a lot of markers.
Familiar user experience: Your users are likely already comfortable with Google Maps, so they can jump right in without a learning curve.
Built-in features: Google Maps offers a rich set of features out of the box, like street view and satellite imagery, which can enhance your map's functionality.
Simple mapping needs: If your mapping needs are relatively straightforward and don't display many markers, Google Maps is a great fit. 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.
Leaflet Maps is perfect for highly interactive maps with many markers. It is flexible and customizable, allowing you to create a truly unique map experience.
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.
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.
You want to let users draw on the map: Leaflet lets you activate a drawing feature, so users can add markers, draw shapes (circles, polygons, lines), and interact directly with the map.
You want to use GeoJSON data: Leaflet supports GeoJSON, a special format for displaying geographic data. This lets you easily add county outlines, state borders, or other geographic features to your map.
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.
Want to put a spotlight on one specific spot on your map? The single marker setup is perfect for this! Enter the address or use Salesforce data to position the marker automatically. This is ideal for highlighting important places like:
Your company's main office
An event location
A key client's address
With a single marker, you can instantly draw your users' attention to the places that matter most.
Want to display a whole collection of places on your map? The multiple markers setup is the way to go! This allows you to visualize a variety of locations, such as:
All your store branches
Where your customers are located
Important landmarks in a city
Choose the right data source: Select the Salesforce object that contains the location information you want to show. This could be Accounts, Contacts, or any custom object with address data.
Connect your data: Map the fields in your Salesforce object to the map component. This tells the map which fields contain the address information for each marker.
With multiple markers, you can give your users a comprehensive view of all the relevant places.
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:
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.
To use the Draw feature, make sure you have Leaflet Maps selected as your map type.
The Avonni Map component lets you add interactive maps to your Salesforce flows. When using Leaflet maps, you can turn on a "Draw Feature" that allows users to draw directly on the map. This means they can add markers or draw shapes like lines and polygons. These drawings are then saved automatically.
Choose Leaflet as your Map Type: In the Avonni Map component settings within your Flow Builder, ensure you've selected "Leaflet" as your map type. This selection is crucial as the drawing functionality is exclusive to Leaflet maps.
Enable the Draw Feature: To add the drawing toolbar to the map interface, toggle the "Draw Feature" option in the component settings. This will give users the tools to interact with the map visually.
Draw on the Map: With the Draw Feature enabled, users can now interact with the map by adding markers and drawing shapes (lines, polygons, etc.) directly onto it. This allows for precise annotation and visual representation of data.
Automatic Saving with 'Save as Content Document': The map is automatically saved to the associated Salesforce record. Crucially, this automatic saving functionality relies on the 'Save as Content Document' feature enabled within the Avonni Map component settings. The map and its drawings are saved as a Content Document linked to the record when enabled. This ensures that the visual context created by the user is directly associated with the relevant data in Salesforce. This also means the content document will appear in the "Notes & Attachments" related list on the record.
Imagine you have a map showing customer locations. With the Draw Feature, you can draw a circle on the map to highlight a specific delivery zone or add markers for new potential customers. This information is then saved with the relevant record.
The Avonni Map component lets you give users drawing tools to interact with the map. Here's a breakdown of the tools and how they work:
The Avonni Map provides a range of tools to suit different needs. Here's how each one works:
Marker: 📍 Place a marker to pinpoint a specific location. This is perfect for marking addresses, store locations, customer sites, or any other point of interest.
Line: ➖ Draw a straight line connecting two or more points. Use this to visualize routes, paths, connections between locations, or distances.
Polygon: ▨ Create a custom shape with multiple sides. This is ideal for outlining areas like neighborhoods, property boundaries, service zones, or geographic regions.
Circle: ⭕ Draw a circle to highlight an area around a central point. This can be useful for defining delivery radiuses, service areas, or zones of influence.
Edit: ✏️ Modify existing shapes or markers. You can adjust their size, position, and shape after they've been drawn.
Delete: 🗑️ Remove any unwanted drawings from the map, giving users complete control to refine their annotations
You have full control over how users interact with the drawing tools:
Choose Which Tools to Display: Select only the tools relevant to your users' needs, keeping the interface clean and focused. You don't have to offer all the tools if they aren't necessary.
Customize the Toolbar Position: Place the drawing toolbar in the top-left, top-right, bottom-left, or bottom-right corner of the map, ensuring it complements your overall flow design without obstructing the map view.
By thoughtfully configuring these drawing tools, you can transform your Avonni Map from a static display into a powerful interactive element within your Salesforce flows.
When you enable the drawing tools, users can create valuable visual information by adding markers, outlining areas, and drawing paths. To ensure their work is saved and connected to the relevant Salesforce record, you can configure the map to store these drawings as a Content Document.
Enable Saving as a Content Document: In the Avonni Map component settings, find "Save as Content Document" option and toggle it on. This is the key to storing user drawings.
Link the Drawings to the Correct Record: The "Content Document Linked Entity Id" setting tells Salesforce which record the map drawings should be associated with. Typically, this will be the same record your flow currently works with (e.g., the Account or Opportunity record being displayed).
You'll usually want to use a text variable with the record's ID. For example, if your flow has a variable called recordId, you would enter {!recordId} in this field. This dynamically links the map to the correct record.
(Optional) Automatic Saving: For a seamless experience, you can enable "Auto Save Content Document." This will automatically save any changes users make to the map without them having to save manually.
Using an Existing Content Document: If you already have a Content Document you'd like to use, you can enter its ID in the "Content Document ID" field. This is less common for user-generated drawings.
Customizing the Content Document Title: You can provide a more descriptive title for the saved Content Document in the "Content Document Title" field. By default, it will be named "Avonni Map Drawing Document." For example, you could use a formula to create a title like "Map Drawings for Account - {!Account.Name}."
Capture User Insights: Record how users interact with the map and the visual context they create.
Preserve Important Information: Ensure valuable data added to the map isn't lost.
Enhance Record Details: Add a visual layer of information to your Salesforce records
The Avonni Map component allows you to work with GeoJSON, a standard format for representing geographic data (points, lines, polygons). Think of GeoJSON as a set of instructions that tell the map what to display
Use the "GeoJSON Value" attribute to display pre-defined geographic features on your map. This is perfect for visualizing fixed elements that don't require user interaction or modification. Think of things like:
Political Boundaries: Country borders, state lines, or county divisions.
Geographic Features: Outlines of lakes, rivers, or mountain ranges.
Designated Areas: Park boundaries, nature reserves, or restricted zones.
Pre-set Routes: Fixed delivery routes, transportation paths, or service areas.
The "GeoJSON Value" attribute accepts the following input to define the geographic data you want to display:
A GeoJSON Object: You can directly input a valid GeoJSON object representing a single feature (e.g., a polygon representing a state boundary).
An Array of GeoJSON Objects: To display multiple features, you can provide an array containing multiple valid GeoJSON objects (e.g., an array of polygons, each representing a different county).
Content Document ID: For larger datasets or easier management, you can store your GeoJSON data in a Salesforce Content Document and then enter the Content Document ID into the "GeoJSON Value" field. Important Note: The Content Document file containing the GeoJSON data has a size limit of 12MB.
The displayed data is read-only when using the "GeoJSON Value" attribute. Users can see the geographic features on the map, but they won't be able to move, edit, or delete them. This ensures the integrity of the displayed data when representing static elements. If you wish to enable editing, see the Draw GeoJSON Value attribute.
To allow users to modify geographic data, load initial GeoJSON data from a Salesforce Content Document using the Content Document ID attribute (found in the "Draw" section of the settings).
Store GeoJSON in a Content Document: Create a Content Document and upload your GeoJSON file.
Enter Content Document ID: In the "Draw" section, enter the Content Document ID into the Draw Content Document ID field.
Draw Feature is Automatically Enabled: The Draw Feature will be automatically turned on, giving users tools to edit the displayed shapes.
User Interaction: Users can edit, delete, and add new features to the map.
Save Changes: To save the modified GeoJSON, you must also enable the Save as Content Document feature (and optionally, Auto Save Content Document).
Unlike the GeoJSON Value which is for displaying static data, using Draw Content Document ID provides an initial set of shapes for users to modify. It's all about interactive editing.
The Draw Content Document ID needs to be used in conjunction with enabling Save as Content Document. After modifying the GeoJSON data, to save the edited GeoJSON, you must use the Save as Content Document feature (and optionally, Auto Save Content Document) as described in previous sections. This ensures the user's changes are stored back into Salesforce
Sales Territory Management: Load initial sales territory boundaries from a Content Document. Sales managers can then adjust these territories on the map based on real-world factors, and the changes are saved.
Delivery Zone Optimization: Provide delivery drivers with modifiable delivery zones. They can tweak these zones based on traffic patterns or customer density, and save their updated routes.
Project Planning: Load initial project area boundaries. Team members can refine these areas, mark specific points of interest, and save the updated plan.
By utilizing the Draw Content Document ID, you can create dynamic and interactive map experiences that allow users to modify geographic data directly within your Salesforce flows, making them more powerful and adaptable to evolving needs.
When your map displays multiple markers, it will automatically determine the best center point to fit all markers within the view. This center is calculated based on the average latitude and longitude of all marker locations.
You have several options for customizing where the map is centered:
If you don't specify a center point, the map will use a predetermined default location.
For precise control, you can manually set the center using latitude and longitude coordinates:
Map Center Latitude: Enter the desired latitude.
Map Center Longitude: Enter the desired longitude.
This is useful when you need to focus on a specific geographic location, regardless of marker positions.
Instead of coordinates, you can define the center using address elements:
Map Center Country (required): The country of the desired center location.
Map Center State/Province (optional): The state or province.
Map Center City (required): The city.
Map Center Street (optional): The street address.
Map Center Postal Code (optional): The postal code.
For maximum flexibility, you can use Flow variables to dynamically determine the map's center point. This is particularly useful when the desired center location changes based on user input, record data, or other Flow logic.
Example:
Define Flow Variables: Create record or text variables in your Flow to hold the address components or coordinates. For instance, you might have variables like {!Account.BillingStreet}, {!Account.BillingCity}, etc., if you want to center the map on an Account's address.
Reference Variables in Map Settings: In the corresponding "Map Center" fields (e.g., "Map Center City"), enter the Flow variables you created (e.g., {!Account.BillingCity}).
If you set a center point (using the previously mentioned methods), you can now visually represent it on the map with a marker using the "Display Center as Marker" toggle.
Enable Display Center as Marker: Toggle this option to "on" to display a marker at the defined center point. This is useful to visually highlight the central location you've set.
By combining these centering options, you can ensure your Avonni Map always focuses on the most relevant area for your users and your specific Flow's purpose
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.
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
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.
Add interactive buttons to your header to enable specific actions from the . This provides additional functionality and enhances user engagement with the Map.
Manual
This is the simplest option for displaying fixed locations. You can manually enter the latitude and longitude coordinates for each marker.
Variable
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.
Query
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
A Guide to the Drawing Feature [Soon]
Making Drawings Permanent Saving User Input on Maps [Soon]
%20(1).avif?alt=media&token=ed7f51e8-c283-4785-83b1-09b4d28b77b1)
%20(1).avif?alt=media&token=b9ed169a-98d6-489f-b838-f39481fa3f99)
.avif?alt=media&token=e824798f-7e7a-4e22-817f-d7b7eab4b9ed)
%20(1).avif?alt=media&token=8a3e8b09-f81b-4cba-9802-cbf7f3d0fe28)