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

DeclarationDefaultFormatPurpose
fillColor#ee9900Color in hex formatPolygon fill color, Text color, graphicName symbol fill color
strokeColor#ee9900Color in hex formatPolygon border color, line color
strokeWidth1IntegerPolygon border width, line width
fillOpacity0.4Double 0-1Polygon fill opacity. 0=Transparent, 1=Opaque
strokeOpacity1Double 0-1Polygon border opacity, line opacity
pointRadius6DoublegraphicName and externalGraphic symbol radius (width/2,height/2)
graphicWidth
IntegerexternalGraphic width. Has higher priority than pointRadius.
graphicHeight
IntegerexternalGraphic height. Has higher priority than pointRadius.
sizeModepixelpixel/meterDefine line width/symbol size in meters or pixels
graphicXOffset0Integer

externalGraphic symbol offset from symbol center in X axis

graphicYOffset0IntegerexternalGraphic symbol offset from symbol center in Y axis
strokeDashstylesolidenumerationPossible values: dot, dash, dashdot, longdash, longdashdot. Will make line rendering slower. Use with care.
fontNameArialstringText font. Must be found in both the user web browser and the server.
fontSize12IntegerText size
fontWeightnormalnormal/boldText weight
textGraphic
stringRender point as text using this text
externalGraphic
string (url to image)Render point using this image file. Can be a relative URL from site root.
graphicName
enumerationRender point using this symbol. Possible values: circle, square, triangle
rotation0Double or 'ignore'Point rotation in degrees. Has higher priority than rotation in point geometry. Can be set to 'ignore' to ignore geometry rotation. Point rotation is not supported in DOM (IE8) rendering mode.
requestXBuffer
integer

Oversize loads from vector databases by this much in X axis. Helps graphics clipping on tile borders. Reserves this*sizeMode space from symbol center in horizontal dimension.

E.g. "requestXBuffer": 50, "sizeMode": "meters" → Graphic can be 100 m wide on map (with offset=0).

8.0.7.201: Requires requestYBuffer to be set.

requestYBuffer
integer

Oversize loads from vector databases by this much in Y axis. Helps graphics clipping on tile borders. Reserves this*sizeMode space from symbol center in vertical dimension.

8.0.7.201: Requires requestXBuffer to be set.

priority0integerLayer draw order priority. Larger values are drawn on top of lower values. Default for activated features is 10, for hovered features 20, and for layer features names 40. In old UI lines are still drawn always on top of polygon fills and points/texts on top of those. Added in 7.0.71.0.
text
stringText that should be used as the feature label with show names function. Added in 8.14
textRotation
Integer 0-360Label rotation angle. If empty, linestring labels are rotated to be along the linestring. Added in 8.14
fontBackgroundColor
stringText background color
fontBackgroundOpacity
double 0-1Text background opacity
arrow
start/end/bothAdd an arrowhead to linestring start/end/both start and end. Added in 8.12 
arrowSize15doubleArrowhead size in pixels or meters. Added in 8.12 
extrudedHeight0doubleExtrude polygons to this height in meters when in 3D mode. Added in 8.14
externalModel
stringUse this .glb model URL in 3D mode to draw the point feature. Added in 8.14
modelScale1doubleScale the glb model by this value. Added in 8.14
heightReferenceclampclamp/none/relativeSet point feature height reference in 3D mode. Clamp = Clamp to terrain, None = Use absolute Z values from geometry, Relative = Z value is relative to terrain. Added in 8.14

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
}