Route Rendering

How the gold trip line stays visible and smooth across every map style — from the dark default to bright terrain and satellite imagery.

Three-layer line

Every trip segment is drawn as three stacked polylines, each in its own rendering layer:

Layer Colour Width Purpose
Halo dark semi-transparent segment width + 2.5 px Outline that gives contrast on light maps. Invisible on the dark default basemap (dark on dark).
Gold sleeve brand gold (#CCA900) segment width The dominant colour you see. Matches the accent used across the UI.
Bright core lighter gold (#FFD966) segment width − 1.5 px Thin inner stripe that makes the line "glow" on busy satellite imagery where the brand gold alone blends in.

The halo and core are non-interactive — clicks, hovers, and tooltips only target the gold sleeve. All three layers respect the segment's dash pattern (dashed for driving, dotted for transit, etc.) so dashed lines still read as a single stroke.

Why not just change the colour per map style?

Gold is the brand colour. Changing it to neon-yellow on satellite and back to warm gold on dark would feel jarring and break visual identity. The cartographic halo approach — used by most mapping apps — keeps the same hue everywhere and adds contrast structurally.

Smooth routing

Raw GPS recordings are noisy: points jump, cluster, and cut corners around bends. The route is smoothed with Catmull-Rom spline interpolation, which adds curve points between each pair of GPS fixes so the line flows naturally along roads and paths instead of zig-zagging between raw coordinates.

During replay, the marker follows the same curve — it never takes a straight shortcut across a bay or pier even when consecutive GPS points are far apart.

Toggle smooth routing on or off with the Smooth button in the Layers → Display panel on the right side of the map.

Map style adaptation

Switching between Default, Terrain, and Satellite in the Layers panel swaps the tile basemap. The route line itself is never redrawn or recoloured — the three-layer stack handles contrast automatically:

  • Default (dark tiles): halo blends into the dark background; gold sleeve is high-contrast on its own; core adds a subtle warmth.
  • Terrain (light beige tiles): halo pops as a dark outline; gold sleeve sits on top; core adds brightness against the warm tile palette.
  • Satellite (photo tiles): all three layers contribute — the halo separates the line from busy imagery, the sleeve carries the brand, and the core makes it glow against sand, snow, and rooftops.
  • Route smoothing — details on the Catmull-Rom algorithm and when smoothing is applied.
  • Trip replay — how the marker and trail use the same smooth curve during replay.
  • Themes — the accent colour used by the gold sleeve is theme-aware.

Need help? Contact support · Where Is Tereza?