Shell & Zoom Control

Shell

The one piece of page chrome a full demo needs beyond the individual controls themselves — a status-text node. Unlike the old designed shell, there are no more layout regions (layerPicker/bottomLeft/timebar/detailSlot are gone): every other control (layer panel, timeline, legend, search, overlays, zoom, point query) positions itself and mounts directly into the container you give it. createSimpleMapUI() / <SimpleMapUI> build this first and mount every other control alongside it.

DOM — createShell

import { createShell, showWeatherMapError } from '@openweather/maps-ui';

const shell = createShell({ container: document.body });
// shell.statusText

Option	Type	Notes
container?	HTMLElement	Where the status-text node mounts as a new child. Defaults to document.body. Does not include the map itself — the map container must already exist.

ShellHandle returns statusText (the mount point free-text status messages render into) plus destroy().

showWeatherMapError(mapContainer, message) is a standalone function (not part of the handle) for the two failure cases that happen before a shell exists to hide/tear down: a missing API key, or createWeatherMap() itself rejecting.

React — <Shell> / <ErrorBox>

import { Shell, ErrorBox } from '@openweather/maps-react/ui';

<Shell status={statusMessage}>
  <LayerPanel {...panelProps} />
</Shell>;

Prop	Type	Notes
children	ReactNode	Rendered before the status node — typically the other controls
status	ReactNode	Free-text status (e.g. "Loading Radar…"), rendered into the status-text node
className	string	Applied to the status-text node

<ErrorBox message="…" /> is the React equivalent of showWeatherMapError — render it in place of the map when useWeatherMap/<WeatherMap> reports an error.

Both renderers stamp the same PART values (status-text, error-box) so one simple.css styles either.

Zoom Control

Stateless in both renderers — zooming is a direct action on the map, so there's no store, just two buttons and two callbacks. Round-button chrome (PART.roundButton), unchanged from before this restructure.

DOM — createZoomControl

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

const zoom = createZoomControl({
  onZoomIn: () => map.zoomIn(),
  onZoomOut: () => map.zoomOut(),
});
// zoom.destroy()

Option	Type
parent?	HTMLElement — defaults to document.body
onZoomIn()	() => void
onZoomOut()	() => void

React — <ZoomControl>

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

<ZoomControl onZoomIn={() => map.zoomIn()} onZoomOut={() => map.zoomOut()} />;

Prop	Type	Notes
onZoomIn() / onZoomOut()	() => void	Same as DOM
className?	string	Optional

There is no eye/chrome-visibility toggle anymore — createEyeToggle (DOM) and <ChromeVisibility> (React) were removed along with the rest of the fan-out designed chrome they used to hide. Every control in the simple kit is small enough that hiding it wasn't judged worth keeping; build your own visibility toggle over plain CSS/hidden if you need one.