Terra Draw

import { TerraDraw, TerraDrawPolygonMode, TerraDrawSelectMode } from "terra-draw";
import { TerraDrawMapLibreGLAdapter } from "terra-draw-maplibre-gl-adapter";
import type { PluginDemo } from "../types";

export default {
  center: [-0.1276, 51.5072], // London
  zoom: 14,
  run({ map }) {
    const draw = new TerraDraw({
      adapter: new TerraDrawMapLibreGLAdapter({ map }),
      modes: [
        new TerraDrawPolygonMode(),
        new TerraDrawSelectMode({
          flags: {
            polygon: {
              feature: {
                draggable: true,
                coordinates: { midpoints: true, draggable: true, deletable: true },
              },
            },
          },
        }),
      ],
    });
    draw.start();

    // One polygon to start with.
    draw.addFeatures([
      {
        type: "Feature",
        properties: { mode: "polygon" },
        geometry: {
          type: "Polygon",
          coordinates: [
            [
              [-0.135, 51.5105],
              [-0.12, 51.5105],
              [-0.12, 51.504],
              [-0.135, 51.504],
              [-0.135, 51.5105],
            ],
          ],
        },
      },
    ]);

    // Click the map to draw another polygon; click its first point to close it.
    draw.setMode("polygon");
  },
} satisfies PluginDemo;