+ Start a Discussion
kavya mareedukavya mareedu 

Help with the error:

Component: 
<aura:component>
     <aura:handler event="c:AccountsLoaded" action="{!c.onAccountsLoaded}"/>
    <aura:attribute name="map" type="Object"/>
     <aura:attribute name="accounts" type="Account" />
    <ltng:require styles="/resource/leaflet/leaflet.css" scripts="/resource/leaflet/leaflet.js" afterScriptsLoaded="{!c.jsLoaded}" />
    <div id="map"/>
</aura:component>

JS:

({
    
    jsLoaded: function(component, event, helper) {
       var accounts = event.getParam('accounts');
        for (var i=0; i<accounts.length; i++) {          
            var account = accounts[i];
            var map = L.map('map', {zoomControl: false}).setView([account.BillingLatitude, account.BillingLongitude],11);
            L.tileLayer(
            'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
            }).addTo(map);
        component.set("v.map", map);
        
        var circle = L.circle([account.BillingLatitude, account.BillingLongitude], {
            color: 'red',
            fillColor: '#f03',
            fillOpacity: 0.5,
            radius:10000
        }).addTo(map);
        
        L.marker([account.BillingLatitude, account.BillingLongitude]).addTo(map).bindPopup(account.Name).openPopup(); 
        //L.marker([account.BillingLatitude, account.BillingLongitude]).addTo(map).bindPopup('Hyatt').openPopup(); 
        //L.marker([account.BillingLatitude, account.BillingLongitude]).addTo(map).bindPopup('Marriott Marquis').openPopup();
        

        }      
    }
})


Error: 

This page has an error. You might just need to refresh it. Action failed: c:leafflet$controller$jsLoaded [Unable to get property 'length' of undefined or null reference] Failing descriptor: {c:leafflet}
Best Answer chosen by kavya mareedu
{tushar-sharma}{tushar-sharma}
@kavya, You are missing very basic of development. I suggest you to try your hands on trailhead first.
In your case, you first need to query record/s in init method and initialise the list. Rest your code looks good. 

All Answers

{tushar-sharma}{tushar-sharma}
Change this line
var accounts = event.getParam('accounts');

to 

var accounts = component.get('v.accounts');

But it will return you only single record. If you want multiple then you need to convert aura:attribute into a list
<aura:attribute name="accounts" type="Account[]" />

You didn't shared your init method so I am hoping you are querying record in that.

If this answer helps you, please mark it as accepted.

Regards,
Tushar Sharma
https://newstechnologystuff.com/
kavya mareedukavya mareedu
Hey!! I have changed where you asked me to do but inspite of showing the map it shows the blank screen???
Where am I going wrong??
I am pretty new to this aura components and coding can you help me further??
kavya mareedukavya mareedu
Also I am not using any init method
David Zhu 🔥David Zhu 🔥
1. If you are using  for (var i=0; i<accounts.length; i++)  in Javascript, you need to define accounts as List type. 
<aura:attribute name="accounts" type="List" />

2. I don't see aura attribute accounts being initialized. Initialization usually takes place in init method. If init is not used. You are trying to loop on a undefined object, that is why you get a blank screen.
 
{tushar-sharma}{tushar-sharma}
@kavya, You are missing very basic of development. I suggest you to try your hands on trailhead first.
In your case, you first need to query record/s in init method and initialise the list. Rest your code looks good. 
This was selected as the best answer