[GIS] Refreshing WMS based on updated CQL Filter in Leaflet

cqlgeoserverleafletwms

How do you update a WMS in a LeafletJS Map?

Using a simple text box and submit button, as well as a variable to hold a CQL filter (SQL query text) I've been able to update the CQL filter value on the WMS layer but cannot figure out how to refresh the WMS image.

The text box simply takes a number, and appends it to a text value to create a simple CQL filter (ex: schnum = 450)

The CQL filter works in the Geoserver Openlayers preview, and serveral methods to test have shown it to work as well.

The problem is one of two things happens depending on the methods I've tried:

  • a new point is added but the old one is not removed
  • the basemap disappears

I've created a JSFiddle* to hopefully demonstrate this simple example: https://jsfiddle.net/dpsspatial/fqa4y1cd/1/

*NOTE: for some reason the script to update the SQL filter – set_sql() – doesn't seem to be recognized in the JSFiddle though it works locally.

Best Answer

The WMS layer object provides a setParams method that will do what you need. From the docs:

setParams(<Object> params, <Boolean> noRedraw?): Merges an object with the new parameters and re-requests tiles on the current screen (unless noRedraw was set to true).

Here is a fork of your fiddle that demonstrates it. The relevant code is in the set_sql() function:

window.set_sql = function set_sql() {
    var sql_value = document.getElementById('sql_input').value;
    var sql_text = 'schnum = ' + sql_value;
    console.log(sql_text);
    schools.setParams({cql_filter:sql_text});
}

If you open your browser's debug menu, you can see that the tiles are indeed immediately re-requested, and the new URLs include the cql_filter=schnum%20%3D%20263 parameter (for example).

Related Question