Use grouped layer control plugin with empty "dummy" layer groups that are only used to enable or disable filters for the GeoJSON layer

Question

I want to use leaflet-groupedlayercontrol plugin with empty "dummy" layer groups that are only used to enable or disable filters for the GeoJSON layer when selected/unselected in the layers control. But the markers don't appear on the map and with groupCheckboxes = true it also doesn't group the layers. How can I solve this?

Example GeoJSON:

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -9.2574095,
                    38.7720292
                ]
            },
            "properties": {
                "state": "G",
                "CCO": "16",
                "PostM_8": "1",
                "PostM_9": "0",
                "PostM_10": "0",
                "PostM_12": "0",
                "PostB_8_450": "0",
                "CVP ": "0",
                "NR1_D400": "1",
                "NR1_B125": "0",
                "NR2_D400": "0",
                "NR2_B125": "1",
                "NR3_D400": "0",
                "TM_State": "677,4"
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -9.250804,
                    38.75554135
                ]
            },
            "properties": {
                "state": "B",
                "CCO": "14",
                "PostM_8": "1",
                "PostM_9": "0",
                "PostM_10": "1",
                "PostM_12": "0",
                "PostB_8_450": "0",
                "CVP ": "0",
                "NR1_D400": "1",
                "NR1_B125": "0",
                "NR2_D400": "0",
                "NR2_B125": "0",
                "NR3_D400": "0",
                "TM_State ": "1037,3"            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -9.354285,
                    38.72788
                ]
            },
            "properties": {
                "state": "G",
                "CCO": "14",
                "PostM_8": "1",
                "PostM_9": "1",
                "PostM_10": "0",
                "PostM_12": "0",
                "PostB_8_450": "0",
                "CVP ": "0",
                "NR1_D400": "0",
                "NR1_B125": "0",
                "NR2_D400": "0",
                "NR2_B125": "0",
                "NR3_D400": "0",
                "TM_State": "940,3"
            }
        }

JS:

var map = L.map("map", {
    zoomControl: false,
    fullscreenControl: true,
    fullscreenControlOptions: {
        position: 'bottomright'
    }
}).setView([38.851470, -9.268658], 11);

L.control.zoom({
    position: 'bottomright'
}).addTo(map);

var osm = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
    {
        maxZoom: 19,
        attribution:
            '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    })

// google street
googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
    maxZoom: 20,
    subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
});
googleStreets.addTo(map);

//google satellite
googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
    maxZoom: 20,
    subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
});


var myIcon = L.icon({
    iconUrl: 'img/img_markers/red_marker.png',
    iconSize: [40, 40],
});

var selectCondition = [];
var selectLayer = [];

for (var i = 0; i < 12; i++) {
    selectCondition[i] = false;
    selectLayer[i] = L.layerGroup();
    selectLayer[i].myId = i;
}

var baseMaps = {
    "OSM": osm,
    'Google Street': googleStreets,
    "Google Satellite": googleSat,
};


var overlayMaps = {
    'Postes': {
        'PostM_8': selectLayer[0],
        'PostM_9': selectLayer[1],
        'PostM_10': selectLayer[2],
        'PostM_12': selectLayer[3],
        'PostB_8_450': selectLayer[4]
    },
    'CVP´s': {
        'CVP': selectLayer[5],
        'NR1_D400': selectLayer[6],
        'NR1_B125': selectLayer[7],
        'NR2_D400': selectLayer[8],
        'NR2_B125': selectLayer[9],
        'NR3_D400': selectLayer[10]
    },
    'Temp': {
        'TM_State': selectLayer[11]
    }
};

var options = {
    groupCheckboxes: true,
    collapsed: false
};

L.control.groupedLayers(baseMaps, overlayMaps, options}).addTo(map);

var report = L.geoJSON(null, {
    filter: function(feature, layer) {
        var cond1 = ((feature.properties.PostM_8 == '1') && selectCondition[0]);
        var cond2 = ((feature.properties.PostM_9 == '1') && selectCondition[1]);
        var cond3 = ((feature.properties.PostM_10 == '1') && selectCondition[2]);
        var cond4 = ((feature.properties.PostM_12 == '1') && selectCondition[3]);
        var cond5 = ((feature.properties.PostB_8_450 == '1') && selectCondition[4]);
        var cond6 = ((feature.properties.CVP == '1') && selectCondition[5]);
        var cond7 = ((feature.properties.NR1_D400 == '1') && selectCondition[6]);
        var cond8 = ((feature.properties.NR1_B125 == '1') && selectCondition[7]);
        var cond9 = ((feature.properties.NR2_D400 == '1') && selectCondition[8]);
        var cond10 = ((feature.properties.NR2_B125 == '1') && selectCondition[9]);
        var cond11 = ((feature.properties.NR3_D400 == '1') && selectCondition[10]);
        var cond12 = ((feature.properties.TM_State >= '600') && selectCondition[11]);
        return (cond1 || cond2 || cond3 || cond4 || cond5 || cond6 || cond7 || cond8 || cond9 || cond10 || cond11 || cond12);
    },
    pointToLayer: function (feature, latlng) {
        return new L.marker(latlng, {
            icon: myIcon, draggable: false});
    },
    onEachFeature: setPopup 
});

var geojsonData;
var url = './markers/markers.json';
fetch(url)
    .then(response => {
        return response.json();
    })
    .then(json => {
        geojsonData = json;
        map.addLayer(report);
        selectLayer[0].addTo(map);
    });

map.on('overlayadd', function(evt) {
    var i = overlayMaps[evt.name].myId;
    selectCondition[i] = true;
    report.clearLayers();
    report.addData(geojsonData);
});

map.on('overlayremove', function(evt) {
    var i = overlayMaps[evt.name].myId;
    selectCondition[i] = false;
    report.clearLayers();
    report.addData(geojsonData);
});

Answer 1

If you look at the answer to your previous question, the solution of which you used here, you added additional group level in your overlayMaps definition, so overlayMaps[evt.name].myId does not work any more, since actual layers are one level deeper.

But if you look at the properties of the events returned in event processing functions for 'overlayadd' and 'overlayremove' events, added/removed layer is returned directly in evt.layer property.

This means that 'overlayadd' and 'overlayremove' event processing functions can simply look loike this:

map.on('overlayadd', function(evt) {
    var i = evt.layer.myId;
    selectCondition[i] = true;
    report.clearLayers();
    report.addData(geojsonData);
});

map.on('overlayremove', function(evt) {
    var i = evt.layer.myId;
    selectCondition[i] = false;
    report.clearLayers();
    report.addData(geojsonData);
});