I have a tile layer with a WMS source coming from GeoServer. I want to add and change a filter to it when a user changes their selection. I can see some examples for OpenLayers 3 and Vector layers but the OpenLayers.Filter class has changed and I can't get it to have any effect.

import OlTileLayer from 'ol/layer/Tile';
import OlOr from 'ol/format/filter/Or';
import OlEq from 'ol/format/filter/EqualTo';

this.structureLayer = new OlTileLayer({
  source: new TileWMS({
    url: 'http://test.com/fpat/wms', 
    params: {'LAYERS': 'fpat:fpat_surveys',
              'TILED': true},
    serverType: 'geoserver',
    transition: 0

 this.structureLayer.filter = new OlOr(new OlEq('structure_types', 'Natural') , new OlEq('structure_types', 'Other'));

When the user changes their selection I'll need to rebuild the filter and make sure the layer updates. The documentation for a vector layer with a spatial filter suggests this, but I I get an error because refresh doesn't exist

this.structureLayer.refresh({force: true})

1 Answer 1


You need to refresh the params of the source of structureLayer. Don't try to use OpenLayers 2 syntax thinking it would work by luck on OpenLayers 3+: OpenLayers 3+ is a full rewrite (remark comes from your attempt to use this.structureLayer.refresh({force: true}))

It should be more

// Get existing parameters collection
var params = this.structureLayer.getSource().getParams();
// I choose to use CQL_FILTER instead of sld
params.CQL_FILTER = "structure_types IN ('Natural', 'Other')";
// Uncomment line below and comment line above if you prefer using sld
// params.sld_body = "yourxmlfiltercontent"; 

You can use filter but you will need to create your own XML as the ol.format.filter are intended for WFS not WMS. That's why I've use cql_filter instead above (it does the same job with a more simple syntax)

You can see a demo to show "it works"

You should also consider using POST (default behaviour using GET and there are restrictions on length of HTTP GET call Url). You may need to look at this related post OpenLayers 3 WMS Styling Using SLD_BODY and POST request

PS: I'm using the "OpenLayers pre-ES6" syntax in the demo but the logic remains the same.

  • Thanks for that will try asap. Since the number of options the user can turn on may make a cql filter too long for a URL I might go for the XML filter. I can write it manually but I don't know how to apply that to a layer in OL. Could you add that to your answer?
    – Craig
    Aug 8, 2018 at 11:55

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.