LogoLogo
HomepageYouTube ChannelInstall from the AppExchange
  • Home
  • Dynamic Components
  • Flow Components
  • Experience Components
  • Projects
  • 👋Welcome
  • Getting Started
    • Product Tour
    • Quickstart Guide
    • Learn the Basics
    • Installation & Licenses management
    • Flow vs. Dynamic Components
    • Integrating with Experience Cloud
  • Tutorials
    • Videos
    • Projects Tutorials
    • Components Tutorials
      • Alert
        • Create a custom branding alert
        • Create an error alert dismissible
      • Avatar
        • Create an avatar with actions
        • Create an avatar with details
      • Avatar Group
        • Display a list of contacts related to an account
        • Display a list of sharing users related to the record
      • Barcode
        • Generating and Displaying Barcodes for Product Codes
      • Biometrics
        • 101 Tutorial
      • Button
        • Customizing Flow Navigation Buttons
        • How to Add a "Cancel and Close" Button
        • How to Open Flows from Buttons
      • Button Groups
        • Identifying Clicked Buttons
      • Button Menu
        • How to change dynamically Avonni Button Menu Icons
      • Calendar
        • Calendar 101 Tutorial
        • How to Connect Multiple Data Sources to the Avonni Calendar
        • How to Customize Time Spans
        • How to Customize the Right-Click Menu
        • How to Add an Edit Action to Events
        • How to Add a New Event Button to the Avonni Calendar Header
        • How to Create Events by Dragging in the Avonni Calendar
        • How to Reschedule Events with Drag and Drop
        • How to Color-Code Calendar Entries in the Avonni Calendar
        • Using a variable Data Source
        • Using a Query Data Source
      • Carousel
        • Build a Related Products Carousel
      • Combobox
        • Implement Dependent Picklists in Comboboxes
        • How to Dynamically Enable/Disable Dependent Picklists
        • Using Multi-Select Comboboxes with Reactive Formulas
      • CSV Parser
        • 101 Tutorial
      • Data Table
        • Adding Filters
        • How to add Images onthe Data Table
        • Creating Row Actions
        • Displaying a Record as a QR Code
        • Displaying Record Name field as a link
        • Learn the Basics
        • Making a field editable
        • Setting Up Data Export
        • Tips and Tricks
          • Activate infinite scrolling
          • Creating an action from a button or a link
          • Customizing the Badge Color using a formula
          • How to Grayscale Header Actions Dynamically in Avonni Data Table
          • How to Conditionally Color Cells
          • Enabling auto-refresh on the Data Table when pressing a button
          • Handling formula text field
          • How to set column visibity
          • Passing multiple record IDs to another flow
          • Data Table Editor
      • Date Picker
        • Display a date picker with Marked Dates from a Get Records
      • Date Time Picker
        • How to create Collection Variables for StartDateTime and EndDateTime
        • How to Block Out Times
      • Delay Interaction
        • Creating a Confetti Celebration on the Final Screen
        • Launch a flow dialog without a screen
      • Dual Listbox
        • Display contacts with custom icons
        • Accounts list group by industry
      • Expandable Section
        • How to add components into an expandable section
      • Header
        • Building Engaging Card Headers
        • Crafting a Profile Header
        • Adding Action Buttons to Headers
        • Adding a Background Image to Your Header
      • Input Pen
        • Add the custom Toolbar
        • How to Store Input Pen Drawings as Attachments in Salesforce
      • Kanban
        • 📹Introduction
      • List
        • Create a grid list with images
        • Create a sortable list
        • How to Reorder Items and Update Records
        • Vertical List with Actions
      • Navigation
      • Map
        • Customize the Map Marker
        • Visualizing Account Information on a Map
      • Metric
        • 📹Introduction
      • Microphone
        • Save the Microphone recording file as an attached on a record
      • Progress Indicator
        • Creating a Universal Dynamic Progress Step Collection
        • How to Change the Appearance of Your Progress Indicator using a variable
        • Error Handling
      • QR Code
        • Generate a QR Code from a record field
      • Record Detail
        • Using the Record Detail with Reactive Screens
      • Scoped Notification
        • Display message based on a value
      • Text Area
        • TextArea issue with max length when clicking on the next button
      • Tree
        • Build a Tree View with Dynamic Record Details
      • Timeline
        • Assigning multiple source collection to the Timeline
        • Customizing Date Format in the Timeline Component using Luxon
        • Create a horizontal activity timeline
        • Display Tasks
        • Perform actions on selected tasks
      • Vertical Visual Picker
        • Adding sub-items
        • Display a list of online contacts
    • Interactions
      • Enabling auto-refresh for queries after the Flow Dialog ends
      • Creating a Confetti Celebration on the final screen
      • How to create an interaction to navigate to an object
      • How to create an interaction to a record page
      • How to create an interaction to open another flow
      • How to pass an Input Variable from One Flow to Another
      • How to setup an Open Flow Panel interaction
    • Reactive Query Tutorials
      • How to make Data Tables Reactive
      • Build a reactive Data Table Using Dependent Picklists
      • Building a Dynamic Metrics Dashboard with the Data Table
      • How to build a reactive 'Quarterly Opportunity Tracker' component
      • How to Create a Combobox-Filtered Data Table
      • Create a Dynamically Linked Account-Contact View
      • Troubleshooting
    • Tips and Tricks
      • Copy / Paste a component settings
      • Create a link to the record using the href attribute
      • Create a variable and use it in a component property
      • Data Table
      • Hide Standard Header and Footer in a flow
      • How to pass your current RecordID in your screen flow
    • Platform Events
      • Configuration tutorial
  • Flow Components
    • Explore All Components
    • Alert
    • Audio Player
    • Avatar
    • Avatar Group
    • Barcode
    • Barcode Scanner
    • Biometrics
    • Blockquote
    • Button
    • Button Group
    • Button Icon
    • Button Menu
    • Calendar
    • Carousel
    • Chart
    • Chip Container
    • Combobox
    • Color Picker
    • CSV Parser
    • Date Picker
    • Data Table
    • Date Time Picker
    • Delay Interaction
    • Document Scanner
    • Dual Listbox
    • Expandable Section
    • Formatted Address
    • Formatted Name
    • Formatted Value
    • Header
    • Hero Banner
    • Icon Picker
    • Image
    • Input Choice Set
    • Input Choice Set Grid
    • Input Counter
    • Input Date Range
    • Input Pen
    • Illustration
    • Interaction service
    • Kanban
    • List
    • Map
    • Metric
    • Microphone
    • Navigation
    • NFC Scanner
    • Pill Container
    • Progress Bar
    • Progress Circle
    • Progress Indicator
    • Progress Popover
    • QR Code
    • Rating
    • Record Detail
    • Scoped Notification
    • Separator
    • Slider
    • Tabs
    • Text Area
    • Timeline
    • Tree
    • User Location
    • Vertical Visual Picker
    • Visual Picker
    • Visual Picker Link
    • Video Player
    • Welcome Mat
  • Component Builder
    • Overview
    • Properties Pane
    • Interactions Pane
      • Copy Records
      • Download
      • Export To
      • Fire Confetti
      • Flow Navigation
      • Navigate
      • Show Toast
      • Open Alert Modal
      • Open Confirm
      • Open Flow Dialog
      • Open Flow Panel
      • Update Records
      • Refresh Query
      • Refresh All Queries
      • Open Quick Action
    • Style Pane
    • Component Templates
    • Layout and Customization
      • Alignment controls
      • Copy / Paste component settings
      • Margin / Padding
      • Pull To Boundary
      • Undo / Redo
  • Data Sources
    • Understanding Data Sources
    • Manual
    • Variable
    • Query
    • Query VS Variable
    • Picklist
  • Actions
    • Overview
    • Data Manipulation and Transformation
      • Convert Lead
      • Create file
      • Split Text to Text Collection
      • SObject Collection Math
      • SObject Collection Join
      • Get Record from SObject Collection
      • SObject Collection to Activity Timeline Items
      • SObject Collection to Calendar Marked Date Collection
      • SObject Collection to Scheduler Events
      • SObject Collection to Text Collection
    • Data Conversion and Formatting
      • Text Collection Get Value
      • Get Value from String Collection
      • Number Collection Get Value
      • Join Text Collection
      • Format Text in SObject Collection
      • Format Text Collection
      • Text Collection to Combobox Options
      • Text Collection to Dual Listbox Options
      • Text Collection to Progress Indicator Steps
    • UI & Navigation
      • New Avatar Action Collection
      • New Button Menu Item Collection
      • New Carousel Item Collection
      • New Combobox Option Collection
      • New Dual Listbox Option Collection
      • New Header Action Collection
      • New Header Avatar Action Collection
      • New List Action Collection
      • New Navigation Item Collection
      • New Progress Indicator Step Collection
      • New Progress Popover Step Collection
      • New Slider Custom Label Collection
  • Help
    • Performance Guide
    • How do I contact support?
    • How do I report Bugs?
    • Troubleshooting
    • Release Process
  • Miscellaneous
    • Live use cases examples
    • Release Notes
    • Salesforce Flow Limit
    • Security
Powered by GitBook
LogoLogo

Company

  • About Us
  • Pricing

Policies

  • Privacy Policy
  • Terms of Service
On this page
  • Tutorials
  • Getting Started
  • Customization
  • Interactive Drawing
  • Choosing a Map Type
  • Google Maps
  • Leaflet Maps
  • Displaying Markers
  • Single Marker Setup
  • Multiple Markers Setup
  • Marker Clustering
  • Customizing the Map Marker
  • Marker Types
  • Customize Marker Appearance
  • 🆕 Drawing and Annotations
  • Adding Interactive Drawings to Your Map (Leaflet Only)
  • Available Drawing Tools
  • Customizing the Drawing Toolbar
  • Saving User Map Drawings
  • Using GeoJSON to Display and Edit Map Data
  • Map Settings
  • Centering the Map
  • Adjusting a Zoom Level
  • Header Options
  • Filtering and Search
  • Filtering Options
  • Search Options
  • List View
  • Map Interactions
  • On Marker Select
  • On Header Action
  • On Marker Drag

Was this helpful?

  1. Flow Components

Map

The Avonni Map shows a map of a specific place. It can help you get a sense of location or get directions.

Last updated 1 month ago

Was this helpful?


Tutorials

Getting Started

Customization

Interactive Drawing


Choosing a Map Type

Google Maps

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.

Here's why Google Maps might be a good fit:

  • 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

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.

Here's why Leaflet Maps might be the best choice

  • 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 significant advantage.

  • Displaying Many Markers: Unlike Google Maps, Leaflet can easily display many markers without limitations.

  • Interactive Drawing: Leaflet lets you activate a drawing feature, so users can add markers, draw shapes (circles, polygons, lines), and interact directly with the map.


Displaying Markers

The Avonni Map Component lets you show locations on a map using markers. You can choose to display a single marker or multiple markers depending on your needs. This section will explain how to set up both options.

Single Marker Setup

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.

Multiple Markers Setup

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

  • Essential landmarks in a city

Here's how it works:

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

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

Data Source for Multiple Markers

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.

Data Mappings

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.

Marker Clustering

The Avonni Map component offers marker clustering to enhance map performance and readability when displaying numerous markers nearby. This feature automatically groups nearby markers into clusters, simplifying the map view and preventing overcrowding.

Enabling Marker Clustering

When enabled, the map dynamically groups markers based on their proximity.

Cluster Behavior and Customization

  • Coverage on Hover: When present, hovering over a cluster will display the boundaries encompassing all the markers within that cluster, providing a visual representation of the cluster's area.

  • Max Cluster Radius: This setting defines the maximum radius (in pixels) from the central marker that a cluster will cover. Markers within this radius will be grouped. The default value is 80 pixels. Adjusting this value will affect the density of clusters on the map.

  • Disable Clustering on Zoom Level: This option allows you to specify a zoom level at which clustering will be disabled. Below this zoom level, all individual markers will be displayed, regardless of proximity. This is useful for allowing users to see all individual markers when zoomed in close.


Customizing the Map Marker

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

Marker Types

  • 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 Marker Appearance

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


🆕 Drawing and Annotations

Adding Interactive Drawings to Your Map (Leaflet Only)

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.

Enabling the Draw Feature (Leaflet Maps)

Here's a step-by-step guide

  • 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': Map drawings are automatically saved as a Content Document linked to the associated Salesforce record when the "Save as Content Document" feature is enabled in the Avonni Map component settings. This ensures the visual context is preserved and accessible via the record's "Notes & Attachments" related list.

In simpler terms

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.

Available Drawing Tools

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:

Available Drawing Tools & Their Uses

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.

Customizing the Drawing Toolbar

You have complete 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.

Saving User Map Drawings

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.

How to Save Drawings:

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

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

  3. (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.

Advanced Saving Options (Optional)

  • 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}."

Why Saving Drawings is Important

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

Using GeoJSON to Display and Edit Map Data

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

Displaying Static Map Data (Read-Only)

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.

How to Use the "GeoJSON Value" Attribute

The "GeoJSON Value" attribute accepts the following input to define the geographic data you want to display:

  1. A GeoJSON Object: You can directly input a valid GeoJSON object representing a single feature (e.g., a polygon representing a state boundary).

  2. 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).

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

Displaying Editable Map Data from a Content Document

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

How it Works

  1. Store GeoJSON in a Content Document: Create a Content Document and upload your GeoJSON file.

  2. Enter Content Document ID: In the "Draw" section, enter the Content Document ID into the Draw Content Document ID field.

  3. Draw Feature is Automatically Enabled: The Draw Feature will be automatically turned on, giving users tools to edit the displayed shapes.

  4. User Interaction: Users can edit, delete, and add new features to the map.

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

Example Scenarios

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


Map Settings

Centering the Map

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.

Customizing the Center Point

You have several options for customizing where the map is centered:

1. Default Center

The map will use a predetermined default location if you don't specify a center point.

2. Specifying Geographic Coordinates

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 focusing on a specific geographic location, regardless of marker positions.

3. Using Address Components

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.

4. Dynamically Setting the Center with Flow Variables:

For maximum flexibility, you can dynamically use Flow variables to 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:

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

  2. 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}).

5. Display Center as Marker:

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 highlight the central location you've set visually.

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.

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


Header Options

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


Filtering and Search

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


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.


Map Interactions

The Map component lets you control what happens when users do different things.

Here's a breakdown of the available interactions:

On Marker Select

This action happens when someone clicks or taps on a marker on the map.

On Header Action

This action is triggered when someone clicks or taps on any buttons you've added to the map's header.

On Marker Drag

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.

: Leaflet supports marker clustering, automatically grouping nearby markers into clusters. This significantly improves map readability and performance when displaying numerous markers nearby. As you zoom in, the clusters break apart, revealing individual markers.

: Leaflet supports GeoJSON, a standard format for representing geographic data. This lets you easily add county outlines, state borders, or other geographic features to your map.

Marker clustering is only available when Leaflet Maps is selected as the Map Type. This feature is not supported when using Google Maps. Ensure you have chosen in the Map Type setting to utilize marker clustering.

Tutorial: .

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.

Refer to the Google Maps API documentation on for more in-depth information.

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

How to customize the Map Marker
Zoom Levels
Marker Clustering
GeoJSON Support
Leaflet Maps
Choose Leaflet
interaction pane
Cover

A Guide to the Drawing Feature [Soon]

Cover

Making Drawings Permanent Saving User Input on Maps [Soon]

Cover

Customize the Map Marker

Cover

How to customize the Map Marker (Video)

Cover

Building a "No-Code" Salesforce Map for Instant Account Insights [VIDEO]

Cover

Building a dynamic map component

Cover

Building a map with instant account insights