Layer Panel

A flat, always-visible list of the catalog's "popular" layers — one button per layer, grouped by category, no hover fan-out, no fold-into-"Other", no slot-promotion animation. The simple counterpart of the fan-out layer rail, which now lives in OpenWeather's own weather-maps website repo.

Categories (POPULAR_CATEGORIES in @openweather/maps-ui-core) currently exposed:

Slot	Primary	Grouped alongside it
Radar	radar	—
Temperature	temperature	dew_point, relative_humidity, soilMoisture, soil_temperature_0_10, soil_temperature_10_40
Precipitation	precipitation	precipitation_intensity, precipitation_convective, precipitation_rain, precipitation_snow, snow_depth
Wind	windSpeed	—
Pressure	pressure	—
Clouds	clouds	—
Waves	wave_height	swell, sea_temperature

resolvePopularCategories() returns every layer in each category as its own button — there is no single "primary" slot standing in for the others, unlike the designed rail. satellite is in the catalog but not part of any popular category. See Layer Catalog.

DOM — createLayerPanel

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

const layerPanel = createLayerPanel({
  parent: document.body,
  available: controller.listLayers(),
  activeCode: 'temperature',
  onSelect: (code) => controller.setActiveLayer(code),
});

// Re-render on catalog/active-layer/lock changes:
layerPanel.update({ ...previousOptions, activeCode: newCode });

Option	Type	Notes
parent	HTMLElement	Mount point (required)
available	readonly LayerMetadata[]	The full catalog to render
activeCode	string	Currently active layer code
lockedCodes?	ReadonlySet<string>	Codes to render as disabled (403)
onSelect(code)	(code: string) => void	Called when a layer button is clicked

LayerPanelHandle: update(options) re-renders with a new options object; destroy() unmounts.

A locked layer renders as a disabled button with a title of "Requires a subscription upgrade" rather than being hidden — there is no separate locked-layer treatment beyond that.

The panel itself renders in normal document flow rather than self-positioning — createSimpleMapUI / <SimpleMapUI> mount it (alongside the overlay toggles, directly below it) into a shared .owm-sidebar wrapper that does the floating. Mounting it standalone means wrapping it in your own positioned container.

React — <LayerPanel>

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

<LayerPanel
  available={controller.listLayers()}
  activeCode={active}
  onSelect={(code) => controller.setActiveLayer(code)}
/>;

Prop	Type	Notes
available	readonly LayerMetadata[]	Same as DOM
activeCode	string	Same as DOM
lockedCodes?	ReadonlySet<string>	Same as DOM
onSelect(code)	(code: string) => void	Same as DOM
className?	string	Optional

Both consume the same resolvePopularCategories() view-model, so which layers render and in what order is identical between renderers — verified by the cross-renderer parity test.