I am stuck with the following error :
Uncaught Action failed: c:AccountMap$controller$jsLoaded [component.rerender is not a function]
Here is my component :
<aura:component implements="flexipage:availableForAllPageTypes">
<aura:attribute name="accounts" type="Account[]"/>
<aura:attribute name="selectedAccount" type="Account"/>
<!-- The Leaflet map object -->
<aura:attribute name="map" type="Object"/>
<!-- The Leaflet markers -->
<aura:attribute name="markers" type="Object"/>
<!-- Handler to display markers when account list changes -->
<aura:handler name="change" value="{!v.accounts}" action="{!c.accountsChangeHandler}"/>
<!-- Handler to re-center the map when selected account changes -->
<aura:handler name="change" value="{!v.selectedAccount}" action="{!c.selectedAccountChangeHandler}"/>
<div aura:id="map"></div>
<!-- Load the leaflet library (http://leafletjs.com for details) -->
<ltng:require styles="/resource/leaflet/leaflet.css"
scripts="/resource/leaflet/leaflet.js"
afterScriptsLoaded="{!c.jsLoaded}" />
and the rerender :
({
rerender: function (component, helper) {
var nodes = this.superRerender();
// If the Leaflet library is not yet loaded, we can't draw the map: return
if (!window.L) return nodes;
var map = component.get("v.map");
// Draw the map if it hasn't been drawn yet
if (!map) {
var mapElement = component.find("map").getElement();
map = window.L.map(mapElement, {zoomControl: true}).setView([37.784173, -122.401557], 14);
window.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);
var markers = new window.L.FeatureGroup();
component.set("v.markers", markers);
// If we had received accounts before Leaflet was loaded, add markers for these accounts
helper.addMarkers(component);
}
return nodes;
}
})
and here is the controller :
({
jsLoaded: function(component, event, helper) {
component.rerender();
},
accountsChangeHandler: function(component, event, helper) {
helper.addMarkers(component);
},
// Center the map on the account selected in the list
selectedAccountChangeHandler: function(component, event) {
console.log('selectedAccountChangeHandler');
var account = event.getParam("value");
var map = component.get("v.map");
console.log(account);
if (account && map) {
map.panTo([account.billingLatitude, account.billingLongitude]);
}
}
})
Any help is greatly appreciated. Thanks a lot!
jsLoaded
method so we can further assist you? – sfdcfox Aug 24 '18 at 16:42