Skip to content

Marker & Path Display Rules ​

Map View includes a powerful rule-based system for customizing how markers and paths appear on the map. These are called Display Rules.

How Display Rules Work ​

Each display rule consists of a query and a set of visual properties. When Map View decides how to display a marker or path:

  1. Start with the Default rule's properties (e.g. a blue marker with a circle icon).
  2. Evaluate each subsequent rule in order.
  3. For each rule whose query matches the marker/path, overwrite only the properties that rule defines.

Example: The default rule sets a blue marker with an fa-circle icon. A rule tag:#food sets only the icon to fa-utensils. The resulting marker is blue (from default, not overridden) with a utensils icon (from the food rule).

Editing Display Rules ​

Open the plugin settings and click the button under "Marker & Path Display Rules".

You'll see the list of active rules. You can:

  • Add new rules
  • Change the order of rules (the Default rule is always first)
  • Edit existing rules

When editing a rule, all properties are optional — only set the ones you want this rule to override.

Marker Icon Properties ​

Icons are based on emojis or Font Awesome icons. Marker shapes, colors, and sizes are based on Leaflet.ExtraMarkers.

An additional simple-circle shape draws a circle at the given color without a pin.

Example: To give #travel-tagged markers a bus icon:

  1. Add a display rule with query tag:#travel.
  2. Click Edit, search Font Awesome for fa-bus, enter it in the 'icon' box.

Or paste an emoji directly into the icon name box (e.g. from Emojipedia).

Additional marker properties:

  • opacity — controls marker transparency

Marker Badges ​

Badges are small circles added to marker corners based on matching display rules. Up to 4 badges per marker are supported.

Natural Use Case

If you have an icon for #food markers, add badges for vegan options, gluten-free, dog-friendly, etc. — each from a separate display rule.

Adding a Badge ​

In the display rule edit dialog, paste an emoji or up to 2 characters into the Symbol box.

Badge properties:

  • Symbol — emoji or 1-2 character text
  • Text color — color of the symbol
  • Background color — badge background
  • Border — CSS border string, e.g. 1px solid black

Matching badges appear starting from the top-left corner, clockwise.

Performance

Hundreds or thousands of badges rendered at once can be resource-intensive, especially on mobile. Consider increasing the "max cluster size in pixels" setting if performance degrades.

Path Properties ​

Paths work the same way: the default rule applies first, then matching rules overwrite properties.

Most useful path properties:

PropertyDescription
colorLine color (CSS color string)
weightLine width in pixels
opacityLine opacity (0.0–1.0)

A full list of path properties (for advanced JSON editing) is in Leaflet's path documentation.

INFO

Stand-alone path files don't support tags -- only inline paths do. Use name or linkedfrom queries to style stand-alone path files.

Example: Have a central note "My Runs" that links to all your GPX files. Use the display rule query linkedfrom:"My Runs" to style these paths red.

Paths do not support badges.

Advanced: Editing Rules as JSON ​

The Edit Rule dialog has a "Edit as JSON" option that exposes additional properties:

  • Extra marker icon options from Leaflet.ExtraMarkers
  • Full path options from Leaflet path docs
  • The cssFilters badge property: accepts a CSS filter string, e.g.:
    json
    "cssFilters": "grayscale(100%) brightness(0.8)"
    This makes an emoji badge grayscale and slightly dimmer.