Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/spatialillusions/milsymbol/llms.txt

Use this file to discover all available pages before exploring further.

milsymbol is deliberately library-agnostic. It takes a SIDC code and options as input and produces output — either an SVG string via asSVG(), a Canvas element via asCanvas(), a DOM element via asDOM(), or a Base64 data URL via toDataURL(). Because it generates standard web primitives with no external dependencies, every mainstream mapping and visualization library can consume its output. You don’t change how you call milsymbol; you only decide which output format best fits your target library’s marker API.

Leaflet

Use L.divIcon with inline SVG or L.icon with a data URL. Correct anchor placement with getAnchor().

OpenLayers

Pass a Canvas element directly into ol.style.Icon with pixel-unit anchor offsets for crisp, high-DPI rendering.

Cesium

Supply a data URL as billboard.image on a 3D entity and correct the default center-origin with pixelOffset.

D3

Append an SVG DOM element directly into a D3 g node using asDOM() and position it with getOctagonAnchor().

​
Integration patterns

All integrations follow one of two fundamental patterns, driven by whether the target library expects an HTML/SVG node or a raster image URL.

​
SVG / HTML div icon

Libraries that accept an HTML string or DOM node as a marker icon — like Leaflet’s L.divIcon — can receive symbol.asSVG() directly. The resulting SVG is inline in the DOM, which means CSS hover effects, pointer events, and developer-tool inspection all work as expected. 
const symbol = new ms.Symbol("SFG*UC----*****", { size: 30 });

// Inject the raw SVG string into any HTML container
container.innerHTML = symbol.asSVG();

// Or get a live SVG DOM element that can be appended
const svgElement = symbol.asDOM();
container.appendChild(svgElement);
The asDOM() method returns a real SVGElement. Because it is a live DOM node you can attach event listeners to it before appending, which is useful when building interactive symbol layers.

​
Image / data URL icon

Libraries that expect a URL for a bitmap marker — like Leaflet’s L.icon, OpenLayers’ ol.style.Icon, or Cesium’s billboard.image — can use symbol.toDataURL(), which returns a Base64-encoded PNG data URL produced from the Canvas renderer. 
const symbol = new ms.Symbol("SFG*UC----*****", { size: 30 });

// Use as the src of any <img> or as a library icon URL
const dataURL = symbol.toDataURL();

​
Anchor points and symbol size

Military symbols are not always square, and their geographic reference point — the point that should sit exactly on the map coordinate — is rarely the top-left corner of the bounding box. milsymbol exposes two methods to retrieve placement metadata after a symbol is rendered:
MethodReturn valueDescription
getAnchor(){ x, y }Pixel offset from the top-left of the symbol image to the geographic anchor point
getOctagonAnchor(){ x, y }Pixel offset to the center of the symbol’s octagon frame (useful for ORBAT diagrams)
getSize(){ width, height }Pixel dimensions of the rendered symbol
const symbol = new ms.Symbol("SFG*UCI---*****", { size: 35 });

const anchor = symbol.getAnchor();
// e.g. { x: 20, y: 40 } — 20 px right, 40 px down from top-left

const size = symbol.getSize();
// e.g. { width: 40, height: 57 }
Different libraries express anchor coordinates in different ways. The table below shows how to translate getAnchor() values for each:
LibraryAnchor formatTranslation
Leaflet L.divIconnew L.Point(x, y)Direct pixel values
Leaflet L.icon[x, y] arrayDirect pixel values
OpenLayers ol.style.Icon[x, y] with anchorXUnits: "pixels"Direct pixel values
Cesium billboard.pixelOffsetnew Cesium.Cartesian2(dx, dy)dx = -(anchor.x - size.width / 2), dy = -(anchor.y - size.height / 2)
D3 SVG transformtranslate(-x, -y)Negate both values

​
General integration pattern

The core loop for any integration is always the same: 
// 1. Create the symbol with the SIDC and any display options
const symbol = new ms.Symbol("SFG*UCI---*****", {
  size: 30,
  uniqueDesignation: "2-5 INF"
});

// 2. Read placement metadata
const anchor = symbol.getAnchor(); // { x, y }
const size   = symbol.getSize();   // { width, height }

// 3. Choose an output format that suits your library
const svgString = symbol.asSVG();         // inline SVG markup
const dataURL   = symbol.toDataURL();     // Base64 PNG data URL
const canvas    = symbol.asCanvas();      // HTMLCanvasElement
const domNode   = symbol.asDOM();         // SVGElement

// 4. Feed the output + anchor to your library's marker API

​
Node.js / server-side rendering

milsymbol works in Node.js without a browser. Install it with npm install milsymbol and require it as you would any module. Symbol creation and SVG output work identically — only Canvas output requires a compatible canvas package (such as canvas) since HTMLCanvasElement is not available natively in Node. 
const ms = require("milsymbol");

const svgString = new ms.Symbol("SFG*UCI---*****", { size: 35 }).asSVG();
// Write svgString to a file, embed it in a PDF, or serve it over HTTP
asSVG() and asDOM() work in Node.js without any additional dependencies. asCanvas() and toDataURL() require a Canvas implementation such as the canvas npm package.

​
Java and C++ environments

milsymbol can run inside embedded JavaScript engines in non-browser runtimes:
  • Java — Load milsymbol via the ScriptEngine API (Nashorn or GraalVM). Call asSVG() and capture the returned string for further processing in Java.
  • C++ / Qt — Load milsymbol into QJSEngine or QtWebEngine. asSVG() returns a string that can be passed to QSvgRenderer or written to an SVG file.
In both cases only SVG string output is practical because neither runtime provides a native Canvas implementation.

Build docs developers (and LLMs) love

Get started for freeTalk to us