Skip to content
Twentyfirst UIHalo

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.
Orders by country
Bubble size = orders today
Listings
Loft, HafenCity€1,190,000 · 112 m²

Props

IconButton

PropTypeNotes
iconIconNameRequired
labelstringRequired
variant?"soft" | "solid" | "outline" | "ghost"
size?"sm" | "md" | "lg"
onClick?(e: MouseEvent<HTMLButtonElement>) => void
disabled?boolean
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.

MapView

PropTypeNotes
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
label?string
className?string
style?CSSPropertiesInline style on the root element.