Styling

Vector feature styles can be customized via CSS. GBD WebSuite supports standard CSS properties for SVG (for example, fill) and a few custom properties, which must be prefixed with -- in your CSS.

--with-labels	all to render all labels, none to skip labels
--label-fill	foreground color for labels
--label-font-size	label font size
--label-stroke-width	label stroke color
--label-stroke	label stroke color
--label-offset-x	label offset from the automatic position
--label-offset-y	label offset from the automatic position
--label-min-resolution	min resolution to display labels
--label-max-resolution	max resolution to display labels
--mark	type of the end of line or edge marker (circle, square, cross, arrow )
--mark-fill	fill color for the marker
--mark-size	marker size
--mark-stroke-width	marker stroke color
--mark-stroke	marker stroke color
--point-size	point size for Point features

Styling vector layers

For vector layers, like postgres layers, you can place your css rules directly in the configuration file under style:

"layers": [
    ...
    {
        "title": "My Vector layer",
        "type": "sql",
        ...
        "style": {
            "type": "css",
            "text": "stroke: rgb(0, 255, 255); stroke-width: 2px; fill: rgba(0, 100, 100, 0.2); --label-fill: rgb(255, 0, 0)"
        }
    }

Alternatively, you can include the rules in your project-related CSS file (see Projects), and use the cssSelector style type

// In your css file

.myVectorLayer {
    stroke: rgb(0, 255, 255);
    stroke-width: 2px;
    fill: rgba(0, 100, 100, 0.2);
    --label-fill: rgb(255, 0, 0);
}

// In your config file

{
    "title": "My Vector layer",
    "type": "postgres",
    ...
    "style": {
        "type": "cssSelector",
        "text": ".myVectorLayer"
    }
}

Styling built-in features

You can customize styles for built-in features, like search results markers or measurements. There are following predefined CSS selectors:

.gws .modMarkerFeature	search results marker
.gws .modAnnotateFeature	measured/annotated geometry

Styling dimensions

The dimensioning plugin uses these CSS selectors:

.gws .modDimensionDimLine	main dimension line
.gws .modDimensionDimPlumb	a “plumb” line from the end of the main line to the edge of the object
.gws .modDimensionDimCross	a cross at the end of the main line
.gws .modDimensionDimArrow	an arrow at the end of the main line
.gws .modDimensionDimLabel	dimension label