This page contains instructions and examples for configuring the Louhi styling. The Styler definition is used for configuring the visual (UI) styles of vector layer features.

Supported Styling Declarations

All values can reference feature properties using ${NAME} syntax. Property names are case sensitive!

Point symbol rendering priority textGraphic > externalGraphic > graphicName. For example if externalGraphic is defined, it is used instead of graphicName. If none of these are defined, points are not rendered. If externalGraphic file is not found, Louhi uses a red error symbol.

Louhi uses automatic polygon simplification to rendering resolution, that can convert polygons to points.

States

Features can have multiple states:

default: normal state

hover: When mouse is on top of this feature. By default will render lines with default style stroke width + 2.

activated: When feature has been activated. By default has red fillColor. This state is used for different selections:

• When an Action is triggered an a dialog is opened from the feature
• When the feature has been selected in different map tools like advanced search and measurement

activatedhover: When a feature is both activated and hovered. Normally you don't need to specify this style manually but it can be overridden.

Rules

You can specify rules for the style, so that some features will be rendered differently from others. As a performance optimization only the first rule that applies to a feature is used by default. You don't need to write the whole style again in the rule, only definitions that need to be overridden from the default style. See Query Language for the tester syntax.

Added in 8.14

You can specify a optional minResolution and/or maxResolution for the rule so you can use different styles for different map zoom levels.

Added in 8.16

You can specify optional "evaluateAllRules: true" to make the style use all rules that apply to a feature.

Syntax:

{
  "tester": "column1==1",
  "minResolution": 2,
  "maxResolution": 5,
  "styles": {
    "default style definitions go here": ""
  },
  "hoverstyles": {
    "optional hover styles": ""
  },
  "activatedstyles": {
    "optional activated styles": ""
  },
  "activatedhoverstyles": {
    "optional activated+hover styles": ""
  }
}

Legend

You can specify a legend in HTML for the style.

NOTE: The format will be changed in the future most likely.

Examples

Text string from field ${text}

{
  "default": {
    "textGraphic": "${text}",
    "fillColor": "#000000",
    "sizeMode": "meter",
    "fontWeight": "bold",
    "fontSize": 50,
    "fillOpacity": 0.9
  },
  "rules": [],
  "legend": null
}

Generic area geometry style with highlight on hover:

{   
  "default": {
    "strokeColor": "#51BE00",
    "fillColor": "#51BE00",
    "graphicName": "circle",
    "fillOpacity": 0,
    "strokeWidth": 2  
  },
  "hover": {     
    "fillOpacity": 0.4,
    "strokeWidth": 4  
  },
  "rules": [ ],
  "legend": null
}

Layered area geometry with rules:

{ 
  "default": { 
    "fillColor": "#FC8D62",
    "strokeColor": "#FC8D62",
    "strokeWidth": 2
  },
  "hover": { 
    "strokeWidth": 4
  },
  "rules": [ { 
    "tester": "ID==50",
    "styles": { 
      "fillOpacity": 0.2
    },
    "hoverstyles": { 
      "fillOpacity": 0.8
    }
  }, { 
    "tester": "ID=='55'",
    "styles": { 
      "fillOpacity": 0.4
    },
    "hoverstyles": { 
      "fillOpacity": 0.8
    }
  }, { 
    "tester": "ID=='60'",
    "styles": { 
      "fillOpacity": 0.6
    },
    "hoverstyles": { 
      "fillOpacity": 0.8
    }
  } ],
  "legend": null
}