List UI

How a dataset appears in LayerControl. Prefer the builder.

import { createMultiLegend } from '@hungpvq/map-dataset/menu';
import { createDatasetPartListViewUiComponent, createDatasetPartListViewUiComponentBuilder } from '@hungpvq/map-dataset';
import { createMenuBuilder, createMenuItemToggleShow } from '@hungpvq/map-dataset/menu';
import { mdiDownload } from '@mdi/js';

// Shortcut (defaults: opacity menu, move up/down, add to group)
const simple = createDatasetPartListViewUiComponent('My Layer');
simple.color = '#ff6b6b';
simple.opacity = 0.8;

const list = createDatasetPartListViewUiComponentBuilder('My Layer')
  .setColor('#4ecdc4')
  .setOpacity(0.9)
  .setIndex(1)
  .setGroup({ id: 'g1', name: 'Group 1' })
  .setLegend(
    createMultiLegend([
      { type: 'color', value: { text: 'Fill', value: '#4ecdc4' } },
    ]),
  )
  .configInitShowLegend()
  .addMenu(createMenuItemToggleShow())
  .addMenus([
    createMenuBuilder()
      .item()
      .setLocation('menu')
      .setName('Download')
      .setIcon(mdiDownload)
      .setHidden(({ context }) => context?.role !== 'admin')
      .setClick(({ layer }) => download(layer))
      .build(),
  ])
  .build();

Builder methods

Method	Example	Effect
`setColor`	`.setColor('#4ecdc4')`	Swatch / default paint
`setOpacity`	`.setOpacity(0.8)`	Initial opacity
`setIndex`	`.setIndex(2)`	Sort in the list
`setGroup`	`.setGroup('g1')` or `{ id, name }`	Initial group
`setLegend`	`.setLegend(createMultiLegend([...]))`	Legend block
`configDisabledOpacity()`		No opacity control / no auto opacity menu
`configDisabledDelete()`		Hide row delete
`configDisabledMove()`		Do not add Move up/down
`configDisabledAddToGroup()`		Do not add Add to group
`configInitShowLegend()`		Legend expanded
`addMenu` / `addMenus`	see Menus	Extra actions

Each configDisabled*(true) is the default when called with no arg. Pass false to turn the flag off.

List items (type: 'list') automatically get Move up, Move down, and Add to group unless those flags are set. Sub-items (list-item) do not.

Export and Attribute table are not auto-added by the list builder. Add them yourself, or use createGeoJsonDataset which attaches both. See Export and Attribute table.

Types for custom list / drag UIs

When building a custom layer list (or mirroring LayerControl drag/group), import types from @hungpvq/map-dataset:

import type {
  IListViewUI,
  LayerListItem,
  LayerListTreeNode,
  LayerListGroupTree,
  ListViewGroupRef,
} from '@hungpvq/map-dataset';
import {
  convertListToTree,
  convertTreeToList,
  mergeEmptyGroups,
  isGroupNode,
} from '@hungpvq/map-dataset';

const rows: LayerListItem[] = /* … */;
const tree: LayerListTreeNode[] = convertListToTree(rows);

Type	Use
`IListViewUI`	Dataset list-part protocol (`group` may be `string \| { id, name, children? }`)
`LayerListItem`	Flat drag-list row: `IListViewUI` ∩ tree `Item` with `group?: ListViewGroupRef`
`LayerListTreeNode` / `LayerListGroupTree`	Tree nodes after `convertListToTree`

IListViewUI.group can be a bare string; convertListToTree expects object groups with .id. Prefer setGroup({ id, name }) or normalize before converting.

Sub-list and group list

import {
  createDatasetPartGroupSubListViewUiComponentBuilder,
  createDatasetPartSubListViewUiComponentBuilder,
} from '@hungpvq/map-dataset';

const group = createDatasetPartGroupSubListViewUiComponentBuilder('Group')
  .setColor('#00bfff')
  .configInitShowChildren()
  .build();

const child = createDatasetPartSubListViewUiComponentBuilder('Child')
  .setColor('#ffa500')
  .build();

group.add(child);

createDatasetPartGroupSubListViewUiComponent / createDatasetPartSubListViewUiComponent are the no-builder shortcuts.

Events

The list node (not LayerControl) emits:

Event	Payload
`toggleShow`	`{ show: boolean, dataset }`
`changeOpacity`	`{ opacity: number, dataset }`

list.on('toggleShow', ({ show }) => console.log(show));
list.on('changeOpacity', ({ opacity }) => console.log(opacity));

See Events. Legend helpers: createLegend / createMultiLegend.

List UI ​

Builder methods ​

Types for custom list / drag UIs ​

Sub-list and group list ​

Events ​

List UI

Builder methods

Types for custom list / drag UIs

Sub-list and group list

Events