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:

<aura:component implements="force:appHostable">
	<ltng:require styles="/resource/leaflet/leaflet/leaflet.css" 
    <div id="map" style="width:100%; height: 100%"></div>

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.

	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'
        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.

<aura:application >
	<bklightning:LightningMapComponent />

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