# Map View

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.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/map-view
```

## Import

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

## Variants

- `courier` — Courier: `npx @lumioui/cli add pro/map-view-courier`
- `fleet` — Fleet: `npx @lumioui/cli add pro/map-view-fleet`
- `pickup` — Pickup: `npx @lumioui/cli add pro/map-view-pickup`
- `prices` — Prices: `npx @lumioui/cli add pro/map-view-prices`

## Props

### MapView

| Prop | Type | Notes |
| --- | --- | --- |
| `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 | 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 | Notes |
| --- | --- | --- |
| `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 | Notes |
| --- | --- | --- |
| `icon?` | `IconName` | Glyph. Default "pointer" (recentre). |
| `accessibilityLabel` | `string` | Required — icon-only control. |
| `className?` | `string` | — |

## Icons rendered

- `chevron-right` — /icons.html?i=chevron-right
- `pointer` — /icons.html?i=pointer

Source: https://lumioui.com/components/map-view