Appearance
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:
- In the sidebar, select the Layers tab
- Right click the layer and click Styles
You will be presented with the window below:
See below for more information on each style tab:
Tab | Description |
---|---|
Layer States | Styling configurations applied differently depending on how a user interacts with features |
Geometry | Colour, Size, X/Y offset, Rotation, Opacity |
Labels | Label/Tooltip Format, Size, Colour, Font, Placement, Priority |
Glyphs | SVG Icon URL, Colouring Mode |
Textures | Polygon tiled texture / Point Icon |
Halo | Label Halo Colour, Size, Opacity |
Line Styling | Line Cap, Line Join, Line Dash, Scale-dependent width, Line Markers |
Clusters | Cluster Colour, Size, Fan Out Point Size |
Advanced (Style Expressions) | Javascript Expressions |