Lightning Component on GeoLocation

The main objective of this blog post is to understand the location based queries and automatic geocodes for addresses. Salesforce has introduced this feature "Automatically get Geocodes for the addresses" in Summer '16 release. This feature allows you to find the nearby accounts,track distance,location based reminders and much more. To know more about this feature please visit this link  https://releasenotes.docs.salesforce.com/en-us/summer16/release-notes/rn_general_geocodes_aloha.htm.

To get the geocodes to be automatically added to the existing records for the addresses follow this link Geocode clean rules.

Get the geocodes to your existing records in your org by following the above link. Once that is done, lets create a lightning component that will display the nearby accounts based on the user location. For which, first we need an apex class that will return the account list based on the current user's latitude and longitude. We get the list of accounts by using the location based query which is as follows,

List<Account> accountList = [Select Id,Name,BillingLatitude,BillingLongitude From Account Where Distance(BillingAddress,GeoLocation(:latitude, :longitude),'km') <10];

The above query fetches the accounts which is lesser than 10KM distance from the user's location.

We need to find the current user location by adding the following code in the controller of your component,

if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(success);
            function success(position) {
                 var lat = position.coords.latitude;
                 component.set("v.userLatitude",lat);
                 var long = position.coords.longitude;
                 component.set("v.userLongitude",long);
 }
} else {
          error('Geo Location is not supported');
}

To display the list of accounts in the map for which I used the leaflet library. I added leaflet library to the static resource and created a controller method to set the map view and multiple markers for the account.

loadMap: function(component, event, helper) {
        var lat = component.get("v.userLatitude");
        var long = component.get("v.userLongitude");
        var acc = component.get("v.Accounts");
        setTimeout(function() {
            var map = L.map('map', {zoomControl: false}).setView([lat,long], 14);
            L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
            {
                attribution: 'Tiles © Esri'
            }).addTo(map);


        if (acc.length> 0) {
                for (var i=0; i<acc.length; i++) {
                    var account = acc[i];                     var accName = acc[i].Name; 
                    L.marker([acc[i].BillingLatitude,acc[i].BillingLongitude]).addTo(map);
            .bindPopup(accName);

         }
       }           
    });
}

Then add this component to the aura application to check for the end result. Once the aura application is loaded, a page with the map is displayed which will show the nearby accounts with marker icons and popover displaying account name. 

You can find the source code in the github link https://github.com/then90/GeoLocation-Lightning-Component

To get this component deployed to your org click the deploy to button.