Leaflet.js,Map with Custom Images and Lightning Component

Posted on Updated on

Hi All,

In this post I am sharing with you a Lightning Map Component built with Leaflet.
Leaflet is an open source javascript library which you can find here.

pic1  pic2

Requirements :
1) Download latest version of Leaflet here.
2) “bklightning” namespace to “YourNamespace”.

Here is complete code let’s walk through it:

LightningMapComponent.cmp
<aura:component implements="force:appHostable">
	<ltng:require styles="/resource/leaflet/leaflet/leaflet.css" 
                  scripts="/resource/leaflet/leaflet/leaflet.js"
                  afterScriptsLoaded="{!c.afterJsLoaded}"/>
    
    <div id="map" style="width:100%; height: 100%"></div>
    
</aura:component>

In LightningMapComponent.cmp you can see I have used latest version of Leaflet Library. When all scripts loaded I am calling afterJsLoaded() function of LightningMapComponentController.js.

LightningMapComponentController.js
({
	afterJsLoaded : function(component, event, helper) {
        var map = L.map('map').setView([26.46, 74.64], 13);
        
        L.tileLayer('https://a.tiles.mapbox.com/v4/{YOUR MAP ID}/{z}/{x}/{y}.png?access_token=[YOUR ACCESS TOKEN]', {
            attribution: 'Balkishan @kachawaa'
        }).addTo(map);
        
        var LeafIcon = L.Icon.extend({
            options: {
                shadowUrl: '/resource/leaflet/leaflet/leaf-shadow.png',
                iconSize:     [38, 95],
                shadowSize:   [50, 64],
                iconAnchor:   [22, 94],
                shadowAnchor: [4, 62],
                popupAnchor:  [-3, -76]
            }
        });
        
        var greenIcon = new LeafIcon({iconUrl: '/resource/leaflet/leaflet/leaf-green.png'}),
            redIcon = new LeafIcon({iconUrl: '/resource/leaflet/leaflet/leaf-red.png'}),
            orangeIcon = new LeafIcon({iconUrl: '/resource/leaflet/leaflet/leaf-orange.png'});
        
        L.marker([26.46,74.64], {icon: greenIcon}).bindPopup("Ajmer Junction,Ajmer").addTo(map);
        L.marker([26.456221, 74.628175], {icon: redIcon}).bindPopup("Ajmer Sharif,Ajmer").addTo(map);
        L.marker([26.441522, 74.616850], {icon: orangeIcon}).bindPopup("Prithviraj Smarak,Ajmer").addTo(map);
    }
})

To use this Map Library you have to first register for your MAP ID and ACCESS TOKEN here.

LightningMap.app
<aura:application >
	<bklightning:LightningMapComponent />
</aura:application>

So that’s it.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s