4 control panel shows when the layer is added to the map

[Rakhee06]

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)

[jjimenezshaw]

I have not tested the library with leaflet 1.9.8 (and I do not know when I will have time for that). I don't know if the problem is due to the different version of leaflet.

I am bit confused with the layers in the tree. As they are tileLayers, there can be only one. Having Germany inside of France, and osm and esri inside of Germany sounds to me that there is something wrong. And those layers are not defined in your code.
If you want overlay layer, you have to use the second parameter, that is undefined in your example.

It is better to create a complete piece of code that can be tested, without any other dependency (only leaflet and this plugin).

[Rakhee06]

Thank you for getting back to me so quickly! My goal is to have multiple base layers, each with its own tile layer, and then add multiple overlays on top of the selected base layers. Right now, I'm experimenting with just adding different base layers. I appreciate your suggestion to test the code without any dependencies. I'll let you know how it goes. Thank you again!