I have added the raster layer from GeoServer as a WMS source.

There is an HTML filter to apply changes with GeoServer Raster WMS Layer, which is not working with RasterSymbolizer, and CQL filter.

Like setFilter for a vector layer with Mapbox GL JS.


<sld:ColorMapEntry quantity="10" label="10 min" color="#e7ecff" opacity="0.898039"/>
<sld:ColorMapEntry quantity="20" label="20 min" color="#e1f8e1"/>
<sld:ColorMapEntry quantity="30" label="30 min" color="#cff7d3"/>
<sld:ColorMapEntry quantity="40" label="40 min" color="#a9e2ae" opacity="0.941176"/>
<sld:ColorMapEntry quantity="50" label="50 min" color="#a5cba7"/>
<sld:ColorMapEntry quantity="60" label="1 hr" color="#e7d676"/>
<sld:ColorMapEntry quantity="120" label="2 hrs" color="#f2b276"/>
<sld:ColorMapEntry quantity="240" label="4 hrs" color="#e77657"/>
<sld:ColorMapEntry quantity="360" label="6 hrs" color="#be3e40"/>
<sld:ColorMapEntry quantity="720" label="12 hrs" color="#9b3234"/>
<sld:ColorMapEntry quantity="960" label="16 hrs" color="#7a2764"/>
<sld:ColorMapEntry quantity="1200" label="20 hrs" color="#531a45"/>
<sld:ColorMapEntry quantity="1400" label="> 1 day" color="#291144"/>

I have tried:

  1. CQL but I don't know the property value for the raster layer.
http://yourserder:8080/geoserver//wms?service=WMS&version=1.1.0&cql_filter=circle_n=circle name&request=GetMap&layers=rasterlayer:rasterlayer&styles=&bbox=bounding boxof your desire&width=768&height=492&srs=EPSG:4326&format=image%2Fpng&transparent=true&

  1. I have also tried a RasterSymbolizer with the env variable but it also not working.

RasterSymbolizer SLD:

<sld:ColorMap name='env'>
<sld:ColorMapEntry quantity="10" label="10 min" color="${env('10_min','#e7ecff')}" opacity="0.898039"/>
<sld:ColorMapEntry quantity="20" label="20 min" color="${env('20_min','#e1f8e1')}"/>
<sld:ColorMapEntry quantity="30" label="30 min" color="${env('30_min','#cff7d3')}"/>
<sld:ColorMapEntry quantity="40" label="40 min" color="${env('40_min','#a9e2ae')}" opacity="0.941176"/>
<sld:ColorMapEntry quantity="50" label="50 min" color="${env('50_min','#a5cba7')}"/>
<sld:ColorMapEntry quantity="60" label="1 hr" color="${env('1_hour','#e7d676')}"/>
<sld:ColorMapEntry quantity="120" label="2 hrs" color="${env('2_hour','#f2b276')}"/>
<sld:ColorMapEntry quantity="240" label="4 hrs" color="${env(4_hour), #e77657}"/>
<sld:ColorMapEntry quantity="360" label="6 hrs" color="${env('6_hour','#be3e40')}"/>
<sld:ColorMapEntry quantity="720" label="12 hrs" color="${env('12_hour','#9b3234')}"/>
<sld:ColorMapEntry quantity="960" label="16 hrs" color="${env('16_hour','#7a2764')}"/>
<sld:ColorMapEntry quantity="1200" label="20 hrs" color="${env('20_hour','#531a45')}"/>
<sld:ColorMapEntry quantity="1400" label="> 1 day" color="${env('1_day','#291144')}"/>


Is there any way to apply changes to the raster layer with GeoServer?

something similar.


1 Answer 1


Here is the answer for working cql filter for raster with a raster symbolizer solution.

note: GeoServer validation will not pass for this sld but It will work, when you save.

idea is to change the opacity to zero for slider value.

<sld:ColorMap name='env'>
<sld:ColorMapEntry quantity="10" label="10 min" color="#e7ecff" opacity="${env('value_0', 1)}"/>
<sld:ColorMapEntry quantity="20" label="20 min" color="#e1f8e1" opacity="${env('value_1',1)}"/>
<sld:ColorMapEntry quantity="30" label="30 min" color="#cff7d3" opacity="${env('value_2',1)}"/>
<sld:ColorMapEntry quantity="40" label="40 min" color="#a9e2ae" opacity="${env('value_3',0.941176)}"/>
<sld:ColorMapEntry quantity="50" label="50 min" color="#a5cba7" opacity="${env('value_4',1)}"/>
<sld:ColorMapEntry quantity="60" label="1 hr" color="#e7d676" opacity="${env('value_5',1)}"/>
<sld:ColorMapEntry quantity="120" label="2 hrs" color="#f2b276" opacity="${env('value_6',1)}"/>
<sld:ColorMapEntry quantity="240" label="4 hrs" color="#e77657}" opacity="${env('value_7',1)}"/>
<sld:ColorMapEntry quantity="360" label="6 hrs" color="#be3e40" opacity="${env('value_8',1)}"/>
<sld:ColorMapEntry quantity="720" label="12 hrs" color="#9b3234" opacity="${env('value_9',1)}"/>
<sld:ColorMapEntry quantity="960" label="16 hrs" color="#7a2764" opacity="${env('value_10',1)}"/>
<sld:ColorMapEntry quantity="1200" label="20 hrs" color="#531a45" opacity="${env('value_11',1)}"/>
<sld:ColorMapEntry quantity="1400" label="> 1 day" color="#291144" opacity="${env('value_12',1)}"/>

write javascript with

let variable = '';
if (value >= 0 && value <= 10) {
    variable = '';
} else if (value > 20 && value <= 20) {
    variable = 'value_0:0;';
} else if (value > 20 && value <= 30) {
    variable = 'value_0:0;value_1:0;';
} else if (value > 30 && value <= 40) {
    variable = 'value_0:0;value_1:0;value_2:0;';
} else if (value > 40 && value <= 50) {
    variable = 'value_0:0;value_1:0;value_2:0;value_3:0;';
} else if (value > 50 && value <= 60) {
    variable = 'value_0:0;value_1:0;value_2:0;value_3:0;value_4:0;';
} else if (value > 60 && value <= 120) {
    variable = 'value_0:0;value_1:0;value_2:0;value_3:0;value_4:0;value_5:0;';
} else if (value > 120 && value <= 240) {
    variable = 'value_0:0;value_1:0;value_2:0;value_3:0;value_4:0;value_5:0;value_6:0;';
} else if (value > 240 && value <= 360) {
    variable = 'value_0:0;value_1:0;value_2:0;value_3:0;value_4:0;value_5:0;value_6:0;value_7:0;';
} else if (value > 360 && value <= 720) {
    variable = 'value_0:0;value_1:0;value_2:0;value_3:0;value_4:0;value_5:0;value_6:0;value_7:0;value_8:0;';
} else if (value > 720 && value <= 960) {
    variable = 'value_0:0;value_1:0;value_2:0;value_3:0;value_4:0;value_5:0;value_6:0;value_7:0;value_8:0;value_9:0;';
} else if (value > 960 && value <= 1200) {
    variable = 'value_0:0;value_1:0;value_2:0;value_3:0;value_4:0;value_5:0;value_6:0;value_7:0;value_8:0;value_9:0;value_10:0;';
} else if (value > 1200 && value <= 1400) {
    variable = 'value_0:0;value_1:0;value_2:0;value_3:0;value_4:0;value_5:0;value_6:0;value_7:0;value_8:0;value_9:0;value_10:0;value_11:0;';
} else if (value > 1400) {
    variable = 'value_0:0;value_1:0;value_2:0;value_3:0;value_4:0;value_5:0;value_6:0;value_7:0;value_8:0;value_9:0;value_10:0;value_11:0;value_12:0;';

and apply with this URL for changes.


  • Geoserver doens't allow to save the incorrect SLD. It gives internal error Aug 27, 2021 at 7:26
  • Not true, but the above SLD is working without validation. Aug 27, 2021 at 7:55
  • It does not pass for me, latest Geoserer version. I suggested to dynamically create an SLD on server-side using PHP. Leaflet then calls this PHP on SLD param in layer.setParams It perfectly works and answers the question but seems that my answer has been deleted by a moderator. Really don't understand why Aug 29, 2021 at 6:55
  • Try to click on save, it will work without validation. Aug 30, 2021 at 6:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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