A painter for military icons and tactical graphics. This painter extends the FeaturePainter with functionality to visualize icons and symbols found in the MIL-STD 2525b, MIL-STD 2525c, , MIL-STD 2525d, APP-6A, APP-6B, APP-6C and APP-6D military standards.

Everything for this painter is configured at construction time, using functions that retrieve object literals for a given feature. This allows for flexibility for both feature-based properties, as well as global properties (that apply to all features).

Here's an overview of the keys for a few of the properties.

The following affiliation values can be colored with the affiliationColors map. Note that these values are not camel-case. This is because they are typically used as display values as well.

  • "Undefined"
  • "Pending"
  • "Unknown"
  • "Assumed Friend"
  • "Friend"
  • "Neutral"
  • "Suspect"
  • "Hostile"
  • "Exercise Pending"
  • "Exercise Unknown"
  • "Exercise Assumed Friend"
  • "Exercise Friend"
  • "Exercise Neutral"
  • "Joker"
  • "Faker"
  • "Assumed Neutral"
  • "Exercise Assumed Neutral"

Movement direction arrows

This painter also paints movement direction arrows for moving symbols. Ground units will have an arrow starting from a vertical stem, except in 3D.

The following modifiers affect the arrows:

  • "movementDirection": a number indicating the heading of the object. Must be an azimuth: degrees, clock-wise, 0 is north.
  • "speedLabel": a string expressing the movement speed, for example "17 km/h" or "11 kn". Affects the length of the arrow. Only relevant for APP-6C and MIL-STD-2525C.

The length of the arrow is determined by the existing style property "iconSize" in combination with the "speedLabel" modifier if available. The line-width of the arrow is determined by the existing style properties "lineWidth".

Example how to create a military feature and a painter

import {MilitarySymbologyPainter, MilSymStyle} from "@luciad/ria-milsym/symbology/military/MilitarySymbologyPainter.js";
import {MIL_STD_2525b} from "@luciad/ria-milsym/symbology/military/MIL_STD_2525b.js";
import {Feature} from "@luciad/ria/model/feature/Feature.js";
import {createPoint} from "@luciad/ria/shape/ShapeFactory.js";
import {getReference} from "@luciad/ria/reference/ReferenceProvider.js";

const modelRef = getReference("EPSG:4326");
const seaMineFeature = new Feature(createPoint(modelRef, [-70.981, 42.355]), {
code: "SHUPWM--------N", //Sea mine
modifiers: {
additionalInformation: "C",
dateTimeGroup: "121000TJAN14",
staffComments: "danger",
evaluationRating: "A1",
signatureEquipment: "!",
reinforcedOrReduced: "R",
quantity: "17",
speedLabel: "0"
}
}, 1);

const globalStyle = {
//Set a custom selection color
selectionColor: "#FF9900",
affiliationColors: {
//Any affiliation color can be overriden in the style
Friend: "rgb(128, 224, 255)",
//We accept both RGB and hex-based colors
Hostile: "#FF8080"
},
//Custom line width
lineWidth: 2,
//Custom size for icons
iconSize: 64
};

const symbologyPainter = new MilitarySymbologyPainter(MIL_STD_2525b, {
codeFunction: function(feature: Feature) {
//We return the SIDC of the military symbol
return (feature.properties as any).code;
},

style: function(feature: Feature): MilSymStyle {
//We return our global style. Note that it is also possible to have feature-specific
//styling if you choose to use the feature parameter.
return globalStyle;
},

width: (feature: Feature) => {
//We return the width we use for arrow-type tactical graphics.
return (feature.properties as any).width;
}
});

Hierarchy (view full)

Implements

Constructors

  • The basic constructor for MilitarySymbologyPainter. This constructor allows you to define a few functions to retrieve specific properties (such as modifiers and styling) for a given feature. An example of how this works is given in the class documentation. Each function defined in the "options" parameter of this constructor will receive the feature as a parameter, and will expect to get some object literal as output (in the return value). This allows you to either use the feature itself for feature-specific properties, or to refer to a global variable to retrieve certain properties.

    The example in the class documentation uses a global style object literal for all feature, but uses feature-specific modifiers.

    Parameters

    Returns MilitarySymbologyPainter

Accessors

  • get density(): null | DensitySettings
  • Set or get the density painting settings on this painter. Use null to disable density painting.

    The setting affects all features in the layer associated with this painter.

    The density settings object has one property: colorMap, the color map used to map density values to color.

    The density at a particular location is the sum of the value of alpha channel for all overlapping objects. So for a single opaque object you would get a density value of 1.0, for 2 opaque objects 2.0, etc.
    Example:

      var painter = new FeaturePainter();
    painter.paintBody = ... // customize painter as usual
    painter.density = {
    colorMap: ColorMap.createGradientColorMap([
    {level: 0, color: "rgba( 0, 0, 0, 0.0)"}, // no objects -> Transparent
    {level: 1, color: "rgba( 0, 255, 0, 0.5)"}, // 1 opaque object -> Transparent green
    {level: 10, color: "rgba(255, 255, 255, 1.0)"} //10 opaque objects -> White
    ])
    };

    Notes when using density painting:

    • Density painting works for all kinds of objects: points/icons, lines and areas.
    • The color aspect of the styling provided in paintBody is ignored. The alpha value of the color is used as a per-feature weight.
    • If you paint icons, you can leave out the icon image. You will automatically get a gradient icon. You can still adapt the size with the width and height style properties.

    This property is only supported on a WebGLMap, and is ignored otherwise.

    Returns null | DensitySettings

  • set density(value): void
  • Parameters

    Returns void

Methods

  • A method that generates an image for the given feature with the given size. The feature needs a symbology and code property const properties = { code: symbologyNode.code, symbology: symbology, } The feature also needs a valid (template) shape. (Use SymbologyNode.createTemplates)

    You will get an image as HTMLImageElement.

    This can be used to generate a UI preview image for your symbols as is done in our Symbology sample in the CreationPanel to clarify the creation instructions.

    Parameters

    Returns Promise<null | HTMLImageElement>

    Since

    2022.0

  • A utility method to get the actual symbol bounds, that can then be used for fitting on that symbol.

    The feature needs a symbology and code property

    const properties = { code: symbologyNode.code, symbology: symbology, }

    The feature also needs a valid (template) shape. (Use SymbologyNode.createTemplates)

    The visualization of a military symbol might differ significantly of the polyline that contains the symbol's anchor points. In the most extreme case, two anchor points are used to draw a full circle. The bounds of the shape inside the feature will be the bounds of the two points, this method will return the bounds of the circle. Please note that only the actual shapes are taken into account to calculate the bounds, specific styling, labels and icons are not taken into account. Therefor it is probably a good idea to fit with a MapNavigatorFitOptions.fitMargin

    Parameters

    Returns Promise<null | Bounds>

    Since

    2024.0

  • Returns an array of map scales that determine when this painter should switch from one level-of-detail to the next. This can be used to advertise that this painter supports multiple level-of-details for a given object. The current level-of-detail that is used is determined by the map and is passed back to this FeaturePainter via the state.level property that is passed to the paint methods. The default implementation of this method returns null indicating the level-of-detail is not supported.

    Parameters

    • Optional layer: FeatureLayer

      the layer for which the detail level scales are being requested

    • Optional map: Map

      the map for which the detail level scales are being requested

    Returns null | number[]

    the switch scales for each level of detail

    See

    A visual example of the relation between the scale switching points and the paint levels. The example uses 3 different switching scales, hence resulting with 4 paint levels.

    // Scale:           1 : 100 000          1 : 10 000            1 : 1000
    // (zoomed out) -------- | ----------------- | ----------------- | -------- (zoomed in)
    // level 0 | level 1 | level 2 | level 3

    getDetailLevelScales(): number[] {
    return [1 / 100000, 1 / 10000, 1 / 1000];
    }
  • Invalidates this painter for a specific feature. Call this method when any state that determines the rendering of a specific feature has been changed. Calling this method refreshes this FeaturePainter's layer and guarantees that () and () will be called for the given feature during the next map render.

    Parameters

    Returns void

  • Invalidates this painter for all objects. Call this method when any state that determines the rendering of objects has been changed. Calling this method refreshes the FeaturePainter's layer and guarantees that () and () will be called for all objects in the layer during the next map render.

    Returns void

  • Invalidates this painter for a specific object by id. Call this method when any state that determines the rendering of a specific object has been changed. Calling this method refreshes this FeaturePainter's layer and guarantees that () and () will be called for the given object during the next map render.

    Parameters

    Returns void

  • A method that paints military icons and tactical graphics on a map.

    Override this method to add custom decorations on top of the military icons and tactical graphics. (Example: Painting flags next to icons, based on the country)

    Parameters

    Returns void

  • The method to describe how a model object has to be visualized in bottom and left border of the vertical view map. The map must first be configured with axis.

    Only the bottom border decorations are painted by default. The Left border decorations must be enabled explicitly on the layer using LEFT_BORDER_BODY paint representation.

    This is an optional method.

    Parameters

    Returns void

  • The method to describe how a model object has to be labeled on the bottom and left border of the vertical view map.

    Only the bottom border labels are painted by default. The Left border labels must be enabled explicitly on the layer using LEFT_BORDER_LABEL paint representation.

    This is an optional method.

    Parameters

    Returns void

  • A method that paints labels for military icons.

    Override this method to customize labeling, or to add additional labels to existing military symbols (Example: Put the name of the country as a text label near the military icon)

    You can modify the style of the labels by changing the CSS style of the label. This class is called .luciad .lcdSymbologyLabel

    See samples/symbology/common/ui/milsym-common-styles.css for an example usage of this selector.

    .luciad .lcdSymbologyLabel {
    font-family: Arial, monospace;
    font-weight: normal;
    color: white;
    font-size: 10px;
    text-shadow: 0 0 5px #000000;
    }

    You can also modify the style of the "glow" applied to the label when a bloomStyle is applied to the symbol. The class to do so is called lcdSymbologyLabelGlow

     text-shadow: 0 0 2px #000, 0 0 4px #fff,
    0 0 5px #efefef, 0 0 6px #efefef,
    0 0 7px #bbbbbb, 0 0 8px #bbbbbb, 0 0 9px #bbbbbb;

    Parameters

    Returns void

Events

"" event

  • on("", callback: ((...args) => void), context?: any) : Handle
  • Registers a callback function for a given event type.

    Parameters

    • event: string

      the event type to register on

    • callback: ((...args) => void)

      the callback function to register

        • (...args): void
        • Parameters

          • Rest ...args: any[]

          Returns void

    • Optional context: any

      the context in which the callback function should be invoked implementation dependent.

    Returns Handle

    a handle to the registered callback with a single function 'remove'. This function can be used to unregister the callback function.

"Invalidate" event

"InvalidateAll" event

  • on("InvalidateAll", callback: (() => void)) : Handle
  • Parameters

    • event: "InvalidateAll"
    • callback: (() => void)
        • (): void
        • Returns void

    Returns Handle

    See

    FeaturePainter.on "InvalidateAll"

"InvalidateById" event

  • on("InvalidateById", callback: (() => void)) : Handle
  • Parameters

    • event: "InvalidateById"
    • callback: (() => void)
        • (): void
        • Returns void

    Returns Handle

    See

    FeaturePainter.on "InvalidateById"

"SymbologyServiceOnline" event

  • on("SymbologyServiceOnline", callback: (() => void), context?: any) : Handle
  • Registers a callback function for the "SymbologyServiceOnline" event, that notifies a listener that the symbology service is online.

    Parameters

    • event: "SymbologyServiceOnline"

      Always set to "SymbologyServiceOnline" for this event type.

    • callback: (() => void)

      The callback function to be executed when the event is emitted

        • (): void
        • Returns void

    • Optional context: any

      The context in which the function should be invoked.

      "SymbologyServiceOnline"

    Returns Handle

    Since

    2021.0

    Deprecated

    is no longer emitted since we no longer use a service for the icons

"SymbologyServiceOffline" event

  • on("SymbologyServiceOffline", callback: (() => void), context?: any) : Handle
  • Registers a callback function for the "SymbologyServiceOffline" event, that notifies a listener that the symbology service is offline.

    Parameters

    • event: "SymbologyServiceOffline"

      Always set to "SymbologyServiceOffline" for this event type.

    • callback: (() => void)

      The callback function to be executed when the event is emitted

        • (): void
        • Returns void

    • Optional context: any

      The context in which the function should be invoked.

      "SymbologyServiceOffline"

    Returns Handle

    Since

    2021.0

    Deprecated

    is no longer emitted since we no longer use a service for the icons