About this block

Delivery Route Map renders a static street grid blueprint with the route the driver is actually driving, the traveled leg solid, the remaining leg dotted, and a pulsing van marker part way along it, with the last dot labeled as your door. Beside the map sits the human read of that route, a live refresh line, a stops away count at display size, an arrival window, a driver card, and a stop by stop list marking the last delivery, the van position, and your address.

The map is inline SVG built from theme tokens, so it recolors with the palette and ships no map tiles or courier code. The stops are one array of three items with a state field, done, current, and next, which is what lets the block read as a real route rather than a generic tracking bar.

When to use

Reach for this block as the live view on delivery day inside the order tracking flow, once the van is out and the store has stop level position data. The stops away count and the arrival window must come from the carrier feed or the whole promise unravels.

A natural flow around it on an Ecommerce Pro page:

Before

• Tracking timeline on earlier days

After

• Contact routes

What you can display

One strong use is the three stops away in transit view. Other route states:

• Just left the depot. The full route dotted with an early window and no stops away figure yet.
• Next stop is you. One dot remaining, the van marker one block out, a tight arrival window.
• Rural route. A sparser grid, longer legs between stops, the same solid and dotted read.

Tip: label the last dot as your door, not a stop number; the map earns its place only when the destination reads as home rather than a courier waypoint.