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 +=
return div;

map.on('overlayadd', function (arr, eventLayer) {

function test (arr) {
for (var i = 0; i < arr.length; i++) {

map.on('overlayremove', function (eventLayer) {
  • from leafletjs.com/reference-1.0.3.html#control "L.Control is a base class for implementing map controls. Handles positioning. All other controls extend from this class". Is there more to your layerLegend than shows in this example? L.control will not show anything by itself, and I don't see any layer definitions, checkboxes for layers, etc. To get additional help you might want to post your full code, or create a complete example on jsbin or similar. – toms Mar 31 '17 at 15:45

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++) {
  return arr[i];

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();

//My first group layer
    var empl = new L.layerGroup();
    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();
    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]


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

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

    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
            "First layer": empl,        
            "First layer": front,
            "Reinitialize map": none},
            [other layers]

//Showing legend1 whent my first layer is shown
empl.beforeAdd = function (map) {

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

//Remove legends when map is reinitialized      
none.onAdd = function (map) {   

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.