Lightning Map using Lightning Web Component with Dynamic Pointers.

A ‘lightning: map’ Component displays a map of one or more locations, using geocoding data and mapping imagery from Google Maps. It can be used to set multiple, dynamic Location Pins. Further, clicking Location Pins would display widgets with the Account Name, Description, and a link to its Record Details.

 

This makes the Winter 19 introduced, lightning-map Component especially valuable to business owners for accessing customer heatmaps by demographics. We’ve taken the liberty to illustrate this with an implementation of our own.

Firstly, a button-click calls an Apex Controller. The Controller then queries Location data through SOQL in Salesforce from the Object (here, the Account Object), which then gets converted to a usable JSON format. Then, within the ‘lightning: map’ Component, the JSON file is passed to the Standard ‘Map Marker’ attribute of the ‘lightning: map’ Component. The attribute accepts location data as both addresses and geospatial coordinates.

Finally, a map image comes up in a container within the component with a list of Locations. Dynamic Pointer(or Location Pins) triangulate all coordinates retrieved. Also, the list-panel is visible by default when there’re multiple locations specified. When you select a location title in the list, its map marker is activated. Depending on the width of the Container, the list pulls up beside or under the map.

For Live Demo Click here

For Reference Click here

Now that you’ve got a fair idea of what the Component’s about, here’s a look at the source code:

Lightning Web Component HTML

Lightning Web Component JS

Lightning Web Component Apex

Output

Conclusion

The above implementation of the ‘lightning: map’ Component places multiple location pins on locations pulled from Account Records, the only customization in this example.

We’re hoping this spurs you to go on and create demographic views of your Org’s own customer base to understand your company’s patrons and inform segmentation strategies. For further assistance in setting up Lightning Components for productivity, do reach out to us at [email protected].

Blaze Onward!

Our Location worldwide
India
3rd Floor, A-10, Pegasus Tower, Sector 68, Noida, Uttar Pradesh 201301 +91-1203117884
SR Tower 2nd Floor Hydel Gate Haldwani Uttarakhand 263126 +91-5946359996
USA
333 West Brown Deer Road Unit G – 366 Milwaukee WI, USA 53217 +1(262) 310-7818
UK
7 Bell Yard, London, WC2A 2JR +44 20 3239 9428
Canada
HIC Global Solutions INC
43 Lafferty Lane, Richmond Hill, L4C 3N8, CA +1(262) 310-7818