Layer Styles
This section configures layer styles. The layer style defines the color scheme for 2D vectors and 3D objects. Two options are available for this: the Vector Style and the Declarative Style.
Clicking on 
opens the selection menu to create a style definition. When selected, the respective style editor opens.
| To apply a layer style to a layer, the style must be assigned in the layer editor. All style elements configured under this section are available for selection in the layers section under Display and can be configured to objects as Available Styles, Standard Style, or Highlight Style. |
| The general actions for editing components are explained here. |
The following parameters can be configured for the respective style:
Vector style
The Vector Style editor can be used to activate 
and deactivate 
individual components of a style, i.e. fill colors, strokes, symbols, and labels, to form a new style definition for vector objects.
| For more information on the functionality of each style editor, see Drawing Tool - Styles. |
General style settings
| Option | Description |
|---|---|
Name (ID) |
Unique name (identifier) of the created style. |
Vector style settings
| Option | Description |
|---|---|
Fill |
Select the fill color by color selector. |
Stroke |
Definition of the stroke width in pixels. Selection of the stroke color by color selector. |
Symbol |
Select/configure a shape or icon via the icon editor. Selection of a stroke and fill color for display. |
Text |
Text entry and definition of the typography. Selection of a stroke and fill color for displaying the text. |
Declarative style
Declarative styles allow for rule-based styling of 3D tiles features. This is done by formulating expressions that assign a style based on properties of a feature. Declarative styles are defined using JSON and expressions designed for styling.
General style settings
| Option | Description |
|---|---|
Name (ID) |
Unique name (identifier) of the created style. |
Declarative style settings
Defines a style according to the 3D Tiles Declarative Styling Specification.
For example:
{
"color": "rgba(255, 0, 0, 0.5)"
}Style Examples
Declarative Styles
| The code examples shown here refer to the entire JSON-object of the respective declarative style, as defined in the JSON editor. In the user interface of the Declarative Style-Editor under Declarative style settings, however, only the value for the key declarativeStyle is being used. |
Example Pointcloud style with classification
{
"type": "DeclarativeStyleItem",
"name": "Classification PCT",
"declarativeStyle": {
"show": "true",
"color": {
"conditions": [
[
"${SEMANTIC} === -1",
"color('#484a49')"
],
[
"${SEMANTIC} === 0",
"color('#484a49')"
],
[
"${SEMANTIC} === 1",
"color('#8a3504')"
],
[
"${SEMANTIC} === 2",
"color('#f2d305')"
],
[
"${SEMANTIC} === 3",
"color('#a8050a')"
],
[
"${SEMANTIC} === 4",
"color('#027315')"
],
[
"${SEMANTIC} === 5",
"color('#94038a')"
],
[
"${SEMANTIC} === 6",
"color('#04c7b0')"
],
[
"${SEMANTIC} === 7",
"color('#51039e')"
],
[
"${SEMANTIC} === 8",
"color('#071aeb')"
],
[
"${SEMANTIC} === 9",
"color('#ffffff')"
],
[
"${SEMANTIC} === 10",
"color('#60f211')"
],
[
"${SEMANTIC} === 11",
"color('#026929')"
],
[
"${SEMANTIC} === 12",
"color('#f27005')"
],
[
"${SEMANTIC} === 13",
"color('#e36ff2')"
],
[
"${SEMANTIC} === 14",
"color('#5f6e53')"
],
[
"${SEMANTIC} === 15",
"color('#f4f743')"
],
[
"true",
"${COLOR}"
]
]
},
"pointSize": 2
},
"properties": {
"title": "Classification PCT",
"legend": [
{
"type": "StyleLegendItem",
"rows": [
{
"type": "CircleLegendRow",
"title": "-1 = Nie klassifiziert",
"image": {
"radius": 2,
"scale": 1,
"fill": {
"color": "#484a49"
}
}
},
{
"type": "CircleLegendRow",
"title": "0 = Nicht zugewiesen",
"image": {
"radius": 2,
"scale": 1,
"fill": {
"color": "#484a49"
}
}
},
{
"type": "CircleLegendRow",
"title": "1 = Boden",
"image": {
"radius": 2,
"scale": 1,
"fill": {
"color": "#8a3504"
}
}
},
{
"type": "CircleLegendRow",
"title": "2 = Strasse",
"image": {
"radius": 2,
"scale": 1,
"fill": {
"color": "#f2d305"
}
}
},
{
"type": "CircleLegendRow",
"title": "3 = Gebäude",
"image": {
"radius": 2,
"scale": 1,
"fill": {
"color": "#a8050a"
}
}
},
{
"type": "CircleLegendRow",
"title": "4 = Vegetation",
"image": {
"radius": 2,
"scale": 1,
"fill": {
"color": "#027315"
}
}
},
{
"type": "CircleLegendRow",
"title": "5 = Schiene",
"image": {
"radius": 2,
"scale": 1,
"fill": {
"color": "#94038a"
}
}
},
{
"type": "CircleLegendRow",
"title": "6 = Fahrzeuge",
"image": {
"radius": 2,
"scale": 1,
"fill": {
"color": "#04c7b0"
}
}
},
{
"type": "CircleLegendRow",
"title": "7 = Stadtmöbel",
"image": {
"radius": 2,
"scale": 1,
"fill": {
"color": "#51039e"
}
}
},
{
"type": "CircleLegendRow",
"title": "8 = Wasser",
"image": {
"radius": 2,
"scale": 1,
"fill": {
"color": "#071aeb"
}
}
},
{
"type": "CircleLegendRow",
"title": "9 = Ausreisser",
"image": {
"radius": 2,
"scale": 1,
"fill": {
"color": "#ffffff"
}
}
},
{
"type": "CircleLegendRow",
"title": "10 = niedrige Vegetation",
"image": {
"radius": 2,
"scale": 1,
"fill": {
"color": "#60f211"
}
}
},
{
"type": "CircleLegendRow",
"title": "11 = hohe Vegetation",
"image": {
"radius": 2,
"scale": 1,
"fill": {
"color": "#026929"
}
}
},
{
"type": "CircleLegendRow",
"title": "12 = Möbel",
"image": {
"radius": 2,
"scale": 1,
"fill": {
"color": "#f27005"
}
}
},
{
"type": "CircleLegendRow",
"title": "13 = Werbung",
"image": {
"radius": 2,
"scale": 1,
"fill": {
"color": "#e36ff2"
}
}
},
{
"type": "CircleLegendRow",
"title": "14 = Barriere",
"image": {
"radius": 2,
"scale": 1,
"fill": {
"color": "#5f6e53"
}
}
},
{
"type": "CircleLegendRow",
"title": "15 = Zeichen",
"image": {
"radius": 2,
"scale": 1,
"fill": {
"color": "#f4f743"
}
}
}
]
}
]
}
}Example Building Style by function
{
"type": "DeclarativeStyleItem",
"name": "BuildingFunction",
"declarativeStyle": {
"show": "true",
"color": {
"conditions": [
[
"${attributes.function} === '31001_1010' ",
"color('#ff7f00')"
],
[
"${attributes.function} === '31001_1022' ",
"color('#ff7f00')"
],
[
"${attributes.function} === '31001_1000' ",
"color('#ff7f00')"
],
[
"${attributes.function} === '31001_1021' ",
"color('#ff7f00')"
],
[
"${attributes.function} === '31001_1020' ",
"color('#ff7f00')"
],
[
"${attributes.function} === '31001_1023' ",
"color('#ff7f00')"
],
[
"${attributes.function} === '31001_2724' ",
"color('#d1dd73')"
],
[
"${attributes.function} === '31001_2740' ",
"color('#d1dd73')"
],
[
"${attributes.function} === '31001_2720' ",
"color('#d1dd73')"
],
[
"${attributes.function} === '31001_2700' ",
"color('#d1dd73')"
],
[
"${attributes.function} === '31001_1221' ",
"color('#d1dd73')"
],
[
"${attributes.function} === '31001_2721' ",
"color('#d1dd73')"
],
[
"${attributes.function} === '31001_2741' ",
"color('#d1dd73')"
],
[
"${attributes.function} === '31001_1210' ",
"color('#d1dd73')"
],
[
"${attributes.function} === '31001_2727' ",
"color('#d1dd73')"
],
[
"${attributes.function} === '31001_2726' ",
"color('#d1dd73')"
],
[
"${attributes.function} === '31001_2742' ",
"color('#d1dd73')"
],
[
"${attributes.function} === '31001_1223' ",
"color('#d1dd73')"
],
[
"${attributes.function} === '31001_1220' ",
"color('#d1dd73')"
],
[
"${attributes.function} === '31001_3041' ",
"color('#ff00ff')"
],
[
"${attributes.function} === '31001_3040' ",
"color('#ff00ff')"
],
[
"${attributes.function} === '31001_3046' ",
"color('#ff00ff')"
],
[
"${attributes.function} === '31001_3043' ",
"color('#ff00ff')"
],
[
"${attributes.function} === '31001_2090' ",
"color('#389e4e')"
],
[
"${attributes.function} === '31001_2081' ",
"color('#389e4e')"
],
[
"${attributes.function} === '31001_2080' ",
"color('#389e4e')"
],
[
"${attributes.function} === '31001_2071' ",
"color('#389e4e')"
],
[
"${attributes.function} === '31001_2070' ",
"color('#389e4e')"
],
[
"${attributes.function} === '31001_2083' ",
"color('#389e4e')"
],
[
"${attributes.function} === '31001_2093' ",
"color('#389e4e')"
],
[
"${attributes.function} === '31001_2091' ",
"color('#389e4e')"
],
[
"${attributes.function} === '31001_3072' ",
"color('#e21600')"
],
[
"${attributes.function} === '31001_3071' ",
"color('#e21600')"
],
[
"${attributes.function} === '31001_2100' ",
"color('#994c00')"
],
[
"${attributes.function} === '31001_2120' ",
"color('#994c00')"
],
[
"${attributes.function} === '31001_2111' ",
"color('#994c00')"
],
[
"${attributes.function} === '31001_2130' ",
"color('#994c00')"
],
[
"${attributes.function} === '31001_2112' ",
"color('#994c00')"
],
[
"${attributes.function} === '31001_2200' ",
"color('#994c00')"
],
[
"${attributes.function} === '31001_2131' ",
"color('#994c00')"
],
[
"${attributes.function} === '31001_2110' ",
"color('#994c00')"
],
[
"${attributes.function} === '31001_2171' ",
"color('#994c00')"
],
[
"${attributes.function} === '31001_2170' ",
"color('#994c00')"
],
[
"${attributes.function} === '31001_1120' ",
"color('#fdbf6f')"
],
[
"${attributes.function} === '31001_1130' ",
"color('#fdbf6f')"
],
[
"${attributes.function} === '31001_1100' ",
"color('#fdbf6f')"
],
[
"${attributes.function} === '31001_1122' ",
"color('#fdbf6f')"
],
[
"${attributes.function} === '31001_1123' ",
"color('#fdbf6f')"
],
[
"${attributes.function} === '31001_1131' ",
"color('#fdbf6f')"
],
[
"${attributes.function} === '31001_1110' ",
"color('#fdbf6f')"
],
[
"${attributes.function} === '31001_3212' ",
"color('#ffff00')"
],
[
"${attributes.function} === '31001_3211' ",
"color('#ffff00')"
],
[
"${attributes.function} === '31001_3210' ",
"color('#ffff00')"
],
[
"${attributes.function} === '31001_3222' ",
"color('#ffff00')"
],
[
"${attributes.function} === '31001_3220' ",
"color('#ffff00')"
],
[
"${attributes.function} === '31001_3221' ",
"color('#ffff00')"
],
[
"${attributes.function} === '31001_2020' ",
"color('#a6cee3')"
],
[
"${attributes.function} === '31001_2010' ",
"color('#a6cee3')"
],
[
"${attributes.function} === '31001_2050' ",
"color('#a6cee3')"
],
[
"${attributes.function} === '31001_2000' ",
"color('#a6cee3')"
],
[
"${attributes.function} === '31001_2030' ",
"color('#a6cee3')"
],
[
"${attributes.function} === '31001_2310' ",
"color('#a6cee3')"
],
[
"${attributes.function} === '31001_2729' ",
"color('#a6cee3')"
],
[
"${attributes.function} === '31001_2040' ",
"color('#a6cee3')"
],
[
"${attributes.function} === '31001_2320' ",
"color('#a6cee3')"
],
[
"${attributes.function} === '31001_3060' ",
"color('#68dd39')"
],
[
"${attributes.function} === '31001_1310' ",
"color('#68dd39')"
],
[
"${attributes.function} === '31001_3200' ",
"color('#68dd39')"
],
[
"${attributes.function} === '31001_3044' ",
"color('#68dd39')"
],
[
"${attributes.function} === '31001_3062' ",
"color('#68dd39')"
],
[
"${attributes.function} === '31001_3061' ",
"color('#68dd39')"
],
[
"${attributes.function} === '31001_3281' ",
"color('#68dd39')"
],
[
"${attributes.function} === '31001_3034' ",
"color('#68dd39')"
],
[
"${attributes.function} === '31001_3030' ",
"color('#68dd39')"
],
[
"${attributes.function} === '31001_3036' ",
"color('#68dd39')"
],
[
"${attributes.function} === '31001_3031' ",
"color('#68dd39')"
],
[
"${attributes.function} === '31001_3064' ",
"color('#68dd39')"
],
[
"${attributes.function} === '31001_1311' ",
"color('#68dd39')"
],
[
"${attributes.function} === '31001_3280' ",
"color('#68dd39')"
],
[
"${attributes.function} === '31001_3063' ",
"color('#68dd39')"
],
[
"${attributes.function} === '31001_3100' ",
"color('#fb9a99')"
],
[
"${attributes.function} === '31001_3037' ",
"color('#fb9a99')"
],
[
"${attributes.function} === '31001_3020' ",
"color('#fb9a99')"
],
[
"${attributes.function} === '31001_3013' ",
"color('#fb9a99')"
],
[
"${attributes.function} === '31001_3000' ",
"color('#fb9a99')"
],
[
"${attributes.function} === '31001_3015' ",
"color('#fb9a99')"
],
[
"${attributes.function} === '31001_3050' ",
"color('#d00551')"
],
[
"${attributes.function} === '31001_3051' ",
"color('#d00551')"
],
[
"${attributes.function} === '31001_3052' ",
"color('#d00551')"
],
[
"${attributes.function} === '31001_2460' ",
"color('#5f4fcf')"
],
[
"${attributes.function} === '31001_2465' ",
"color('#5f4fcf')"
],
[
"${attributes.function} === '31001_2464' ",
"color('#5f4fcf')"
],
[
"${attributes.function} === '31001_2461' ",
"color('#5f4fcf')"
],
[
"${attributes.function} === '31001_2054' ",
"color('#1f78b4')"
],
[
"${attributes.function} === '31001_2055' ",
"color('#1f78b4')"
],
[
"${attributes.function} === '31001_2051' ",
"color('#1f78b4')"
],
[
"${attributes.function} === '31001_2052' ",
"color('#1f78b4')"
],
[
"${attributes.function} === '31001_3021' ",
"color('#cab2d6')"
],
[
"${attributes.function} === '31001_3065' ",
"color('#cab2d6')"
],
[
"${attributes.function} === '31001_3022' ",
"color('#cab2d6')"
],
[
"${attributes.function} === '31001_3023' ",
"color('#cab2d6')"
],
[
"${attributes.function} === '31001_3010' ",
"color('#ba9289')"
],
[
"${attributes.function} === '31001_3012' ",
"color('#ba9289')"
],
[
true,
"color('#d9d9d9')"
]
]
}
},
"properties": {
"legend": [
{
"type": "StyleLegendItem",
"colNr": 1,
"rows": [
{
"type": "FillLegendRow",
"fill": {
"color": "#a6cee3"
},
"title": "Büro/Gewerbe/Wirtschaft"
},
{
"type": "FillLegendRow",
"fill": {
"color": "#1f78b4"
},
"title": "Einkaufszentrum/Laden"
},
{
"type": "FillLegendRow",
"fill": {
"color": "#68dd39"
},
"title": "Freizeit/Kultur/Soziales"
},
{
"type": "FillLegendRow",
"fill": {
"color": "#389e4e"
},
"title": "Gastronomie"
},
{
"type": "FillLegendRow",
"fill": {
"color": "#fb9a99"
},
"title": "Gebäude für öffentliche Zwecke"
},
{
"type": "FillLegendRow",
"fill": {
"color": "#ff00ff"
},
"title": "Gebäude für religiöse Zwecke"
},
{
"type": "FillLegendRow",
"fill": {
"color": "#ffff00"
},
"title": "Gebäude für Sportzwecke"
},
{
"type": "FillLegendRow",
"fill": {
"color": "#994c00"
},
"title": "Industrie"
},
{
"type": "FillLegendRow",
"fill": {
"color": "#d00551"
},
"title": "Krankenhaus/Gesundheitswesen"
},
{
"type": "FillLegendRow",
"fill": {
"color": "#d1dd73"
},
"title": "Landwirtschaft"
},
{
"type": "FillLegendRow",
"fill": {
"color": "#5f4fcf"
},
"title": "Parkhaus/Tiefgarage"
},
{
"type": "FillLegendRow",
"fill": {
"color": "#e21600"
},
"title": "Polizei, Feuerwehr"
},
{
"type": "FillLegendRow",
"fill": {
"color": "#cab2d6"
},
"title": "Schulgebäude/Kita"
},
{
"type": "FillLegendRow",
"fill": {
"color": "#ba9289"
},
"title": "Verwaltungsgebäude"
},
{
"type": "FillLegendRow",
"fill": {
"color": "#ff7f00"
},
"title": "Wohngebäude"
},
{
"type": "FillLegendRow",
"fill": {
"color": "#fdbf6f"
},
"title": "Wohngebäude mit gemischter Nutzung"
},
{
"type": "FillLegendRow",
"fill": {
"color": "#d9d9d9"
},
"title": "weitere"
}
]
}
]
}
}Example building style by measured height
{
"name": "MeasuredHeight",
"type": "DeclarativeStyleItem",
"title": "Measured Height",
"declarativeStyle": {
"show": "true",
"color": {
"conditions": [
["${attributes.measuredHeight} === undefined", "color('#993404')"],
["${attributes.measuredHeight} < 5", "color('#ffffd4')"],
["${attributes.measuredHeight} < 15", "color('#fed98e')"],
["${attributes.measuredHeight} < 30", "color('#fe9929')"],
["${attributes.measuredHeight} < 65", "color('#d95f0e')"],
["true", "color('#993404')"]
]
}
},
"properties": {
"legend": [
{
"type": "StyleLegendItem",
"colNr": 1,
"rows": [
{
"type": "FillLegendRow",
"fill": {
"color": "#ffffd4"
},
"title": "< 5 m"
},
{
"type": "FillLegendRow",
"fill": {
"color": "#fed98e"
},
"title": "< 15 m"
},
{
"type": "FillLegendRow",
"fill": {
"color": "#fe9929"
},
"title": "< 30 m"
},
{
"type": "FillLegendRow",
"fill": {
"color": "#d95f0e"
},
"title": "< 65 m"
},
{
"type": "FillLegendRow",
"fill": {
"color": "#993404"
},
"title": "> 65 m"
}
]
}
]
}
}Vector Styles
Example Fill Style
{
"type": "VectorStyleItem",
"name": "VectorStyleLineFill",
"fill": {
"color": [
64,
157,
119,
0.5
]
},
"stroke": {
"color": [
64,
157,
119,
1
],
"width": 1.25
},
"properties": {
"legend": [
{
"type": "StyleLegendItem",
"colNr": 1,
"rows": [
{
"type": "FillLegendRow",
"fill": {
"color": [
64,
157,
119,
0.5
]
},
"stroke": {
"color": [
64,
157,
119,
1
],
"width": 1.25
},
"title": "Fill style"
}
]
}
]
}
}Example Symbol Style
{
"type": "VectorStyleItem",
"name": "VectorStyleSymbol",
"image": {
"scale": 1,
"fill": {
"color": [
0,
160,
186,
1
]
},
"points": 4,
"radius": 10,
"stroke": {
"color": [
0,
160,
186,
1
],
"width": 1
}
},
"properties": {
"legend": [
{
"type": "StyleLegendItem",
"colNr": 1,
"rows": [
{
"type": "RegularShapeLegendRow",
"title": "Symbol",
"image": {
"points": 4,
"angle": 0,
"radius": 10,
"scale": 1,
"fill": {
"color_": [
0,
160,
186,
1
]
},
"stroke": {
"color_": [
0,
160,
186,
1
],
"lineDash_": null,
"width_": 1
}
}
}
]
}
]
}
}Example Text Style
{
"type": "VectorStyleItem",
"name": "VectorStyleText",
"properties": {
"legend": [
{
"type": "StyleLegendItem",
"colNr": 1,
"rows": [
{
"type": "TextLegendRow",
"title": "Text",
"text": {
"font": "italic bold 32px Courier New, monospace",
"fill": {
"color": [
255,
214,
0,
1
]
}
},
"label": "Text"
}
]
}
]
},
"text": {
"font": "italic bold 32px Courier New, monospace",
"fill": {
"color": [
255,
214,
0,
1
]
},
"textBaseline": "bottom",
"offsetY": -15,
"offsetX": 0
}
}| Apply applies the changes made to the displayed app. See also Editing and saving. |