Location Card

Pro

Place card with an illustrated street map, route, ETA and pin, with no maps SDK needed. Switching travel mode redraws the route, and arriving glides your dot to the pin.

Preview

Installation

npx @lumioui/cli add pro/location-card

Usage

import { StaticMap, LocationCard } from "@/components/ui/location-card/location-card";
<LocationCard />

Also exported: StaticMap.

Examples

Pickup

A ride app's pickup point.

Place

A maps place card for a bakery.

Saved places

A saved-places list using the row layout: drawn map thumbnail with the place's own pin colour, status line, and a one-tap directions button.

Stay

"Where you'll be" on a holiday-rental listing.

API reference

StaticMap

Prop Type Default
seed number

Seed for the street plan. Default 7.

 7
height number

Height in pt. Width fills the parent. Default 140.

 140
route boolean

Draw a route from the "you" dot to the centre.

 false
approximate boolean

Show an area circle instead of the exact pin.

 false
pinIcon IconName

Pin glyph. Default "map-pin".

 "map-pin"
pinColor string

Pin / route colour (hex). Default: the current primary.

 —
hidePin boolean

Hide the pin entirely (thumbnail use).

 false
routeMode RouteMode

How the route is travelled. Changing it redraws the line: drive is solid, walk is dotted, transit marks its stop. Default "drive".

 "drive"
lit boolean

The pin lands on a pool of its own light that brightens at contact, then settles low. Default false (a plain contact shadow).

 false
arrived boolean

You reached the place: the you-dot glides along the route to the pin, the pin ignites and holds. Default false.

 false
onArrived () => void

Called after the arrival has been held (~700ms after the pin ignites).

 —
className string —

LocationCard

Prop Type Default
name* string —
address string —
category string

"Bakery", "Pickup point".

 —
distance string

"0.8 mi".

 —
eta string

Travel time shown in the Directions button — "6 min".

 —
status LocationStatus —
rating number —
reviews number —
image ImageSourcePropType

Photo instead of the drawn map.

 —
mapSeed number

Street-plan seed for the drawn map.

 7
mapHeight number

Map height (card layout). Default 150.

 150
route boolean

Draw a route from you to the place.

 false
approximate boolean

Area circle instead of an exact pin (listings before booking).

 false
pinIcon IconName

Pin glyph. Default "map-pin".

 —
pinColor string

Pin colour (hex). Default primary.

 —
onDirections () => void

Primary action. Omit to hide the Directions button.

 —
directionsLabel string

Directions button text. Default "Directions".

 "Directions"
directionsIcon IconName

Icon in the Directions button. Default "car".

 "car"
actions React.ReactNode

Extra actions beside Directions (Call, Website, Share).

 —
children React.ReactNode

Content between the meta lines and the actions.

 —
layout "card" | "row"

"card" (default) or "row" — list row with a map thumbnail.

 "card"
routeMode RouteMode

How the route is travelled; changing it redraws the line. Default "drive".

 —
lit boolean

The pin lands on a pool of its own light. Default true on the card layout.

 true
arrived boolean

You reached the place: the you-dot glides to the pin, which ignites and holds.

 —
onArrived () => void

Called once the arrival has been held (~700ms).

 —
onPress () => void —
className string —