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.

--label-background

background color for feature labels

--label-fill

foreground color for labels

--label-font-size

label font size

--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

end of line or edge marker (circle)

--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 sql or geojson 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 projecr-related CSS file (see Projects), and set text to the CSS selector

// 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": "sql",
    ...
    "style": {
        "type": "css",
        "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 .modAnnotatePoint

point measure

.gws .modAnnotateLine

line measure

.gws .modAnnotatePolygon

polygon measure

.gws .modAnnotateBox

box measure

.gws .modAnnotateCircle

circle measure

Styling dimensions

The dimensioning plugin uses these CSS selectors:

.gws .modDimensionDimLine

main dimension line. For dimension main lines, the --marker property supports additional values cross and arrow.

.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