Live Tracking
The Tracking page displays all your vehicles on an interactive map with live position updates. Vehicle icons, status indicators, and sensor readings refresh automatically as new data arrives from your GPS devices — no page refresh needed.
Layout
The page is divided into two areas:
- Vehicle List — on the left sidebar (desktop) or via the list button (mobile)
- Map — the main area showing all vehicle positions
Vehicle List
The vehicle list lets you search, filter, and select vehicles. Vehicles are organized by their device group. If a vehicle has no group, it appears at the root level.
Searching
Type in the search box to filter vehicles by name or device name. Results are grouped by their original group.
Vehicle Status Icons
Each vehicle icon is color-coded to show its current status:
| Color | Status | Meaning |
|---|---|---|
| Green | Moving | Speed confirmed above 3 km/h within the last 5 minutes |
| Yellow | Stopped | Vehicle is online but not confirmed moving — includes parked vehicles, devices sleeping at a stop, or brief stops (red light) |
| Red | Offline | No location data at all, or no data received in over 30 minutes |
Hover over the icon to see a tooltip with the status label.
Note: The color updates automatically as new WebSocket data arrives. When a vehicle stops, it may briefly remain green until the next GPS update comes in — this delay depends on the device's reporting interval.
Status Indicators
Each vehicle row can show additional icons on the right side, depending on what the GPS device reports:
- Ignition (engine icon): Green when ignition is ON, muted gray when OFF. Hidden if the vehicle is offline (no data for 30+ minutes, as the reading would be stale).
- Battery icon: Shows current battery level with a matching icon. Charging is indicated separately. Color changes from green → amber → red as the level drops.
- Fuel icon (droplet): Shown when fuel sensors are configured. Displays the combined fuel reading in liters across all fuel sensors, with calibration applied where set up.
- Eco Score (steering wheel icon): Shown when driving score sensors are configured. Color reflects the score range: green (≥ 8 excellent), gray (≥ 6 good), amber (≥ 4 fair), blue (≥ 2 poor), red (< 2 very poor).
- Lock icon: Shown on vehicles not available on your current plan. These vehicles cannot be selected.
Selecting a Vehicle
Click a vehicle in the list to center the map on it and open its popup. On mobile, the list opens in a drawer via the list button at the top-left of the map. After selecting, the drawer closes automatically.
Map
The map is powered by Leaflet with Google Streets tiles.
Markers
Each vehicle appears as a circular marker with a category-specific icon (car, bus, truck, motorcycle, etc.) inside. A direction indicator below the marker shows the vehicle's current heading (course).
When multiple vehicles are close together, they are grouped into a cluster badge showing the count. Clusters break apart automatically when you zoom in past level 17.
Popups
Click any marker to open its popup, which shows:
- Vehicle name
- Device name
- Speed — current speed in km/h
- Fuel — total fuel level in liters (shown only if fuel sensors are configured)
- Eco Score — driving performance score (shown only if score sensors are configured), color-coded by range
- See Details button — opens the full Vehicle Details drawer
Travel Paths
A colored trail (SlateBlue) shows each vehicle's recent path. The trail is kept at up to the last ~0.5 km of travel. Older points are trimmed automatically as the vehicle moves.
Map Controls
- Zoom: Zoom controls at the bottom-right, or pinch/scroll
- Fullscreen: Fullscreen button at the bottom-right
- Layer switcher: Switch between map tile layers
- Auto-fit: On page load, the map automatically zooms to fit all vehicles with known locations
Auto-Follow
When you select a vehicle (from the list or a popup), the map automatically pans to follow it as it moves. This continues as long as the vehicle remains selected.
Vehicle Details
Clicking See Details in a popup opens a searchable details drawer. The data is organized into four sections:
Device Info
GPS device details: name, identifier (IMEI), phone, contact, category, model, status, group, and expiration date.
Sensors
Readings from configured sensors, grouped by type:
- Fuel Sensors: Individual readings per sensor, calibrated values where calibration is set up. If multiple fuel sensors exist, a combined total is shown.
- Eco Score Sensors: Individual and average driving scores across multiple sensors.
Vehicle Info
Vehicle registration details: name, make, model, year, license plate, VIN, type, capacity, and notes.
Attributes
All other raw data reported by the GPS device — altitude, temperature, ignition state, motion, satellites, HDOP, RPM, voltage, power, and any other custom attributes.
Use the search box at the top of the drawer to quickly find any field by name.
Real-Time Updates
The tracking page uses WebSocket connections (one per device) to receive live updates:
- Vehicle positions update instantly as new GPS data arrives
- Status indicator colors update immediately (moving/stopped/offline)
- Popup and details drawer refresh automatically when the selected vehicle reports a new position
- Travel paths extend in real-time as vehicles move
- Auto-follow pans the map to keep the selected vehicle in view
WebSocket connections are opened when you enter the page and closed when you leave — there is no background polling.
Mobile
On mobile devices:
- The vehicle list is hidden by default — tap the list icon (top-left of the map) to open it as a full-screen drawer
- The Vehicle Details drawer slides up from the bottom
- All real-time features work the same as on desktop