Navigation & Bearing Lines
Real-time bearing, distance, and direction to any target on the map.
5 min readOverview
GroundWave provides two complementary navigation capabilities: Navigate To (a personal bearing/distance indicator) and Shared Bearing Lines (server-synced lines visible to all connected users).
- Navigate To — a client-side bearing/distance line from your current GPS position to any target, with a floating HUD showing distance, bearing, and cardinal direction.
- Shared Bearing Lines — database-persisted bearing/distance lines that are broadcast to all users in real-time via Socket.IO. Useful for marking directions of interest, threat axes, or approach routes visible to the entire team.
Navigate To
The "Navigate to" feature draws a dashed line on the map from your current position to a selected target. A floating BearingHUD overlay displays:
- Distance — in meters or kilometers (auto-switches at 1 km)
- Bearing — in degrees (0–360°)
- Cardinal direction — N, NE, E, SE, S, SW, W, NW
The line and HUD update reactively as your GPS position changes, powered by Turf.js for geodesic distance and bearing calculations.
How to Navigate To
"Navigate to" buttons appear throughout the interface wherever there is a targetable entity:
- User markers — click a user marker popup and select "Navigate to"
- Markers — from the marker detail view in the Markers panel (uses the centroid for polygons and lines)
- Roster panel — from the user card in the roster list
- Right-click context menu — right-click anywhere on the map to navigate to that coordinate
Click the dismiss button on the BearingHUD to clear the current navigation target.
Shared Bearing Lines
Shared bearing lines are server-persisted and visible to all connected users. Unlike "Navigate to" (which is personal), shared bearing lines are collaborative — any operator or admin can create them, and they appear on every client's map.
Each bearing line stores:
- Start and end coordinates — the two endpoints of the line
- Label — an optional descriptive name
- Distance and bearing — computed automatically from the coordinates
- Creator — the user who created the line
BearingLinePanel
The BearingLinePanel is a slide-out panel accessible from the main toolbar. It lists all active bearing lines with their label, distance, and bearing values. From here you can:
- View all bearing lines created by any team member
- Delete individual bearing lines
- Bulk delete multiple bearing lines at once
REST API
| Method | Path | Auth | Description |
|---|---|---|---|
GET |
/api/bearing-lines |
Any authenticated | List all bearing lines |
POST |
/api/bearing-lines |
Operator/Admin | Create a bearing line |
DELETE |
/api/bearing-lines/:id |
Operator/Admin | Delete a bearing line |
POST |
/api/bearing-lines/bulk-delete |
Operator/Admin | Delete multiple bearing lines |
Socket.IO Events
| Event | Direction | Description |
|---|---|---|
bearing-line:created |
Server → all | New bearing line added. Payload: bearing line object |
bearing-line:deleted |
Server → all | Bearing line removed. Payload: { id } |
Permissions
| Capability | Observer | Operator | Admin |
|---|---|---|---|
| Use "Navigate to" | Yes | Yes | Yes |
| View shared bearing lines | Yes | Yes | Yes |
| Create bearing lines | No | Yes | Yes |
| Delete bearing lines | No | Yes | Yes |
Offline Support
Bearing lines are cached in IndexedDB for offline viewing. When offline, the bearing line list displays from the local cache. New bearing lines created while offline are queued and synced when connectivity is restored.