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.

Once you have created a Symbol object and configured its options, milsymbol can deliver the rendered symbol in several formats. You can get an SVG string for lightweight web use, a DOM element for direct insertion into the page, an HTMLCanvasElement for pixel-based rendering, an OffscreenCanvas for use in Web Workers, or a base64 data URL for embedding in <img> tags and CSS. All formats are derived from the same underlying draw instructions and stay synchronized as you update the symbol via setOptions().

​
asSVG() — SVG String

Returns the symbol as a complete SVG XML string. This is the most common format for web applications. SVG is resolution-independent and lightweight — creating 1,000 symbols takes under 20 ms in most environments. 
var svg = new ms.Symbol("SFG-UCI----D", {
  size: 60,
  uniqueDesignation: "1-68 AR"
}).asSVG();

// Use as innerHTML to insert the SVG directly into the DOM
document.getElementById("symbolContainer").innerHTML = svg;
You can also use the SVG string in a mapping library or as the source of a dynamic image: 
var svgString = new ms.Symbol("SFG-UCI----D", { size: 30 }).asSVG();

// Use in an <img> element via Blob URL
var blob = new Blob([svgString], { type: "image/svg+xml" });
var url  = URL.createObjectURL(blob);
var img  = document.createElement("img");
img.src  = url;
document.body.appendChild(img);

​
asDOM() — SVG DOM Element

Returns the symbol as a live SVG DOM Element (an SVGElement). This is useful when you want to manipulate the symbol element further with JavaScript before inserting it, or when you need to append multiple symbols to a container. 
var domElement = new ms.Symbol("SFG-UCI----D", {
  size: 60,
  uniqueDesignation: "1-68 AR"
}).asDOM();

// Append directly to any container
document.getElementById("mapOverlay").appendChild(domElement);

// Create and insert a DOM SVG element
var el = new ms.Symbol("SHG-UCI----D", { size: 50 }).asDOM();
document.querySelector(".symbol-panel").appendChild(el);

​
asCanvas(factor?) — HTMLCanvasElement

Returns the symbol as an HTMLCanvasElement. An optional factor argument multiplies the canvas pixel dimensions, producing a higher-resolution canvas for HiDPI (Retina) screens or high-quality exports — without affecting the numbers returned by getSize() or getAnchor(). 
// Standard resolution
var canvas = new ms.Symbol("SFG-UCI----D", { size: 60 }).asCanvas();
document.body.appendChild(canvas);

// 2× resolution for HiDPI displays
var hiDpiCanvas = new ms.Symbol("SFG-UCI----D", { size: 60 }).asCanvas(2);
document.body.appendChild(hiDpiCanvas);

​
Using with OpenLayers

var ratio = window.devicePixelRatio || 1;
var mysymbol = new ms.Symbol(feature.getProperties().SIDC, {
  uniqueDesignation: feature.getProperties().name
});
var mycanvas = mysymbol.setOptions({ size: 30 * ratio }).asCanvas(ratio);
The factor argument scales the canvas pixel buffer but does not affect the values returned by getSize(), getAnchor(), or getOctagonAnchor(). Those methods always return values in the logical coordinate space (at factor 1). When placing the canvas on screen, use the logical size values for layout calculations.

​
asOffscreenCanvas(factor?) — OffscreenCanvas

Returns the symbol as an OffscreenCanvas. This is the counterpart to asCanvas() for use in Web Workers, where the DOM is not available. The optional factor argument behaves identically to asCanvas(). 
// In a Web Worker
var offscreen = new ms.Symbol("SFG-UCI----D", { size: 60 }).asOffscreenCanvas();

// Transfer to main thread via ImageBitmap
var bitmap = await createImageBitmap(offscreen);
self.postMessage({ bitmap }, [bitmap]);

// In the main thread — receive the bitmap and draw it
worker.onmessage = function (event) {
  var canvas = document.createElement("canvas");
  canvas.width  = event.data.bitmap.width;
  canvas.height = event.data.bitmap.height;
  canvas.getContext("2d").drawImage(event.data.bitmap, 0, 0);
  document.body.appendChild(canvas);
};

​
toDataURL() — Base64 SVG Data URL

Returns the SVG symbol as a base64-encoded data: URI string. This is useful when you need to assign the symbol as the src of an <img> element, a CSS background-image, or a Leaflet icon URL. 
var dataURL = new ms.Symbol("SFG-UCI----D", { size: 60 }).toDataURL();

var img = document.createElement("img");
img.src = dataURL;
document.body.appendChild(img);

​
PNG Data URL

toDataURL() produces an SVG data URL. For a PNG base64 data URL, chain asCanvas() and then call the native canvas toDataURL() method: 
var pngDataURL = new ms.Symbol("SFG-UCI----D", { size: 60 })
  .asCanvas(2)         // 2× resolution
  .toDataURL();        // native Canvas API → PNG base64

var img = document.createElement("img");
img.src = pngDataURL;

​
Leaflet icon example

var symbol = new ms.Symbol("SFG-UCI----D", {
  size: 30,
  uniqueDesignation: "ALPHA"
});
var anchor = symbol.getAnchor();
var size   = symbol.getSize();

var icon = L.icon({
  iconUrl:    symbol.toDataURL(),
  iconSize:   [size.width, size.height],
  iconAnchor: [anchor.x, anchor.y]
});

L.marker([59.0, 16.0], { icon: icon }).addTo(map);

​
getSize() — Symbol Dimensions

Returns an object with the width and height of the rendered symbol in pixels. These dimensions include any text modifiers and direction arrows, and they change as modifiers are added or removed. 
var symbol = new ms.Symbol("SFG-UCI----D", {
  size: 60,
  uniqueDesignation: "1-68 AR",
  higherFormation: "3ID"
});

var size = symbol.getSize();
console.log(size.width, size.height);
// e.g. 134 × 102 — wider than 100 to accommodate the text labels

​
getAnchor() — Insertion Point

Returns the anchor point { x, y } measured from the top-left corner of the symbol image. This is the point that should align with the geographic coordinate of the symbol — for a ground unit, typically the bottom-center of the frame. Use this when placing symbols as map markers. 
var symbol = new ms.Symbol("SFG-UCI----D", { size: 60 });
var anchor = symbol.getAnchor();
// e.g. { x: 67, y: 87 }

// Correct placement in Leaflet
L.icon({
  iconUrl:    symbol.toDataURL(),
  iconSize:   [symbol.getSize().width, symbol.getSize().height],
  iconAnchor: [anchor.x, anchor.y]
});

​
getOctagonAnchor() — Octagon Center

Returns the center of the symbol octagon { x, y } measured from the top-left corner of the image. This is the geometric center of the symbol frame, useful when you want to center a symbol on a point rather than anchor it at its insertion point. 
var symbol = new ms.Symbol("SFG-UCI----D", {
  size: 60,
  uniqueDesignation: "1-68 AR"
});

var center = symbol.getOctagonAnchor();
// e.g. { x: 67, y: 50 }

​
Choosing the Right Format

SVG / asDOM

Best for web applications where SVG is supported. Resolution-independent, lightweight, and easily styled with CSS. Use asSVG() when you need a string, asDOM() when you need a live element.

Canvas

Best for pixel-based rendering — game engines, canvas-based map layers (Leaflet L.Canvas, etc.), server-side rendering with node-canvas, or wherever SVG is unavailable.

OffscreenCanvas

Best for Web Workers — lets you generate symbols off the main thread and transfer bitmaps for maximum UI responsiveness.

toDataURL / PNG

Best for embedding in <img> tags, CSS backgrounds, or APIs that only accept image URLs. Use .asCanvas().toDataURL() when you need a PNG instead of SVG.

​
Performance

milsymbol is designed for high-volume symbol generation. Creating 1,000 symbols with SVG output takes under 20 ms in most browser environments. For best performance:
  • Supply all options at construction time rather than calling setOptions() multiple times.
  • Use asCanvas() with an appropriate factor for HiDPI screens rather than using CSS scaling.
  • Cache getSize() and getAnchor() results if you are placing symbols in a tight rendering loop, as these values only change when options change.
// Efficient batch creation
var start = performance.now();
var symbols = symbolsSIDC.map(function (sidc) {
  return new ms.Symbol(sidc, { size: 40 }).asCanvas();
});
console.log("Created " + symbols.length + " symbols in " +
  (performance.now() - start).toFixed(1) + " ms");

Build docs developers (and LLMs) love

Get started for freeTalk to us