Leaflet Layers – How to Show or Hide Layers Using WFS CQL_Filter in Leaflet

cql-filterjavascriptleafletwfs

I use the library Leaflet-WFST. So I have both WMS and WFS layers. With WMS, everything is simple there is cql_filter. I am writing a code where cql_filter is applied when clicking on the checkbox, here is the code:

$("#s23").click(function () {
  if ($("#s23").is(":checked")) {
    if (
      layer.wmsParams.cql_filter != "" &&
      layer.wmsParams.cql_filter.includes("layer_id=23") == false
    ) {
      layer.setParams({
        cql_filter: layer.wmsParams.cql_filter + " OR layer_id=23",
      });
    } else layer.setParams({ cql_filter: "layer_id=23" });
    layer.setOpacity(1);
  } else if (layer.wmsParams.cql_filter.includes(" OR layer_id=23") == true) {
    l_edit = layer.wmsParams.cql_filter.replace(" OR layer_id=23", "");
    layer.setParams({ cql_filter: l_edit });
  } else if (layer.wmsParams.cql_filter.includes("layer_id=23 OR ") == true) {
    l_edit = layer.wmsParams.cql_filter.replace("layer_id=23 OR ", "");
    layer.setParams({ cql_filter: l_edit });
  } else layer.setParams({ cql_filter: "" });
  console.log(layer.wmsParams.cql_filter);
});

$("#s29").click(function () {
  if ($("#s29").is(":checked")) {
    console.log(layer);
    if (
      layer.wmsParams.cql_filter != "" &&
      layer.wmsParams.cql_filter.includes("layer_id=29") == false
    )
      layer.setParams({
        cql_filter: layer.wmsParams.cql_filter + " OR layer_id=29",
      });
    else layer.setParams({ cql_filter: "layer_id=29" });
    layer.setOpacity(1);
    console.log(layer.wmsParams.cql_filter);
  } else if (layer.wmsParams.cql_filter.includes(" OR layer_id=29") == true) {
    l_edit = layer.wmsParams.cql_filter.replace(" OR layer_id=29", "");
    layer.setParams({ cql_filter: l_edit });
  } else if (layer.wmsParams.cql_filter.includes("layer_id=29 OR ") == true) {
    l_edit = layer.wmsParams.cql_filter.replace("layer_id=29 OR ", "");
    layer.setParams({ cql_filter: l_edit });
  } else layer.setParams({ cql_filter: "" });
  console.log(layer.wmsParams.cql_filter);
});

Here, if cql_filter is added when the checkbox is clicked, if it is empty, then cql_filter: 'layer_id=23' is triggered, and if there is something in cql_filter, then cql_filter: layer.wmsParams.cql_filter + ' OR layer_id=23' also if the checkbox was cleared, then this layer_id is removed from cql_filter.

I can use this code:

var layer_23 = new L.Filter.EQ("layer_id", 23);
//var OR = new L.Filter.Or(layer.options.filter, layer_23);
layer.options.filter = layer_23;
layer.loadFeatures(layer_23);

To add a new filter, but I don't know how I can remove or edit it.

The question is, how can the same thing be done?

Best Answer

If you want to apply new filter to WFS layer created with Leaflet-WFST plugin, you have to use layers .loadFeatures(filter) method, where parameter filter is the new filter. Since plugin WFS layer is extension of Leaflet L.layerGroup layer, previous features must first be cleared with .clearLayer() method.

So if you initially have WFS layer with filter1 like this:

var filter1 = new L.Filter.EQ('landuse', 'reservoir');

var wfs = new L.WFS({
  url: 'https://ahocevar.com/geoserver/wfs?service=WF',
  typeNS: 'osm',
  typeName: 'water_areas',
  crs: L.CRS.EPSG4326,
  geometryField: 'the_geom',
  filter: filter1,
  style: {
    color: 'blue',
    weight: 2
  }
}).addTo(map);

then you apply new filter filter2 like this:

var filter2 = L.Filter.Or(filter1, new L.Filter.EQ('waterway', 'riverbank'));

wfs.clearLayers();
wfs.loadFeatures(filter2);
Related Question