TrackIt is a lightweight, open-source web application for visualizing GPS tracking data from devices connected to the flespi platform. It offers a flexible and interactive interface to monitor devices in real-time and review historical telemetry.
For advanced setups, you can also host your own instance using the open-source repository.
Interface Overview
The TrackIt user interface is composed of several key panels designed for usability and clarity:
Map (Center Area)
The map is central to the interface and shows:
The current position of selected devices.
Tracks of device movement over a selected time period.
The map is powered by Leaflet using OpenStreetMap as the default tile provider.
Interactive elements include zoom controls and a distance measurement tool (ruler) located at the top-left corner.
Device List (Left Sidebar)
Displays all devices available under your flespi account/token.
Allows selecting one or multiple devices to view their tracks.
Supports filtering by name.
Telemetry Panel (Right Sidebar)
Shows live or latest telemetry values from the selected device.
Includes key parameters such as speed, coordinates, battery, sensor values, and more.
Auto-refreshes with incoming data.
Message Table & Track Player (Bottom Panel)
Message Table:
Lists raw incoming messages for the selected device(s).
Allows users to inspect timestamped message contents.
Clicking a message highlights its position on the map.
Track Player:
Allows playback of device movement along a track.
Includes controls for:
Play/pause
Scrubbing through time
Selecting a custom date/time window
Top-Right Controls
- Interface menu: Enable/disable various UI panels (telemetry, messages, player, etc.).
Date picker: Select a time range to display tracks and telemetry.
Layer selector: Choose map tile layers (if configured).
URL Parameters
TrackIt supports various URL parameters to control interface visibility and the data shown — great for sharing links or pre-configuring views.
Interface Toggles (true/false)
| Parameter | Description |
hidelist | Hides the device list panel |
names | Toggles device names on the map |
player | Shows/hides the track playback panel |
messages | Shows/hides the message table |
telemetry | Shows/hides the telemetry sidebar |
daterange | Shows/hides the date selector at the top |
Example:
?hidelist=true&names=false&telemetry=true
Data Display Controls
| Parameter | Description |
invalid | If true, includes messages with position.valid = false in the track |
from | Start timestamp (Unix time in seconds) for the data window |
to | End timestamp (Unix time in seconds) for the data window |
Example:
?from=1722441600&to=1722527999&invalid=false
Supported Routes
TrackIt uses a flexible routing system to support direct access via token and device parameters in the URL:
| Route Pattern | Purpose |
/ | Main app layout |
/devices/:devices | Load specific device(s) |
/login | Login page |
/login/:token | Login using flespi token |
/token/:token | Same as above (alternate path) |
/token/:token/devices/:devices | Load devices and authenticate via token |
/login/:token/devices/:devices | Login and load devices together |
Example:
https://trackit.flespi.io/token/abc123/devices/123456,789012?telemetry=true&from=1722441600&to=1722527999
This example loads two devices using token abc123, shows the telemetry panel, and sets a custom time window.