Leaflet dynamic legend for active layer controls?

Question

I´m trying to achieve a map legend that shows the names of the active Layers and also adds new names to the list every time a new layer is checked.

Also it should only appear when at least one layer is active and disappear when no layer is checked.

Right now I´m pretty close to my goal I think but something is still not working correctly and I don´t know what it is.

var arr = new Array ();

var layerLegend = L.control({position: 'bottomleft'});

layerLegend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'legend');
div.innerHTML +=
'<b>Legende</b></br>'+test();
return div;
};

map.on('overlayadd', function (arr, eventLayer) {
        arr.push(eventLayer.name);
        layerLegend.addTo(map); 
}
);

function test (arr) {
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}};



map.on('overlayremove', function (eventLayer) {
    map.removeControl(layerLegend);
}
);

Answer 1

There are some errors in your JS code.

First, you define the function test(arr) with an argument but forgot to put this argument when you call the function test.

Second, console.log print its argument to the web console but does not print to your HTML page. You may use this to make it working:

function test (arr) {
  for (var i = 0; i < arr.length; i++) {
  //console.log(arr[i]);
  return arr[i];
}};

Answer 2

This question is quite old, but il found a solution working on a similar problem.

Here is my solution, I hope it can help someone. Maybe it's not the best solution, but it does the job! Final map here

//Empty layer to reinitialize map                   
    var none = new L.layerGroup();
    none.addTo(map);        


//My first group layer
//--------
    var empl = new L.layerGroup();
    //empl.addTo(map);
    omnivore.topojson('communes_suisse.json', null, style1).addTo(empl);    
    omnivore.topojson('communes_ain.json', null, style1).addTo(empl);       
    omnivore.topojson('communes_jura.json', null, style1).addTo(empl);      
    omnivore.topojson('communes_haute-savoie.json', null, style1).addTo(empl);      

// My second group layer (same topojson, but using other datas)
//------------------------------------------------
    var front = new L.layerGroup();
    //front.addTo(map); 
    omnivore.topojson('communes_ain.json', null, style2).addTo(front);      
    omnivore.topojson('communes_jura.json', null, style2).addTo(front);     
    omnivore.topojson('communes_haute-savoie.json', null, style2).addTo(front);     
    omnivore.topojson('communes_geneve.json', null, style3).addTo(front);       

    [Some others layers]


        //legend1

    var legend1 = L.control({position: 'bottomleft'});
    legend1.onAdd = [my marvellous first legend];


    //Legend2
    var legend2 = L.control({position: 'bottomleft'});
    legend2.onAdd = [my awesome second legend];     

    //Legend3
    var legend3 = L.control({position: 'bottomleft'});
    legend3.onAdd = [my beautiful third legend];


 //Layers control

//Layers 1, 2 and 3 are not to be displayed together, so I define them as baselayers
    L.control.layers({
            "First layer": empl,        
            "First layer": front,
            "Reinitialize map": none},
            {
            [other layers]
            },{collapsed:false}).addTo(map);

//Showing legend1 whent my first layer is shown
empl.beforeAdd = function (map) {
    legend1.addTo(map);
    legend2.remove(map);
    legend3.remove(map);}

//I want to show legend2 and legend3 together when second layer is shown    
front.beforeAdd = function (map) {  
        legend1.remove(map);
        legend2.addTo(map);
        legend3.addTo(map);}

//Remove legends when map is reinitialized      
none.onAdd = function (map) {   
        legend1.remove(map);
        legend2.remove(map);
        legend3.remove(map);}