Delivery Route Map
A static street grid with the traveled route solid and remaining route dotted, beside a live stops away count, driver card, and stop list.
A static street grid with the traveled route solid and remaining route dotted, beside a live stops away count, driver card, and stop list.
Search blocks by description or jump to a page.
The source for every Ecommerce block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
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.
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
After
One strong use is the three stops away in transit view. Other route states:
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.