Hello All,

getting the following error while working on "Build an Account Geolocation App:Using Events to Add Markers to the Map"

Something has gone wrong. Action failed: sty$AccountMap$controller$accountsLoaded [TypeError: Cannot read property 'lat' of null] Failing descriptor: {sty$AccountMap$controller$accountsLoaded}. Please try again.

sty is the namespace currently used. The error is happening only after doing the steps mentioned in the "Using Events to Add Markers to the Map".Code works till the module:"Creating the AccountMap Component". something is missing like setting latlng in such a way that the js file works or the AccountMapController.js. please find the code below from trailhead:
 AccountMap.cmp

<aura:component>

    <aura:attribute name="map" type="Object"/>
<aura:handler event="c:AccountsLoaded" action="{!c.accountsLoaded}"/>
    <ltng:require styles="/resource/leaflet/leaflet.css"
        scripts="/resource/leaflet/leaflet.js"
        afterScriptsLoaded="{!c.jsLoaded}" />

    <div id="map"></div>

</aura:component>

AccountMapController.js
({
    jsLoaded: function(component, event, helper) {

        setTimeout(function() {
            var map = L.map('map', {zoomControl: false}).setView([37.784173, -122.401557], 14);
            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 latLng = [account.Location__Latitude__s, account.Location__Longitude__s];
            L.marker(latLng, {account: account}).addTo(map);
        }  
    }
})

AccountListController.js

({
    doInit : function(component, event) {
        var action = component.get("c.findAll");
        action.setCallback(this, function(a) {
            component.set("v.accounts", a.getReturnValue());
            var event = $A.get("e.sty:AccountsLoaded");
            event.setParams({"accounts": a.getReturnValue()});
            event.fire();
        });
    $A.enqueueAction(action);
    }
})

AccountList.cmp

<aura:component controller="AccountController">
<aura:registerEvent name="accountsLoaded" type="c:AccountsLoaded"/>
    <aura:attribute name="accounts" type="Account[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <ul>
    <aura:iteration items="{!v.accounts}" var="account">
        <c:AccountListItem account="{!account}"/>
    </aura:iteration>
    </ul>

</aura:component>

AccountLocator.cmp

<aura:component implements="force:appHostable">

    <div>
        <div>
            <c:AccountMap />
        </div>

        <div>
            <c:AccountList />
        </div>
    </div>

</aura:component>

AccountsLoaded.evt

<aura:event type="APPLICATION">
    <aura:attribute name="accounts" Type="Account[]"/>
</aura:event>

AccountController.apxc

public with sharing class AccountController {

    @AuraEnabled
    public static List<Account> findAll() {
    return [SELECT id, name, Location__Latitude__s, Location__Longitude__s
            FROM Account
            WHERE Location__Latitude__s != NULL AND Location__Longitude__s != NULL
            LIMIT 50];
    }

}

AccountListItem.cmp

<aura:component>

    <aura:attribute name="account" type="Account"/>

    <li><a>{!v.account.Name}</a></li>

</aura:component>

Please suggest and it would greatly help me to move forward with Trailheading :) 


Regards
Siva





 

Hi,

Cannot save the Controller, please help.

https://trailhead.salesforce.com/projects/quickstart-lightning-components/steps/quickstart-lightning-components4

Easy challenge, copying the code of CloudNewsTrigger and including small changes, but I have stucked with the UserId.

Using this code for OrderEventTrigger you will pass the course:
 

trigger OrderEventTrigger on Order_Event__e (after insert) {    
    // List to hold all tasks to be created.
    List<Task> tasks = new List<Task>();
    
    // Get queue Id for task owner
    //Group queue = [SELECT Id FROM Group WHERE Name='Regional Dispatch' LIMIT 1];
     String usr = UserInfo.getUserId();  
    // Iterate through each notification.
    for (Order_Event__e event : Trigger.New) {
        if (event.Has_Shipped__c == true) {
            // Create Task to dispatch new team.
            Task ts = new Task();
            ts.Priority = 'Medium';
            ts.Status = 'New';
            ts.Subject = 'Follow up on shipped order ' + event.Order_Number__c;
            ts.OwnerId = usr;//queue.Id;
            tasks.add(ts);
        }
   }
    
    // Insert all tasks corresponding to events received.
    insert tasks;

}

Good luck!

Hello All,

getting the following error while working on "Build an Account Geolocation App:Using Events to Add Markers to the Map"

Something has gone wrong. Action failed: sty$AccountMap$controller$accountsLoaded [TypeError: Cannot read property 'lat' of null] Failing descriptor: {sty$AccountMap$controller$accountsLoaded}. Please try again.

sty is the namespace currently used. The error is happening only after doing the steps mentioned in the "Using Events to Add Markers to the Map".Code works till the module:"Creating the AccountMap Component". something is missing like setting latlng in such a way that the js file works or the AccountMapController.js. please find the code below from trailhead:
 AccountMap.cmp

<aura:component>

    <aura:attribute name="map" type="Object"/>
<aura:handler event="c:AccountsLoaded" action="{!c.accountsLoaded}"/>
    <ltng:require styles="/resource/leaflet/leaflet.css"
        scripts="/resource/leaflet/leaflet.js"
        afterScriptsLoaded="{!c.jsLoaded}" />

    <div id="map"></div>

</aura:component>

AccountMapController.js
({
    jsLoaded: function(component, event, helper) {

        setTimeout(function() {
            var map = L.map('map', {zoomControl: false}).setView([37.784173, -122.401557], 14);
            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 latLng = [account.Location__Latitude__s, account.Location__Longitude__s];
            L.marker(latLng, {account: account}).addTo(map);
        }  
    }
})

AccountListController.js

({
    doInit : function(component, event) {
        var action = component.get("c.findAll");
        action.setCallback(this, function(a) {
            component.set("v.accounts", a.getReturnValue());
            var event = $A.get("e.sty:AccountsLoaded");
            event.setParams({"accounts": a.getReturnValue()});
            event.fire();
        });
    $A.enqueueAction(action);
    }
})

AccountList.cmp

<aura:component controller="AccountController">
<aura:registerEvent name="accountsLoaded" type="c:AccountsLoaded"/>
    <aura:attribute name="accounts" type="Account[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <ul>
    <aura:iteration items="{!v.accounts}" var="account">
        <c:AccountListItem account="{!account}"/>
    </aura:iteration>
    </ul>

</aura:component>

AccountLocator.cmp

<aura:component implements="force:appHostable">

    <div>
        <div>
            <c:AccountMap />
        </div>

        <div>
            <c:AccountList />
        </div>
    </div>

</aura:component>

AccountsLoaded.evt

<aura:event type="APPLICATION">
    <aura:attribute name="accounts" Type="Account[]"/>
</aura:event>

AccountController.apxc

public with sharing class AccountController {

    @AuraEnabled
    public static List<Account> findAll() {
    return [SELECT id, name, Location__Latitude__s, Location__Longitude__s
            FROM Account
            WHERE Location__Latitude__s != NULL AND Location__Longitude__s != NULL
            LIMIT 50];
    }

}

AccountListItem.cmp

<aura:component>

    <aura:attribute name="account" type="Account"/>

    <li><a>{!v.account.Name}</a></li>

</aura:component>

Please suggest and it would greatly help me to move forward with Trailheading :) 


Regards
Siva





 

I'm passing this challenge, however when I actually test it out by clicking on an account in the account list item, I get this exception: 

"Something has gone wrong. Action failed: c$AccountMap$controller$accountSelected [TypeError: Cannot read property 'reuseTiles' of undefined] Failing descriptor: {c$AccountMap$controller$accountSelected}."

I did some debugging and found that the location and latitude of the account are indeed being capture by my event, so it looks like this might be a problem with the leaflet function map.panTo(). Does anyone know the solution to this issue? Here's my code, although it's exactly the same as the tutorial's.
 

({
    jsLoaded: function(component, event, helper) {

        setTimeout(function() {
            var map = L.map('map', {zoomControl: false}).setView([37.784173, -122.401557], 14);
            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 latLng = [account.Location__Latitude__s, account.Location__Longitude__s];
            L.marker(latLng, {account: account}).addTo(map);
        }  
    },

    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");
        alert(account.Location__Latitude__s + ', ' + account.Location__Longitude__s);
        map.panTo([account.Location__Latitude__s, account.Location__Longitude__s]);
    }
})

 

I am on the last step of the Trailhead Account Geolocation project and I get the following error:


Here is the code from the AccountMapController-- What did I do wrong?
({
      jsLoaded: function(component, event, helper) {

         setTimeout(function() {
            var map = L.map('map', {zoomControl: false})
                        .setView([37.784173, -122.401557], 14);
            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 latLng = [account.Location__Latitude__s, account.Location__Longitude__s];
              L.marker(latLng, {account: account}).addTo(map).on('click', function(event) {
   helper.navigateToDetailsView(event.target.options.account.Id);
});

      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.Location__Latitude__s, account.Location__Longitude__s]);
      }
})