Trip Map
Displays an entity’s trip on various map providers, allowing scrolling and animated movement. Supports custom markers, marker tooltips, widget actions, polygons, and circles for enhanced spatial representation.
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.