Custom Map on LWC using LeafletJS

Although Lightning Web Component has its own robust standard lightning:map component to show maps but there is a scope to have a full-fledged map library that can support advanced features as well which are missing in standard components like custom markers, rich popup content & layers.

A most common problem with JS libraries is that it is not very well compatible with the Lightning Locker Service. I did some hands-on on certain libraries and I found LeafletJS library to be super easy to use with LWC plus It is fully compatible with Lightning Locker service.

Introduction to LeafletJS

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 38 KB of JS, it has all the mapping features most developers ever need.

Leaflet is designed with simplicity, performance, and usability in mind. It works efficiently across all major desktop and mobile platforms, can be extended with lots of plugins, has a beautiful, easy to use and well-documented API and a simple, readable source code that is a joy to contribute to.

Introduction of LeafletMap Custom Component

I have managed to create a utility component that can be used for basic scenarios at this point mentioned below:

1. Markers with content in Popup that can give more information
2. Custom markers
3. Show coverage or radius area with your current location

Screenshots

Components Explained

1. A static resource Leaflet to store LeafletJS js & css files.
2. LeafletMap LWC component to load above static resources and show passed information on map.
3. Markers & center attributes are required to render a map.
4. Custom icon be passed in format of static resource url to show custom icons on map

Usage

<c-leaflet-map 
    markers={locations} // all markers with lat/long coordinates
    center={center} // center of the map
    zoom="16" // zoom level of the map
    circleradius="400"> // radius/coverage from center in metres 
</c-leaflet-map>

Some Examples

I have built a few examples (mentioned below) using the above utility so that it can be used straight away. These are the same example shown in screenshots.

Leaflet Map Example with LWC

This example shows a very basic map with Lightning Web Component(LWC) using Leaflet.js library. Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps which is very easy to use and offers variety of layouts & features for maps. Using this example, markers can…

Playground

Custom Markers on Leaflet Map with LWC

This is an extension of same utility being used in previous example Leaflet Map Example with Lightning Web Component(LWC) to show custom markers on map instead of standard ones. To do that, please follow the steps 1.) Import the new custom icon image through static resource in LWC componen…

Playground

Showcase Coverage/Radius on Leaflet Map With LWC

This is another extension of same utility being used in last two leaflet examples. This one is show radius/coverage on a map with center location. Usage c-leaflet-map markers={locations} // all markers with lat/long coordinates center={center} // center of the map zoom=

Playground