CODEWITHSUNDEEP
javascriptleaflet
gamda
gamda

Reputation: 580

Extending L.Control.Layers hover fails

Fiddle

I want to extend L.Control.Layers because I want to be able to change the icon via options. Here is the element so far:

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;
    },
});

Event without modifying the <a> childNode, when hovering over the control it collapses but the list of layers is not displayed:

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

When inspecting elements, I can see that the <form> exists and has the 3 divs a normal Control.Layers has, however, the last div (with class leaflet-control-layers-overlays) which is the one that should have the array of checkboxes has no children nodes.

Maybe I need to call something else on the parent in my onAdd() method but I am not sure what it would be.

Upvotes: 0

Views: 610

Answers (1)

gamda
gamda

Reputation: 580

I was not passing the layers received to the parent, that's why the list was empty. Here is the working version of the extended control:

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);
    },
};

Upvotes: 1

Related Questions