When page opens (so the first LayerGroup is showed) the event "add" isn't called. Then if I try to open another layer, its "add" event isn't called too. Finally when I open the third layer, its "add" event works. From that moment each "add" event works correctly. This is code:
<body>
<div id="map"></div>
<!-- Leaflet -->
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
crossorigin=""></script>
<script>
// Layer groups
const baseLayerUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
const test = L.layerGroup([L.tileLayer(baseLayerUrl)]);
const test2 = L.layerGroup([L.tileLayer(baseLayerUrl)]);
const test3 = L.layerGroup([L.tileLayer(baseLayerUrl)]);
// Create map
const map = L.map('map', {
center: [45.494659, 12.347180],
zoom: 15,
layers: [test, test2, test3],
zoomControl: false
});
//redefine zoom position
L.control.zoom({
position: 'topright'
}).addTo(map);
// Add layers control
L.control.layers({
"Test": test,
"Test 2": test2,
"Test 3": test3,
}, null, {collapsed: false, position: 'bottomleft'}).addTo(map);
test.on("add", () => {
console.log("stat1")
})
test2.on("add", () => {
console.log("stat2")
})
test3.on("add", () => {
console.log("stat3")
})
</script>
</body>