Map View

Data · IconButton, MapView

Points on a map: price pins for listings or bubbles for where orders come from. The map itself (tiles from MapLibre, Leaflet or Google, an SVG or an image) goes in background; Halo draws pins, popups, legend and controls on top in its own style.

Props: points ({id, label, sub, lat, lng, value, text (pin label), tint, pulse}), bounds ({n, s, w, e}; what the background shows), background (node), bubbles (size by value instead of pins), selected / onSelect, renderPopup(point), legend, controls, height, label.

With a real map library, pass its projection's bounds or render the pins through its overlay API with the same classes (tf-map-pin, tf-map-pop).
Price pins show the short price; the popup carries the details.

PreviewCode

Orders by country

Bubble size = orders today

Listings

Loft, HafenCity€1,190,000 · 112 m²

Props

IconButton

Prop	Type	Notes
`icon`	`IconName`	Required
`label`	`string`	Accessible name and tooltip (`aria-label` and `title`); `aria-label` or `title` override them.
`variant?`	`"soft" \| "solid" \| "outline" \| "ghost"`
`size?`	`"sm" \| "md" \| "lg"`
`type?`	`"button" \| "submit" \| "reset"`
`onClick?`	`(e: MouseEvent<HTMLButtonElement>) => void`
`disabled?`	`boolean`
`asChild?`	`boolean`	Render the single child element (a link) with the button's look; the icon is placed inside it.
`children?`	`ReactNode`
`id?`	`string`
`name?`	`string`	Form field name and value, sent with the form when this button submits it.
`value?`	`string`
`form?`	`string`	The id of the form this button belongs to, when it sits outside it.
`title?`	`string`
`tabIndex?`	`number`
`autoFocus?`	`boolean`
`aria-label?`	`string`
`aria-labelledby?`	`string`
`aria-describedby?`	`string`
`aria-expanded?`	`boolean \| "true" \| "false"`	For disclosure and menu triggers: whether what the button controls is open.
`aria-controls?`	`string`
`aria-haspopup?`	`boolean \| "true" \| "false" \| "menu" \| "listbox" \| "tree" \| "grid" \| "dialog"`
`aria-pressed?`	`boolean \| "true" \| "false" \| "mixed"`	For toggle buttons.
`aria-current?`	`boolean \| "true" \| "false" \| "page" \| "step" \| "location" \| "date" \| "time"`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

MapView

Prop	Type	Notes
`points?`	`MapPoint[]`
`bounds?`	`{ n: number; s: number; w: number; e: number }`
`background?`	`ReactNode`
`bubbles?`	`boolean`
`selected?`	`MapPoint["id"] \| null`
`onSelect?`	`(id: MapPoint["id"] \| null) => void`
`renderPopup?`	`(p: MapPoint) => ReactNode`
`legend?`	`ReactNode`
`controls?`	`ReactNode`
`height?`	`number \| string`	Height in px (default 320) or any CSS length, e.g. "100%" to fill a FloatingLayout.
`label?`	`string`
`surface?`	`Surface`	`"glass"`: the legend, controls and popup float as glass over the map (for a live map in `background`).
`className?`	`string`
`style?`	`CSSProperties`	Inline style on the root element.