Skip to Content
Author's profile photo David Lincourt

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.

/wp-content/uploads/2016/07/map_1004922.jpg

Object Page.jpg

Worklist.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: 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.

Assigned Tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Hans Peukert
      Hans Peukert

      Excellent showcase .... the technology layer for User Centric Design for Defense is available ... Don't wait ... Just innovate

      Author's profile photo Ashwin Ananthapadmanabhan
      Ashwin Ananthapadmanabhan

      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.

      Thanks
      Ashwin A

      Author's profile photo David Lincourt
      David Lincourt
      Blog Post Author

      Hello Ashwin A - I do not believe there is a way to do so except by writing your own at the moment.

       

      Best Regards

       

      David

      Author's profile photo Dhiraj Kumar Barnwal
      Dhiraj Kumar Barnwal

      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.

      Regards,

      Dhiraj