Skip to content

Styles Editor

Mapworks has a powerful styling editor that allows the map designer a large degree of freedom when styling a layer. And because of the novel way Mapworks renders vector data on the browser, the changes can be previewed in real time and can be restricted either to the current map or be saved back to the underlying layer object (which will impact any other map using that layer). Some of the things that can be configured include:

  • Outline / inner (fill) / label / texture colour
  • Outline / point size
  • Outline / inner / texture opacity
  • An optimisation that restricts the drawing of very small features
  • Label visibility scale, font and text format
  • Label halos, including colour, radius and opacity
  • Tooltip (mouse over) text format
  • Texture fill
  • Line cap, join and dash style
  • Glyph url for custom point symbols

These styles can be stacked on top of each other to create complex styling (such as piped roads). They can also be defined separately for default, active (mouseover), selected (using the selection tools or when zoomed to) or navigation (when the map is being panned / zoomed) styles. And to top it all off, styling can be further customised in the advanced menu, which allows for styles to be defined using a JavaScript expression!

To open the Styles Editor:

  1. In the sidebar, select the Layers tab
  2. Right click the layer and click Styles

Right click to see more Layer options

You will be presented with the window below:

Layer styles menu

See below for more information on each style tab:

TabDescription
Layer StatesStyling configurations applied differently depending on how a user interacts with features
GeometryColour, Size, X/Y offset, Rotation, Opacity
LabelsLabel/Tooltip Format, Size, Colour, Font, Placement, Priority
GlyphsSVG Icon URL, Colouring Mode
TexturesPolygon tiled texture / Point Icon
HaloLabel Halo Colour, Size, Opacity
Line StylingLine Cap, Line Join, Line Dash, Scale-dependent width, Line Markers
ClustersCluster Colour, Size, Fan Out Point Size
Advanced (Style Expressions)Javascript Expressions