shadcn.io is not affiliated with official shadcn/ui
Fleet Tracker Map Block for Solid
A shift replay for six trucks on a drawn street map: a time-of-day slider from 06:00 to 18:00 places each truck by its schedule, a vehicle list shows driving, stopped, break or parked, and an optional Play steps through the day.
Installation
Overview
Replay a whole shift and see where every truck was, with this fleet tracker map for Solid with Ark UI. Haulwick, a trucking fleet tool, shows a framed window with no sidebar: a vehicle list at the start, an SVG street map of an invented town beside it, and a slider under the map. Six trucks follow typed routes; each has a list of calls (a depot, a drop, a break) with arrival and leaving times, and between two calls it moves at an even pace along its route. Dragging the "Time of day" slider from 06:00 to 18:00 in ten minute steps puts each truck where its schedule says, draws the route behind it solid and the rest dotted, and updates the list: driving to the next call, stopped, on break or parked. Choosing a truck rings its pin and lists its calls with their times. An outline Play button advances the time ten minutes every half second, up to 72 steps, stops at 18:00, and does nothing but say so under reduced motion. It's built from Slider, Badge, Button and Guides, with a CSS entrance only. For trucking, logistics and field-service tools.
FAQ
How is a truck's place worked out?
Each truck has a route (a list of points along the streets) and calls at some of those points with an arrival and a leaving minute. Before a truck's leaving time it is at the call; after it, the share of the way to the next call is the time travelled over the time allowed, and that share of the route's length decides where along the lines it is. After its last arrival it is parked there.
How do I use my own trucks and schedules?
Edit SCHEDULES: each string is a name, the route as x,y points in the drawing's 480 by 360 units, and the calls as point|place|arrive|leave|kind with minutes of the day. The pins, lines, list and call lists all read it, and the slider's range is FROM and TO.
How does Play work, and what about reduced motion?
Play moves the time on by one step every half second, at most 72 steps, and stops by itself at 18:00; pressing it again before then pauses it, and dragging the slider pauses it too. When the visitor asks their system for reduced motion the button does not start anything and the status line says to use the slider instead.
Can I use it without a mouse?
Yes. The slider takes the arrow, Home, End and Page keys and speaks the time ("11:20"); the vehicles are buttons that stay pressed when chosen. The pins are a pointer shortcut, and the list says the same things in words.
What stays local in the demo, and how do I wire it up?
All of it. The routes and times are typed samples, nothing is tracked and nothing is sent. In your app replace statusAt with positions from your telematics feed, keep the slider as a history scrubber and drop Play, or make it step through recorded points.