Quick start

@orbat-mapper/tactical-draw drives drawing and editing of control measures on any map engine. Bring a map, wrap it in an engine adapter, hand that to TacticalDraw. Pick a control measure below, press Draw, and click on the map to place points.

AmbushMain AttackFortified AreaBlockLoading map…

How it works

The demo above is the whole API in miniature. Stand up a MapLibre map, wrap it in MapLibreAdapter, construct TacticalDraw once:

import { TacticalDraw } from "@orbat-mapper/tactical-draw";
import { MapLibreAdapter } from "@orbat-mapper/tactical-draw-adapter-maplibre";
import { getDefaultOptions } from "@orbat-mapper/control-measures";

const adapter = new MapLibreAdapter(map); // `map` is a loaded maplibre-gl Map
const td = new TacticalDraw(adapter);

draw() resolves when the user commits, returning a snapshot whose measure you keep and render:

const measures: ControlMeasure[] = [];

const { graphic } = await td.draw({
  kind: "ambush",
  options: getDefaultOptions("ambush"),
});

measures.push(graphic);
td.render(measures); // reconcile the committed graphics onto the map

Call render(measures) with the full set whenever it changes. When you're done, td.destroy() releases its map layers.

Swap the engine

The only engine-specific line is new MapLibreAdapter(map). Substitute OpenLayersAdapter or LeafletAdapter (each with its own peer-dependency map engine) and everything else is identical — see the engine-switcher showcase.