Drawing & editing tools for Leaflet MapLibre MapLibre

import L from 'leaflet';
import { exportGeoJSON, importGeoJSON, type FeatureCollection } from '@vectorstream/core';
import { Editor, Toolbar, defaultToolbarEntries } from '@vectorstream/editor';
import { LeafletAdapter } from '@vectorstream/leaflet';

export function startEditor(container: HTMLElement, data: FeatureCollection) {
  const map = L.map(container).setView([51.5112, 7.4555], 17);

  const adapter = new LeafletAdapter(map);

  const editor = new Editor(importGeoJSON(data), adapter);
  const toolbar = new Toolbar(editor, defaultToolbarEntries());
  toolbar.select('draw');

  editor.on('change', ({ label }) => console.log('changed:', label));
  editor.on('unchanged', ({ label }) => console.log('nothing to do:', label));
  editor.on('rejected', ({ label, violations }) => {
    console.warn('rejected:', label, violations.map((v) => v.detail));
  });

  return {
    editor,
    save: (): FeatureCollection => exportGeoJSON(editor.partition),
  };
}