I'm working on implementing a map component with leaflet that needs to do two things.

1) Upon initialisation, get a list of the locations from the server 2) Once js libraries are loaded, use list of locations to drop pins on the map.

I'm calling the data from the server in an aura Init handler and it's returning results.

I'm initialising the map in the controller function that is fired on afterScriptsLoaded when I required the js.

Total race condition here! From the logging statements I can see that the scripts initialisation is happening before the server returns the data, therefore throwing errors at me when I try to use them in the controller.

How can I stop this happening? I want to fire the controller function for map rendering when a) data is returned and b) js is loaded.


So I solved this by calling the initMap functionality inside the callback from getting data. Thusly;

// Create a callback that is executed after 
    // the server-side action returns
    action.setCallback(this, function(response) {
        var state = response.getState();
        if (state === "SUCCESS") {
            var locations = response.getReturnValue();
            component.set("v.locations", locations);
            console.log('locations are set: ' + JSON.stringify(locations));
            //now we call the map initialization
            helper.initMap(component, event);

where the helper contains the map initialisation details etc. This works, not sure if it's the 'right' way to do this - but it's good enough to get me working on the next problem ;)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.