SAP for Public Sector Blogs
Read and write blog posts showcasing creative initiatives, technology advancements, and success stories in public sector transformation powered by SAP.
Showing results for 
Search instead for 
Did you mean: 
0 Kudos

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.

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.