Skip to content
Docs version
@hungpvq/vue-map@1.1.0@hungpvq/vue-map-core@1.1.0@hungpvq/vue-map-dataset@1.1.0@hungpvq/vue-map-draw@1.1.0@hungpvq/map-draw@1.1.0@hungpvq/react-map@1.1.0@hungpvq/react-map-core@1.1.0@hungpvq/react-map-dataset@1.1.0@hungpvq/react-map-draw@1.1.0

Creating a Custom Dataset Leaf

A leaf is a node without children. Built-in types (list, layer, source, identify, highlight, dataManagement, list-item, bound, menu) are reserved — pick another type.

typescript
import {
  createRootDataset,
  createDatasetLeaf,
} from '@hungpvq/map-dataset';

const root = createRootDataset('Root');
const leaf = {
  ...createDatasetLeaf('My leaf'),
  type: 'my-custom-type',
  addToMap(map) {
    // optional
  },
  removeFromMap(map) {
    // optional
  },
};
root.add(leaf);

addToMap / removeFromMap run when the dataset is added to or removed from the map.

Menus and events (same helpers as list UI):

typescript
import { createDatasetLeaf, createWithEventHelper } from '@hungpvq/map-dataset';
import { createWithMenuHelper, createMenuBuilder } from '@hungpvq/map-dataset/menu';

const menu = createWithMenuHelper();
const event = createWithEventHelper();

menu.addMenu(
  createMenuBuilder()
    .item()
    .setLocation('menu')
    .setName('Custom')
    .setClick(({ layer }) => {
      event.emit('customEvent', layer);
    })
    .build(),
);

const leaf = {
  ...createDatasetLeaf('My leaf'),
  type: 'my-custom-type',
  ...menu,
  ...event,
};

See Menus and Events.