All examplessymbologymilsymbol
§ examples · symbology

MIL-STD-2525D/E Symbology

Six tactical units with different affiliations, each keyed by a SIDC code. MilSymbolLayer batch-loads the SVG glyphs via MilBatchLoader + MapViewIconSink and renders them at feature positions.

slugmilsymbol
source74 lines
statuslive
tsexamples-src/milsymbol.ts
1/**
2 * MIL-STD-2525D Symbology — 30-character SIDC codes on Feature
3 * properties drive per-feature SVG glyphs rendered by MilSymbolLayer.
4 * Position 3 controls affiliation (3 = friend, 4 = neutral, 6 = hostile,
5 * 1 = unknown); positions 10-13 encode the entity + type (infantry,
6 * armor, artillery, aviation, recon, engineer, air-defense, etc.).
7 */
8 
9import { MapView } from "mapgpu";
10import { RasterTileLayer } from "mapgpu/layers";
11import { RenderEngine } from "mapgpu/render";
12import { MilSymbolLayer } from "mapgpu/milsymbol";
13 
14import type { RunResultObject } from "@/components/examples/ExampleCanvas";
15 
16// 30-char 2525D SIDCs chosen for visual variety:
17// positions — 0-1 ver, 2 ctx, 3 affil, 4-5 set, 6 status, 7 hqtfd, 8-9 amp,
18// 10-15 entity, 16-19 modifier1, 20-23 modifier2, 24-29 reserved.
19const DATA = {
20 type: "FeatureCollection" as const,
21 features: [
22 // ─── Friendly land units (affiliation = 3) ───
23 { type: "Feature" as const, properties: { sidc: "100310000012110000000000000000" }, geometry: { type: "Point" as const, coordinates: [32.80, 39.95] } }, // Infantry
24 { type: "Feature" as const, properties: { sidc: "100310000012120000000000000000" }, geometry: { type: "Point" as const, coordinates: [32.86, 39.96] } }, // Armor
25 { type: "Feature" as const, properties: { sidc: "100310000012130000000000000000" }, geometry: { type: "Point" as const, coordinates: [32.92, 39.93] } }, // Artillery
26 { type: "Feature" as const, properties: { sidc: "100310000012140000000000000000" }, geometry: { type: "Point" as const, coordinates: [32.98, 39.94] } }, // Air-defense
27 { type: "Feature" as const, properties: { sidc: "100310000012150000000000000000" }, geometry: { type: "Point" as const, coordinates: [33.04, 39.92] } }, // Engineer
28 { type: "Feature" as const, properties: { sidc: "100310000012160000000000000000" }, geometry: { type: "Point" as const, coordinates: [32.84, 39.88] } }, // Recon
29 { type: "Feature" as const, properties: { sidc: "100310000012180000000000000000" }, geometry: { type: "Point" as const, coordinates: [32.90, 39.86] } }, // Signal
30 // ─── Friendly air rotary-wing ───
31 { type: "Feature" as const, properties: { sidc: "100301000012010200000000000000" }, geometry: { type: "Point" as const, coordinates: [32.76, 40.02] } }, // Rotary-wing
32 // ─── Hostile units (affiliation = 6) ───
33 { type: "Feature" as const, properties: { sidc: "100610000012110000000000000000" }, geometry: { type: "Point" as const, coordinates: [33.15, 40.05] } }, // Hostile infantry
34 { type: "Feature" as const, properties: { sidc: "100610000012120000000000000000" }, geometry: { type: "Point" as const, coordinates: [33.22, 40.02] } }, // Hostile armor
35 { type: "Feature" as const, properties: { sidc: "100610000012130000000000000000" }, geometry: { type: "Point" as const, coordinates: [33.28, 39.98] } }, // Hostile artillery
36 // ─── Neutral (affiliation = 4) / Unknown (affiliation = 1) ───
37 { type: "Feature" as const, properties: { sidc: "100410000012110000000000000000" }, geometry: { type: "Point" as const, coordinates: [32.70, 40.05] } }, // Neutral infantry
38 { type: "Feature" as const, properties: { sidc: "100110000012110000000000000000" }, geometry: { type: "Point" as const, coordinates: [32.68, 39.88] } }, // Unknown infantry
39 ],
40};
41 
42export async function run(container: HTMLElement): Promise<RunResultObject> {
43 const view = new MapView({
44 container,
45 renderEngine: new RenderEngine(),
46 mode: "2d",
47 center: [33.0, 39.95],
48 zoom: 9,
49 minZoom: 4,
50 maxZoom: 18,
51 backgroundColor: "transparent",
52 });
53 
54 view.map.add(
55 new RasterTileLayer({
56 id: "osm",
57 urlTemplate: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
58 maxZoom: 19,
59 attribution: "© OpenStreetMap contributors",
60 }),
61 );
62 
63 const mil = new MilSymbolLayer({ id: "milsym", data: DATA, size: 56 });
64 await mil.attachTo(view as unknown as MapView);
65 view.map.add(mil.layer);
66 
67 await view.when();
68 
69 return {
70 dispose: () => view.destroy(),
71 controls: [],
72 };
73}