Array of GeoJSON layers vs PanelLayers: Layer undefined

Question

I have an array of GeoJSON layers that I got from running this code:

var myURL = [ "url1", "url2", "url3" ];

for (var i = 0; i < myURL.length; i++) {

    var scenario_json = [];

    $.getJSON(myURL[i], function (data) {
        var layer= new L.GeoJSON(data);
        scenario_json.push(layer);
    }); 
};

I want to use this array with the Leaflet addon Panel Layers. I want to call each GeoJSON layers stocked in the array and add them to a group of layers in my panel. This is my code:

osmLayer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
esriLayer = new L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
            attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
            maxZoom: 17
        });

var baseLayers = [
    {
        name: "OpenStreetMap",
        layer: osmLayer
    },
    {
        name: "Esri World Imagery", 
        layer: esriLayer
    }
];
var overLayers = [  
    {
        group: "Modelisation results",
        layers: [
                {
                name: "Scenario 1",
                icon: '<i class="icon icon-modelisation"></i>',
                layer: scenario_json[1]
                },
                {
                name: "Scenario 2",
                icon: '<i class="icon icon-modelisation"></i>',
                layer: scenario_json[2]
                },
                {
                name: "Scenario 3",
                icon: '<i class="icon icon-modelisation"></i>',
                layer: scenario_json[3]
                }
            ]
    }
];

var panelLayers = new L.Control.PanelLayers(baseLayers, overLayers);
var map = L.map('map').setView([48.42432,-71.16237], 14);   
map.addLayer(osmLayer);
map.addControl(panelLayers);

If I put L.tilelayer.WMS variables instead of the scenario_json[x], it works fine, but I can't get it to work with the array, I keep getting scenario_json is not defined.

Anyone have a solution ?

Please edit the question and add the relevant/complete code (including initialization of your plugin) so we have an idea of in which order you are doing things. — iH8, Jan 29 '16 at 14:39
Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Andreas, Jan 29 '16 at 14:49
Do you set `overLayers` just after you call `$.getJSON` in the array? `getJSON` is asynchronous, if you want to use data from it's response you should do this in it's callback. — Alexandr Lazarev, Jan 29 '16 at 14:51
I'm not sure how to use the callback in my example. I understand the asynchronous concept, but I don't know what to put in a callback function and where to put it. — kaycee, Jan 29 '16 at 15:12
'I can't get it to work with the array' : can you show the code you already tried so far using L.tilelayer.WMS ? — Lex Lustor, Jan 29 '16 at 15:29

Alexandr Lazarev · Answer 1 · 2016-01-29T17:16:17.750

I would suggest you to wrap all map initialization code into a function, and call it when all getJSON responses are received. Something like:

    function initMap(scenario_json) {
        osmLayer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
        esriLayer = new L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
            attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
            maxZoom: 17
        });

    var baseLayers = [
        {
            name: "OpenStreetMap",
            layer: osmLayer
        },
        {
            name: "Esri World Imagery",
            layer: esriLayer
        }
    ];
    var overLayers = [
        {
            group: "Modelisation results",
            layers: [
                {
                    name: "Scenario 1",
                    icon: '<i class="icon icon-modelisation"></i>',
                    layer: scenario_json[1]
                },
                {
                    name: "Scenario 2",
                    icon: '<i class="icon icon-modelisation"></i>',
                    layer: scenario_json[2]
                },
                {
                    name: "Scenario 3",
                    icon: '<i class="icon icon-modelisation"></i>',
                    layer: scenario_json[3]
                }
            ]
        }
    ];
}  



var myURL = [ "url1", "url2", "url3" ];
var scenario_json = [];          
for (var i = 0; i < myURL.length; i++) {        
    $.getJSON(myURL[i], function (data) {
        var layer= new L.GeoJSON(data);
        scenario_json.push(layer);
        if(scenario_json.length == myURL.length) {
            initMap(scenario_json);
        }
    }); 
 };

Or you can chain your promises with the help of jQuery.when() method:

$.when( $.ajax(myURL[1]), $.ajax(myURL[2]), $.ajax(myURL[3]) )
.done(function(first, second, third){
    //collect scenario_json
    //init map
})
.fail(function(){
    //handle the error
});

I proposed an edit to your post. You redeclare scenario_json in each iteration of the loop : scenario_json.length will never be equal to myURL.length. — Lex Lustor, Jan 29 '16 at 16:44

Array of GeoJSON layers vs PanelLayers: Layer undefined

1 Answers1