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.

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

Read the full article here

  • Prasadium

    Great article.. atleast we’ve got a start into map thingy :)
    I was wondering how we could convert the location addresses into latitude and longitude values (which is needed by markers) programatically..

  • John Terry

    Its nice.You can check mine too. Its regarding google maptags. Maptags shortens your address to your favourite word and makes sharing address as easy as sharing a word. Visit at mapta.gs/maptags.html

  • very nice blog thanks admin

  • Onttu Lindeman

    Any way to point this to map contacts or accounts? Calling out a set marker is interesting but it would be awesome if it mapped all my leads.

    • @Onttu Lindeman: Take a look at this tutorial: http://ccoenraets.github.io/getting-started-lightning-components/

      • Onttu Lindeman

        Getting errors after this. I appear to have copied the code into the wrong area im sure its very specific.

        Part 7: Step 3 Add the following event registration declaration immediately after the map attribute declaration:

        Click File > Save to save the component.

        Click CONTROLLER (upper right corner in the code editor), and define a new accountsLoaded function positioned right after the jsLoaded function and implemented as follows:

        Make sure you add a comma after the jsLoaded function block.
        accountsLoaded: function(component, event, helper) {

        // Add markers
        var map = component.get(‘v.map’);
        var accounts = event.getParam(‘accounts’);
        for (var i=0; i<accounts.length; i++) {
        var account = accounts[i];
        var latLng = [account.Location__Latitude__s, account.Location__Longitude__s];
        L.marker(latLng, {account: account}).addTo(map);
        }
        }

        • Onttu Lindeman

          Got it working

          • Colm

            Hi Onttu,

            Experiencing difficulties with this myself. What did you do to get it working?

            thanks

  • very nice and help full post . thanks admin

  • is it possible to get longlat info in different coordinates system?

  • Kumar

    Hi Christophe- Thanks for the post. its very helpful.You example had only 3 records, but when the query returned more than 10 records, for some reason the accountlist component is not displaying all the 10 records, only the 5 records are visible. when i set the div tag property with overflow:scroll, it works perfectly in desktop browser, but the scroll bar is not visible on ipad/iphone. any thoughts on how i can show those?

  • is it possible to get longlat info in different coordinates system

  • Its very helpful post. I like this post.

  • Nice blog right here! Also your website quite a bit up very fast! What web host are you using.

  • Onttu Lindeman

    I changed out the setview code to find where the user is.
    map = L.map(‘map’, {doubleClickZoom: false}).locate({setView: true, maxZoom: 16});

    1.
    But i am getting the same issue as @kumar the app does not scroll beyond five. Anyone fixed this? Or maybe a search box would be better?
    2.
    The blue markers do we have anyone who has color coded the markers based on any attributes? Say a pick-list value

    • Onttu Lindeman

      Now that the first one is solved with scrolling i feel even stronger about the search. The issue is when you have 500 accounts you cant scroll through them all.
      How about a search function? little box on screen that look for accounts by name or number?

  • Onttu Lindeman

    Does not seem like alot but here is another improvement to add scrolling

    Accountlist style update to

    .THIS {
    list-style-type: none;
    padding: 0;
    margin: 0;
    background: #FFFFFF;
    height: 100%;
    overflow-y: auto;
    }

  • Fabrics we use in our form; The first-class micro-interlock; flex-fit, anti-bacterial, it has a thermo-balance, and immediately drying. This gives you the freedom to move your soccer jerseys of the match; It is designed stylish enough to be worn on a daily basis. Our models are produced in two types as my special jerseys and other digital printed…

  • ver nice to blog

  • Decent blog right here! Additionally your site a considerable amount up quick! What web host are you utilizing.

  • Pleasant blog right here! Likewise your site a lot up quick! What web host are you utilizing.

  • CIIT Noida

    This is complete package. You write briefly in this article. These both blog entry totally informative for readers.

    Hadoop Training Institute in Noida

  • CIIT Noida

    Keep on posting these types of articles.

    Best B.Tech College in Noida

  • Paul Ambler

    I do not think I’ve scanned anything such as this prior to. So good to locate somebody with some initial thoughts on this subject. nice one for starting this up. This site is something that is needed on the internet, someone with a little originality. roofing specialists

  • Paul Ambler

    I got a set up composing format from your blog site website. You have the wonderful composing capability along with it makes the site visitors read your brief articles to an in the past improving level. This article has every eleventh-hour views which are discussed understandingly. dental endodontics service

css.php