Creating a Salesforce Lightning Map Component
Learn how to create a Map component using Lightning Components. Step-by-step instructions and source code provided. This component also shows how to load external Javascript libraries and CSS stylesheets using the ltng:require tag.
The best way to experiment with a new component framework is to create components, and a simple Map component is often one of the first candidates that come to mind.
In this article, I share a Lightning Map Component built with the popular Leaflet open-source library.
This component also provides an example of loading external Javascript libraries and CSS stylesheets using the ltng:require tag.
Step 1: Import Leaflet as a Static Resource
- Download the latest stable version of leaflet here (0.7.3 at the time of this writing).
- In Setup, go to Build > Develop > Static Resources, and click New.
- Specify leaflet (all lowercase) as the Name, click the Choose File button and select the leaflet zip file you just downloaded.
- Click Save.
Step 2: Create the Component
- In the Developer Console, click File > New > Lightning Component. Specify MyMap as the bundle name and click Submit
- Implement the Component as follows:
<aura:component implements="force:appHostable">
<ltng:require styles="/resource/leaflet/leaflet.css" />
<ltng:require scripts="/resource/leaflet/leaflet.js"
afterScriptsLoaded="{!c.jsLoaded}" />
</aura:component>
- Click File > Save to save the file
- Click CONTROLLER (upper right corner of the code editor), and implement the controller as follows:
({
jsLoaded: function(component, event, helper) {
setTimeout(function() {
var map = L.map('map', {zoomControl: false}).setView([37.784173, -122.401557], 14);
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
{
attribution: 'Tiles © Esri'
}).addTo(map);
// Add marker
L.marker([37.784173, -122.401557]).addTo(map)
.bindPopup('Home of Dreamforce');
});
}
})
- Click File > Save to save the file
- Click STYLE (upper right corner of the code editor), and implement the following style:
.THIS.map {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
- Click File > Save to save the file
Step 3: Deploy the Component in the Salesforce1 App
To add a Tab for the Lightning Component:
- In Setup, click Create > Tabs.
- Click New in the Lightning Component Tabs section.
- Select c:MyMap as the Lightning Component.
- Specify My Map as the Tab Label and My_Map as the Tab Name.
- Click the magnifier icon and select Lightning as the tab icon.
- Click Next and Save.
To add the Tab to the Salesforce1 App Menu:
- In Setup, Select Administer > Mobile Administration > Mobile Navigation.
- Select My Map in the Available list.
- Click Add.
- Select My Map in the Selected List, and click the Up button to move the tab up in the menu order.
- Click Save.
You can now test the component in the Salesforce1 app on your device. Alternatively, you can preview the component in the Salesforce1 app simulator:
- In your browser, remove the part of the URL that comes immediately after salesforce.com.
- Append /one/one.app to the URL immediately after salesforce.com and press Enter: this starts the Salesforce1 Application simulator.
- Click the menu button in the upper left corner.
- Select My Map in the menu.
- Preview the component.