Map View

Pro

Calm vector city map with no maps SDK: pickup, dropoff and price pins, a route that draws itself, and a car that drives along it. Nearby cars appear and fade out as they come and go.

Preview

Installation

npx @lumioui/cli add pro/map-view

Usage

import { MapButton, MapView } from "@/components/ui/map-view/map-view";
<MapView />

Also exported: MapButton.

Examples

Courier

Live order tracking.

Fleet

A ride app's home map before you book.

Pickup

A rider waiting at the curb.

Prices

Rentals on a map.

API reference

MapView

Prop Type Default
seed number

Seed for the street plan — the same seed always draws the same city. Default 7.

 —
pins MapPin[]

Markers in normalised 0..1 space.

 —
route MapPoint[]

Driving route as normalised points. Drawn on, with its own road underneath.

 —
walkRoute MapPoint[]

Dotted walking leg (e.g. you → pickup spot).

 —
progress number

Vehicle position along route, 0..1. The marker glides to each new value.

 —
progressValue SharedValue<number>

Drive the vehicle from a shared value instead (UI-thread animation). Wins over progress.

 —
progressGlideMs number

How long the vehicle glides to a new progress, ms. Default 1000 (≈ a 1 Hz live feed).

 —
vehicle MapVehicle

Marker that travels the route. Default "none".

 —
vehicleIcon IconName

Glyph inside the courier disc. Default "package".

 —
eraseTraveled boolean

Erase the route behind the vehicle. Default true.

 —
fleet MapFleetVehicle[]

Nearby vehicles that drift along their own short street loops on the UI thread — no route line. Independent of route / vehicle.

 —
user MapPoint

Your location dot.

 —
live boolean

The location is live — the user dot breathes. Never pulses otherwise.

 —
focus MapFocus

Camera target; springs when it changes. Default centre, zoom 1.

 —
selectedPinId string | null

Controlled selected pin id (price/poi pins).

 —
defaultSelectedPinId string | null

Uncontrolled initial selected pin id.

 —
onSelectedPinChange
(id: string | null, pin: MapPin … (id: string | null, pin: MapPin | null) => void

Fires when a pin is tapped and becomes selected.

 —
onPinPress (pin: MapPin) => void

Fires on any pin tap. Makes pickup/dropoff/stop pins tappable too.

 —
onPinArrived (pin: MapPin) => void

Fires once a pin's arrival has been held (~700ms after it ignites).

 —
labels MapLabel[]

Neighbourhood, street, water and park names.

 —
roads MapPoint[][]

Extra roads to draw (normalised polylines) — e.g. a driveway to a pin.

 —
accessibilityLabel string

Screen-reader description of the map. Default "Map".

 —
className string —
children React.ReactNode

Overlay content (MapView.Button, chips) — laid over the map, box-none. Wrap anything that belongs to a place in MapView.Anchor so it follows the camera.

 —

MapAnchor

Prop Type Default
x* number

Normalised map point, 0..1 — the same space as pins and routes.

 —
y* number —
children React.ReactNode

Centred on the point and carried with the camera on the UI thread.

 —

MapButton

Prop Type Default
accessibilityLabel* string

Required — icon-only control.

 —
icon IconName

Glyph. Default "pointer" (recentre).

 "pointer"
className string —