Map

Tutorials

Getting Started

Building a dynamic map component

Building a map with instant account insights

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

Customization

Customize the Map Marker

How to customize the Map Marker (Video)

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 such as Street View and satellite imagery. It's an excellent choice for straightforward maps, especially if you don't need to display a large number 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, including 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.

Leaflet Maps

Leaflet Maps is ideal for creating highly interactive maps with numerous markers. It is flexible and customizable, allowing you to create a truly unique map experience.

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 that allows you to 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.

• Marker Clustering: 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.

• Interactive Drawing: Leaflet allows you to activate a drawing feature, enabling users to add markers, draw shapes (such as circles, polygons, and lines), and interact directly with the map.

• GeoJSON Support: 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.

Displaying Markers

The Avonni Map Component enables you to display 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 automatically position the marker. 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 provide your users with a comprehensive view of all relevant locations.

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 to display the correct information. For example, link your "Address" field to the "address" attribute on the map.

Marker Clustering

The Avonni Map component offers marker clustering to enhance map performance and readability when displaying numerous markers in close proximity. 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 displays the boundaries that encompass 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 feature is helpful in allowing users to view all individual markers when zoomed in closely.

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 as you would 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

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

The Avonni Map component lets you add interactive maps to your Salesforce flows. When using Leaflet maps, you can enable the "Draw Feature" option, which allows users to draw directly on the map. This means they can add markers or draw shapes, such as lines and polygons. These drawings are then saved automatically.

Enabling the Draw Feature (Leaflet Maps)

Here's a step-by-step guide

• 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 interact with the map by adding markers and drawing shapes (such as lines and polygons) 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 enables users to interact with the map using drawing tools. 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 feature automatically saves any changes users make to the map, eliminating the need for manual saving.

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 GeoJSON

To display fixed, non-editable shapes, you will use the GeoJSON Value property. This is ideal for visualizing established boundaries, routes, or zones.

How it Works

In the Properties Panel of the Map component, you provide your data to the GeoJSON Value property in one of three ways:

• Direct GeoJSON Object: Input a single, valid GeoJSON object to display one shape (e.g., a polygon for a single sales territory).

• Array of GeoJSON Objects: Provide an array of multiple GeoJSON objects to display several shapes at once (e.g., an array of polygons for all counties in a state).

• Content Document ID: Store your GeoJSON data in a Salesforce File and provide the 18-character Content Document ID here. This is the best method for managing larger or more complex GeoJSON datasets. (Note: The file size is limited to 12MB)

Loading & Editing GeoJSON

To load an initial set of shapes that users can edit, you will use the Draw Content Document ID property (typically found in the "Draw" section of the map's settings).

How it Works

1. Store GeoJSON in Salesforce Files: First, your starting set of shapes must be saved as a GeoJSON file in Salesforce Files.

2. Provide the ID: In the Map's properties, enter the Content Document ID of that file into the Draw Content Document ID field.

3. Drawing Tools Enabled: Providing an ID in this specific field automatically enables the map's drawing and editing toolbar for your users.

4. User Interaction: Users can now select the loaded shapes to move or resize them, or use the toolbar to draw new shapes and delete existing ones.

5. Saving Changes: Crucially, for any user modifications to be saved, you must also configure a save mechanism. This typically involves enabling the Save as Content Document property. Without this, user edits will be lost.

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

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

Header Options

The Header section gives you control over the appearance and functionality of your Map header.

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.