shadcn.io is not affiliated with official shadcn/ui
Commute Calculator Map Block for React
A draggable Home pin on a drawn street map with four workplaces; a Drive, Transit or Bike toggle turns each straight leg into minutes, and the workplaces re-rank fastest first with bars.
Installation
Overview
Show house hunters what the commute would be from the spot they are looking at, with this commute calculator map for React with Base UI. Pacefield, a house-hunting commute tool, draws the invented town of Corvenham as an SVG street map with a canal and a park, four workplaces as lettered squares and a round Home pin. Drag Home with a mouse, pen or finger, or focus it and move it with the arrow keys, six units a step and thirty with Shift, and press Escape to put it back. A Toggle Group picks Drive, Transit or Bike; each leg becomes minutes from the distance, a street detour and a typed pace for the mode, plus a typed wait for transit. Each leg is a dashed line with its minutes on it, the workplaces are listed fastest first with a bar and a distance, and the average sits beside the toggle. Pressing a row draws its leg solid. A polite message speaks the result once Home rests. It's built from Toggle Group and Guides, with a CSS entrance only. For property, relocation and recruiting apps.
FAQ
How do I move Home without a mouse?
Focus the Home pin with Tab. The arrow keys move it 6 units, Shift with an arrow moves it 30 and Escape returns it to where it started; it stays inside the map. The pin is named by its nearest workplace and distance, described by a hint that lists the keys, and announced as a movable pin. Pointer drag uses pointer capture, so the pin keeps following the pointer outside itself, and touch drags it without scrolling the page while it is held.
How are the minutes worked out?
minutesOf takes the straight-line distance in kilometres (drawing units over UNITS_PER_KM), multiplies it by DETOUR because streets are rarely straight, divides by the mode's pace in MODES and adds the mode's wait. It is a sketch for the demo, not a route: no routing service is called. In your app, replace it with travel times from your routing or transit provider and keep the rest.
How do I use my own workplaces and modes?
Edit WORKS (a code, a name and a position in the drawing's 480 by 360 units) and MODES (a label, a pace in km/h, a wait in minutes and the words for the status line). The legs, the rows, the bars and the average all read those two lists.
Is there another way in to the workplaces?
Yes. The ranked list is the text equivalent of the map: one button per workplace with its name, minutes and distance, pressed to draw its leg solid. The workplace pins on the map are a pointer shortcut and are skipped by the Tab key.
What stays local in the demo, and how do I wire it up?
All of it. The town, the offices and the paces are invented, nothing asks for the device's location and nothing is requested from a server. In your app, let people type or search an address, project it onto your map, and fetch the four travel times when the pin rests; keep this list as the display.