Overlay Toggles

Four plain checkboxes reflecting OverlaysSnapshot — particles, cyclones, isolines, lightning. No per-overlay config panel (no particle count/speed, no wave density/drift controls); those live alongside the fuller designed overlay controls in OpenWeather's own weather-maps website repo. Visibility/checked state comes from @openweather/maps-ui-core's overlay store; the actual toggling is @openweather/maps-maplibre-specific (WeatherMapHandle methods), passed in as plain callbacks — this keeps both @openweather/maps-ui and @openweather/maps-react's ././ui MapLibre-agnostic.

DOM — `createOverlayToggles`

import { createOverlayToggles } from '@openweather/maps-ui';
import { createOverlayStore } from '@openweather/maps-ui-core';

const overlays = createOverlayStore(controller.engine);
const overlayToggles = createOverlayToggles({
  parent: document.body,
  overlays,
  onToggleParticles: (enabled) => handle.toggleParticlesOverlay(enabled),
  onToggleCyclone: (enabled) => handle.toggleCycloneOverlay(enabled),
  onToggleContours: (enabled) => handle.toggleContours(enabled),
  onToggleLightning: (enabled) => handle.toggleLightningOverlay(enabled),
  onError: (error) => showErrorBanner(error),
});

Option	Type	Notes
`parent`	`HTMLElement`	Mount point (required)
`overlays`	`ExternalStore<OverlaysSnapshot>`	Typically `createOverlayStore(controller.engine)`
`onToggleParticles(enabled)`	may reject	Rejection (e.g. a locked layer) is forwarded to `onError`, not thrown
`onToggleCyclone(enabled)`	may reject
`onToggleContours(enabled)`	sync	Always available — the preference persists across layer switches even on layers with no `contours` config
`onToggleLightning(enabled)`	may reject
`onError?(error)`		Called when an async toggle rejects

OverlayTogglesHandle: destroy() unmounts.

The four checkboxes lay out in a single row (wrapping only if the container is too narrow) and, like the layer panel, render in normal document flow rather than self-positioning — createSimpleMapUI / <SimpleMapUI> mount it directly below the layer panel in a shared .owm-sidebar wrapper that floats both. Mounting it standalone means wrapping it in your own positioned container.

React — `<OverlayToggles>`

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

<OverlayToggles
  overlays={overlays}
  onToggleParticles={(enabled) => handle.toggleParticlesOverlay(enabled)}
  onToggleCyclone={(enabled) => handle.toggleCycloneOverlay(enabled)}
  onToggleContours={(enabled) => handle.toggleContours(enabled)}
  onToggleLightning={(enabled) => handle.toggleLightningOverlay(enabled)}
  onError={(error) => showErrorBanner(error)}
/>;

Same option shape as the DOM version — overlays is a prop rather than context-read — plus className?. Both renderers read the same OverlaysSnapshot fields, so the four checkboxes agree on state regardless of which one is mounted.