+ Start a Discussion
Jake IrvinJake Irvin 

Account Geolocation Project 'Using Events to Center the Map'

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

 
BennyStevensBennyStevens
Hi Jake Irving,

Have you found a solution? I'm having the exact same issue ... Passing the step, but also getting the exception when testing.

Kind regards,
Benny
BennyStevensBennyStevens
When testing on iPad I received more details on the error ... Maybe this can help to troubleshoot:
 
Uncaught Action failed: c$AccountMap$controller$accountSelected [TypeError: Cannot read property 'reuseTiles' of undefined]
throws at https://***-dev-ed.lightning.force.com/auraFW/javascript/qnVOSqP_GYth6AWC2fT1jQ/aura_prod.js:1:27
    at Object._reset (/resource/leaflet/leaflet.js:5:3348)
    at Object.action (https://***-dev-ed.lightning.force.com/auraFW/javascript/qnVOSqP_GYth6AWC2fT1jQ/aura_prod.js:459:372)
    at value (https://***-dev-ed.lightning.force.com/auraFW/javascript/qnVOSqP_GYth6AWC2fT1jQ/aura_prod.js:460:276)
    at value.fireEvent (/resource/leaflet/leaflet.js:4:5055)
    at .<anonymous> (https://***-dev-ed.lightning.force.com/auraFW/javascript/qnVOSqP_GYth6AWC2fT1jQ/aura_prod.js:459:372)
    at value [as fire] (https://***-dev-ed.lightning.force.com/auraFW/javascript/qnVOSqP_GYth6AWC2fT1jQ/aura_prod.js:460:276)
    at value._resetView (/resource/leaflet/leaflet.js:4:27260)
    at ._resetView (https://***-dev-ed.lightning.force.com/auraFW/javascript/qnVOSqP_GYth6AWC2fT1jQ/aura_prod.js:459:372)
    at value [as _resetView] (https://***-dev-ed.lightning.force.com/auraFW/javascript/qnVOSqP_GYth6AWC2fT1jQ/aura_prod.js:460:276)
    at value.setView (/resource/leaflet/leaflet.js:7:22989)

 
Jeff DouglasJeff Douglas
This looks like an exception being thrown due to LockerService. I'll file a bug with the team.

Jeff Douglas
Trailhead Developer Advocate
Sneha.PatilSneha.Patil
I am facing same issue.. Is there any solution yet?
Paul FoleyPaul Foley
I'm having the same issue too
Nicholle MinchNicholle Minch
Same issue.  I'm interested to know how to fix it.
Alessandro SpadoniAlessandro Spadoni
Same here. Please let me know!
KoulzRulzKoulzRulz
I'm also having the same issue.
Tyler Mowbrey 1Tyler Mowbrey 1
I am also having the same issue. Is there a known issue logged for this?
Jamal Rida 5Jamal Rida 5
Same here ! @Jeff is there any update regarding this issue  ?

Much appreciate
Tyler MowbreyTyler Mowbrey
I actually bypassed this by just re-creating the map everytime I needed to render something. If you do something similar to this:
 
var map = component.get('v.map');
if(map) {
  map.remove();
}

// now re-create your map with markers

you should have no problems using leaflet. Once the bug is resolved this should not be needed as panTo and fitBounds will work as expected (I hope!).
Siva N R ChamarthySiva N R Chamarthy
Hello All,
 Just to confirm, still having the issue: 

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


Please let us know if there is any solution

Regards
Siva
 
yogaraj kvyogaraj kv
Hi All,

The exception is due to Lockerservice on. If we deactivate the Lockerservice. Its working.
Regards,
Yogaraj.K.v
BennyStevensBennyStevens

 


Even when I turn of Lockerservice, I receive an error message since release of Winter 17 in Production, see below for Technical Stuff Message.

Also, the markers for the accounts are not showing anymore, while they did before.
I looked at the event component en controller of the AccountMap component, and they are still exactly the same as described in the Trailhead Project.

Kind Regards,
Benny
 

Uncaught Action failed: c$AccountMap$controller$accountsLoaded [Cannot read property 'addLayer' of null]

throws at https://usgpeoplebe.lightning.force.com/auraFW/javascript/x4ZmsozINtoTVrt_2eFxRg/aura_prod.js:2:15

at e.addTo (/resource/leaflet/leaflet.js:5:2319),    at accountsLoaded (components/c/AccountMap.js:36:44),
at F.Dc (https://usgpeoplebe.lightning.force.com/auraFW/javascript/x4ZmsozINtoTVrt_2eFxRg/aura_prod.js:306:170),
at Object.Ua (https://usgpeoplebe.lightning.force.com/auraFW/javascript/x4ZmsozINtoTVrt_2eFxRg/aura_prod.js:258:72),
at wB (https://usgpeoplebe.lightning.force.com/auraFW/javascript/x4ZmsozINtoTVrt_2eFxRg/aura_prod.js:295:461),
at https://usgpeoplebe.lightning.force.com/auraFW/javascript/x4ZmsozINtoTVrt_2eFxRg/aura_prod.js:296:281,
at $.y.mb (https://usgpeoplebe.lightning.force.com/auraFW/javascript/x4ZmsozINtoTVrt_2eFxRg/aura_prod.js:578:229),
at N.P (https://usgpeoplebe.lightning.force.com/auraFW/javascript/x4ZmsozINtoTVrt_2eFxRg/aura_prod.js:296:260),
at value [as fire] (https://usgpeoplebe.lightning.force.com/auraFW/javascript/x4ZmsozINtoTVrt_2eFxRg/aura_prod.js:516:298),
at null.<anonymous> (components/c/AccountList.js:15:19)



 
Always ThinkinAlways Thinkin
Same problem here with selecting any account, and additionally I'm getting an error from leaflet on page load:
Uncaught TypeError: Cannot read property 'fire' of undefined
throws at /resource/leaflet/leaflet.js:9:7645
This is gonna make a crummy demo of Lightning Components for my CTO :/
michael  limmichael lim
I had no problems completing this Trailhead project but got an error when I tried to add the AccountLocation component to the Home page in my Winter 17 org.
Uncaught Action failed: c$AccountMap$controller$accountsLoaded [Cannot read property 'addLayer' of null]
I fixed this by moving the map generation code to the accountsLoaded function .

But now I get an error when I navigate to another page then back to the Home page, the accountsLoaded function fires two times and I get this error:
Uncaught Action failed: c$AccountMap$controller$accountsLoaded [Map container is already initialized.]

Why is the accountsLoaded function executing two times when you use the the tab navigation menu?
Fernando Fernandez 7Fernando Fernandez 7

One workaround was explained in this Dreamforce session "Using 3rd Party JS Libraries With Lightning Components (https://www.salesforce.com/video/303933/)".

  • https://www.salesforce.com/video/303933/

They ended up creating a VF page containing the Leaflet map and embedding it in an IFRAME inside the Lightning component, then passing arguments to the IFRAME.

Another workaround is posted below:  delete and recreate the map on the accountSelected event.

Please note that I've declared an account list on a new component attribute 'accountList'
 

<aura:attribute name="accountList" type="List"/>
 

and then changed the accountsLoaded event to copy the accounts to it
 

accountsLoaded: function(component, event, helper) {
        // Add markers
        var map = component.get('v.map');
        var accounts = event.getParam('accounts');
        component.set( 'v.accountList', accounts );
        for (var i=0; i<accounts.length; i++) {
       ...
 

then changed the accountSelected event as below to recreate the map and restore the markers:
 

accountSelected: function(component, event, helper) {
        // workaround:  delete and recreate the map with the markers
        var map = component.get( 'v.map' );
        if( map ) {
              map.remove();
        }
        
        // get account coordinates
        var account1 = event.getParam('account');
        var latlng = [ account1.Location__Latitude__s, account1.Location__Longitude__s ];
        
        // initialize the Leaflet plugin passing the 'map' DIV
        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 );
        
        var accounts = component.get( 'v.accountList' );
        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);
            });
        } 
        map.panTo([account1.Location__Latitude__s, account1.Location__Longitude__s]);
        
        component.set( "v.map", map );
            
}
 

There is still a glitch:  the map stops responding to the mouse drag and doesn't scroll.

 

Colin Kenworthy 2Colin Kenworthy 2
I've turned off the Locker Service, saved everything as API v35, using the legacy 0.7.7 version of Leaflet.  I usually have to refresh the initial page a few times for it to load, the map centering seems to work OK, but clicking on the markers throws an error (Uncaught TypeError: Cannot read property 'setParams' of undefined) intead of showing the account.

This is my first step into the world of Lightning with Trailhead and I have to wonder if I'm being taught to do things wrongly or if it's due to frameworks which are out of the control of the Trailhead Team.

Either way, this trailhead needs overhauling or deleting.
Kristina WilliamsonKristina Williamson
I thought that I would revisit this trailhead again now that Spring'17 has been rolled out. Maybe something in Spring 17 release might resolve the problem.  The error experienced by many of my fellow trailhead explorers is still happening if LockerService Security is activated.  I tested the account selection step with LockerService Security activated AND deactivated.  When LockerService Security is deactivated, the map centering works.  Is there a Trailhead explaining what LockerService Security is about?
Jill Hertzman 9Jill Hertzman 9
The issue still remains. Any update on this?
Bruce Frcek 3Bruce Frcek 3
I was having the same difficulty as others and getting the same error messages including trouble displaying the map with markers.  

I was able to resolve it by activating the CSP critical update.  Once I activated it, the map and markers appear to work properly.

The Critical Update Name that you should activate is:

Enable Stricter Content Security Policy for Lightning Components:

Summary: 
The Lightning Component framework already uses CSP, which is a W3C standard, to control the source of content that can be loaded on a page. This critical update enables stricter Content Security Policy (CSP) to mitigate the risk of cross-site scripting attacks. Stricter CSP is enforced only in sandboxes and Developer Edition orgs.

Hope this helps! 
Colin Kenworthy 2Colin Kenworthy 2
That helped. My markers now let me click through to the Account.
Melissa Mueller 9Melissa Mueller 9
I activated the critical update that Bruce Frcek 3 suggested, but I still get the error:
Sorry to interrupt
Uncaught TypeError: Cannot read property 'setParams' of undefined throws at components/c/AccountMap.js:42:15
:(
Mark BaileyMark Bailey
I am having the same issue as Melissa.
Activated the critical update and reviewed all of the code.  I am able to get to the map indicators and the map will center.  When I do the last module, I receive
 User-added image
It looks like this is an error in the AccountMapController line that is added in Step 1 of the "Interact with the Salesforce Mobile App" section.
},
    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);
});
        }  
    },

 
Ola BamideleOla Bamidele
You need to do the next one then come back to pass this one.

Once the next one is passed, the previous one will work.

Thanks
Roland Fuchsberger_Roland Fuchsberger_
This seems to be a Firefox issue. Got it working using Chrome.
See: https://developer.salesforce.com/forums/?id=9060G0000005SWzQAM and https://bugzilla.mozilla.org/show_bug.cgi?id=1449485
Rick UptonRick Upton

Roland and Ola, are you able to click on a pin and view account details for that account? If so, would you please post the code you have for AccountMapController? When I click a pin in Chrome, I get the following error

Uncaught TypeError: Cannot read property 'setParams' of undefined throws at https://curious-raccoon-356623-dev-ed.lightning.force.com/c/components/c/AccountMap.js:38:15

Rick UptonRick Upton
Hi Roland and Ola, please ignore my previous post, I was able to get a click on a pin to successfully open an account detail page. 

Per the advice of "David Roberts 4" on the post Trailhead Account Geolocation Project error (https://developer.salesforce.com/forums?id=906F0000000ML3JIAW), I updated AccountLocator.cmp to the following:
<aura:component implements="force:appHostable,force:lightningQuickActionWithoutHeader,force:hasRecordId,force:appHostable,flexipage:availableForAllPageTypes">
	<aura:dependency resource="markup://force:navigateToSObject" type="EVENT"/>
    <div>
        <div>
            <c:AccountMap />
        </div>
        <div>
            <c:AccountList />
        </div>
    </div>
</aura:component>
After doing that, I created a Lightning App Page, dragged the new custom component AccountLocator onto the page, activated the page and added it to an app. After doing all of that, I was able to go to navigate to my new Lightning App Page and click on a pin to open an account record.

I wonder if the explanation Nayana K gave as the "Best Answer" for a different question (https://developer.salesforce.com/forums/?id=9060G000000BhBxQAK) also applies here. She said:

When you try to launch the component via app [...], standard events ([...] navigateToSobject,  etc)  will be undefined. [...] Therefore launch your [component] in LEX via app builder or lightning quickaction or drag to detail page to check how it works.