Creating a Salesforce Lightning Map Component

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

1. Download the latest stable version of leaflet here (0.7.3 at the time of this writing).
2. In Setup, go to Build > Develop > Static Resources, and click New.
3. Specify leaflet (all lowercase) as the Name, click the Choose File button and select the leaflet zip file you just downloaded.
4. Click Save.

Step 2: Create the Component

1. In the Developer Console, click File > New > Lightning Component. Specify MyMap as the bundle name and click Submit
2. Implement the Component as follows:
   1<aura:component implements="force:appHostable">
   2
   3    <ltng:require styles="/resource/leaflet/leaflet.css" />    
   4    <ltng:require scripts="/resource/leaflet/leaflet.js"
   5             afterScriptsLoaded="{!c.jsLoaded}" />
   6
   7    
   8
   9</aura:component>

3. Click File > Save to save the file
4. Click CONTROLLER (upper right corner of the code editor), and implement the controller as follows:
   1({
   2jsLoaded: function(component, event, helper) {
   3    setTimeout(function() {
   4        var map = L.map('map', {zoomControl: false}).setView([37.784173, -122.401557], 14);
   5        L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
   6            {
   7                attribution: 'Tiles © Esri'
   8            }).addTo(map);
   9
   10        // Add marker
   11        L.marker([37.784173, -122.401557]).addTo(map)
   12            .bindPopup('Home of Dreamforce');
   13        });
   14}
   15})

5. Click File > Save to save the file
6. Click STYLE (upper right corner of the code editor), and implement the following style:
   1.THIS.map {
   2    position: absolute;
   3    top: 0;
   4    left: 0;
   5    right: 0;
   6    bottom: 0;
   7}

7. Click File > Save to save the file

Step 3: Deploy the Component in the Salesforce1 App

To add a Tab for the Lightning Component:

1. In Setup, click Create > Tabs.
2. Click New in the Lightning Component Tabs section.
3. Select c:MyMap as the Lightning Component.
4. Specify My Map as the Tab Label and My_Map as the Tab Name.
5. Click the magnifier icon and select Lightning as the tab icon.
6. Click Next and Save.

To add the Tab to the Salesforce1 App Menu:

1. In Setup, Select Administer > Mobile Administration > Mobile Navigation.
2. Select My Map in the Available list.
3. Click Add.
4. Select My Map in the Selected List, and click the Up button to move the tab up in the menu order.
5. 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:

1. In your browser, remove the part of the URL that comes immediately after salesforce.com.
2. Append /one/one.app to the URL immediately after salesforce.com and press Enter: this starts the Salesforce1 Application simulator.
3. Click the menu button in the upper left corner.
4. Select My Map in the menu.
5. Preview the component.