Route Planner
Ordered stop timeline with per leg distances and ETAs beside a static map tracing the route with numbered markers and a vehicle dot.
Ordered stop timeline with per leg distances and ETAs beside a static map tracing the route with numbered markers and a vehicle dot.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Route Planner is the delivery route panel, an ordered stop timeline (Depot 12 departed at 8:04 AM, Fern & Co. badged as the next stop, Marlow Coffee and Beacon Books scheduled) with per leg distance and drive time between rows, beside a static map blueprint that traces the route as right angle street segments with numbered stop markers and a live vehicle dot. The completed leg renders solid, the remaining legs render dashed, and a totals strip carries distance, drive time, stops completed, and final ETA.
Stops are one array with SVG coordinates, status, time, and leg fields, so the timeline, the map markers, and the header counts stay in sync from a single source. The map is self-contained inline SVG with no tile provider or embed.
Reach for this block in dispatch consoles, courier apps, and field service tools where someone tracks a route with several stops in progress. Wire the stop array to your routing API and move the vehicle dot and the solid leg boundary from live telemetry.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the courier route in progress. Other route planner surfaces:
Tip: keep completed stops in the list instead of removing them; the solid leg plus the check markers is what tells the story of progress at a glance.