4

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);
});
Improve this question

1 Answer 1

Reset to default
2

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);
});
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.