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
    ) {
        cql_filter: layer.wmsParams.cql_filter + " OR layer_id=23",
    } else layer.setParams({ cql_filter: "layer_id=23" });
  } 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: "" });

$("#s29").click(function () {
  if ($("#s29").is(":checked")) {
    if (
      layer.wmsParams.cql_filter != "" &&
      layer.wmsParams.cql_filter.includes("layer_id=29") == false
        cql_filter: layer.wmsParams.cql_filter + " OR layer_id=29",
    else layer.setParams({ cql_filter: "layer_id=29" });
  } 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: "" });

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;

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?

  • Store individual filter statements in an array, as let arr = ['layer_id=10', 'layer_id=20'], and leverage Array.prototype.join as in arr.join(' OR '). Add/remove elements from that array as needed, then join() it just before passing it as the CQL filter. Jan 26, 2022 at 14:20
  • Which WFST Leaflet plugin are you using? This plugin github.com/Flexberry/Leaflet-WFST does not specify filters the way desrcibed above.
    – TomazicM
    Jan 26, 2022 at 17:07
  • @IvanSanchez Why did you edit out code where filter was specified in the form L.Filter.EQ('layer_id', 23)? That's the form used by plugin github.com/Flexberry/Leaflet-WFST.
    – TomazicM
    Jan 26, 2022 at 17:12
  • Ooops, my copy-paste-fu failed me earlier today :-( Jan 26, 2022 at 22:26
  • I have a working WMS, I have problems with WFS, I wrote the WMS code as an example to do the same as WFS, I can't filter WFS correctly
    – user199671
    Jan 27, 2022 at 4:13

1 Answer 1


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

then you apply new filter filter2 like this:

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


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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