Has anyone successfully used mil-sym-js in an Angular project?

[Zaandar]

I am trying to use mil-sym-js in an Angular project but am having no luck importing and using the functions. I followed the instructions on the documentation and also tried the Angular way to do it with no luck. Any pointers?

[ComBatVision]

Yes. I have used it.

Add following into index.html

  <script type="text/javascript" src="assets/mil-sym/sm-bc.js"></script>
  <link rel="stylesheet" href="assets/mil-sym/renderer.css" type="text/css" charset="utf-8" />
  <link rel="stylesheet" href="assets/mil-sym/fonts/SinglePoint.ttf" type="text/css"/>
  <link rel="stylesheet" href="assets/mil-sym/fonts/SinglePoint.woff" type="text/css"/>
  <link rel="stylesheet" href="assets/mil-sym/fonts/SinglePoint.woff2" type="text/css"/>

Then import variable:
declare var armyc2: any;
declare var java: any;

Then declare constants like:
static readonly RendererUtilities = armyc2.c2sd.renderer.utilities.RendererUtilities;
static readonly RendererSettings = armyc2.c2sd.renderer.utilities.RendererSettings;
static readonly SymbolUtilities = armyc2.c2sd.renderer.utilities.SymbolUtilities;
static readonly SymbolDefTable = armyc2.c2sd.renderer.utilities.SymbolDefTable;
static readonly UnitDefTable = armyc2.c2sd.renderer.utilities.UnitDefTable;
static readonly ModifiersTG = armyc2.c2sd.renderer.utilities.ModifiersTG;
static readonly ModifiersUnits = armyc2.c2sd.renderer.utilities.ModifiersUnits;
static readonly MilStdAttributes = armyc2.c2sd.renderer.utilities.MilStdAttributes;

And then use them.

[Zaandar]

Great! Thanks!

[Zaandar]

@ComBatVision Just curious, what are you using for maps? I am using Cesium.

[ComBatVision]

@Zaandar I am using NASA WorldWind

[chusitoo]

I found this very helpful for a start. I did end up taking a slightly different approach, though.

angular.json

"styles": [
    "src/assets/mil-sym-js/renderer.css"
],
"scripts": [
    "src/assets/mil-sym-js/sm-bc.js"
],

app.component.ts

declare var armyc2: any;
declare var java: any;

export const RendererUtilities = armyc2.c2sd.renderer.utilities.RendererUtilities;
export const RendererSettings = armyc2.c2sd.renderer.utilities.RendererSettings;
export const SymbolUtilities = armyc2.c2sd.renderer.utilities.SymbolUtilities;
export const SymbolDefTable = armyc2.c2sd.renderer.utilities.SymbolDefTable;
export const UnitDefTable = armyc2.c2sd.renderer.utilities.UnitDefTable;
export const ModifiersTG = armyc2.c2sd.renderer.utilities.ModifiersTG;
export const ModifiersUnits = armyc2.c2sd.renderer.utilities.ModifiersUnits;
export const MilStdAttributes = armyc2.c2sd.renderer.utilities.MilStdAttributes;

calling_script.ts

import { RendererSettings, ModifiersUnits } from 'src/app/app.component';

// Set some properties
RendererSettings.setUseCesium2DScaleModifiers(true);
RendererSettings.setSymbologyStandard(RendererSettings.Symbology_2525C);
RendererSettings.setDefaultPixelSize(42);

It would also appear that the fonts, which are referenced in renderer.css, are automatically imported with this approach.