Routes & directions

Style your route lines

All guides

Once wayfinding is on, the route is drawn as a line that animates across your map. A few settings on the Wayfinding tab control how it looks. They all have sensible defaults, so you can leave them blank — but a little tuning makes the route obvious over busy artwork, and clearly distinct in step-free mode.

The settings, and their defaults

SettingWhat it doesDefault
Line colourColour of the normal route line.A red (roughly #f23543)
Accessible line colourColour used when step-free mode is on. Needs step-free enabled.Light purple (#a99ce0)
Non-accessible (break) colourThe colour you mark stairs with in your artwork — not the route line itself.Unset (nothing avoided)
Line widthThickness of the drawn route line.2
SmoothingHow much corners are rounded off.5
Animation speedHow fast the line draws itself in.1
The break colour is the odd one out here — it doesn't colour the route, it tells step-free routing which marks in your artwork are stairs. It's covered fully in "Set up step-free routes".

Choosing a colour that stands out

The route line has to read clearly over whatever your map is made of. A colour that contrasts with your dominant artwork colours is worth more than a pretty one that blends in. A common trap is a route line the same colour as your walkable paths or your brand fill — it disappears. Pick something the eye jumps to.

  1. Contrast with the background

    If your map is pale, a strong saturated line works; over dark or colourful artwork, a bright or light line reads better.

  2. Keep the accessible line obviously different

    The step-free colour should be instantly distinguishable from the normal line, so a visitor can tell which route they're being shown. That's why the default is a contrasting purple rather than a near-identical red.

  3. Mind the width

    Too thin and the line is lost over detailed artwork; too thick and it hides what's underneath. Nudge Line width up a little for large, busy maps.

Smoothing and animation

Smoothing rounds the corners of the drawn line so it looks like a natural walking path rather than a jagged polyline — you don't need to pre-round corners in your artwork. Higher values round more. Animation speed controls how quickly the line sketches itself in when a route is chosen; lower is slower and more deliberate, higher snaps in faster. The defaults suit most maps; adjust only if the motion feels wrong for your context.

These settings update the live preview as you change them, so tune by eye. When you're happy, publish to make the styling live.