Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Map blocks

Pro

Route Planner Map Block for React Aria

A window with a stop list beside a drawn street map: move, remove and add stops, watch the distance, drive time and arrivals re-derive, and optimise the order to a nearest-neighbour round that says what it saves.

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

Plan a delivery round and see what each change costs, with this route planner map for React with React Aria, shown as a small app window. Pathwright, a delivery-round planner, draws the invented town of Gillingmoor as an SVG street map and lists six stops beside it. Each stop has Move up, Move down and Remove buttons, and the distance, the drive and the arrival time at every stop re-derive on every change from the straight legs, a typed speed and a typed stop time. The top bar's one primary, a Shine Button, optimises the order: it keeps the first stop, visits the nearest unvisited stop each time and says "Saves 4.3 km", with an Undo. A row of three suggested stops adds one at the end, and the map shows them as dashed rings. The window keeps its height whatever you do, and a short status line at the foot says what changed. It's built from Shine Button, Button and Guides, with a CSS entrance only. For logistics, field-service and last-mile apps.

FAQ

What does Optimise order do?

It keeps the first stop where it is and builds a nearest-neighbour order with nearestOrder, then compares the two distances. If the new order is shorter it applies it, shows "Saves 4.3 km" and offers Undo; if not, the status line says "Already the shortest order." Nearest neighbour is a quick rule, not the best possible route, so use a solver in your app.

How are the distance and times worked out?

kmOfRoute adds the straight legs in drawing units over UNITS_PER_KM. The drive is that distance at SPEED_KMH, plus DWELL minutes at every stop after the first, and the arrivals count from START_MINUTES. Moving, removing and adding all recompute them. It is a sketch with no routing service.

Can I reorder without dragging?

Yes: each row has Move up and Move down buttons and Remove, all named with the stop, and focus stays on the button you used after the list changes. The pins on the map are a pointer shortcut and are skipped by the Tab key.

How do I use my own stops?

Edit STOPS (a name and a position in the drawing's 480 by 360 units) and SUGGESTED, and set UNITS_PER_KM, SPEED_KMH, DWELL and START_MINUTES. The list, the route and the pins read them. MAX_STOPS caps the round.

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

Everything: the stops are invented, nothing is sent to a driver and the order lives in this tab. In your app save the order from the move, remove and add handlers, and replace the distance function with your routing service's matrix.

How does it look on a phone?

The window keeps a fixed height. The map sits at the top at a fixed size, the stop list scrolls under it and the suggested stops and the status line stay at the foot. From a tablet up the list sits beside the map.

All 100 map blocks