Home > Instructions > Styling > Layer styles - advanced editor

Layer styles - advanced editor

For advanced style options open Advanced editor, where you can manipulate the layer`s style by applying specific script rules. Advanced editor button is placed at the bottom of Style tab.

advanced editor button

The symbology object contains a number of painting passes (PaintingPass object), that are drawn in sequence.

advanced editor

Each painting pass may contain an array of symbolizers, depending on the type of geometry drawn. Not all symbolizers are required, but you have to use at least one of them to actually draw anything. The symbolizers are also evaluated in sequence, so if you want to draw a solid square with a border, you have to put the FillSymbolizer first and LineSymbolizer second.

You can use the same symbolizer multiple times. For example if you would like to draw a simple road you would draw a solid gray line with thickness of 5 meters and then draw another dashed line in the middle. For that you can use two consecutive LineSymbolizers.

Style types

List of style types which you can assign to certain geometries:

Name Description
Symbology ( Paintingpass(...) ) A complete style specification
Paintingpass ( LineSymbolizer, PointSymbolizer, FillSymbolizer, TextSymbolizer ) A style specification element, composed of the following types
LineSymbolizer (...) A line style specification, including opacity, displacementX, displacementY, lineType, lineJoin, joinCap, stroke, strokeBackground, strokeWidth
FillSymbolizer (...) A fill style specification, including opacity, displacementX, displacementY, fill, fillBackground, fillType
PointSymbolizer (...) A symbol style specification, including opacity, displacementX, displacementY, size, rotation, symbolId, fill, parameters
TextSymbolizer (...) A text style specification, including opacity, displacementX, displacementY, label, fill, halo, alignment, placement, rotation, anchorPointX, anchorPointY, font
SymbolizerFont (...) A font style specification, including fontSize, fontFamily, fontStyle, fontWeight

 

Type properties

Lists of type properties which you can assign to each symbolizer:

Lines (LineSymbolizer)

Structure: LineSymbolizer ( opacity, displacementX, displacementY, lineType, lineJoin, joinCap, stroke, strokeBackground, strokeWidth )

ATTRIBUTE VALUES DESCRIPTION
opacity 0..1 The transparency of line
displacementX any The displacement in X axis direction
displacementY any The displacement in Y axis direction
lineType 'NONE', 'SOLID', 'DOTS', 'DASHES', 'DOTS_DASHES', 'DOT_DOT_DASHES' The type of a line
lineJoin 'MITER', 'BEVEL', 'ROUND' The type of a line join
lineCap 'BUTT', 'ROUND', 'SQUARE' The type of a line ending cap
stroke any (ARGB) The color of the line, or the primary color, when lineType represents a 2-color pattern
strokeBackground any (ARGB) The secondary color, when lineType represents a 2-color pattern, otherwise ignored
strokeWidth any (px) The width of a line

Example:

return sf.Symbology([ 
 sf.PaintingPass([ 
  sf.LineSymbolizer({ 
    opacity: 1, 
    displacementX: 0, 
    displacementY: 0, 
    lineType: 'SOLID', 
    stroke: 0xff000000, 
    strokeWidth: 1 
    }) 
  ]) 
]);

 

Fill (FillSymbolizer)

Structure: FillSymbolizer ( opacity, displacementX, displacementY, fill, fillBackground, fillType)

AtTRIBUTE VALUES DESCRIPTION
opacity 0..1 The transparency of fill
displacementX any The displacement in X axis direction
displacementY any The displacement in Y axis direction
fill any (ARGB) The primary color, when fillType represents a 2-color pattern, otherwise ignored
fillBackground any (ARGB) The color of the fill, or the secondary color, when lineType represents a 2-color pattern
fillType 'SOLID', 'SLASHES', 'BACKSLASHES', 'HOR_LINES', 'VER_LINES', 'DOTS', 'MICRO_DOTS', 'GRID', 'DIAG_GRID', 'TRIANGLES', 'DIAMOND_PLATE' The type of fill

Example:

return sf.Symbology([ 
 sf.PaintingPass([ 
  sf.FillSymbolizer({ 
    opacity: 1, 
    displacementX: 0,
    displacementY: 0, 
    fill: 0xff00ff00, 
    fillBackground: 0xff00ff00, 
    fillType: 'SOLID' 
  }) 
 ]) 
]);

 

Points (PointSymbolizer)

Structure: PointSymbolizer ( opacity, displacementX, displacementY, fill, fillBackground, fillType)

AtTribuTE VALUES DESCRIPTION
opacity 0..1 The transparency of the point (symbol)
displacementX any The displacement in X axis direction
displacementY any The displacement in Y axis direction
size any (px) The size of the symbol
rotation any (degrees) The clock-wise rotation of the symbol
symbolId >=0 The identificator of the symbol in the SVG symbols repository
fill any (RGB) The modulating color for the symbol (point)
parameters any Extra optional replacement parameters for the SVG

Example:

return sf.Symbology([sf.PaintingPass([
   sf.PointSymbolizer({
      opacity: 1,
      displacementX: 0,
      displacementY: 0,
      size: 26,
      symbolId: 618,
      fill: 0xffe80c0c
      })
   ])
]);

 

Text (TextSymbolizer)

Structure: TextSymbolizer ( opacity, displacementX, displacementY, label, fill, halo, font, alignment, placement, rotation, anchorPointX, anchorPointY)

AtTRIBUTE VALUES DESCRIPTION
opacity 0..1 The transparency of text
displacementX any When placement='MASSPOINT': the displacement in screen X direction; when placement='LINE': the displacement along the line direction
displacementY any When placement='MASSPOINT': the displacement in screen Y direction; when placement='LINE': the displacement orthogonal to the line direction
label any The text which is drawn
fill any (ARGB) The color of the text
halo any (ARGB) The color of the shadow/halo
font any The type SymbolizerFont
alignment 'CENTER', 'LEFT', 'RIGHT' The alignment of the text
placement 'LINE', 'MASSPOINT', 'AUTO' The placement of the text
rotation any The clock-wise rotation of the text (where 0 means normal horizontal text). Only used when placement='MASSPOINT'
anchorPointX 0..1 The relative X offset in the labels's envelope
anchorPointY 0..1 The relative Y offset in the labels's envelope

Example:

return sf.Symbology([
  sf.PaintingPass([
    sf.TextSymbolizer({
      displacementX: 22.0,
      displacementY: 0.0,
      fill: 0xff000000, 
      label: f39993_f39985, 
      opacity: 1
    })
  ])
]);