About this block

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.

When to use

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

• App shell
• Filters and search

After

• Territory list
• Activity feed

What you can display

One strong use is the courier route in progress. Other route planner surfaces:

• Field service day plan. A technician's visits in order with job windows instead of delivery ETAs.
• Sales visit loop. Account stops for a rep's day with meeting times on the right rail.
• Shuttle schedule. A fixed loop where every stop repeats and the totals strip shows headway instead of a final ETA.

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.