Fleet management

Build with Vlak
City deliveriesDogpatch / San Francisco
Local dispatch desk11:42 / supplied records
Selected vehicle

Van 04Moving

20th street22nd street23rd streetThird streetDogpatchPier 70San Francisco Bay
Loading mapSupplied positions
Dogpatch, San FranciscoSupplied vehicle positions
Selected route
DriverJules
Next stopMinnesota studio
Recorded arrival11:54
100%
Recorded 11:42
Local snapshot · no vehicle commands0 notes saved in this tab

Filter vehicles → inspect a route → save a dispatch note

View source
About this download

A standalone Vite and React project using Vlak 0.5.0. Extract the ZIP, open its folder, then run npm install and npm run dev. Requires Node 22.12 or newer.

Vehicles and telemetry are sample records. Without a Mapbox token the map uses a local preview. Dispatch notes do not send vehicle commands.

With a public token, map rendering and street routes use Mapbox services. The Mapbox script, styles, tiles and Directions requests require network access and your own Mapbox account configuration.

Installation and base examples

Inside the interface

A dispatch workspace centered on San Francisco’s Dogpatch neighborhood. Search or filter the sample fleet to update both the list and map markers, then inspect one vehicle’s route, recorded arrival, and battery. Pan and zoom the map or open a trip to save a dispatch note. Missing arrival times remain explicitly unavailable.

Vehicle positions, battery levels and times are sample records. Mapbox Directions supplies street routes between the sample stops. Drafts and saved dispatch notes are independent for each vehicle. No live feed is connected and no vehicle command is sent.

Watch the 20-second walkthrough

A short walkthrough of the working fleet management study.

Components used

Use this as a starting point

Build with Vlak

Install the components, add the stylesheet, and bring your own content. The study’s source shows how the pieces fit together.

React componentsCSS includedMIT licensed

Download the Fleet management starter

Install the package
npm install @noorddev/vlak-react
import "@noorddev/vlak-react/css";
Installation guide View study source

Start with your coding agent

A ready-to-use brief with this study, Vlak’s components, and the design guide.

Component modifications

  • Input and Select filter vehicles by name, driver, location, and supplied status. The same filter controls visible map markers and keeps the selected record consistent.
  • Mapbox GL JS supplies geographic context in a monochrome map. Vlak vehicle icons and accessible buttons mark the sample fleet; Canvas controls keeps zoom and reset synchronized with the map camera.
  • Textarea keeps a separate dispatch draft for each vehicle. Buttons save local notes and move between the focused Vehicles, Map, and Trip screens with Back focus restoration.
  • On mobile, Vehicles, Map, and Trip are separate destinations in bottom navigation. Selecting a vehicle opens its map; trip details preserve all supplied stops, battery, arrival text, and the vehicle’s dispatch note. Back returns focus to the map’s trip action.