Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Map blocks

Pro

Driver Assignment Map Block for Vue

Eleven stops assigned to five drivers by a select on each table row: every driver has a capacity bar that says 'Over by 20 kg' with a warning icon, and its own route line style on a drawn street map.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Balance a day's deliveries across a team, with this driver assignment map for Vue with Ark UI. Haulmoor, a courier operations tool, draws the invented town of Bellhaven as an SVG street map with a depot, eleven stops and five drivers. Each stop has a weight, and a native Select on its table row assigns it to a driver. Each driver has a capacity in kilograms and a bar that fills as stops are assigned; past the capacity it says "Over by 20 kg" with a warning icon and the words, and the heading says "2 drivers over capacity". Each driver's route goes from the depot to the nearest unvisited stop each time and has its own line style (solid, dashed, dotted, long dash and dash-dot), so no colour is needed; a stop's pin carries its driver's letter. The table shows five rows, then "Show 6 more". It's built from Native Select, Button and Guides, with a CSS entrance only. For dispatch, logistics and field-service apps.

FAQ

How is over capacity shown?

By words and an icon as well as the bar. overOf is the load minus the capacity, floored at zero. The bar is full, the line under it reads "Over by 20 kg" next to a warning icon, and the heading counts the drivers over capacity. The line keeps its space when it is hidden, so nothing moves when a stop changes hands.

How are the routes drawn?

visitsOf starts at the depot and picks the nearest unvisited stop each time, and routeOf joins them. It is a simple rule for the sketch, not an optimised route. The dash of each driver in DRIVERS is the line style, shown again as a small sample in the driver's cell.

Can I assign stops without the map?

Yes, and that is the way in: each table row has the stop's name, its weight and a driver select, and the pins on the map are a pointer shortcut that mark the row. A pin for a row hidden under "Show 6 more" opens the rest of the table.

How do I use my own drivers and stops?

Edit DRIVERS (a letter, a name, a capacity and a dash pattern), STOPS (a name, an area, a weight, a starting driver and a position) and DEPOT. The bars, the routes and the counts are derived.

What stays local in the demo, and how do I wire it up?

Everything: assigning a stop changes this tab's state and the polite message says nothing was sent to a driver. In your app, call your dispatch API from assign, and keep the capacity check as a warning rather than a block.

How does it look on a phone?

The map comes first, then the driver cells in two columns, then the table with the area column hidden. The first five rows show, and "Show 6 more" is a button that says whether the rest are shown.

All 100 map blocks