function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Ola BamideleOla Bamidele 

how to Add Radius to Map

Hi gurus, 

I have a Salesforce1 app that displays on a map accounts thats near the person that opens the app. The account locations are pulled using longitude and longtitude which then displays them on the map.

However, now I only want to display the accounts that are near the person that opens the app - like a 5 mile radius - as accounts that 100s miles away do not need to be displayed.

Ive been working on this for a while and havent been able to get it working so please if you know how to do so then please let me know! Thanks very much.

This is my code: 
({
   jsLoaded:
    function(component, event, helper) {
        // Set initial map parameters
        var map = L.map('map', {zoomControl: true, tap: false})
                  
        //Set default view of the map to TIP HQ Amsterdam
                //map.setView([52.311828,4.939566], 12);
        
        //Set default view to Scott Moore's location
                //map.setView([52.7003,1.3626], 12); 
        
        // Set default view of the map based on the users' location 
                 .locate({setView: true,  maxZoom: 16}); 
        
        function onLocationFound(e) {
    L.marker(e.latlng).addTo(map).bindPopup("You are here.").openPopup();
}

map.on('locationfound', onLocationFound);

map.on('moveend', function() {
    console.log("map was panned!");
    console.log("zoom: " + map.getZoom());    // prints out zoom level
    console.log("center: " + map.getCenter());    // prints out map center
    console.log(map.getBounds());    // throws error
});
         
        //Instantiate the map
        L.tileLayer(
       'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
       {attribution: 'Tiles © Esri'
       }).addTo(map);
component.set("v.map", map);
  },
    
    
    
    
    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 popupInfo = [account.name];
            var latLng = [account.ShippingLatitude, account.ShippingLongitude];
            // To display account name and status in the text balloon
            L.marker(latLng, {account: account}).addTo(map)
             .bindPopup(account.Name + "<br />" + 
                        account.AccountStatus__c + "<br />" +
                       	account.Segment__c + ", Fleet size= " + account.Customer_Fleet_Size__c);
        }  
    },
    accountSelected: function(component, event, helper) {
    // Center the map on the account selected in the list
    var map = component.get('v.map');
    var account = event.getParam("account");
    map.panTo([account.ShippingLatitude, account.ShippingLongitude]);
}
})


Thanks very much!
 
Raj VakatiRaj Vakati
Refer this link
  
https://leafletjs.com/reference-1.3.0.html#circle
L.circle([lat,lng], radius).addTo(map);

code is here
  
({
   jsLoaded:
    function(component, event, helper) {
        // Set initial map parameters
        var map = L.map('map', {zoomControl: true, tap: false})
                  
        //Set default view of the map to TIP HQ Amsterdam
                //map.setView([52.311828,4.939566], 12);
        
        //Set default view to Scott Moore's location
                //map.setView([52.7003,1.3626], 12); 
        
        // Set default view of the map based on the users' location 
                 .locate({setView: true,  maxZoom: 16}); 
        
        function onLocationFound(e) {
    L.marker(e.latlng).addTo(map).bindPopup("You are here.").openPopup();
L.circle([e.latlng,e.latlng], 5000).addTo(map);
}

map.on('locationfound', onLocationFound);

map.on('moveend', function() {
    console.log("map was panned!");
    console.log("zoom: " + map.getZoom());    // prints out zoom level
    console.log("center: " + map.getCenter());    // prints out map center
    console.log(map.getBounds());    // throws error
});
         
        //Instantiate the map
        L.tileLayer(
       'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
       {attribution: 'Tiles © Esri'
       }).addTo(map);
component.set("v.map", map);
  },
    
    
    
    
    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 popupInfo = [account.name];
            var latLng = [account.ShippingLatitude, account.ShippingLongitude];
            // To display account name and status in the text balloon
            L.marker(latLng, {account: account}).addTo(map)
             .bindPopup(account.Name + "<br />" + 
                        account.AccountStatus__c + "<br />" +
                       	account.Segment__c + ", Fleet size= " + account.Customer_Fleet_Size__c);
        }  
    },
    accountSelected: function(component, event, helper) {
    // Center the map on the account selected in the list
    var map = component.get('v.map');
    var account = event.getParam("account");
    map.panTo([account.ShippingLatitude, account.ShippingLongitude]);
}
})


 
Ola BamideleOla Bamidele
Hi Ray V,

Thanks for the response. i bring the code however, its not working. When I open the app, i get an error saying "Uncaught TypeError: Cannot read property 'lng' of null throws at https://tipeurope--tt.lightning.force.com/resource/leaflet/leaflet.js:5:77837"

Do you know why this is happening? 

Thanks very much!