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! :

({
   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]);
}
})