- Salesforce Blogs -

How to Build Lightning Map in Salesforce?

Salesforce is a name that does not require an introduction anymore. It is the best technology that the market has ever seen. It is ever growing and ever expanding, that is why it has maintained its lead in this market where new competition is always a few seconds away only. Salesforce's biggest advantage is its triannual update. This way they get to fix all the previous issues and release new functioning mechanisms within no time. Today we will discuss one revolutionary functionality that Salesforce 2019 release has issued and i-e Lightning Map in Salesforce. To make that a little more interesting and easier to understand, we have divided the blog into the following sections-

Lightning Map in Salesforce

With salesforce winter 19 discharge, Salesforce presented the lightning: map segment that will show the google maps on lightning experience. Before winter 19 discharge, we used to complete a hack to demonstrate the google maps on the lightning component by utilizing visual force page.

Most interchanges from Salesforce about the Lightning Experience say that it's something beyond a refreshed work area (UI). While that is completely valid, I would prefer not to make light of how much a decent UI helps the personal satisfaction for higher ed clients. Truly, we have toiled under awful UIs from ed-tech organizations for such a long time that the enhancement was not really required when looking at the current, "classic" interface to our different frameworks. All things considered, the new interface of lightning is even more wonderful and enjoyable for the clients in light of these key enhancements. salesforce Curriculum In the first place, access to Salesforce objects is now patched up with the ability to find a real collapsible route, much like the Salesforce1 mobile experience, opening up screen land and making it simpler to see a greater amount of map visibility and locations immediately. In spite of the way that most higher ed clients are as yet fastened to work areas and workstations, the UI brings together the client experience, taking the good features from the mobile experience and making it accessible to work area clients. Second, the "autosave" usefulness for the maps and locations guarantees a superior affair all through the Org and the way that Notes presently incorporates rich-content capacities and the capacity to relate a Note to numerous records is a great thing.

lightning: map

This base lightning part is equipped for rendering google maps alongside single/different markers. It acknowledges both the following sort of areas:

  1. Latitude & Longitude
  2. Complete location parts like Street, City, State etc. 

There are 5 distinctive location segments which are-Street, City, State, Country, Pin Code Lightning Map in Salesforce For modifying the segment, we have a few traits. Like

Read: What Is Salesforce Chatter And Its Benefits?
  • zoomlevel– The component required for setting a specific zoom level.
  • mapmarkers– The component which holds a list of location data
  • markerstitle– The component that provides title for each marker
  • showfooter– The component that enables you to show a footer with the google map link

Steps for Lightning Map Component built with the popular Leaflet open-source library

Figure out how to make a Map part utilizing Lightning Components. Well-ordered guidelines and source code are given. This part additionally tells the best way to stack outside Javascript libraries and CSS templates utilizing the long: require a tag. Lightning Map in Salesforce The most ideal approach to explore different avenues regarding another part structure is to make segments, and a basic Map segment is regularly one of the main things that immediately ring a bell.

Step 1: Import Leaflet as a Static Resource

The Leaflet is an open-source JavaScript library which is utilized for versatile mobile-friendly interactive and intelligent maps. It has all the mapping highlights. It works great overall media screens. Execution and structure of pamphlet are standard. It very well may be stretched out by bunches of modules and it has added a lovely and an all-around recorded API which causes engineers to structure a particular kind of map. salesforce quiz On the off chance that we are discussing the utilization of handout map in salesforce lightning part. We can without much of a stretch use it by bringing in Leaflet as a static asset in our Salesforce Org. Download the flyer compress record from the Salesforce website. Include static asset utilizing steps: Setup - > Build - > Develop - > Static Resources - > New.Write the name and choose downloaded compress record from the link that appears and save

  • Download the most recent stable variant of the handout
  • In Setup, go to Build > Develop > Static Resources, and snap New.
  • Specify leaflet (all lowercase) as the Name, click on the Choose File tab and select the leaflet zip file that you have just downloaded.
  • Click on Save.

Step 2: Create the Component

  • In the Developer Console, click File > New > Lightning Component. Determine MyMap as the package name and snap on Submit option
  • Implement the Component as follows:Lightning Map in Salesforce
  • Click on the following option File > Saveto be able to save the file
  • Thereafter click on CONTROLLER( given at the upper right corner of the code editor), and execute the controller as follows:Lightning Map in Salesforce
  • Click on File then Save option to save the file
  • Click on STYLE tab (given at the upper right corner of the code editor), and then execute the following style:Lightning Map in Salesforce
  • Lastly, Click File > Saveto save the file

Step 3: Deploy the Component in the Salesforce1 App

To be able to add a Tab for the Lightning Component:

  • In the Setup menu, click on Create > Tabs.
  • Then click on New option in the Lightning Component Tabs
  • Choose c: MyMapas the Lightning Component.
  • Thereafter you must specify My Mapas the button Label and My_Map as the Button Name.
  • After that click on the magnifier icon given there and select lightning as the tab icon.
  • Lastly clicks on Next option and then

To add the Tab to the Salesforce1 App Menu:

  • In Setup, Select Administer > Mobile Administration > Mobile Navigation.
  • Select My Map in the Available rundown.
  • Click on the Add option.
  • Select My Map in the Selected List and snap the Up catch to move the tab up in the menu request.
  • Lastly, click on Save option.

You would now be able to test the component in the Salesforce1 application on your gadget. Then again, you can review the segment in the Salesforce1 application test system:

Read: How to Prepare For Salesforce Developer Interview? Beginners Tips!
  • In your program, expel the piece of the URL that comes following salesforce.com.
  • Append/one/one.app to the URL following salesforce.com and press Enter: this begins the Salesforce1 Application test system.
  • Click on the menu catch in the upper left corner.
  • Select My Map on the menu.
  • Preview the component. 

Google Maps with lightning: map component

The lightning: map segment safely shows a guide of at least one or more areas utilizing Google Maps. You can pass markers to the part to characterize the areas to delineate. A marker can be an arrange pair of scope and longitude, or a lot of location components: City, Country, PostalCode, State, and Street. You have to pass the locationmapMarkers property to show the guide. You can utilize the following marker properties to customize the map display.

PROPERTY TYPE DESCRIPTION
location object Address components (City, Country, PostalCode, State, and Street) or a lot of scope and longitude arranges. On the off chance that you indicate address components and arranges for one area, the guide utilizes the directions. To help solid geocoding of addresses, in the event that you indicate Street, you should likewise determine no less than one of City, Country, PostalCode or State.
title string The heading showed in the information window that is demonstrated when you click a marker.
description string The data showed in the information window that is demonstrated when you click a marker.
icon string The symbol that is shown beside the area title and address. Just Lightning Design System symbols are bolstered. Custom marker symbols are right now not upheld. The default is standard: location. For more data, see Displaying Multiple Addresses.

 

For example:

<lightning:map   

  mapMarkers="{!v.mapMarkers}">

</lightning:map>

Read: How To Create a Custom Object TABS In Salesforce.Com?

map-markers is a variety of markers that demonstrate area. A marker contains Location Information: This can be a coordinate pair of scope and longitude or a location made out of location components. Descriptive Information: This is data like title, portrayal and a symbol which is data applicable to the marker yet not explicitly identified with the area. free salesforce demo The area data bolsters the accompanying location components: City, Country, PostalCode, State, and Street. Note that to help dependable geocoding of addresses, if Street is indicated, no less than one of City, Country, PostalCode or State must be determined.

Conclusion

I am sure that you have gotten what you have been looking for in the blog. It discusses everything with respect to Salesforce lightning map component. Since the feature is new there is a whole lot more to come on it yet.

Salesforce Tutorial Overview

    Janbask Training

    JanBask Training is a leading Global Online Training Provider through Live Sessions. The Live classes provide a blended approach of hands on experience along with theoretical knowledge which is driven by certified professionals.


Comments

Search Posts

Reset

Receive Latest Materials and Offers on Salesforce Course

Interviews