Building a Dynamic Map

Overview

We will build an interactive map experience directly within a Salesforce screen flow. This map will respond instantly to user interactions, filtering data and updating metrics as users explore. The result will be a fast, engaging user experience that efficiently loads data based on the user's specific focus area.

This tutorial requires latitude and longitude coordinates. Double-check that your Salesforce data includes these values for the locations you want to show on the map.

Components used here

• Avonni Metrics

• Avonni Map

Guided Steps

Create a Screen Flow

Start by creating a new Screen Flow in Salesforce.

Screen flow architecture

Add a section element to display metrics

First, add a "Section" element to your screen. This section will have four columns, and we'll put our four Avonni Metric components inside them.

Adding and configuring the Avonni Metrics

Drag an Avonni Metric component into each of the four columns. We'll set up these metrics to show information related to the locations on your map.

• Use the "Query Data Source" option for each Metric component.

• Select the Salesforce object from which you want to get data.

• Choose the specific field you want to display as a metric.

• Pick the appropriate aggregate function (like SUM or COUNT) to calculate the metric value.

• Add an avatar icon from the Avatar section

We'll update these metrics automatically based on where the user is looking on the map. So, as the user zooms in or pans around, the metrics will show the count of items within that specific area.

Configuration screen of the Avonni Metric

Adding and configuring the Avonni Map

• Drag the Avonni Map component onto your screen. We want the map to change automatically as the user moves around, so we'll use the Leaflet Maps type. (Google Maps doesn't support this automatic updating based on where the user looks).

Leaflet Maps selection for the map type.

Now, we need to tell the map where to get the location data from Salesforce. We'll use the "Query Data Source" option to query a specific object (like Accounts or Leads).

Query Data Source configuration

For the map to work properly, you must connect the "latitude" and "longitude" attributes to the corresponding fields in your Salesforce data. If you don't, the locations won't show up on the map

Important to map latitude and longitude attributes

Implement Dynamic Formulas

The last step is making the map and metrics react to the user's actions. We want the map to show only locations visible in the current area the user is looking at. So, as they zoom in or out or move the map around, the locations will update in real time.

We also want the metrics to automatically show the count of locations currently visible on the map.

To achieve this, we'll create some unique formula variables and use them as dynamic filters for the queries in both the map and metric components.

• Map Filter Formula:

  DISTANCE(Location__c, GEOLOCATION("&{!map.centerLatitude}&","&{!map.centerLongitude}&"), 'km') <"&TEXT({!map.visibleWidthKm})

In essence, this formula:

1. Calculate the distance: It measures the distance (in kilometers) between each location record's Location__c field (Geolocation field type) – which must contain geolocation data – and the current center point of the map, as pinpointed by {!map.centerLatitude} and {!map.centerLongitude}.

2. Compare to visible area: It then checks if this calculated distance is less than the width of the currently visible map area, represented by {!map.visibleWidthKm}.

3. Filter based on the result: If the distance is less than the visible width, the location is included in the map display; otherwise, it's filtered out.

This simple yet powerful formula ensures that the map only shows locations within the user's current view, creating a dynamic and performant experience.

• Metrics Filter Formula:

  DISTANCE(Location__c, GEOLOCATION("&{!map.centerLatitude}&","&{!map.centerLongitude}&"), 'km') <"&TEXT({!map.visibleWidthKm}) & " AND Type__c = 'Bakery'"

This formula is the same as the one used for the map, with one key addition: AND Type__c = 'Bakery'. This extra condition ensures that the metric only counts locations that are both:

1. Within the visible map area (based on the distance calculation).

2. Classified as a "Bakery" (based on the Type__c field).

Using this formula as a filter in the metrics component's query gives us a real-time count of bakeries within the user's current view. This allows us to display dynamic, context-aware metrics that enhance the user's understanding of the data.

Connect the Formulas to the Map and Metrics

We just created two formulas to act as dynamic filters. Now, let's connect these formulas to the map and metric components.

1. Expand the Data Source section for both the map and each metric component.

2. In the Filter section, click on "Mapped".

3. Select the corresponding formula you want to use as the filter.

This will make the map and metrics update dynamically based on the user's actions on the map

---

Test and Refine

Thoroughly test your interactive map and metrics, refining the formulas and configuration as needed.

Key Takeaways

• Think Beyond the Basics: Salesforce offers many possibilities beyond standard reports.

• Embrace Flows: Flow Builder is a powerful tool for creating rich user experiences.

• Leverage Components: Avonni components provide essential building blocks for data visualization.

• Experiment: Dynamic formulas and creative thinking unlock new levels of interactivity.