There is such a code(it is taken from the example):

var granada = L.marker([37.133, -3.636]);
        var malaga = L.marker([36.674, -4.499]);
        var sevilla = L.marker([37.418, -5.893]);

        malaga.addTo(map);
        granada.addTo(map);
        sevilla.addTo(map);

        var overlaysTree = {
            label: 'Some cities',
            selectAllCheckbox: 'Un/select all',
	collapsed: true,
            children: [
                {label: '<div id="onlysel">-Show only selected-</div>'},
                {label: 'France', children: [
                    {label: 'Lyon', layer: L.marker([45.728, 4.945])},
                    {label: 'Paris', layer: L.marker([48.725, 2.359])},
                    {label: 'Toulouse', layer: L.marker([43.629, 1.364])},
                ]},
                {label: 'Germany', selectAllCheckbox: true,
	collapsed: true, children: [
                    {label: 'Berlin', layer: L.marker([52.559, 13.287])},
                    {label: 'Cologne', layer: L.marker([50.866, 7.143])},
                    {label: 'Hamburg', layer: L.marker([53.630, 9.988])},
                    {label: 'Munich', layer: L.marker([48.354, 11.786])},
                ]},
                {label: 'Spain',
                    selectAllCheckbox: 'De/seleccionar todo',
	collapsed: true,
                    children: [
                        {label: 'Madrid', layer: L.marker([40.472, -3.561])},
                        {label: 'Andalucia', selectAllCheckbox: true,
	collapsed: true, children: [
                            {label: 'Granada', layer: granada},
                            {label: 'Málaga', layer: malaga},
                            {label: 'Sevilla', layer: sevilla},
                        ]},
                        {label: 'Bask Country', children: [
                            {label: '---', layer: L.layerGroup([]), radioGroup: 'bc'},
                            {label: 'Bilbao', layer: L.marker([43.301, -2.911]), radioGroup: 'bc'},
                            {label: 'San Sebastian', layer: L.marker([43.356, -1.791]), radioGroup: 'bc'},
                            {label: 'Vitoria', layer: L.marker([42.883, -2.724]), radioGroup: 'bc'},
                        ]},
                        {label: 'Catalonia', children: [
                            {label: 'Barcelona', layer: L.marker([41.297, 2.078])},
                            {label: 'Gerona', layer: L.marker([41.901, 2.760])},
                        ]},
                    ],
                },
            ]
        }

        var lay = L.control.layers.tree(baseTree, overlaysTree,
            {
                namedToggle: true,
                selectorBack: false,
                closedSymbol: '&#8862; &#x1f5c0;',
                openedSymbol: '&#8863; &#x1f5c1;',
                collapsed: false,
            });

        lay.addTo(map);

The problem is that when I enter map.addLayer(granada); , then layer.control changes its state, collapse occurs somewhere, and expand somewhere. I noticed that in the control layer tree I used collapse:true, because of this, it collapses, while others expand.
What do I need to do so that when using map.addLayer(granada); layer.control state didn't change?

Hi, I am currently working on a GIS web app that uses this plugin to create a dynamic menu of WMS layers.
I have encountered a problem regarding updating this menu dynamically from different components (I'm using Svelte).
To resolve this issue, I have created baseOverlays in the window, and then I update the window.baseOverlays object for any wms that the user adds dinamically from a different component, so i walk inside the object to find the correct subsesction of the wms then i add it to the children array of the subsection, then I call the setOverlayTree(window.baseOverlays) function to refresh the menu with the new layer.
It works fine, but I am wondering if it's possible to create a function that can dynamically update the menu, i can work on that.

When I place a tree on the map, the element that is responsible for expanding the tree blinks when I hover over it. in this case, the tree elements are also not displayed. do i have to specify tree.layer?

Does the code support opacity control for each layer from the tree? How can achieve this? I suppose that you need to put an input slider on each active layer, right?

For different language, how to set the title (hint text) of toggle button? Thanks!

Sorry. I should have tested using the examples provided.
Example:
var layerControl = L.control.layers.tree(baseTree).addTo(map); layerControl.collapseTree(false);

Hi,

my old application used to save the layer tree state (which layers are selected, which submenues have been opened or closed, which children are open, the complete tree layout) using cookies or localStorage.
This happens when the user is closing the page (something like "$(window).on("unload", function(e){ .. save tree state });")
and the next time the tree will be opened like before.

You may check the old project https://wambachers-osm.website/Emergency.html to see, what i'm talking about. (Only data for Germany, Austria and Switzerland)

Tracking, which base layer or overlay layer is changing, is quite simple using map.on(baselayerchange) or map.on (overlayadd, overlayremove), but i need the full state of the tree.

Is there any way to do this using Leaflet.Control.Layers.Tree?

Regards
walter

When there are many leaf nodes, simply collapsing/expanding the tree helps manage them, but doesn't make it easier to turn on/off many nodes; AFAIK, they have to be checked/unchecked one at a time.

Would be great if each non-leaf also had a checkbox. This has 3 possible states: all children are checked => checked, all children are unchecked => unchecked, some children are checked => a symbol representing that (e.g. Microsoft's "square inside the checkbox").

Clicking on checked => unchecked, and unchecks all descendents.
Clicking on unchecked => checked, and checks all descendents.
Clicking on some-checked => checked, and checks all descendents. (I think - one could argue in favor of "=> unchecked")

The initial state should be based on the children. E.g., if they are all checked, then the group checkbox should also be checked. So that the next click on it performs "uncheck all".

A feature like this exists in https://github.com/ismyrnow/leaflet-groupedlayercontrol - options [ groupCheckboxes: true ] - but that control lacks the ability to collapse a tree branch. The option adds an input checkbox, with a click event, to every non-leaf node. It doesn't support the tri-state logic I describe above; just checked/unchecked (no "some-checked" display state). That's good enough - though it is ambiguous when you collapse a node which has some children checked: user doesn't know exactly what will happen when they click on checkbox of a collapsed node.

I would use this control, if it had this feature. I'd add the feature myself, but I don't know enough yet about leaflet internals, nor manipulating the DOM, to fully grasp the coding needed.

I see that the group node does have a checkbox, if it has a layer attached to it.
So I am wanting a different option, where group node has a checkbox, but no layer, that behaves as described above.

As a hack, I tried adding all the children to a LayerGroup, and making that LayerGroup the layer that is attached to the group node. This partially works:

• If all children are unchecked, then checking the group node makes them all appear, unchecking makes them all disappear.
• However, not surprisingly, if some or all children are checked, their checked state keeps them visible, when uncheck the group node.

Now I just need to figure out what edits would keep the children checked states in sync with the group node...

Hi,

In leaflet.control.layers.tree, i have same layer in different children group. On selecting the layer in one group, need to select the same layer in all other group. same goes to unchecked.

Can you help on this.

Thanks.

Please see attached images,
The first shows the map as loaded without using the layer selector (OpenStreetMap)
The second shows the position after selecting an Esri layer


The box outlined in red shows the OpenStreetMap attribution that should have been replaced.

If I remove the OpenStreetMap attribution then everything works OK

Edit: using leaflet 1.6 with the markercluster library

Hi @jjimenezshaw

This issue is related to Leaflet/Leaflet#8778 that was fixed in Leaflet 1.9.4 with Leaflet/Leaflet#8910

However, the PR only fix the L.control.layers. Using Leaflet.Control.Layers.Tree it keeps with the same behaviour, as you can test here:

https://plnkr.co/edit/W135NFAEtQV0a3ZK

https://run.plnkr.co/plunks/W135NFAEtQV0a3ZK

It seems that the fix applied to L.control.layers also needs to be added in Leaflet.Control.Layers.Tree

Hi,

In Control.Layers.Tree, how to add the children layers dynamically?

After the service call only, I am getting the layer data. Service returning the data, but not shown in the Map.

@jjimenezshaw Since you've added the types, could you please publish it to npm, so I can use them in my project.

Thanks!

Is there a way to have the tree selection reference an object request? Right now I have an HTML selection that first requests a json file through an click() event in javascript that parses the data to create circle markers with attributes sorted into layerGroups that are filtered through an overlay layer control module upon selection from the tree.

What I would like to do is instead trigger the request for the object when it is selected through the tree to then subsequently parse the data in the function that creates the circle markers and sorts them into layerGroups.

Hello.

Is there a way of toggling all the layers in a layer group at once?

Thanks!
R.

I love your tree control, but since I'm using Typescript, it is not so easy to properly use it. Of course, you can use a hack like

(L.control.layers as any).tree...

but proper typings would be better.

Hi, firts of all thank you very much for this excelent work, my proposal is, if possible, create mutually exclusive subgroups of layers, that is, subgroups with radiogroups

Example: 
var overlayLayers = {
label: 'Group 1',
children: [
  {  label: 'SubGroup 1',
      radioGroup: 'bc',
      children: [
         {  label: 'Layer 101',
            layer: lay101-example
         }, 
         ...
   },
  {  label: 'SubGroup 2',
      radioGroup: 'bc',
      children: [
         {  label: 'Layer 201',
            layer: lay202-example
         },
         ...
   }
 ]
};

I hope i have explained myself, i know my english is not good but im working on it

My previous code read in the eventLayer.name to trigger legends on/off in select/deselection, however using L.control.layers.tree I can't read in the label references of the overlay layers in the map.on event handler (overlayadd, overlayremove). How does the plug-in reference the label for the layers?

Hi,

Thanks for the Control.Layers.Tree.

I am new to Leaflet. In the Control.Layers.Tree, is it possible to add the Icons/ Symbols for each Overlay's children? I need different Symbols will define for each Overlay's childer layer.

Can you give an example using eventedClasses? I'm confused where to put it and how to use it.

First thanks for a very nice plugin (now I've got it working 👍 )
I'm trying to get to the situation whereby clicking on a group expands its children but closes any other already expanded groups, I've tried using collapseTree and expandSelected but it seems to work once then locks up.
It may be that I'm not sure what to use as the trigger selector (I'm using leaflet-layerstree-header)
Thanks for any help

Hi Javier, I want to use your control with the Layer Icon expanded by default (without the need to hover the mouse over it to see layers). I think I need to include something like this: L.control.extend({ options: { collapsed: false }}) but I have no clue how to add it to your code. Could you give me a hand with this?
This is what I want to see when I open my toolbar...

Thank you in advance for your help!

As per the documentation of the plugin 'Non leaf nodes (that is, those with children) can also have a layer. In this case you will be able to select the layer, and only the icon will collapse or expand this branch'

When I tried to add layer to non leaf node...then instead of one checkbox ..2 checkbox are rendering for that node....
please help...thanks in advance

hi,

how to use this with markerclustergroup

Is there an option to select all checkboxes of specific child nodes? Similar to this example here. With all children of Andalucia selected by default on page load - I couldn't find a specific reference in the code to enable this function.

I'm using this code to reference the labels for children layers upon selection.

var htmlObject = layerControl.getContainer().querySelectorAll('input');
$(htmlObject).on("change", function(e) {
  if ($(this).is(':checked'))
    console.log($(this).siblings('span').text());
});

However, when using the SelectAllCheckbox, only the text label for SelectAllCheckbox is logged. How can I reference the text for all of the child layers upon selection of SelectAllCheckbox of the parent label?

I use Leaflet.Control.Layers.Tree to display properties that I import via a GeoJSON file. That you very much for this.

I create an overlay that contains for example all houses that are for sale. Another overlay shows all objects that are suitable for living in.
So far so good.

• Via Radio Group a user can display either all houses for sale or all houses that can be lived in.
• With the Checkbox he can display the sum of all saleable and livable houses, if he activates both overlays.

Now I would like to display the intersection. So I want that if both checkboxes (sellable and livable) are checked, only houses that are sellable and livable are shown. Properties that are sellable but not livable should not shown.

At first glance, it looks to me like it is mandatory that I create a separate layer for this and add it to the tree. But I have the feeling, that others have this issue too and there must be a better solution for this!

It would be kind, if someone can point me to a better solution.

Hello,

I noticed there is an icon of the continents being used in the initial example, but no demonstration for how to implement the use of icons in the layers tree. Any code examples on how to incorporate icons in next to the layers? Thanks.

Hi,
I create 3 LayerGroup (L1, L2, L3). I would like that L3 is over L2 and L2 over L1.
In pure leaflet code, if create the 3 layergroups and add them to the map in this order 1->2->3 and the result is OK.
But if then I create a ControlTreeLayer with these 3 layers, if I deselect then reselect L1, it goes over L2 and L3.
-> how can I maintain the order of the layers, whatever I do with selection/deselection ?
I forced the option autoZIndex:true (which is true by default anyway) but it doesn't seem to work.
Thanks a lot for your help !
Olivier

At present, the control is opened/closed using mouseover/mouseout events.

This makes it difficult to operate by users with some disabilities and/or assistive technology.

Can you provide an option to open/close this control using mouse-click and/or keyboard?

In case of visible (not collapsed) layerswitcher how can I have a toggle button that hides the layerswitcher and then shows it again?

An example:
https://raw.githack.com/walkermatt/ol-layerswitcher/master/examples/activation-mode-click.html

Many thanks

Hi and thank you for a great library!
Two questions:
1)
I'm looking for a way to have check boxes in one of the branches of the baseTree, but even if I add the 'selectAllCheckbox: true' attribute, they still turn up as radio boxes. Is it just me not being able to figure out of it or is it impossible to have check boxes in the baseTree? If impossible at the moment, would it be possible to have in the next release? Else if possible, do you have the possibility to give me an example structure to see how it should be done?
2)
When I call the 'setBaseTree' function again (after it's already been set initially) to update the contents of it, it expands the tree. Is there a way to avoid that the tree gets expanded when I call that function?

Hi

Thank you for the great function.

When you say: "addBaseLayer, addOverlay and removeLayer are non usable in L.Control.Layers.Tree.", do you mean I cannot control the legends of the map for each layer?

Thank you

Hi,
When I try your exemple, it seems that there is a problem with the rendering...

I have the same problem if I try on my data...

Any idee?

Hi Javier! I am making the last adjustments to my map and I realized that your tool does not allow define a group of exclusive layers that can be selected one at a time (as the basemaps does...). I have a bunch of layers with wind forecast every three hours and I want to select only one each time. Could you please include this functionality in next releases? Many thanks for your time, M.

Hi,

Is there any way to add only one parent layer having checkbox to show/hide and NO children's attached to it.

Your tree control is amazing, you did a great job but can you please tell me how to add WMS and WFS? I'm following your examples but I'm a bit stuck in the overlays section because there are only place markers.

Hi everyone! I'm making a web mapping page for my job. I have an extensive layers list, and my Index.html is also huge. I want to put the layers list in a separate file, so I can call this file later from my index.html and choose the layers I want to display. I'm using leaflet.layers.tree as the plugin to manage my layers. In this fiddle you can see a quick and dirty example of what I'm doing (https://jsfiddle.net/mbotti/z3f4x0w7/696/). Any suggestion will be well received. And a working example much more! Regards, M.

hi,

Thank for the library! I am new to leaflet and still trying to wrap my head around the implementation/plugins.
I am trying to use Leaflet.Control.Layers.Tree package in Next.js application. Using the following versions:

• next: 14.0.4
• react-leaflet: 4.2.1
• leaflet: 1.9.4
• @types/leaflet: 1.9.8
• leaflet.control.layers.tree: 1.1.0

When I create a base tree and try to add it to the map, I see 4 control panels. In addition, the controls also doesn't work. I am not sure if I am missing something in the implementation. Any help is much appreciated. Thank you!

Result:

let esri = L.tileLayer(
    'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
)

let baseTree = {
    label: 'Base Layers',
    name: 'Base Layers Name',
    layer: france,
    children: [
        {
            label: 'Terminal',
            name: 'Terminal Name',
            layer: germany,
            children: [
                { label: 'Level 1', name: 'Level 1 Name', layer: osm },
                { label: 'Level 2', name: 'Level 2 Name', layer: esri },
            ],
        },
    ],
}

var ctl = L.control.layers.tree(baseTree, undefined, options)
ctl.addTo(map)

` <!doctype html>

  <head>

 <meta charset="utf-8" />

<!--Let browser know website is optimized for mobile-->
 <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Webmap Comune di Colleferro</title>

 <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
 <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
 <script src="src/plugins/leaflet-bing-layer.js"></script>
 <script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>
 <script src="src/plugins/leaflet-providers.js"></script>
 <script src="src/plugins/leaflet.ajax.min.js"></script>
 <script src="src/plugins/proj4.js"></script>
 <script src="src/plugins/proj4leaflet.js"></script>
 <script src="src/plugins/leaflet.wms.js"></script>
 <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Promise"></script>


 <style type="text/css">
    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0;
   }

   #map {
       width: 100%;
      height: 100%;
   }    

   </style>
</head>

    <body>
        <div id="map">
            </div>
                <link rel="stylesheet" href="src/css/L.Control.Layers.Tree.css" crossorigin="" />
                    <script src="src/plugins/L.Control.Layers.Tree.js">
                        </script>




<script type="text/javascript">
 var center = [41.72707235373704, 13.004139599641844];

 //inserimento iniziale Layers

var BING_KEY = 'AljSdfpCwtR7wFswYzmgqltJa9xeQvVtoYb1bEuV7jVHowADqs76GPBdEVoAxvuP'
var binglayer = L.tileLayer.bing(BING_KEY)



//come inserire WMS ((DA PROVARE CON SERVIZIO WFS))


   var osm = L.tileLayer(
    '//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap contributors'
   }
);


   var thunderAttr = {
    attribution: '© OpenStreetMap contributors. Tiles courtesy of Andy Allan'
   }
  var transport = L.tileLayer(
   '//{s}.tile.thunderforest.com/transport/{z}/{x}/{y}.png',
   thunderAttr
);

  var cycle = L.tileLayer(
   '//{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png',
    thunderAttr
  );



  var stadiadark = L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png', {
    attribution: '&copy; <a href="https://stadiamaps.com/">Stadia Maps</a>, &copy; <a 
    href="https://openmaptiles.org/">OpenMapTiles</a> &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> 
    contributors'
  });


  var boundaries = L.tileLayer.wms('http://localhost:8080/geoserver/colleferro.territorio/wms', {
    layers: 'colleferro.territorio:confini_amministrativi',
    format: 'image/png',
    transparent: true,
   });

  var owsrootUrl = 'http://localhost:8080/geoserver/colleferro.territorio/ows';

  var defaultParameters = {
     service: 'WFS',
     version: '2.0',
    request: 'GetFeature',
    typeName: 'colleferro.territorio:strade_colleferro',
    outputFormat: 'text/javascript',
    format_options: 'callback:getJson',
    SrsName: 'EPSG:4326'
   };


  var parameters = L.Util.extend(defaultParameters);
  var URL = owsrootUrl + L.Util.getParamString(parameters);

 var WFSLayer = L.geoJson(null, {
        style: function(feature) {
        return {
        stroke: true,
        fillColor: '#B04173',
        fillOpacity: 2,
        color: '#000000',
        weight: 1,
      };
    }
 });

var ajax = $.ajax({
    url: URL,
   dataType: 'jsonp',
   jsonpCallback: 'getJson',
   success: function(response) {
      WFSLayer.addData(response);
      WFSLayer.addTo(baseTree);
    }
});




  var buildingsowsrootUrl = 'http://localhost:8080/geoserver/colleferro.territorio/ows';

 var buildingsdefaultParametersdue = {
     service: 'WFS',
     version: '2.0',
     request: 'GetFeature',
    typeName: 'colleferro.territorio:edifici_colleferro',
    outputFormat: 'text/javascript',
    format_options: 'callback:getJson',
    SrsName: 'EPSG:4326'
 };

var buildingsparameters = L.Util.extend(BuildingsdefaultParameters);
var buildingsURL = buildingsowsrootUrl + L.Util.getParamString(buildingsparameters);

var WFSbuildingsLayer = L.geoJson(null, {
    style: function(feature) {
        return {
       stroke: true,
        fillColor: '#B04173',
        fillOpacity: 2,
        color: '#000000',
        weight: 1,
      };
    }
 });

 var ajax = $.ajax({
     url: buildingsURL,
    dataType: 'jsonp',
    jsonpCallback: 'getJson',
   success: function(response) {
    WFSbuildingsLayer.addData(response);
    WFSbuildingsLayer.addTo();
    }
});


//opzioni mappa

   var map = L.map('map', {
      renderer: L.canvas(),
          layers: [osm],
         center: center,
          zoom: 13
   });


  L.control.scale().addTo(map);


   var baseTree = {
    label: 'BaseLayers',
    noShow: true,
    children: [
        {
            label: 'OpenStreeMap',

            children: [
                {label: 'OpenStreetMap Standard', layer: osm},
            ]
        },
        {
            label: 'Stadia Basemaps',
            children: [
                {label: 'Stadia Alidade Smooth Dark', layer: stadiadark},
            ]
        },
        {
            label: 'Thunder',
            children: [
                {label: 'Cycle', layer: cycle},
                {label: 'Transport', layer: transport},
            ]

        },
        {
                     label: 'Bing',
                     children: [
                    {label: 'Bing Satellite', layer: binglayer}
                     ]
                 },
            ]
       };



       var overlaysTree = {
        label: 'City',
        selectAllCheckbox: 'Un/select all',
        children: [
 {

        label: 'Territorio',
        selectAllCheckbox: true,
        children: [
        {
            label: 'Test',
            selectAllCheckbox: true,
            children: [
                { label: 'Boundaries', layer: boundaries },
                { label:'Streets', layer: WFSLayer},
                {label: 'Buildings', layer: buildingsWFSLayer}


            ]
        },
        /* ... */

      ]
    }
  ]
 }





 var lay = L.control.layers.tree(baseTree, overlaysTree, {
      namedToggle: true,
      selectorBack: false,
      closedSymbol: '&#8862; &#x1f5c0;',
     openedSymbol: '&#8863; &#x1f5c1;',
     collapseAll: 'Collapse all',
     expandAll: 'Expand all',
     collapsed: false,
  });



 lay.addTo(map).collapseTree().expandSelected().collapseTree(true);
 L.DomEvent.on(L.DomUtil.get('onlysel'), 'click', function() {
 lay.collapseTree(true).expandSelected(true);

});




</script>
</body>

</html>`

I have a layer control tree with selectAllCheckbox set to true for subgroups of child layers. I noticed a bug that could be in part due to my app configuration. All computable reference layers are acknowledged in the tree but the data for each is loaded in separately based on user requests. I noticed it happens that if I select a layer in the tree for data that has not yet been loaded, I get the obvious error Cannot read properties of undefined (reading 'options') - and subsequently after selecting/deselecting the selectAllCheckbox for layers that with data that had been added in and previously had not presented to be a problem that it will only compute one layer at a time - either deselecting one until none, or switching one sole layer on back and forth - with the error of Uncaught TypeError: Cannot read properties of undefined (reading 'parentNode').

Perhaps the solution is that theses children within the selectAllCheckbox subGroups need to be referenced in a separate 'overlayadd' 'overlayremove' function as a group? I do not have an issue with the selectAllCheckbox if the data is all loaded in, it only seems to occur when I have selected a ghost layer (no data underneath) and go on to select/deselect options that are available.

I gave sortLayers:true option but the tree layers or groups are not sorted.