Skip to content

Layer List

Toggles layer visibility, with per-layer actions (zoom, labels, transparency, filter) in a row menu. Layers are shown in the order declared in app/layers.ts, grouped by their group field — that same array order also sets on-map draw order (see Adding Layers).

  • id: layer-list
  • Surfaces: side-panel

Place it

sidePanelWidgets: [{ widgetName: 'layer-list' }],

Behavior

  • Visibility — each layer has an eye (or checkbox) toggle. With rowClickToggle on (the default), clicking anywhere on a layer's row toggles it.
  • Row menu — a kebab (⋮) button on each row opens the layer's actions:
    • Zoom to Extent — fits the map to the layer's data. If the layer is filtered, it fits only the filtered features. Esri raster services read their extent from service metadata, which occasionally has none — the item then does nothing.
    • Labels — turns the layer's labels on/off. Only on layers that declare a label config.
    • Adjust Transparency — opens an opacity slider under the row; the ✕ closes it.
    • Filter — opens the filter panel. Only on layers that declare filters.
  • Groups — layers sharing a group name fold under a header with a master visibility toggle (showing an indeterminate state when only some children are visible). Click anywhere on the header to expand or collapse it.
  • Zoom awareness — a layer's name is grayed when the current zoom is outside its minZoom/maxZoom range.

All visibility, opacity, label, and filter edits persist across basemap switches.

Filtering

Choosing Filter swaps the list for a filter panel for that layer (the back arrow returns to the list). It shows one filter per column the layer declares in filters.

  • Toggles — a "Filter this layer" toggle for the whole layer, plus one per column. The layer toggle turns on the first time you open the panel; column toggles start off. Turning a toggle off pauses that filter and keeps its values.
  • Categorical columns — a checklist of the column's values, all unchecked to start. Check the values to show; with nothing checked, the column doesn't filter. Checked values pin to the top, lists over 10 values get a search bar, and Clear unchecks everything.
  • Numeric columns — one condition: >, ≥, <, ≤, =, ≠, or between (inclusive). It applies on Enter, on blur, or after a short typing pause. Invalid input (not a number, or a min above the max) is outlined in red and ignored.

Filters across columns combine with AND, and every change applies live. While a filter is active, a funnel icon shows next to the row's kebab — click it to jump back into the panel.

A filter also narrows Zoom to Extent, in-layer search, and popups (only visible features can be clicked). The legend doesn't change. Filters reset on page reload.

Configuration

Defaults come from ui.layerList:

ui: {
  layerList: {
    groupsCollapsedByDefault: true,
    toggleStyle: 'eye',          // or 'checkbox'
    actions: { opacity: true, labels: true, zoomToExtent: true, filter: true },
    rowClickToggle: true,
  },
},

Per-group collapse defaults via the top-level layerGroups block, and per-layer action overrides via a layer's actions field. A per-layer override wins over the global default — the Draw widget's "Drawings" row, for example, sets actions: { opacity: false } so it only offers Zoom to Extent.