Map Block React component
A live delivery map for a dashboard: a drawn city with river, parks and roads, drivers moving along dashed routes that fill in as they go, stops that tick off, a sidebar with ETAs and progress, filters for on-time and delayed, click to zoom to a driver with a stops card, drag to pan and zoom controls.
About the Map Block component
Map Block shows deliveries moving across a city in real time. Each driver follows a dashed route that turns solid behind them, stops tick off as they pass, and the sidebar lists everyone with their next stop, ETA, status and progress.
Click a driver and the map glides in to them, fades the other routes and opens a card with their stops. Drag to look around, use the zoom buttons or double-click, and filter to only on-time or delayed drivers. The city is drawn in SVG, so there are no map tiles, keys or extra libraries.
When to use it
Use it in delivery and courier dashboards, field service and fleet tools, ride or logistics back offices, or as a live status visual on an operations page.
For real streets, swap the drawn city for your own SVG or a static map image and project coordinates into the same space.
Installation
Add the Map Block component to your project with the shadcn CLI. It lands in components/map-block.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/map-blockOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<MapBlock /> accepts 5 props, all optional.
| Prop | Type | Default |
|---|---|---|
| title | string | "Live deliveries" |
| deliveries | Delivery[] | DEFAULT_DELIVERIES |
| paused Pause the simulated movement. | boolean | false |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- titlestringDefault: "Live deliveries"
- deliveriesDelivery[]Default: DEFAULT_DELIVERIES
- paused
Pause the simulated movement.
booleanDefault: false - theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Map Block FAQ
- Does it use a map provider?
- No. The city, river, parks and roads are plain SVG shapes in an 800×520 space, so it renders anywhere without API keys. Replace them with your own drawing if you need a real place.
- How do drivers move?
- Each delivery has a route, a start position and a speed. An interval advances them while the block is not paused. For live data, set start from your tracking and speed to 0, and update the deliveries prop as positions arrive.
- What happens when I click a driver?
- The view springs to centre them at double zoom, other routes dim, and a card lists their stops with the passed ones struck through. Click again, press × or Reset view to go back.
- Can I pan and zoom?
- Yes. Drag the map to pan, double-click or use + to zoom in, − to zoom out and the reset button to fit the whole city. Panning is clamped so the map never leaves the frame.
- Is it accessible?
- The map has a text label, drivers in the list are toggle buttons with progress bars, zoom buttons are named, filters are a radiogroup and the driver card is announced when it opens. Movement stops for reduced motion.
