"/home/yossef/notes/git/projects/maplibra/modules/Path Renderer.md"

path: maplibra/modules/Path Renderer.md

- **fileName**: Path Renderer
- **Created on**: 2026-06-16 00:48:42

Path Renderer

Purpose: Renders computed routes as animated GeoJSON LineString layers on the map.

Related: ../Home.md, ../Architecture.md, ./Pathfinding.md, ./Map Rendering.md

What It Does

PathRenderer (src/path-renderer.js) takes the smoothed route coordinates produced by the pathfinding engine and displays them as map layers. It handles route lines, outdoor segments, animation, and theme updates.

Components

Route Rendering (src/path-renderer/route.js)

• Manages route state (start, target, segments, current floor)
• Computes route metrics (distance, duration, step count)
• Handles route clearing and updates

Layers (src/path-renderer/layers.js)

• Creates Mapbox sources and layers for route lines
• Updates source data when route changes
• Applies theme colors to route lines
• Handles indoor and outdoor segment styling

Animation (src/path-renderer/animation.js)

• Progress animation along the route line
• Interpolates position for "follow route" mode
• Smooth transitions between segments

Metrics (src/path-renderer/metrics.js)

• Calculates route distance, estimated duration, step counts
• Generates step-by-step navigation instructions

Route Data Structure

Routes are stored as GeoJSON FeatureCollection with LineString features per floor:

• Each feature has floorId property for visibility filtering
• rawSegments, smoothedSegments, renderedSegments for diagnostics
• Route traces store compact coordinate samples for debugging

Important Files

• src/path-renderer.js — Main PathRenderer class
• src/path-renderer/route.js — Route state management
• src/path-renderer/layers.js — Map layer creation and updates
• src/path-renderer/animation.js — Progress animation
• src/path-renderer/metrics.js — Distance, duration, step metrics
• src/path-renderer/utils.js — Helper utilities

How It Connects

• PathRenderer is created by PathfindingController and stored as this.renderer

• PathfindingController calls renderer.ensureLayers() on init and renderer.setActiveFloor() on floor change

• Route smoothing results are passed to renderer.updateSourceData()

• Theme changes call renderer.setTheme() to update line colors

• PathRenderer is separate from LayerManager — it owns its own Mapbox sources and layers

  continue:[[]]
  before:[[]]