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 © Esri — 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 ?

Answer 1

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 © Esri — 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
});