The graph data has levels array on nodes and level field on edges. Now I'll implement the Level Indicator component and floor transition visualization.
First, let me create the LevelIndicator component:
Now create a VerticalTransitionMarker component for elevator/stairs icons:
Now update MapboxMap to detect floor transitions, render dashed lines, add transition markers, and track current level:
Now let me update MapboxMap to import and use the LevelIndicator component:
Now add state tracking for current level and vertical transitions:
Now add logic to detect floor transitions and build vertical transition markers:
Now add the LevelIndicator and VerticalTransitionMarker components to the JSX:
I've successfully implemented the complete Level Indicator system for the Toronto PATH navigator:
LevelIndicator Component (LevelIndicator.tsx):
VerticalTransitionMarker Component (VerticalTransitionMarker.tsx):
MapboxMap Integration:
level fields on edges with levels arrays on nodescurrentLevel state from the first node in the highlighted route