Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Thiago Barbosa 1Thiago Barbosa 1 

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

({
	jsLoaded: function(component, event, helper) {
		setTimeout(function() {
			var map = L.map('map', {zoomControl: false}).setView([-23.6086713, -46.6943538], 14);
			L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
				{
					attribution: 'Tiles © Esri'
				}).addTo(map);

			// Add markers
            var map = component.get('v.map');
            var accounts = component.get('v.accountList');
            if(accounts)
            {
                for (var i=0; i<accounts.length; i++) {
                    var account = accounts[i];
                    var latLng = [account.BillingLatitude , account.BillingLongitude];
                    L.marker(latLng, {account: account}).addTo(map);
                }
            }
            
            component.set("v.map", map);
        });
	},
    
    accountsLoaded : function(component, event, helper){
        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.BillingLatitude, account.BillingLongitude];
            L.marker(latLng, {account: account}).addTo(map);
        }
    },
    
    accountsSelected : function(component, event, helper){
        var map = component.get('v.map');
        var account = event.getParam("account");
        map.panTo([account.BillingLatitude, account.BillingLongitude]);
    },
    
})

 
Raj VakatiRaj Vakati
The issue is with the set timeout function.use ltng:require 

  
<aura:component>
    <aura:attribute name="map" type="Object"/>
    <ltng:require styles="/resource/leaflet/leaflet.css"
        scripts="/resource/leaflet/leaflet.js"
        afterScriptsLoaded="{!c.jsLoaded}" />
    <div id="map"></div>
</aura:component>
  
({
   jsLoaded: function(component, event, helper) {
      var map = L.map('map', {zoomControl: false, tap: 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);
  }
})