Adding military map symbols to your SAPUI5 applications with Spatial Illusions mapsymbol.js

Military symbology – either in the US DoD MIL-STD-2525 or the NATO APP-6 formats – are widely used in mapping applications. But did you know you can easily use these symbols in SAPUI5 based applications? It’s actually quite easy and I will show you the basics to get you started.

First, you will need to obtain a copy of a military symbology generator that will work in conjunction with your SAPUI5 applications. While you could draw your own – either from scratch or from building blocks you have at hand – the sheer number of potential symbols will most likely exhaust you or simply discourage you from embedding these symbols. I use the excellent JavaScript library from Spatial Illusions.The library can be found on GitHub here: https://github.com/spatialillusions/MilSymbol/

But before I show the “how to”, let me show you a few pictures of how you can use the Spatial Illusions library in conjunction with SAPUI5 based applications.

The key is to use a Formatter function to help generate the image associated with the military symbol. This function receives the parameters that are necessary to specify the content of the symbol. As a minimum, the symbol identification code (SIDC).

Here is a simple example of the JSON data:

{
    "Spots": {
        "items": [
            {
                "pos": "-116.630028;35.280530;0",
                "name": "165th Helicopter Battalion",
                "SIDC": "SFG-UCVRUM-F"
            }
        ]
    }
}

Here is how to invoke a Formatter for an image UI5 component. In this example, we are passing both the SIDC of the symbol along with its name:

<Image src="{ parts: ['SIDC', 'name'], formatter: '.setMilSymbol' }"/>

The Formatter function will look like this. Note that in this example, the size of the symbol is fixed but it could as well be passed as a parameter:

setMilSymbol: function(SIDC,name) {
  var oMapSymbol = new MS.symbol(SIDC , {size:40, uniqueDesignation:name}).getMarker().asImage();
  return oMapSymbol;
  }

The mapsymbol.js documentation can be found on the Spatial Illusions web site: http://spatialillusions.com/milsymbol/docs/index.html

In closing, I would like to thank Måns Beckman of Spatial Illusions for making this library available.