Class TerraDrawTextMode

A custom Terra Draw mode that lets users place, edit, and drag freeform text labels anywhere on the map.

Interaction model

MapLibre GL rendering

TerraDrawTextMode itself only stores Point features in the TerraDraw store. MaplibreTerradrawControl detects the text mode and maintains a separate {prefix}-text-labels MapLibre symbol layer that reads the text property from the GeoJSON source. This means the labels are rendered by MapLibre GL and support all standard text-* paint/layout properties.

Usage

import { MaplibreTerradrawControl, TerraDrawTextMode } from '@watergis/maplibre-gl-terradraw';

const control = new MaplibreTerradrawControl({
  modes: ['text', 'select', 'delete'],
  modeOptions: {
    text: new TerraDrawTextMode({
      editable: true,
      placeholder: 'Add a label…',
      styles: {
        textColor: '#1a1a1a',
        textSize: 14,
        textSelectedSize: 16,
        textHaloColor: '#ffffff',
        textHaloWidth: 2,
        textSelectedHaloColor: '#E0B03F'
      },
      onTextCommit: (id, text) => console.log(`${id}: ${text}`),
    }),
  },
});

map.addControl(control, 'top-right');
Copy