+ Start a Discussion
Ola BamideleOla Bamidele 

Adding Radius to Map

Hi Gurus, 

I have a leaflet map that displays accounts around europe however, is there a way for the map to display only accounts within a certain radius? 

I've been investigating and I have tried to implement the "L.circle([lat,lng], radius).addTo(map);" however I cant get it work as im getting 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" 

Does anyone know how I can add a radius to the map by any chance?

This is my code, thanks very much! :
    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
       {attribution: 'Tiles © Esri'
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]);
Hi Ola,
Mark as best answer, If it resloves !!
Please check these https://csessig.wordpress.com/2014/06/22/leaflet-solution-counting-markers-within-a-radius/

Mark as resloved if it helps :) :)
Bhanu Prakash
visit ForceLearn.com​ (https://www.forcelearn.com)
Ola BamideleOla Bamidele
Hi bhanu_prakash,

I have reviewed the document you sent several time and I dont think it matching what I am trying to do.

I am trying to only show account within a certain radius on a map.

Thanks very much