Skip to main content
added 10 characters in body
Source Link
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 cond16cond12 = ((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);
});
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 cond16 = ((feature.properties.TM_State >= '600') && selectCondition[11]);
        return (cond1 || cond2 || cond3 || cond4 || cond5 || cond6 || cond7 || cond8 || cond9 || cond10 || cond11);
    },
    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);
});
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);
});
added 11 characters in body; edited tags
Source Link
TomazicM
  • 27k
  • 23
  • 31
  • 42

I want to use the grouped layer control plugin (github.com/ismyrnow/leaflet-groupedlayercontrol)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 = truegroupCheckboxes = true it also doesn't group the layers. How can I solve this? Thanks

I want to use the grouped layer control plugin (github.com/ismyrnow/leaflet-groupedlayercontrol) 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? Thanks

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?

Source Link

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

I want to use the grouped layer control plugin (github.com/ismyrnow/leaflet-groupedlayercontrol) 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? Thanks

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 cond16 = ((feature.properties.TM_State >= '600') && selectCondition[11]);
        return (cond1 || cond2 || cond3 || cond4 || cond5 || cond6 || cond7 || cond8 || cond9 || cond10 || cond11);
    },
    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);
});