Leaflet.Control.Layers.Tree icon indicating copy to clipboard operation
Leaflet.Control.Layers.Tree copied to clipboard

Issues with collapse and addLayer

Open satrock1 opened this issue 2 years ago • 0 comments

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?

satrock1 avatar Mar 03 '22 03:03 satrock1