Optional point symbols

Point symbols share TacticalDraw's render, draw, edit, pick, and group-transform APIs with control measures. Rendering them is optional, so @orbat-mapper/tactical-draw does not depend on milsymbol.

pnpm

pnpm add @orbat-mapper/point-symbols milsymbol

npm

npm install @orbat-mapper/point-symbols milsymbol

import { TacticalDraw } from "@orbat-mapper/tactical-draw";
import { milsymbolPointSymbols } from "@orbat-mapper/point-symbols";
import type { PointSymbol } from "@orbat-mapper/tactical-draw";

const pointSymbols = milsymbolPointSymbols({ maxCacheEntries: 1024 });
const td = new TacticalDraw(adapter, { pointSymbols });

const unit: PointSymbol = {
  id: "unit-1",
  kind: "point-symbol",
  sidc: "130315003611010300000000000000",
  position: [10.75, 59.91],
  rotation: 0,
  size: { value: 32, unit: "pixels" },
};

td.render([unit, controlMeasure]);
await td.editMany([unit, controlMeasure]);

Pixel-sized symbols stay fixed on screen; meter-sized symbols use the adapter's current resolution. Individual and group transforms preserve the stored unit. Rotation is measured clockwise in radians from geographic north.

The position comes from milsymbol's getAnchor(). For headquarters symbols, that is the end of the staff. Individual rotations and scales keep the anchor fixed, while a group transform moves it around the shared pivot.

Use the typed textAmplifiers, graphicModifiers, and style fields for common authoring needs. For lower-level renderer settings, use rendererOptions.milsymbol, milsymbolOptions, or resolveOptions(symbol). Canonical fields have the highest priority.

Symbol style

PointSymbolStyle supports colors, monoColor, opacity, outlineWidth, fill, frame, and icon. opacity ranges from 0 to 1 and applies to the whole SVG, so overlapping parts do not become darker.

td.render([{ ...unit, style: { opacity: 0.4 } }]);

Control measures expose the same field through a different render path; see Graphic opacity.

Cache and invalidation

Create the point-symbol capability once and reuse it. Its LRU cache shares canonical SVG resources across positions, rotations, sizes, TacticalDraw instances, and adapter layers. After changing global milsymbol configuration, invalidate the capability and render again:

invalidate() increments the capability's generation. TacticalDraw checks that value before reconciling the graphics layer and clears cached renders when it changes. Even unchanged graphic objects will then use fresh symbols.

// After a change of the global milsymbol configuration:
pointSymbols.invalidate(); // generation increments
td.render(graphics); // same objects, new symbols

A custom capability may omit generation, but then TacticalDraw cannot detect global renderer changes. Include the counter when your renderer has mutable global configuration.