Create a Clickable Map with Details information

Overview

Get ready to build an awesome interactive map! In this tutorial, you'll discover how to make a visualization that responds to your clicks and how to display detailed information about locations at the click of a button.

By the end of this tutorial, you'll know how to:

Understand the building blocks: Learn about the special components that make this magic happen (don't worry, we'll explain it all!).
Create a custom map: Learn how to plot locations and information on a map that's uniquely yours.
Make it interactive: Make your map come alive! We'll show you how to reveal extra details when you click on a map marker.

Illustrations

Guided Steps

1️⃣ Create your new Screen Flow

2️⃣ Create your Get Records collection

It's important to establish a foundation by creating a "Get Records Collection." This initial step fetches the account records information, which will be visualized in the Avonni Map.

Essentially, the Get Records Collection serves as the data source for our component. It pulls account fields from Salesforce, which are then used to generate map markers based on their associated geographic information.

Based on your use case, add filters if needed to display only specific accounts.

3️⃣ Add Screen Element

The next step is adding a screen element to our flow. This is where our custom component's user interface (UI) comes to life.

Add a section element.

We're adding a section element inside the screen element to create two columns. The wider left column will display the map, and the narrower right column will display account information.

4️⃣ Drag the Avonni Map on the left-side section.

Avonni Map Configuration steps

Here's how to configure the Avonni Map Component

Data Source Configuration

We need to tell the map where to find the account information you collected earlier.

Here's how:

Change the map's 'Data Source Configuration' to 'Variable'. This will allow the map to look for changing data rather than using fixed information.
Select your 'get records collection'. This is where you stored the account details. Now the map knows where to look!
Map your data for display:
- 'Account name' as the Title makes it easy to see which account each marker represents.
- 'description' in the Description gives users more information when they click a marker

Location mapping

Think of 'Location Data Mappings' like giving the map directions. You're taking the address information you collected (street, city, etc.) and matching it to the parts of the map it needs to understand. This way, the map knows exactly where to put each account marker.

4️⃣ Right-side section configuration

We're going to make the right-side section show details about the account you click on the map. Here's how:

Add the 'Avonni Header' component. This will make the account's name appear at the top.
Add the 'Avonni Formatted Value' component component. This lets you show additional account information right below the name.

Avonni Header configuration

We're adding an 'Avonni Header' to show the name of the account you select on the map.

Here's how to set that up:

Add the 'Avonni Header' component. This is where the account name will be displayed.
Set the title to 'Mapped'. This means the title isn't fixed – it will change based on data.
Link it to 'Selected Marker SObject Value' and 'Account name'. This tells the header: "Get the account name from whichever marker is currently clicked on the map

Avonni Formatted Value Configuration

We want to use the Avonni Formatted Value component to show extra information about the account when someone clicks its marker.

Here's how to set that up:

Drag the Avonni Formatted Value component
Open the Component Builder
Map the Formatted Value to the Avonni Map component to display the account name value of the map selected marker value > Account Name

Repeat the same steps for other field's value you'd like to display.

6️⃣ Set Component Visibility configuration

Your Key to a Dynamic Component

Think of component visibility like stage lights. You want the right things to show up at the right time. For example, we'll make the Avonni Header only appear when an account is selected on the map. Do this for each component to make your flow look polished.

We're doing this by configuring a set component visibility rule on the component.

{!map.selectedMarkerSObjectValue.Id} IS NULL == FALSE

Repeat the same steps for other components' visibility.