Skip to main content

Styles definition for Features

Header

Level: Intermediate

Keywords: feature, entity, style, symbology

The result: overview of specific feature styles

Introduction​

Entities take the default symbology from the LIDS application server. This symbology can be overriden in the client entity metadata.

Styles usage​

To style a feature a JSON Object with the structure described in the following example is used. The default style of the icon or symbol is overriden by overrideSymbology property. When the mouse cursor is hovering over it, the style of the icon or symbol is set using hoverSymbology property. When the icon or symbol is selected, its style is set by selectSymbology property.

ft_boRequestService.json - configuration example
    "overrideSymbology" : {
        "masterGraphics": {
            "fillColor" : "rgba(255, 255, 0, 0.3)",
            "strokeColor": "rgba(0, 0, 0, 0.2)"
        }
    },
    "selectSymbology":{
        "masterGraphics": {
            "symbolizer":{
                "iconSrc": "ais-icons:marker-selected-project",
                "label": {
                "fillColor": "rgb(0, 0, 0)",
                "strokeColor": "rgb(255, 255, 255)",
                "strokeWidth": 3,
                "symbolHeight": "12px",
                "fontWeight": "bold",
                "fontFamily": "Arial",
                "offsetY": 11,
                "value": "{get:#at_boSamo__code}"
                }
            }
        }
    },
    "hoverSymbology":{
        "masterGraphics": {
            "symbolizer":{
                "label": {
                "fillColor": "rgb(0, 0, 0)",
                "value": "{get:#at_boSamo__code}",
                "strokeColor": "rgb(255, 255, 255)",
                "strokeWidth": 3,
                "symbolHeight": "12px",
                "fontWeight": "bold",
                "fontFamily": "Arial",
                "offsetY": 11
                }
            }
        }
    }

Values specification​

For each feature type it is possible to set these style properties (if some property is not set, default value of Openlayers styles will be used):

Point​

  • fillColor: A fill color. Colors can be defined as strings in rgb(r,g,b) or rgba(r,g,b,a) format for opacity setting, or in hex #rrggbb or #rgb format. Color names, like 'red', 'blue' or 'green', may also be used. Default null; if null, the default black will be used.
  • strokeColor: A stroke color of the line on features. Colors can be defined as strings in rgb(r,g,b) or rgba(r,g,b,a) format for opacity setting, or in hex #rrggbb or #rgb format. Color names, like 'red', 'blue' or 'green', may also be used . Default null; if null, the default black will be used. On polygons and points it is used as an outline to the feature. On lines, this is the representation of the feature.
  • strokeWidth: Width of boundary in pixels. fontFamily: Specifies the font for an point.
  • symbolHeight: Size of the text can be defined as a number without units, than it will be calculated as with metres units. To set the size with units (px for pixels or m for metres are supported) it must be defined as a string.
  • charCode: ASCII code of symbol. zIndex: A z-index used for point symbol. If not specified then value 100 is used if masking is enabled
  • masked: Flag that indicate that masking is enabled. By default all symbol masks are below all point symbols if not set by zIndex and maskZIndex otherwise
  • maskColor: Color used for mask symbol
  • maskCharCode: ASCII code of mask symbol
  • maskFontFamily: Specifies the font for mask. If not specified fontFamily is used
  • maskZIndex: A z-index used for mask symbol. If not specified than zIndex-1 value is used

For icon style the iconSrc or iconImg properties must be set:

  • iconSrc: Image source URI. Required if icon should be shown.
  • iconAnchor: Anchor. Default value is [0.5, 0.5] (icon center)
  • iconAnchorOrigin: Origin of the anchor: bottom-left, bottom-right, top-left or top-right. Default is top-left.
  • iconAnchorXUnits: Units in which the anchor x value is specified. A value of fraction indicates the x value is a fraction of the icon. A value of pixels indicates the x value in pixels. Default is fraction.
  • iconAnchorYUnits: Units in which the anchor y value is specified. A value of fraction indicates the y value is a fraction of the icon. A value of pixels indicates the y value in pixels. Default is fraction.
  • iconColor: Color to tint the icon. If not specified, the icon will be left as is.
  • iconCrossOrigin: The crossOrigin attribute for loaded images. Note that you must provide a crossOrigin value if you are using the WebGL renderer or if you want to access pixel data with the Canvas renderer.
  • iconImg: Image object for the icon. If the src option is not provided then the provided image must already be loaded. And in that case, it is required to provide the size of the image, with the imgSize option.
  • iconOffset: Offset, which, together with the size and the offset origin, define the sub-rectangle to use from the original icon image. Default value is [0, 0].
  • iconOffsetOrigin: Origin of the offset: bottom-left, bottom-right, top-left or top-right. Default is top-left.
  • iconOpacity: Opacity of the icon. Default is 1.
  • iconScale: Scale.
  • iconSnapToPixel: If true integral numbers of pixels are used as the X and Y pixel coordinate when drawing the icon in the output canvas. If false fractional numbers may be used. Using true allows for "sharp" rendering (no blur), while using false allows for "accurate" rendering. Note that accuracy is important if the icon's position is animated. Without it, the icon may jitter noticeably. Default value is true.
  • iconRotateWithView: Whether to rotate the icon with the view. Default is false.
  • iconRotation: Rotation in radians (positive rotation clockwise). Default is 0.
  • iconSize: Icon size in pixel. Can be used together with offset to define the sub-rectangle to use from the origin (sprite) icon image.
  • iconImgSize: Image size in pixels. Only required if img is set and src is not, and for SVG images in Internet Explorer 11. The provided imgSize needs to match the actual size of the image.

For regular shape style the points and radius or radius1 properties must be set, for circle style the radius property must be set:

  • points: Number of points for stars and regular polygons.
  • radius: Radius of a regular polygon.
  • radius1: Inner radius of a star.
  • radius2: Outer radius of a star.
  • angle: Shape's angle in radians. A value of 0 will have one of the shape's point facing up. Default value is 0.
  • rotation: Rotation in radians (positive rotation clockwise). Default is 0.
  • rotationWithView: Whether to rotate the shape with the view. Default is false.

Line​

  • strokeColor: A stroke color of the line on features. Colors can be defined as strings in rgb(r,g,b) or rgba(r,g,b,a) format for opacity setting, or in hex #rrggbb or #rgb format. Color names, like 'red', 'blue' or 'green', may also be used . Default null; if null, the default black will be used. On polygons and points it is used as an outline to the feature. On lines, this is the representation of the feature.
  • strokeWidth: Width of line in pixels.
  • strokeLineCap: Line cap style. Possible values: 'butt', 'round', or 'square'. Default is 'round'.
  • strokeLineJoin: Line join style. Possible values: 'bevel', 'round', or 'miter'. Default is 'round'.
  • strokeLineDash: Line dash pattern. Default is undefined (no dash). Please note that Internet Explorer 10 and lower do not support the setLineDash method on the CanvasRenderingContext2D and therefore this option will have no visual effect in these browsers.
  • strokeMiterLimit: Miter limit. Default is 10.
  • label: Label styling property. See Label styling section.
  • components: Allows to define line components for lineString feature. Each component has it's own symbology (like normal lineString) and some extra properites:
    • offset: Distance in meters from oginal lineString
    • normalize: Converts geometry to normal form (or canonical form). The definitions for normal form use the standard lexicographical ordering for coordinates. Default value is false.
    • drawCaps: Should end caps be drawn. Default is false.
    • multiLineTolerance: For multiLine geometry how distant end point from one line can be to start point of next line to be join together. Default value is 0.01.
  • buffer: Adds buffer with size in meters and style
    • size: Size of buffer in meters
    • symbolizer: Standard area symbolizer

Area​

  • fillColor: A fill color. Colors can be defined as strings in rgb(r,g,b) or rgba(r,g,b,a) format for opacity setting, or in hex #rrggbb or #rgb format. Color names, like 'red', 'blue' or 'green', may also be used. Default null; if null, the default black will be used.
  • fillStyle: A fill pattern object with these options:
    • type Type of fill pattern: hatch, crosshatch (more specified in lines and crosslines properties) or symbol (more specified in grid property):
    • lines Parameters for lines of hatching:
      • distance Distance betwwen lines in pixels.
      • rotation Angle of rotation from x-axis in degrees.
    • crosslines Parameters for crosslines of crosshatching, same as in lines property.
    • grid Parameters for symbol grid:
      • distanceX Distance between symbols on x-axis in pixels.
      • distanceY Distance between symbols on y-axis in pixels.
      • rotation Angle from x-axis in degrees.
      • evenOffset Offset of every even row of symbols in pixels.
    • symbolizer Symbolizer of used features, especially lines.
fillStyle property - configuration example
    type: "crosshatch",
    lines: {
        distance: 10,
        rotation: 10
    },
    crosslines: {
        distance: 40,
        rotation: 110
    },
    symbolizer: {
        type: "Line",
        strokeWidth: 3,
        strokeColor: 'blue',
    }
  • strokeColor: A stroke color of the line on features. Colors can be defined as strings in rgb(r,g,b) or rgba(r,g,b,a) format for opacity setting, or in hex #rrggbb or #rgb format. Color names, like 'red', 'blue' or 'green', may also be used . Default null; if null, the default black will be used. On polygons and points it is used as an outline to the feature. On lines, this is the representation of the feature.
  • strokeWidth: Width of boundary in pixels.
  • strokeLineCap: Line cap style. Possible values: 'butt', 'round', or 'square'. Default is 'round'.
  • strokeLineJoin: Line join style. Possible values: 'bevel', 'round', or 'miter'. Default is 'round'.
  • strokeLineDash: Line dash pattern. Default is undefined (no dash). Please note that Internet Explorer 10 and lower do not support the setLineDash method on the CanvasRenderingContext2D and therefore this option will have no visual effect in these browsers.
  • strokeMiterLimit: Miter limit. Default is 10.
  • label: Label styling property. See Label styling section.

Text​

  • fillColor: A fill color. Colors can be defined as strings in rgb(r,g,b) or rgba(r,g,b,a) format for opacity setting, or in hex #rrggbb or #rgb format. Color names, like 'red', 'blue' or 'green', may also be used. Default null; if null, the default black will be used.
  • strokeColor: A stroke color of the line on features. Colors can be defined as strings in rgb(r,g,b) or rgba(r,g,b,a) format for opacity setting, or in hex #rrggbb or #rgb format. Color names, like 'red', 'blue' or 'green', may also be used . Default null; if null, the default black will be used. On polygons and points it is used as an outline to the feature. On lines, this is the representation of the feature.
  • symbolHeight: Size of the text can be defined as a number without units, than it will be calculated as with metres units. To set the size with units (px for pixels or m for metres are supported) it must be defined as a string.
  • fontFamily: Specifies the font for a text.
  • fontStyle: Specifies the font style for a text: normal (default), italic, oblique.
  • fontWeight: Specifies how thick or thin characters in text should be displayed: normal (default), bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.

Label styling​

  • propertyName: Name of feature's string value to use in label. Nested values of feature property must be separated by .
  • fontFamily: Specifies the font for an text.
  • fontStyle: Specifies the font style for a text: normal (default), italic, oblique.
  • fontWeight: Specifies how thick or thin characters in text should be displayed: normal (default), bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.
  • offsetX: Horizontal text offset in pixels. A positive will shift the text right. Default is 0.
  • offsetY: Vertical text offset in pixels. A positive will shift the text down. Default is 0.
  • scale: Scale.
  • rotateWithView: Whether to rotate the text with the view. Default is false.
  • rotation: Rotation in degrees (positive rotation clockwise). Default is 0.
  • fillColor: A fill color. Colors can be defined as strings in rgb(r,g,b) or rgba(r,g,b,a) format for opacity setting, or in hex #rrggbb or #rgb format. Color names, like 'red', 'blue' or 'green', may also be used. Default null; if null, the default black will be used.
  • strokeColor: A stroke color of the line on features. Colors can be defined as strings in rgb(r,g,b) or rgba(r,g,b,a) format for opacity setting, or in hex #rrggbb or #rgb format. Color names, like 'red', 'blue' or 'green', may also be used . Default null; if null, the default black will be used. On polygons and points it is used as an outline to the feature. On lines, this is the representation of the feature.
  • strokeWidth: Width of boundary in pixels.
  • symbolHeight: Size of the label can be defined as a number without units, than it will be calculated as with metres units. To set the size with units (px for pixels or m for metres are supported) it must be defined as a string.

Dynamic styling​

Next to symbolizer property of the feature type it is possilble to use dynamicStyle property. This is an array usable to set some rules and conditional styles. Each dynamicStyles array item consits of these properties:

  • symbolizer: Styling properties of feature which will be applied when the rules are fullfilled. Nested properties (e. g. fillStyle, label) has to be repeated with all necessary properties.
  • filter: Object of defined rules. Compared values in conditions can be sematic attributes of the feature, id, minResolution or maxResolution. Its values can be prefixed with operators (<, >, <=, >=, =, !=) to provide alternative operator than equals.