You need to sign in to do that
Don't have an account?
Siva N R Chamarthy
Build an Account Geolocation App:Using Events to Add Markers to the Map-TypeError: Cannot read property 'lat' of null]
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
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
AccountController.apxc
public with sharing class AccountController {
@AuraEnabled
public static List<Account> findAll() {
return [SELECT id, name, sty__Location__Latitude__s, sty__Location__Longitude__s
FROM Account
WHERE sty__Location__Latitude__s != NULL AND sty__Location__Longitude__s != NULL
LIMIT 50];
}
}
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.sty__Location__Latitude__s, account.sty__Location__Longitude__s];
L.marker(latLng, {account: account}).addTo(map);
}
}
})