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.
Leaflet is a popular open-source mapping library for browser-based maps, and milsymbol integrates with it in two ways. Because Leaflet supports both HTML-based div icons and traditional image icons, you can choose the approach that best fits your performance requirements and interactivity needs. Both approaches require reading getAnchor() after the symbol is rendered so that Leaflet places the marker’s reference point exactly on the map coordinate rather than at the corner of the icon’s bounding box.
Two approaches
DivIcon (SVG)
L.icon (image)
L.divIcon accepts an arbitrary HTML string in its html option. Passing symbol.asSVG() injects the milsymbol SVG directly into the marker’s DOM node — no image conversion required.When to use: Interactive symbols where you want hover effects, click targets on individual symbol elements, or the ability to inspect the SVG structure in developer tools. Note that a very large number of div icons (thousands) may affect rendering performance compared to the image icon approach.var symbol = new ms.Symbol("SFG*UCI---*****", {
size: 30,
uniqueDesignation: "2-5 INF"
});
var marker = L.marker([51.5, -0.09], {
icon: L.divIcon({
className: "", // clear Leaflet's default white box styling
html: symbol.asSVG(),
iconAnchor: new L.Point(
symbol.getAnchor().x,
symbol.getAnchor().y
)
})
});
marker.addTo(map);
Setting className: "" is important. Leaflet’s default div icon class adds a white background and border that will appear around your symbol if left in place.
L.icon expects a URL for iconUrl. Passing symbol.toDataURL() converts the milsymbol Canvas output to a Base64 PNG data URL, which Leaflet treats exactly like an external image file — no server round-trip required.When to use: Large datasets with many markers, or situations where you want the simplest possible integration without dealing with SVG in the DOM.var symbol = new ms.Symbol("SFG*UCI---*****", {
size: 30,
uniqueDesignation: "2-5 INF"
});
var marker = L.marker([51.5, -0.09], {
icon: L.icon({
iconUrl: symbol.toDataURL(),
iconAnchor: [symbol.getAnchor().x, symbol.getAnchor().y]
})
});
marker.addTo(map);
Full working example: GeoJSON layer with echelon-based sizing
The following example is adapted directly from the milsymbol Leaflet examples included in the repository. It loads a GeoJSON situation file, inspects each feature’s echelon metadata via getMetadata(), and sizes each symbol appropriately before creating its icon.
var osmAttr =
'© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>';
var OSM = L.tileLayer(
"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{ maxZoom: 18, attribution: osmAttr }
),
latlng = L.latLng(59, 16);
var map = L.map("map", { center: latlng, zoom: 5, layers: [OSM] });
// Symbol size per echelon
var iconSize = {
"Team/Crew": 5,
Squad: 10,
Section: 15,
"Platoon/detachment": 20,
"Company/battery/troop": 25,
"Battalion/squadron": 30,
"Regiment/group": 35,
Brigade: 40,
Division: 45,
"Corps/MEF": 50,
Army: 55,
"Army Group/front": 60,
"Region/Theater": 65,
Command: 70
};
// Render GeoJSON features as milsymbol div icon markers
L.geoJson(situation, {
pointToLayer: function (feature, latlng) {
var mysymbol = new ms.Symbol(feature.properties.SIDC, {
uniqueDesignation: feature.properties.name
});
// Ask for the echelon and set the symbol size accordingly
mysymbol = mysymbol.setOptions({
size: iconSize[mysymbol.getMetadata().echelon]
});
var myicon = L.divIcon({
className: "",
html: mysymbol.asSVG(),
iconAnchor: new L.Point(
mysymbol.getAnchor().x,
mysymbol.getAnchor().y
)
});
return L.marker(latlng, { icon: myicon, draggable: true });
}
}).addTo(map);
L.icon — replace the L.divIcon block with:
var myicon = L.icon({
iconUrl: mysymbol.toDataURL(),
iconAnchor: [mysymbol.getAnchor().x, mysymbol.getAnchor().y]
});
Understanding iconAnchor
Leaflet’s iconAnchor is measured in pixels from the top-left corner of the icon image to the point that should align with the map coordinate. milsymbol’s getAnchor() returns exactly this value — the pixel offset from the top-left of the rendered symbol’s bounding box to its geographic reference point — so the values can be passed directly without any transformation.
var anchor = symbol.getAnchor();
// Returns e.g. { x: 20, y: 40 }
// This means the anchor is 20 px right and 40 px down from top-left
// Leaflet DivIcon syntax:
iconAnchor: new L.Point(anchor.x, anchor.y)
// Leaflet L.icon syntax:
iconAnchor: [anchor.x, anchor.y]
Omitting iconAnchor causes Leaflet to use the top-left corner of the icon as the placement point. For military symbols this results in every marker appearing offset from its correct position, sometimes by a significant distance.
Use L.divIcon when you need CSS transitions on hover or want individual symbols reachable from JavaScript (for example, changing color on selection). Use L.icon for large static datasets where raw rendering throughput matters more than interactivity.
