Building a Dynamic Map
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
Start by creating a new Screen Flow in Salesforce.
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.
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.
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).
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).
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
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:
In essence, this formula:
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}.
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}.
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:
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:
Within the visible map area (based on the distance calculation).
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.
We just created two formulas to act as dynamic filters. Now, let's connect these formulas to the map and metric components.
Expand the Data Source section for both the map and each metric component.
In the Filter section, click on "Mapped".
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
Thoroughly test your interactive map and metrics, refining the formulas and configuration as needed.
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.
Having trouble with this tutorial? Contact Avonni support for help.