Legend

A plain gradient bar for the currently active layer — value range, a few equal-step ticks, and a click-to-switch-unit affordance. Both renderers consume the same @openweather/maps-ui-core getLegendModel view-model, so range formatting, unit conversion, and gradient stops can't drift between them.

DOM — createLegendBar

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

const legend = createLegendBar({ parent: document.body, settings: controller.settings });
legend.update(controller.getLayerMetadata(activeCode));
// legend.destroy() on teardown

Option	Type	Notes
parent	HTMLElement	Mount point (required)
settings	SettingsStore	Read/write unit preferences through — typically controller.settings, the same store the point-query box and pressure isolines share.

LegendBarHandle: update(metadata) re-renders for a (possibly undefined, meaning hidden) layer; destroy() unmounts.

React — <LegendBar>

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

<LegendBar metadata={activeMetadata} settings={controller.settings} />;

Prop	Type	Notes
metadata	LayerMetadata | undefined	The active layer; undefined renders nothing
settings	SettingsStore	Same store as the DOM version
className	string	Optional

Clicking the bar cycles the layer's unit category (e.g. wind m/s → km/h → mph) via applyUnitCycle — identical behavior in both renderers, since both call the same @openweather/maps-ui-core functions rather than reimplementing the cycle logic per renderer.