Quick start

Wrap your map in an engine adapter and pass it to TacticalDraw. In the demo, choose a control measure, select Draw, then select points on the map.

AmbushMain AttackFortified AreaBlockLoading map…

Configure TacticalDraw

Once your MapLibre map has loaded, wrap it in MapLibreAdapter and create one TacticalDraw instance:

import { TacticalDraw } from "@orbat-mapper/tactical-draw";
import { MapLibreAdapter } from "@orbat-mapper/tactical-draw-adapter-maplibre";
import { getDefaultOptions, type ControlMeasure } 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. Save the returned graphic in your app, then render the complete list:

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) after every data change. When the map is removed, call td.destroy() to release TacticalDraw's layers and listeners.

Change the map engine

Only the adapter constructor changes. Replace MapLibreAdapter with OpenLayersAdapter or LeafletAdapter; see Engines.