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.

css.php