Fleet Tracker Map

An interactive, responsive fleet management dashboard featuring a synchronized sidebar and live map integration using React Leaflet.

Every preview is live: click a vehicle in the sidebar to fly the map to its coordinates, or click a map marker to highlight it in the sidebar.

Fleet tracker

PassfleetData: as { id, location, lat, lng }[] — status (active, idle, maintenance) and speed are optional.
variant"default": is the split view: a fixed sidebar beside the map, synchronised in both directions.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Fleet Map

npx shadcn@latest add @algorize-ui/fleet-map

components/custom/blocks/Fleet-map.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs these for you. Run them yourself only if you are adding Fleet Map to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

leaflet and react-leaflet are npm packages.

npm install leaflet react-leaflet

Examples

Minimal

Setvariant"minimal": to float the vehicle list as a panel over a light map.

Modern

Setvariant"modern": for the Profile Page treatment: an aurora behind the whole tracker, the vehicle list as a frosted slab, and the map in a glass-edged panel.

Features

Explore the Fleet Tracker map features, including live marker positioning, custom tooltips, and interactive geographic visualization.

Customizable

Easily adapt the component's styling and behavior to fit your application's unique design system.

Accessible

Built with accessibility in mind, ensuring all users can interact with your application effectively.

Responsive

Fully responsive design that looks and works great across desktop, tablet, and mobile devices.

Performant

Optimized for maximum performance with minimal re-renders and efficient state management.

Best Practices & Guidelines

Usage Guidelines

Follow standard design principles when implementing this component. Ensure proper contrast, spacing, and context within your layout.

Props Reference

Prop	Type	Default	Description
`fleetData`	`Vehicle[]`	Required	Array of objects containing vehicle info. Requires `id`, `location` (string), and geographic coordinates ( `lat`, `lng`). Optionally accepts `status` ("active" \| "idle" \| "maintenance") and `speed`.
`variant`	`"default" \| "minimal" \| "modern"`	`"default"`	`default` is a split view, `minimal` floats the list over the map, `modern` is the glass treatment from Profile Page: an aurora behind, a frosted list, a glass-edged map.
`color`	`"primary" \| "indigo" \| "rose" \| "emerald" \| "zinc" \| (hex string)`	`"primary"`	Applies global color themes to the active map markers, sidebar icons, and focus rings.
`zoom`	`number`	`15`	Initial zoom level and active vehicle focus zoom level. Defaults to `15` for street/neighborhood detail.
`tileApiKey`	`string`	`undefined`	Optional CARTO API key if you choose to use CARTO Basemaps. By default, OpenStreetMap tiles are used with zero API key required.
`tileUrl`	`string`	`OpenStreetMap tile URL`	Custom basemap raster tile URL template for light mode (e.g., `https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`).
`darkTileUrl`	`string`	`undefined`	Custom raster tile URL template for dark mode. If omitted, standard OpenStreetMap tiles are dynamically dark-graded.