Trip Map
Who it’s for
Anyone reconstructing a journey — a delivery route that took longer than it should have, a service vehicle’s day, an asset’s movement between sites. The reader is not asking where it is now but where it went, and the playback control is what turns a static path into an account of the trip.
What it does
The Trip Map draws an entity’s path over the dashboard’s time window and animates a marker along it under a timeline control. The marker rotates to face its direction of travel, the timeline can be scrubbed or played at speeds from 1× to 25×, and a timestamp shows the moment being replayed.
- Playback, not just a path — the timeline control is what lets a reader watch a journey unfold and stop at the moment something happened.
- The marker rotates to its heading, so direction of travel is visible without arrows on the line.
- Playback speeds from 1× to 25× cover both a close look at a manoeuvre and a whole day in a minute.
- The path can be decorated with direction symbols and its color can follow a key, so speed or status is drawn into the line itself.
- Individual points can be shown with their own tooltips, for reading the reported positions rather than the interpolated path.
- A snap-to-location filter can pin the marker to real reported points rather than interpolating between them.
- The Trip Map replays one window: comparing two journeys means two widgets, and the current position of a fleet belongs on the Map.
How to set up
Data keys
The Trip Map takes a position series per entity from the keys named in the trip layer.
| Key | Role | Type | Description |
|---|---|---|---|
latitude | The path’s north-south coordinate over time | Timeseries | Timeseries only — the widget plots history. The key name is configured on the trip layer. |
longitude | The path’s east-west coordinate over time | Timeseries | As above. |
| Additional keys | Values used in tooltips and path coloring | Timeseries | Any keys the tooltip patterns or the path color function reference. |
The path covers the dashboard’s time window, so the window is the trip. Set it to the journey being reviewed rather than to a rolling period, or the playback starts and ends at arbitrary points.
Timeline
| Setting | Default | Effect |
|---|---|---|
| Show timeline control | On | Displays the playback bar |
| Time step | 1000 | The granularity of playback, in milliseconds |
| Speed options | 1, 5, 10, 15, 25 | The playback speeds offered |
| Show timestamp | On | Prints the moment being replayed |
| Snap to real location | Off | Pins the marker to reported points rather than interpolating |
| Rotate marker | On | Turns the marker to face its direction of travel |
How to customize
- To draw speed or status into the path — set the path stroke color to a function over an additional key, so the line itself carries the extra dimension.
- To show direction on the line — turn on the path decorator and set its symbol, size, color and repeat spacing.
- To show the reported positions — turn on Show points and configure their size, color and tooltip.
- To review a slow manoeuvre — reduce the Time step, which increases playback granularity.
- To avoid implying positions that were never reported — turn on Snap to real location, optionally with a filter function.
- To use a vehicle image instead of a shape — set the marker type to an image and supply it, keeping Rotate marker on.
- To open on the whole journey — leave Fit map bounds on so the map frames the entire path.
Tips
- Turn on Show points whenever the reporting interval is coarse. The drawn path is a straight line between reported positions, and without the points a reader cannot tell a vehicle that genuinely drove that way from one that reported twice ten minutes apart.
- Color the path by speed before reaching for any other diagnostic. A journey’s problem is almost always visible as a stretch of the line in the wrong color, and it locates the moment far faster than scrubbing the timeline does.
Share Your Widget with the Community
Built a custom widget? Export it as a JSON from ThingsBoard and publish it to the IoT Hub through a simple 4-step wizard (Upload, Listing, Readme, Review & Submit). Share it with thousands of ThingsBoard developers worldwide and get featured in the catalog.