Pinpoint Map Location in Salesforce Flow (with Leaflet JS)

Image 00 LeafletMapFSC

If you’re looking for a Map solution within Salesforce Flow, you may already have seen this great solution from Nick Sauer which allows you to present a map location inside flow. But since that solution utilizes the standard lightning-map component from Salesforce, there are some limitations within that solution that won’t let you pinpoint / move / drag the map marker. So, in this article I will show you can present and modify map locations inside Salesforce flow utilizing external JS library, Leaflet.

Main Features

1. Allow your flow users to move/drag map location pinpoint/marker
2. Access your flow user’s current location and show that on the map
3. Map shown in Google Maps Context

Attributes

Image 01 Attribute Descriptions

Image 02 Latitude and Longitude details of the pinpoint

Image 03 popupTextValue sample (text will be based on your input, sample using <b>You Are Here!</b>)

Image 04 currentLocationButtonLabel if present (button label will be based on your input)

Video 01 Drag / move pinpoint n the component

Image 05 Sample Input Parameters

Installation

Production
Sandbox
Source Code

Special appreciation to Leaflet JS open source library that enable us to build this component with their awesome map library.

There you go, now you have a map component that is draggable and can access your flow user’s location. The beauty of flow is you will be able to combine this component with other actions / components that can help your business use cases. For example, you can combine this with Google Maps Geocoding API and get the estimated latitude and longitude based on address input and let your flow user to modify the pinpoint so your company have accurate location of the clients.

Clap if you think this is helpful and comment if you have any questions, will try to help the best as I can :).