The Style Editor view is used to modify a new or existing style (symbology) for rendering vector features on the map.  Each vector layer on the map has a style, and the style can be assigned from an existing style in the Styles Library or can be modified as a custom style.

The Style Editor can be invoked for layers on the map to change how they are displayed, or for styles in the Styles Library ready to be easily assigned to map layers later on.

Modify Style for a Layer on the Map

  • Navigate to the Map Layers view
  • Tap the Style swatch next to the layer for which the Style should be edited
    • The list of styles for that layer is displayed; by default each layer has only one style that is used for all map scales, but a layer can have multiple styles for different map scales
  • Either:
    • Tap the Style swatch next to the scale for which the Style should be edited
      • The Style Editor will be displayed
    • Tap the ‘+’ button (bottom toolbar) to add another scale-dependent style
      • Select the method for initially configuring the new style:
          • Default Style – start with the default style (a simple grey-based style that works for points, lines and polygons)
          • Select from Style Library – start with a style that already exists in the style library
          • Paste – start with a style previously copied to the pasteboard
        • The Style Editor will be displayed
      • Enter the maximum scale for this style as the Style Name, or 0 (zero) for no maximum scale
  • See below for further instructions on how to use the Style Editor

Modify Style in the Styles Library

  • Navigate to the Styles section of the Settings view
    • The list of styles in the Styles Library will be displayed
  • Tap the Style swatch next to the style to be edited
    • The Style Editor will be displayed
  • See below for further instructions on how to use the Style Editor

Add a New Style to the Styles Library

  • Navigate to the Styles section of the Settings view
    • The list of styles in the Styles Library will be displayed
  • Tap the ‘+’ button (bottom toolbar in the Styles Settings  view)
    • The Style Editor will be displayed
  • See below for further instructions on how to use the Style Editor

Components of a Style

Each style consists of a combination of at least one of the following style configuration components:

  • Symbol – a shape or image
    • used for point features only – ignored for lines and polygons
    • multiple symbols can be included in a style and will be displayed overlaid over each other (useful to display an outline in a different colour, for example)
  • Line – definition of how lines should be draw (including colour, width, dashes pattern)
    • used for line features and for the outline of polygon features – ignored for points
    • multiple lines can be included in s a style and will be displayed overlaid over each other (useful to display a line-within-a-line of a different colour, for example)
  • Fill – a colour
    • used to fill within polygon feature areas – ignored for points and lines
  • Label – text to display for each feature
    • can include field values and calculated values

Using the Style Editor to Modify a Style

  • View the style in the Style Editor
    • See above for instructions on how to invoke the Style Editor for Map Layer styles and for styles in the Style Library
  • In the ‘Style Name’ field, enter a unique name for the style
  • Use the component switcher (near the bottom) to switch between editing symbol, line, fill or label component of the style
  • Use the switch (near the top) to include or exclude the currently viewed component from the style
  • Continue editing each style component as desired, referring to further instructions in the various sections below
  • Tap ‘Save’ (top toolbar)

Multiple Symbols and Multiple Lines

  • Use the ‘Add Shape’ and ‘Add Pen’ button (near the top) to add more Symbol and Line components, respectively
  • Use the shape or pen switcher to switch between multiple Symbol or Line components, respectively (only visible if there are multiple Symbols/Lines)
  • Use the ‘Delete’ button to delete the Symbol or Line component currently being edited (only visible if there are multiple Symbols/Lines)

Change a Colour

Several elements of each style component can have a colour set in the same way:

  • Tap the colour channel to be changed:  Red, Green, Blue, Alpha (ie, transparency)
  • Drag the slider to the desired value for that channel (from 0 to 255)

Symbol

  • Tap the ‘Shape’ item to select a new symbol, as either
    • Simple Shape
      • Select from the circle, square, triangle or star shapes (outline or filled) in the list
    • Character or Emoji
      • Type a single character – emoji or extended characters are most useful, as they include a wide variety of small images suitable for use on many maps
    • Custom Image
      • Select from any of the custom images that have been added to the Style Images pool
        • Images must have already been added to the images pool – see, ‘Add Style Symbol Image’ in the ‘Styles Library’ section of the Settings page
  • In the ‘Size’ field, enter the size of the image (in view points)

Line

  • In the ‘Width’ field, enter the width of the line (in view points)
  • In the ‘Dashes’ field, enter a series of numbers representing the dash-line and dash-gap lengths that should repeat to form a pattern of dashes (in view points)

Label

  • Enter the text of the label as either:
    • Simple text to use the same label text for each feature
    • Field titles enclosed in curly braces (“{” and “}”) to use the attribute field values
    • Calculations enclosed in square braces (“[” and “]”) preceeded by equals sign (“=”) to use the results of calculations based on numeric field values or literal numbers
      • Supported calculation operators include:
        • + (add)
        • – (subtract)
        • * (multiply)
        • / (divide)
    • OR, any combination of the above
    • Example:
      • =[{Speed_mps} * 3.6] km/h {Title}
        1. Substitutes the value of the ‘Speed_mps’ field (a default field in track point layers) and substitutes the value of the ‘Title’ field
        2. Multiplies the ‘Speed_mps’ value by 3.6 (to convert it from metres-per-second to kilometres-per-hour)
        3. Puts it all together resulting in label text that could look like:
      • 110 km/h Driving Past Tunbridge
  • In the ‘Size’ field, enter the size of the label text (in view points)
  • In the ‘X Delta’ and ‘Y Delta’ fields, enter the horizontal and vertical offsets for the text’s anchor point (use negative values to offset left/down)
    • Offsetting labels is recommended for points features when using a Symbol style component, to avoid having the symbol obscured by the label
    • Offsetting labels is useful for line features to have the label sit away from the line instead of directly on the line
  • Use the anchor item to configure where within the label text (top, bottom, centre, left end, right end, etc) should be placed on the feature point (or at the offset configured for the label)

Share or Copy a Style

  • Tap the Share/Action button (bottom toolbar) from within the Style Editor

  • Tap ‘Copy’ to copy the style to the pasteboard
  • OR, tap one of the other buttons to share the style with another user using which ever method is preferred

Paste a Copied Style

Note that pasting a style in the Style Editor will replace the style currently being edited with the pasted style, not add a new style.  To add a new style to the Style Library, go to Settings and paste the style into the Styles view there.

  • Copy a Style
    • Copy from the Style Editor as above
    • Or, Copy the coded text of a style from an email, message or other source where it has been sent or pasted
  • Tap the Paste button (bottom toolbar)

Replace Style with a Style from the Style Library

This is a quick way to select an existing style from the Style Library, and is usually used to select a style for a layer in the Map Layers view (ie, for a layer already added to the map).  I can also be used to replace a style in the Style Library (especially a new created style) so that rather than editing all the configuration manually, simply change the elements of the existing (selected) style just enough to make it as different to the other style as desired.

  • Tap ‘Select’ (bottom toolbar)
  • Select the desired Style to use
  • Tap ‘Done’