LogoLogo
HomepageYouTube ChannelInstall from the AppExchange
  • Home
  • Dynamic Components
  • Flow Components
  • Experience Components
  • Projects
  • 👋Welcome
  • Getting Started
    • Product Tour
    • Quickstart Tutorial
    • Avonni Components App
      • Accessing the App
      • Folders
      • Templates
      • Version management
    • Understanding The Essentials
      • Component Builder
      • Component Visibility
      • Target Page Object
      • Using Variables and Component Data
      • Publishing your Dynamic Components
      • Dynamic vs. Flow Components
    • AppExchange Listing Page
    • Installation & Licenses Management
  • Tutorials
    • Projects
    • Components
      • Calendar
        • How to Create Events Quickly by Dragging
        • How to Add an Edit Action to Calendar Events
        • How to Add a New Event Button to the Calendar Header
        • How to Customize the Right-Click Menu
        • How to Reschedule Events with Drag and Drop
      • Columns
        • Creating a Responsive 3-Column Layout
      • Data Table
        • How to customize Data Table style
        • How to make a field editable
        • How to add clickable buttons
        • How to color-code badges
        • How to export data
        • How to configure search
        • How to set columns visibility
        • How to Conditionally Color Data Table Cells
      • Kanban
        • Saving Changes on Drag-and-Drop
      • List
      • Metric
      • Record Detail
        • Saving Changes
    • Interactions
      • How to create an interaction to navigate to an object page
      • How to create an interaction to navigate to a record page
      • How to Pass Multiple Selected Records from a Dynamic Component to a Screen Flow
    • Reactive Components
      • Reactive Map and Data Table
      • Master-Detail Relationship with Data Tables
      • Vertical Tabs with Reactive Data Table
    • Style
      • How do you add space or a break between sections or fields?
    • Tips and Tricks
      • Using the Dynamic Component component
  • Component Builder
    • Overview
    • Configuring Components
      • Properties
      • Fields
      • Style
    • Data & Interactions
      • Data Sources
        • Manual
        • Picklist
      • Resources
        • Constant
        • Formula
        • Nested Queries
        • Query
        • Variable
      • Interactions
        • CRUD from Record Variable
        • Download
        • Execute Flow
        • Navigate
        • On Load
        • Open Alert Modal
        • Open Confirm
        • Open Dynamic Component Dialog
        • Open Dynamic Component Panel
        • Open Flow Panel
        • Open Flow Dialog
        • Show Toast
    • Advanced Features
      • Copy and Paste
      • Debug Panel
      • Keyboard Shortcut
      • Undo / Redo
  • Components
    • Explore All Components
    • Accordion
    • Alert
    • Audio Player
    • Avatar
    • Avatar Group
    • Badge
    • Barcode
    • Blockquote
    • Button
    • Button Group
    • Button Icon
    • Button Menu
    • Button Stateful
    • Calendar
    • Camera 🆕
    • Card
    • Carousel
    • Chart
    • Checkbox
    • Checkbox Button
    • Chip Container
    • Color Picker
    • Columns
    • Combobox
    • Container
    • Counter
    • Data LWC Container
    • Data Table
    • Date Picker
    • Date
    • Date Range
    • Dual Listbox
    • Dynamic Component
    • File Upload
    • Flow
    • Formatted Address
    • Formatted Name
    • Formatted Value
    • Header
    • Icon
    • Icon Picker
    • Illustration
    • Image
    • Input Color
    • Input Date
    • Input Pen (Signature)
    • Input Text
    • Kanban
    • List
    • LWC Container
    • Map
    • Media Object
    • Metric
    • PDF Viewer
    • Pivot Table
    • Progress Bar
    • Progress Circle
    • Progress Indicator
    • Rating
    • Record Detail
    • Relationship Graph
    • Scope Notification
    • Section
    • Separator
    • Slider
    • Status
    • Tabbed Container
    • Tabs
    • Text
    • Text Area
    • Timeline
    • Toggle
    • Tree
    • Vertical Visual Picker
    • Video Player
    • Visual Picker
    • Visual Picker Link
  • Help
    • Contact Support
    • Security
    • Performance Guide
    • Deployment Process
    • Release Notes
    • Report Bugs
Powered by GitBook
LogoLogo

Company

  • About Us
  • Pricing

Policies

  • Privacy Policy
  • Terms of Service
On this page
  • Setting Up Your Map
  • Connecting your location data
  • Mapping Your Location Data
  • Choose a Map Type
  • Customizing Marker Appearance
  • Configuring Your Map
  • Centering the Map
  • Zoom Level
  • Header
  • Filtering and Search
  • List View
  • Map Interactions

Was this helpful?

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

Was this helpful?

Note on Advanced Map Features

For advanced functionality such as map clustering, interactive drawing, and working with GeoJSON data, we recommend using the

Setting Up Your Map

To get started with the Avonni Map component, you'll first need to choose a map type and configure how your data is displayed.

Connecting your location data

The Data Source is what provides this list of pins—or markers—to your Avonni Map. Each record retrieved from your data source (such as an Account, Contact, or custom object) will be plotted as a point on the map, provided it contains location information, including a street address or specific latitude and longitude coordinates.

To provide this location data, choose one of the following options in the "Data Source" property.

Mapping Your Location Data

Connect your Salesforce fields to the Avonni Map attributes to display the correct information. For example, link your "Address" field to the "address" attribute on the map.

Choose a Map Type

The Avonni Map component offers two powerful mapping providers: Google Maps and Leaflet. Your choice determines the map's appearance, performance with large datasets, and the available interactive features. Here’s a breakdown to help you select the best option for your use case.

Google Maps: For Simplicity and Familiarity

Choose Google Maps for a user-friendly and instantly recognizable interface. It's an excellent option for straightforward maps that don't require displaying a massive number of markers.

  • Strengths: Includes familiar built-in features like Street View and satellite imagery. It can plot locations directly from street addresses without needing coordinates.

  • Key Consideration: Google Maps is best for displaying a smaller number of locations, with a technical limit of 100 markers per map.

Leaflet: For High Volume Data and Advanced Features

Select Leaflet when you need a highly interactive map with advanced capabilities or require displaying a large number of markers.

  • Strengths: Leaflet is highly performant and can handle hundreds or thousands of markers. It offers powerful features like automatic marker clustering (grouping nearby points), interactive drawing tools, and rich GeoJSON support for custom shapes.

  • Key Consideration: Leaflet requires specific latitude and longitude coordinates for each record you want to plot. It cannot automatically convert street addresses into map points.

Quick Guide: Which One to Use?

  • Use Google Maps if... you have fewer than 100 markers to display and want the simplicity of using street addresses.

  • Use Leaflet if... you need to display a large volume of markers, require advanced features like drawing or clustering, AND you have latitude/longitude data for your records.

Customizing Marker Appearance

Beyond just placing markers on the map, you can precisely control their visual appearance for each record. This is done within the Data Mappings section of the Map component's properties, allowing you to create a look that matches your brand or conveys specific information at a glance.

How to Configure Marker Appearance

  1. Select the Map Component and navigate to the Data Mappings section in the Properties Panel. This is where you connect fields from your data source to the map's visual properties.

  2. Locate the Type attribute in the list of available mapping options.

Method 1: Use Predefined Marker Shapes

For a consistent look, you can set the Type attribute to a static text value. All markers on your map will then use this shape.

  • Configuration: Set the Type attribute to one of these text values:

    • default: A simple, standard map marker.

    • circle: A circular marker.

    • rectangle: A rectangular marker.

    • polygon: A multi-sided marker.

    • pin: The classic pin-shaped marker.

Method 2: Use a Custom Icon

To use your own branding or specific imagery, you can configure the map to use a custom SVG image for the markers. This is typically done by setting the Type to icon and mapping another attribute (like iconUrl or iconName) to a field from your data source that contains the URL or name of the SVG.

Further Customization

Within the Data Mappings section, you can often configure additional attributes to fine-tune the appearance of the selected marker Type:

  • Fill Color and Opacity: Control the marker's main color and its transparency.

  • Stroke: Customize the marker's border (its color, thickness, and style like solid or dashed).

  • Scale: Adjust the overall size of the marker.

The Power of Dynamic Styling

Because these appearance attributes (Type, Fill Color, Scale, etc.) are configured within Data Mappings, you can make them data-driven. Instead of setting a static value for all markers, you can map these attributes to fields from your data source.

  • Example: You could have a formula field on your Account object that returns a color based on the Industry field. By mapping the map's Fill Color attribute to this formula field, your Account markers will automatically be color-coded by industry on the map, providing instant visual insight

Configuring Your Map

The Avonni Map isn’t just a static view—it’s a dynamic tool you can shape to show locations exactly how you need them. These customization options allow you to control where it focuses, how it appears, and what users can do, transforming a basic map into a powerful tool for exploring and managing data.

Centering the Map

The initial viewpoint of your map—where it's "centered" when it first loads—is configured in the Map Center Location section of the Properties Panel. This ensures your users start by looking at the most relevant geographic area.

Within this section, you have several ways to define this center point:

  • Default Center: Leave the settings on their default to display a standard world map view, allowing the user to navigate from a global perspective. This is a good option if you are displaying markers across many different regions.

  • Specify by Coordinates: For precise centering, you can manually enter specific Latitude and Longitude values. This is ideal when you know the exact coordinates of your desired focal point.

  • Specify by Address: Provide a location using address component fields, such as Street, City, State, and Country. The map will then geocode this address to determine the center point. This is useful when you have address data but not specific coordinates.

  • Set Center Dynamically with Resources: Any of the coordinate or address fields can be bound to Variable resources or attributes from other components. This allows the map's center to change dynamically based on user input or other data on the page (e.g., centering the map on the address of a selected record).

You can also enable the Display Center as Marker option, which places a distinct pin at the calculated center point of the map for easy identification of the initial viewpoint.

Zoom Level

Zoom controls how close or far out your Map starts, setting the level of detail users see right away.

  • Adjust the initial zoom level:

    • Choose a zoom level from 1 (world view) to 22 (building level).

Header

The header is the map’s top bar, providing it with a name and tools for interaction. Customizing it adds clarity and control, making the Map more than a picture—it becomes a labeled, actionable part of your interface.

  • Customize the map header:

    • Title, Caption, Icon, Is Joined, Buttons: Configure header elements.

Filtering and Search

These tools let users narrow down or find specific data on the Map, cutting through clutter to focus on what they need.

  • Filtering Options: Add a filter menu to refine map data.

  • Search Options: Enable search functionality for specific fields.

List View

The List View pairs a text list with your Map, showing all locations in a clickable sidebar. It’s like a table of contents—letting users browse or jump between markers without panning around.

  • Show or hide the list of locations:

    • Choose between visible, hidden, or auto (default).

Map Interactions

Interactions transform your map from a static display into a dynamic tool that your users can act upon. By configuring interactions, you can define precisely what happens when a user clicks on a map marker or a button in the map's header. You'll find these settings in the Interactions section of the Map component's properties.

On Marker Select

This event fires whenever a user clicks on a specific marker on the map. It's the primary way to make your data points interactive.

  • Accessing Marker Data: Within the interaction configuration, you can access data from the marker that was clicked. For example, to get the record ID associated with the marker, you would typically use the resource selector to choose Component Event > marker > value (assuming the marker's value was mapped to the record ID in the Data Mappings section).

  • Common Use Cases:

    • Navigate to Record: Configure a Maps interaction to open the full record page for the clicked marker.

    • Open Details in a Dialog or Panel: Use the "Open Flow Dialog," "Open Flow Panel," or "Open Dynamic Component Dialog/Panel" interactions to display more details or provide editing capabilities for the selected record without leaving the map.

    • Show Quick Info: Use a Show Toast interaction to display brief information about the selected location.

On Header Action

This event fires when a user clicks a custom button you've added to the map's Header section. These actions apply to the entire map or dataset, not just one marker.

  • Common Use Cases:

    • Refresh Data: Add a "Refresh" button that triggers a Refresh Query interaction to reload all map markers with the latest data.

    • Add New Record: Add a button that launches an "Open Flow Dialog" to guide users through creating a new record that will then appear on the map (after a refresh).

    • View Report: Add a button that uses a Maps interaction to take the user to a related Salesforce report or dashboard.

By configuring these interactions, you turn your map from a simple visual display into an interactive hub for exploring, updating, and acting on your geographic data right where users see it

Manual

Enter location data directly into the component configuration. This is suitable for a small, static set of markers that won't change often.

Variable

Use a variable as your data source. This is useful for displaying locations that change based on user interactions or other component logic.

Query

Fetch data directly from Salesforce using an Avonni Query. This is the most common and powerful option for displaying a dynamic set of Salesforce records on the map.

Avonni Map component for Screen Flows