Improve performance of Control.Layers by lazily updating DOM
Author: KrausMatthiasCreated Jun 21, 2026Updated Jul 8, 2026
Labelsfeatureneeds triage
Checklist
- I've searched through the plugins to make sure this feature isn't already available, or think it shouldn't require a plugin.
- I've searched through the current issues to make sure this feature hasn't been requested already.
- I agree to follow the Code of Conduct that this project adheres to.
Motivation
My app iteratively adds hundreds of overlays to the Layers Control (using https://github.com/KrausMatthias/Leaflet.OGCAPI).
This is extremely slow as the Layer Control empties and re-creates the full Overlay list on each added Overlay.
Suggested solution
I've implemented a small wrapper that delays re-rendering if the Control is currently collapsed, making the load instantious. If there is interest I can create a PR to upstream this into the L.Control.Layers (also for v2).
export let LazyLayerControl = L.Control.Layers.extend({
initialize: function (baseLayers, overlays, options) {
this._modified = false;
return L.Control.Layers.prototype.initialize.call(this, baseLayers, overlays, options);
},
is_collapsed: function() {
return !L.DomUtil.hasClass(this._container, 'leaflet-control-layers-expanded');
},
addOverlay: function (layer, name) {
this._addLayer(layer, name, true);
// only update dom if control is added to map and expanded
if(this._map && !this.is_collapsed()) {
return this._update();
}else{
this._modified == true;
return this;
}
},
expand: function() {
if(this._modified){
this._update();
}
L.Control.Layers.prototype.expand.call(this);
},
update: function() {
L.Control.Layers.prototype.update.call(this);
this._modified = False;
},
})
Alternatives considered
One might also think about reworking the update logic to avoid re-creating the complete layer list in DOM on each modification. This would take more effort and be more risky regarding breakage.
Source: Leaflet/Leaflet