Map

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