Introduction of Leaflet Map in Salesforce Lightning Component

The Leaflet is an open-source JavaScript library that is used for mobile-friendly interactive maps. It has all the mapping features. It works very well across all media screens. The performance and design of the leaflet are very standard. It can be extended by lots of plugins and it has also a beautiful, well-documented API that helps developers to design a specific map.

Don’t forget to check out: How to use Leaflet Map in Salesforce?

If we are talking about the use of leaflet maps in the Salesforce lightning component. We can easily use it by importing Leaflet as a static resource in our Salesforce Org.

Add static resource using steps: Setup -> Build -> Develop -> Static Resources -> New. Write the name and choose the downloaded zip file from the above link and save.

Let’s take a tour to show the leaflet map in our Salesforce lightning component:

Create a new lightning component named as ‘leafletComponent’.

Component:

<aura:component>
    <aura:attribute name="map" type="Object"/>
    <ltng:require styles="/resource/leaflet/leaflet.css" scripts="/resource/leaflet/leaflet.js" afterScriptsLoaded="{!c.jsLoaded}" />
    <div id="map"></div>
</aura:component>

JScontroller:

({
    jsLoaded : function(component, event, helper) {
        var map = L.map('map', {zoomControl: false}).setView([37.784173, -122.401557], 2);
        L.tileLayer(
            'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',{
                attribution: 'Tiles © Esri'
             }).addTo(map);
        component.set("v.map", map);
    }
})

Style:

.THIS {
    width: 100%; 
    height: 50%;
}

Create a Lightning App to preview above component:

<aura:application>
    <c:leafletComponent/>
</aura:application>

Following is the view of the leaflet map :

How to add the marker on leaflet map:

Component: Same as above

JScontroller:

({
    jsLoaded : function(component, event, helper) {
        var map = L.map('map', {zoomControl: false}).setView([51.5, -0.09], 2);
        L.tileLayer(
            'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
                attribution: 'Tiles © Esri'
            }).addTo(map);
        component.set("v.map", map); 
        L.marker([51.5, -0.09]).addTo(map).bindPopup('A custom marker').openPopup(); 
    }
})

Style: Same as Above.

How to add Circle and Polygon on Map:

Component: Same as above

JScontroller:

({
    jsLoaded: function(component, event, helper) {
        var map = L.map('map', {zoomControl: false}).setView([51.5, -0.09], 13);
        L.tileLayer(
            'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
                attribution: 'Tiles © Esri'
            }).addTo(map);
        component.set("v.map", map);
        var circle = L.circle([51.508, -0.11], {
            color: 'red',
            fillColor: '#f03',
            fillOpacity: 0.5,
            radius: 500
        }).addTo(map);
        var polygon = L.polygon([
            [51.509, -0.08],
            [51.503, -0.06],
            [51.51, -0.047]
        ]).addTo(map);
    }
})

Style: Same as Above.

Following is the view of Marker, Circle, and Polygon on leaflet map:

How to play with events:

Every time something happens in Leaflet, e.g. user clicks on a marker or map zoom changes, the corresponding object sends an event that you can subscribe to with a function. The following code shows the latitude and longitude of the place where the user clicked on the map.

Component: Same as above.

JScontroller:

({
    jsLoaded: function(component, event, helper) {
        var map = L.map('map', {zoomControl: false}).setView([51.5, -0.09], 13);
        L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
            attribution: 'Tiles © Esri'
            }).addTo(map);
        component.set("v.map", map);

        var popup = L.popup();
        function onMapClick(e) {
            popup
            .setLatLng(e.latlng)
            .setContent("User clicked the map at " + e.latlng.toString())
            .openOn(map);
        }
        map.on('click', onMapClick);
    }
})

Style: Same as Above.

Following is the view of showing dynamic latitude and longitude using the event on leaflet map:

There are a lot of plugins of leaflet map which is used to show different functionalities.