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 :).

--

--

--

A dots connector. open for part time, Email: munawirrahman@gmail.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Adding Swipe Functionality Using Vanilla JavaScript

[Action required] Your RSS.app Trial has Expired — Mon Jul 19 2021

Vue: the dark horse of front-end development

[Action required] Your RSS.app Trial has Expired — Tue Jan 11 2022

How to change api parameter form between Ruby on Rails and Javascript.

Writer of the Week: Karan Jagota

Build a Decentralized react-native application

Week 8 | Arc Diagram and Edge Bundling

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Munawirrahman

Munawirrahman

A dots connector. open for part time, Email: munawirrahman@gmail.com

More from Medium

[Salesforce LWC] — How to use multiple features of Lightning web component Radio Group

How to deploy the LWC component on a Local Development Server

How to deploy the LWC component on a Local Development Server

Record Level Security vs Object Level Security in Salesforce

What is Lightning Web Components in Salesforce?