Skip to content

EodashLayerControl

Layer visibility, opacity, and ordering panel for a map. It wraps eox-layercontrol and binds it to either the primary or compare map. The panel is hidden until a STAC collection is selected; it also handles time-step updates from the embedded eox-timecontrol and surfaces render-config changes (e.g. band assignments) to the store.

Example

Default usage bound to the primary map:

js
{
  id: "layer-control",
  title: "Layers",
  type: "internal",
  layout: { x: 9, y: 0, w: 3, h: 6 },
  widget: {
    name: "EodashLayerControl",
    properties: {
      tools: ["datetime", "info", "config", "legend", "opacity"],
    },
  },
}

Bound to the compare (second) map with a reduced tool set:

js
widget: {
  name: "EodashLayerControl",
  properties: {
    map: "second",
    tools: ["legend", "opacity"],
    title: "Compare layers",
  },
}

Properties

cssVars?

CSS custom-property overrides forwarded to the underlying eox-layercontrol element via its style attribute.

ts
optional cssVars?: Record<string, string>;

map?

Which map instance this control is bound to. Use "second" in a compare-mode layout.

ts
optional map?: "first" | "second" = "first";

title?

Heading rendered above the layer list. Set to false to hide it.

ts
optional title?: string | boolean = "Layers";

tools?

Tool tabs shown inside eox-layercontrol. Remove entries to hide individual tabs.

ts
optional tools?: string[] = ["datetime", "info", "config", "legend", "opacity"];

See also