Skip to Content

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:

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.


Object Page.jpg


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:

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

You must be Logged on to comment or reply to a post.
  • Hi David
    Thanks for giving excellent steps to add NATO symbols using external library.I would like to know whether the same implementation can be done without using any external ;libraries.Kindly give your valuable help if any solution is available.

    Ashwin A

  • Hi David,

    I am using milsymbol.js library in project and symbols getting generated as expected.

    But getting error: ESLINT ms is not defined in webide.

    Please any suggestion to resolve this issue.