Displaying Map with markers in Flow screen using Lightning Components

Winter ‘19 release introduced the lightning:map base component. I thought it would be cool to add an addition to my lightning flow component project leveraging this new component. The idea was to allow displaying a map with multiple map markers and allow the marker information to be provided via a flow. Let’s take a look at the custom component I built to implement the idea.

The Component

The component is quite straightforward. It implement lightning:availbeForFlowScreens to allow it to be a selectable option in the flow builder.

It contains three attributes:

• markerArr: An array of type string that will contain a list of markers to be processed and used in the lightning:map component.
• mapMarkers: A marker object that will contain a list of location data to be used to pin the locations onto the map.
• Title: a title for the rendered map component.

<aura:component implements=”lightning:availableForFlowScreens” access=”global”> <aura:attribute type=”String[]” name=”markerArr” /> <aura:attribute type=”Object” name=”mapMarkers” /> <aura:attribute type=”String” name=”title” default=”Your Map”/> <aura:handler name=”init” value=”{!this}” action=”{!c.doInit}” /> <lightning:map mapMarkers=”{!v.mapMarkers}” markersTitle=”{!v.title}” /> </aura:component>

The component has a handler that will call the doInit javascript controller function at component load.

Design File

In order for a flow to provide map marker data to the flow we need to add a design file and add the component attributes we want to expose to the flow.

<design:component> <design:attribute name=”markerArr” label=”Map Data Array” required=”true”/> <design:attribute name=”title” label=”Map Title” required=”false”/> </design:component>

Javascript Controller

The controller for the component currently has one function that processes the map marker data provided by the flow and parses the data in order to store it in a format that the lightning:map component can use to pin the locations.

The function gets the value of the component attribute markerArr that will contain the location data provided by the flow. It expects it be to an array of string with each index of the array with values delimited by a semi-colon. It also expects the values to be ordered in a specific fashion. This needs to be taken into consideration when building the flow.

({
doInit : function(component, event, helper) {let markerArr = component.get('v.markerArr');
let markerObjArr = new Array();

if(markerArr){

for(let i = 0; i < markerArr.length; i++){

let locationDataArr = markerArr[i].split(';');

let markerObj = {
location:{
'City' : locationDataArr[0],
'Country' : locationDataArr[1],
'PostalCode' : locationDataArr[2],
'State' : locationDataArr[3],
'Street' : locationDataArr[4]

},
title: locationDataArr[5],
description : locationDataArr[6],
icon: locationDataArr[7]
}

markerObjArr.push(markerObj);

}

component.set('v.mapMarkers', markerObjArr);
}
}
})

Each location value of the array will be processed and each semi-colon delimited value in each mapMarkerArr index will stored in the corresponding map object field. For instance the first index of the locationData array should contain the name of the city and the 8th index should contain the icon that will be displayed next to each location in the list. Each map marker object will be stored in the markerObjArr. The array will in turn in set as the value of the mapMarker component attribute.

The Flow

The flow example will simply display a screen to select a borough in New York City and display a list of parks located in the selected location. Data is stored in an object called Parks with fields that store Address and specific borough where the park is located.

The flow will query the object looking for all park records matching the selected borough and compile the record data (using a formula) into the map marker format the lightning component expects. All park locations are stored in a collection variable of type text.

After the park data is processed the next screen will be loaded with the FlowMapComp component. The mapMarkerDataArr collection variable and a custom title will be passed to the component attributes.

Flow in Action

Here are some screenshots of the running flow.

As with the other lightning flow components I have built there is zero apex code involved. Most of the logic is handled by the flow and some javascript code is required to process the data provided the flow. The component and the example flow / object is available on Github.

If you enjoyed the this quick project let me know by leaving a comment below. If you want to know when the next post is live follow me on twitter or subscribe to the blog with the link located at the bottom of the page. Until next time!