MilSymbol - Military symbols made easy
+MilSymbol is a small library in pure javascript that creates SVG symbols according to +MIL-STD-2525 and APP6. All unit symbols with SIDCs in both 2525(c) and APP6(b) are supported. +The symbols are created according to APP6(c) symbology and might therefore differ from the +symbols in shown in the standard documents, but they are made according to the standards and +follows the way that symbols are created in ADRP 1-02 (US Army Doctrine Reference Publication).+At the moment APP6(B) ANNEX D / 2525C APPENDIX A (Unit Symbols) and 2525C APPENDIX D (Signals intelligence symbols) and APPENDIX E (Stability operations symbols) / parts of unit symbols for 2525D are implemented in this library.
+ +
+The library is published under a BSD-license so you can do basically anything you want +with it as long as you give it some credit. All of the code was created as a proof of concept +and was initially just thought as a simple way for me to get symbols for some webmapping +demos I was making as a hobby, but the code expanded into something much more.
+
+ +MilSymbol logs the current version number to the console when it is initiated.
+
+ +
Examples
+ +MIL-STD-2525C TABLE IX. Tactical symbol display option hierarchy, recreated with MilSymbol.+
| + | ++ | +ATTRIBUTES + | +
| + + | ++ + | +Frame: ON (black or white depending on background) +Fill: ON (use default color indicating standard identity) +Icon: ON (black or white) +MilSymbol: default + |
+
| + + | ++ + | +Frame: ON (use default color indicating standard identity) +Fill: OFF +Icon: ON (use default color indicating standard identity) +MilSymbol: {fill:false} + |
+
| + + | ++ + | +Frame: ON (black or white depending on background) +Fill: OFF +Icon: ON (black or white) +Comments: Default option for monochrome implementation; replace black/white +with the colors available in this implementation. +MilSymbol: {fill:false,monoColor:"black"} + |
+
| + + | ++ + | +Frame: OFF (none) +Fill: OFF +Icon: ON (use default color indicating standard identity) +MilSymbol: {fill:false,frame:false} + |
+
| + + | ++ + | +Frame: ON (use default color indicating standard identity) +Fill: OFF +Icon: OFF (none) +Comments: "?" is part of the frame and is displayed in this frame-only +presentation. +MilSymbol: {fill:false,icon:false} + |
+
| + + | ++ + | +Frame: ON (monochrome system) +Fill: OFF +Icon: OFF (none) +Comments: "?" is part of the frame and is displayed in this frame-only +presentation. +MilSymbol: {fill:false,icon:false,monoColor:"black"} + |
+
| + + | ++ + | +Frame: OFF (none) +Fill: ON (use default color indicating standard identity) +Icon: OFF (none) +MilSymbol: {frame:false,icon:false} (size set to 15px) + |
+
| + + | ++ + | +Frame: OFF (none) +Fill: OFF (use default color indicating standard identity) +Icon: OFF (none) +Comments: Use only to indicate location of symbol. +MilSymbol: {frame:false,fill:false,icon:false} (size set to 15px) + |
+
+ +Reference figure 13 from MIL-STD-2525C:
+
+Same figure created with MilSymbol: (The direction arrow on the Reference figure points in the wrong direction, given direction is 0450 mills.)
+
+Most tables and figures from MIL-STD-2525C, implemented in MilSymbol, can be found here.
+Most tables and figures from APP6b, implemented in MilSymbol, can be found here.
+
+Under development MIL-STD-2525D. Symbols implemented in MilSymbol, can be found here. + + +
Demos
+Quick display of Units in a LeafLet map
++Showing a usecase of my javascript library just displaying some units on a leaflet map. It's possible to drag the symbols to new locations but at the moment there is no backend to save the new positions.
+Open in new Window
+ +
Quick display of Units in an OpenLayers 3 map
++In OpenLayers you will have to base64 encode your symbols, but other than that it's quite straight forward. This example might not work in older versions of Internet Explorer
+Open in new Window
+ +
MilSymbol Units in d3js
++It's possible to use MilSymbol symbols in d3 as well and use d3's functionallity to draw network graphs.
+Open in new Window
+ +
Documentation
+Creating a symbol
+ +To create a new symbol you use+
mySymbol = new MilSymbol(SIDC)+where SIDS is a complete or at least the first 3 chars of a SIDC Code.
+ +You can also set other initial attributes when you create your symbol
+
mySymbol = new MilSymbol(SIDC,{initial values})+
+The attributes for you symbol is:
+fill default true
+Should your symbol be filled with color.
+ +frame default true
+Should your symbol have a frame.
+ All symbols support to be unframed, not just the ones specified in 2525B.
+ +icon default true
+Should your symbol have an icon.
+ +strokeWidth default 3
+The stroke width of the symbol.
+ +size default 100
+The L value for you symbol. (If L < 10 the symbol will be a filled circle with the diameter of your L, at these sizes symbols won't be readable otherwise.)
+ +colorMode default "Light"
+"Light", "Medium" or "Dark".
+ +monoColor default ""
+Set to any color name "Black"/"Green"/e.t.c. or color value "rgb(255,0,0)".
+ +civilianColors default true
+2525C specifics purple as an optional color for civilian symbols. Of corse we like color so we set this as default.
+ +force2525 default true
+Sometimes APP6 and 2525 differ in symbols, for example 2525 wants VSTOL to be symbolized with the letter L but APP6 want to use the letter V, there are also some differences in fill colors and other. Default we are using APP6 symbology, but if you want to force 2525 symbology, just set this to true. (All possible SIDC will have some kind of symbol no matter setting, so you will always get a symbol.)
+ +infoFields default true
+If you have set some text fields and direction but don't want the to be displayed you can set infoFields to false. This makes it possible to initiate the object with all information you got but not display it.
+ +quantity
+FeildID C
+reinforcedReduced
+FeildID F
+staffComments
+FeildID G
+additionalInformation
+FeildID H
+evaluationRating
+FeildID J
+combatEffectiveness
+FeildID K
+signatureEquipment
+FeildID L
+higherFormation
+FeildID M
+hostile
+FeildID N
+iffSif
+FeildID P
+direction
+FeildID Q, at the moment all directions should be in degrees and not in mils.
+ +uniqueDesignation
+FeildID T
+type
+FeildID V
+dtg
+FeildID W
+altitudeDepth
+FeildID X
+location
+FeildID Y
+speed
+FeildID Z
+specialHeadquarters
+FeildID AA
+ + +
Getting a symbol
+ +You can get your symbol in two ways. Either use symbolSvg() or symbolMarker(), where I would recommend to use symbolMarker().+
+symbolSvg()
+This will return just you symbol without any text feilds. It will return an object with two properies
object and textXML.+The object property can be used if you want to process your symbol further and the textXML if you want to write you symbol directly to your document.
+Example:
+
document.getElementById("2525Symbol").innerHTML = mySymbol.symbolSvg().textXML+
+symbolMarker({symbolObject})
+This will return the symbol with all information printed. The left and top offsets of the insertion point are available from
symbolMarker().x and symbolMaker().yIt will return an object with six properies
object, textXML, width, height, x and y.+The object property can be used if you want to process your symbol further and the textXML if you want to write you symbol directly to your document.
+It's possible to pass an symbolObject from symbolSvg() to this function. If you know that you will update the information around the icon a lot but the SIDC will be the same, the recommendation is to cash the symbolObject and pass it to the function. If you don't pass any object the function will create a new icon from the symbols SIDC.
+Example:
+
document.getElementById("2525Symbol").innerHTML = mySymbol.symbolMarker().textXML+
+Example using a symbolObject:
+
document.getElementById("2525Symbol").innerHTML = mySymbol.symbolMarker(cashedSymbol.symbolSvg()).textXML+ +
Updating a symbol
+It is possible at any time to update properties for you symbol and request a new rendition. +Example:+
var sym = new MilSymbol("SFG-UCA----G",{size:50});
+document.write(sym.symbolMarker().textXML);
+document.write("<br>");
+sym.size = 27;
+sym.uniqueDesignation = "NAME";
+document.write(sym.symbolMarker().textXML);
+
+Will produce:+ + + +
FAQ
+The library is focused on flexibility and simplicity and not on speed but it's quite fast anyway. After the initial compilation of the source most symbols will be created under 3 milliseconds.+
+There are some symbols in APP6 we don't support, simply because the SIDCs listed in APP6 sometimes have errors in them and we simply couldn't figure out the correct ones...
+The symbols are:
+1.X.3.1.1.4.6.1.1
+1.X.3.1.1.4.6.1.2
+1.X.3.1.1.4.6.1.3
+1.X.3.1.1.5.10
+1.X.3.1.1.6.1.11
+1.X.3.1.1.6.1.12
+1.X.3.1.1.6.1.13
+1.X.3.1.1.6.1.14
+1.X.3.1.1.7.7
+1.X.3.1.1.7.8
+1.X.3.1.1.11
+1.X.3.1.2.9
+1.X.3.1.3.3.15
+1.X.3.1.3.4.8
+1.X.3.1.5
+1.X.3.1.6
+1..X.3.2.2.3.2.1
+1.X.4.1.3.4 have wrong SIDC in APP6 but we used the one in 2525.
+And the whole hierarchy 1.X.3.1.1.10 has the wrong SIDC in APP6 but we use the ones listed in 2525.
+
Contact
+All this was made by Måns Beckman, I'm an IT consultant working with GIS and information visualization +mainly with defence customers. All information on this homepage is however created in my spare time +and has no connection to my work, my work just happens to be my hobby as well.+ + +If you want some more information you can contact med at mans.beckman/at/spatialillusions/dot/com +
+ +01 DEC 2013 - Måns Beckman + + +