Geoserver CSS title

Question

I am using GetLegendGraphic to fill my legend in a leaflet map. I use CSS to style my layer on Geoserver but I have trouble to add the title to my legend graphic. This code work and add an explanatory text next to the graphic.

* {
  mark: symbol('square');
  mark-size: 12px;
}

/* @title Fixed */
:mark[recent=true] {
  fill: yellow;
  stroke: yellow;
}

/* @title Faulty */
:mark[recent= false] {
  fill: blue;
  stroke: blue;
}

This one does not?

* {
    mark: symbol(circle);
    mark-size: 17px;
}

/* @title Planed */
:mark {
    fill: #51A02C;
    stroke: black;
}

This is my current output. They grey box is however undesired and probably come from an potential "null" value (No null value in the data set though).

Any ideas how this could work? I would like to use CSS instead of SLD because some rules are hairy to write in SLD.

Answer 1

Checked again, I finally noted the issue is in the GetLegendGraphic response. The default behavior is that if there is a single rule in the output GeoServer won't add the title, assuming the client will do the labelling instead, while there are multiple ones, the title is always added, because the client cannot do so in an intelligent way.

This is documented here, see the "forceLabels" parameter: http://docs.geoserver.org/2.8.x/en/user/services/wms/get_legend_graphic/legendgraphic.html

This request:

http://localhost:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=topp:states&style=left_right&legend_options=forceLabels:on

generates:

Answer 2

I also had the problem with the legend and I solved it like this

*
[status = 'Gemeld'] { mark: symbol(circle);
}  
[status = 'In behandeling'] { mark: symbol(circle);
}
[status = 'Afgehandeld' ] {mark: symbol(triangle);
}

/* @title Gemeld */
[status = 'Gemeld'] :mark {
fill: red;
size: 8;
stroke:black;
}

/* @title In behandeling */ 
[status = 'In behandeling'] :mark {
fill: orange;
size: 8;
stroke: black 
}
/* @title  Afgehandeld*/
[status = 'Afgehandeld'] :mark {
fill: orange;
size: 12;
stroke: black;  
}

It gives this legend:

Answer 3

It's probably a simple bug in the translator, but the second example can be equivalently expressed as:

/* @title Planed */ * { mark: symbol(circle); mark-size: 17px; }

:mark { fill: #51A02C; stroke: black; }

Doesn't that work?