Erweiterung L.Control.Layers schweben nicht

Question

Fiddle

ich L.Control.Layers erweitern wollen, weil ich das Symbol ändern über Optionen in der Lage sein wollen. Hier ist das Element so weit:

var layers = L.Control.Layers.extend({ 

    options: { 
     position: 'topright', 
     icon: 'podcast', 
    }, 

    initialize: function (options) { 
     L.setOptions(this, options); 
     L.Control.Layers.prototype.initialize.call(this, options); 
    }, 

    onAdd: function (map) { 
     var container = L.Control.Layers.prototype.onAdd.call(this, map); 
     container.classList.add('st-control-layers'); 
     container.childNodes[0].innerHTML = '<center><span style="margin-top:4px;" class="fa fa-2x fa-' + 
              this.options.icon + '"></span></center>'; 
     return container; 
    }, 
}); 

Ereignis ohne die <a> childNode zu ändern, wenn die Maus über die Steuerung bricht es aber die Liste der Schichten wird nicht angezeigt:

var stLayerControl = layers(null, {'one': L.layerGroup()}).addTo(this); // 'this' is a map 

Wenn Elemente Inspektion, kann ich siehe, dass die <form> existiert und hat die 3 divs eine normale Control.Layers hat jedoch die letzte div (mit der klasse) die ist, die das Array von Checkboxen hat keine Kinder Knoten.

Vielleicht muss ich etwas anderes auf dem Eltern in meiner onAdd() Methode anrufen, aber ich bin mir nicht sicher, was es sein würde.

Answer 1

Ich übergab die Schichten nicht erhalten an die Eltern, deshalb war die Liste leer. Hier ist die Arbeitsversion der erweiterten Steuerung:

var layers = L.Control.Layers.extend({ 

    options: { 
     position: 'topright', 
     icon: 'podcast', 
    }, 

    initialize: function (baseLayers, overlays, options) { 
     L.setOptions(this, options); 
     L.Control.Layers.prototype.initialize.call(this, baseLayers, overlays, options); 
    }, 

    onAdd: function (map) { 
     var container = L.Control.Layers.prototype.onAdd.call(this, map); 
     container.classList.add('st-control-layers'); 
     container.childNodes[0].innerHTML = '<center>' + 
              '<span style="margin-top:4px;" class="fa fa-2x fa-' + 
              this.options.icon + '"></span>' + 
              '</center>'; 
     return container; 
    }, 
}); 

module.exports = { 
    Layers: layers, 
    layers: function(baseLayers, overlays, options) { 
     return new layers(baseLayers, overlays, options); 
    }, 
};