#10266·Leaflet

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.