Point Query Box

The small "what's at this point" box shown on map click — a coordinate label plus one row per layer (from @openweather/maps-ui-core's getPointQueryModel). No "Get more" button — there's no detail panel to open in the SDK; the fuller point-query popup with that click-through now lives in OpenWeather's own weather-maps website repo. Positioning is placeFloating's clamped math in both renderers — each measures its own rendered box and feeds it in, clamped to the viewport itself (no obstacle-avoidance beyond that).

Deliberately narrow: marker placement and re-querying on unit switch are orchestration concerns that stay in the caller — see @openweather/maps-ui-core's query-flow module (createPointFlowStore) for that state machine if you need it; createSimpleMapUI/<SimpleMapUI> already wire the box up to map clicks directly, without going through query-flow.

DOM — createPointQueryBox

import { createPointQueryBox } from '@openweather/maps-ui';

const queryBox = createPointQueryBox({
  onClose: () => removeClickPin(),
});

queryBox.showLoading({ x: clickX, y: clickY });
// later:
queryBox.showResult(result, { x: clickX, y: clickY });
// queryBox.showError(message, anchor) / queryBox.hide() / queryBox.destroy()

Option	Type	Notes
parent?	HTMLElement	Mount point. Defaults to document.body.
onClose()		Called when the box's own close button is clicked

PointQueryBoxHandle: showResult(result, anchor), showLoading(anchor), showError(message, anchor), hide(), destroy(). anchor is a { x, y } screen point — typically the click event's point or a marker's projected position.

React — <PointQueryBox>

import { PointQueryBox, type PointQueryBoxState } from '@openweather/maps-react/ui';

const [state, setState] = useState<PointQueryBoxState>({
  status: 'hidden',
  anchor: null,
});

<PointQueryBox
  state={state}
  onClose={() => setState({ status: 'hidden', anchor: null })}
/>;

Prop	Type	Notes
state	PointQueryBoxState	{ status: 'hidden' | 'loading' | 'result' | 'error', anchor, result?, errorMessage? } — caller-owned
onClose()		Called when the box's own close button is clicked
className?	string	Optional

Unlike the DOM handle's imperative showLoading/showResult/showError, the React version is fully driven by state — set it yourself (typically from a map click handler calling controller.pointQuery.query(...)) and the box re-renders itself.