LayerControl

Layer editing

const [layers, setLayers] = useState<readonly LayerControlItem[]>([
  { id: "equipment", label: "Equipment", visible: true, opacity: 1 },
  { id: "coverage", label: "Reported coverage", visible: true, opacity: 0.5 },
]);
 
<LayerControl layers={layers} onLayersChange={setLayers} />;

The first item is drawn on top. Each item has a stable, nonempty id, label, visible and opacity, with optional description and disabled. Opacity is a finite fraction from 0 through 1; the slider presents and edits whole percentages. Zero is transparent. Hiding a layer retains its opacity. Invalid opacity stays unavailable until the caller corrects it.

Callbacks receive a new frozen array of copied, frozen items. The control does not change supplied data when a callback is declined. Disabled rows cannot be edited, moved, or crossed by another row. Duplicate/empty IDs disable ambiguous editing. Omit onLayersChange for read-only presentation or use disabled to block all controls.

Selection belongs to the application. Hiding a map layer does not clear selected entity IDs or change a source's declared completeness.

Props

Accessibility

• A named ordered list exposes rendering order. Visibility checkboxes and opacity sliders include the layer name.
• Space toggles visibility; arrow keys adjust opacity; Move up/down are native keyboard buttons. Dragging is not required.
• Accepted reorder keeps focus in the same row. Removed or newly disabled focused actions fall back to a surviving row or the layer group.
• A declined reorder retains the focused action and order. Focus already moved outside is preserved.
• The root forwards a div ref/native attributes; row fallback targets have visible focus styles.

Manifest entry

<LayerControl layers={layers} onLayersChange={setLayers} />

{
  "description": "Controlled top-first map layers with visibility, opacity and keyboard-operable ordering.",
  "props": {
    "label": {
      "type": "string",
      "default": "Map layers"
    },
    "layers": {
      "type": "array",
      "items": {
        "id": "string",
        "label": "string",
        "visible": "boolean",
        "opacity": "number (0..1)",
        "description": "string (optional)",
        "disabled": "boolean (optional)"
      },
      "required": true,
      "description": "Readonly LayerControlItem[]. IDs must be unique and nonempty. First item is drawn on top. Nonfinite/out-of-range opacity stays unavailable; zero is transparent."
    },
    "onLayersChange": {
      "type": "function",
      "description": "(layers: readonly LayerControlItem[]) => void. Receives a new frozen array of copied frozen items. Requests do not change supplied values. Omit for read-only controls. Disabled rows cannot mutate or be crossed."
    },
    "disabled": {
      "type": "boolean",
      "default": false
    },
    "className": {
      "type": "string"
    }
  },
  "composable_with": [
    "MapControls",
    "MapLegend",
    "Slider",
    "Checkbox",
    "Field"
  ],
  "never_inside": [
    "Button"
  ],
  "example": "<LayerControl layers={layers} onLayersChange={setLayers} />"
}