creating a cql filter in leaflet

Question

Please could I gain some assistance with the following problem. I would like to create a CQL filter in leaflet which filters data from GeoServer, with the data hosted in a PostGIS database.

For example, selecting a reservoir name from the NAME field in the database.The filter will be variable as the user can enter different names through an input dialog field.

I am displaying my layers as WMS, and although I was able to get an interactive filter working in openlayers 3, I still have had no like with leaflet.

I am new to the web development side of GIS and any help or pointers in the right direction would be greatly appreciated.

Kind regards, Cameron

Answer 1

In leaflet you use TileLayer.WMS to plot wms layer on map. like this:

var nexrad = L.tileLayer.wms("http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi", {
    layers: 'nexrad-n0r-900913',
    format: 'image/png',
    transparent: true,
    attribution: "Weather data © 2012 IEM Nexrad"
});

You see some standard leaflet WMS options there like format, version ..crs etc.

But leaflet send all extra parameters/options in url to support non-standard WMS parameter . CQL_FILTER is one of them, so what you need to do is supply cql_filter options (column name is case sensitive):

var nexrad = L.tileLayer.wms("http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi", {
    layers: 'nexrad-n0r-900913',
    format: 'image/png',
    transparent: true,
    cql_filter: 'NAME=filterhere'
    attribution: "Weather data © 2012 IEM Nexrad"
});