Add proper NATO symbology

CHANGELOG.md

@@ -1,5 +1,6 @@
 ### Change Log for Node-RED Worldmap
 
+ - v1.1.14 - Add proper NATO symbology via <a href="https://github.com/spatialillusions/milsymbol" target="_new">milsymbol.js</a>
  - v1.1.13 - Add ability to set a building using a GeoJSON Feature set. {name:"MyTower":building:{...feature sets...}}
  - v1.1.12 - README changes, split out CHANGELOG.md
  - v1.1.11 - fix websocket multiple connections

README.md

@@ -65,6 +65,17 @@ There are also several special icons...
  - **unknown** : pseudo NATO style yellow square.
  - **earthquake** : black circle - diameter proportional to `msg.mag`.
 
+#### NATO Symbology
+
+You can use NATO symbols via <a href="https://github.com/spatialillusions/milsymbol" target="_new">milsymbol.js</a>.
+To do this you need to supply a `msg.SIDC` instead of an icon, for example:
+
+    {   name: "Emergency Medical Operation",
+        lat: 51.05,
+        lon: -1.35,
+        SIDC:"ENOPA-------"
+    }
+
 ### Buildings
 
 The OSM Buildings layer is available in the layers menu. You can replace this with a building of your own by

package.json

@@ -1,6 +1,6 @@
 {
     "name": "node-red-contrib-web-worldmap",
-    "version": "1.1.13",
+    "version": "1.1.14",
     "description": "A Node-RED node to provide a web page of a world map for plotting things on.",
     "dependencies": {
         "express": "^4.16.3",

worldmap/index.html

@@ -46,12 +46,12 @@
     <script type="text/javascript" src="leaflet/easy-button.js"></script>
     <script type="text/javascript" src="leaflet/Leaflet.fullscreen.min.js"></script>
     <script type="text/javascript" src="leaflet/l.ellipse.min.js"></script>
+    <script type="text/javascript" src="leaflet/milsymbol.js"></script>
     <script type="text/javascript" src="leaflet/leaflet-heat.js"></script>
     <script type="text/javascript" src="leaflet/TileLayer.Grayscale.js"></script>
     <script type="text/javascript" src="leaflet/TileLayer.GrayscaleWMS.js"></script>
     <script type="text/javascript" src="leaflet/L.Terminator.js"></script>
     <script type="text/javascript" src="leaflet/tile.stamen.js"></script>
-    <!-- <script type="text/javascript" src="leaflet/leaflet-openweathermap.js"></script> -->
     <script type="text/javascript" src="leaflet/OSMBuildings-Leaflet.js"></script>
 
     <script type="text/javascript" src="leaflet/dialog-polyfill.js"></script>
@@ -126,6 +126,23 @@ var showLayerMenu = true;
 var layercontrol;
 var ws;
 
+var iconSz = {
+  "Team/Crew": 5,
+  "Squad": 10,
+  "Section": 15,
+  "Platoon/detachment": 20,
+  "Company/battery/troop": 25,
+  "Battalion/squadron": 30,
+  "Regiment/group": 35,
+  "Brigade": 40,
+  "Division": 45,
+  "Corps/MEF": 50,
+  "Army": 55,
+  "Army Group/front": 60,
+  "Region/Theater": 65,
+  "Command": 70
+};
+
 // Create the socket
 var connect = function() {
     ws = new SockJS(location.pathname + 'socket');
@@ -673,22 +690,9 @@ map.on('draw:created', function (e) {
 //     opacity: 0.9
 // });
 //
-// overlays["rain"] = L.tileLayer('http://{s}.tile.openweathermap.org/map/rain/{z}/{x}/{y}.png', {
-//     maxZoom: 18,
-//     attribution: 'Map data &copy; <a href="http://openweathermap.org">OpenWeatherMap</a>',
-//     opacity: 0.5
-// });
-//
-// overlays["pressure"] = L.tileLayer('http://{s}.tile.openweathermap.org/map/pressure_cntr/{z}/{x}/{y}.png', {
-//     maxZoom: 18,
-//     attribution: 'Map data &copy; <a href="http://openweathermap.org">OpenWeatherMap</a>',
-//     opacity: 0.5
-// });
-//
-// overlays["weather"] = L.OWM.current({interval:30, minZoom:8, appId:"9ae11d4f6f9bed61f32fc061f715cc71"});
 
 overlays["buildings"] = new OSMBuildings(map).load();
-map.removeLayer(overlays["buildings"]);
+map.removeLayer(overlays["buildings"]);     // Hide it at start
 
 // Add the shipping navigation markers
 //var OpenSeaMap = L.tileLayer('http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', {
@@ -978,6 +982,19 @@ function setMarker(data) {
         else if (data.icon === "earthquake") {
             marker = L.marker(ll, { icon: L.divIcon({ className: 'circle e', iconSize: [data.mag*5, data.mag*5] }), title: data.name });
         }
+        else if (data.hasOwnProperty("SIDC")) {
+            // "SIDC":"SFGPU------E***","name":"1.C2 komp","fullname":"1.C2 komp/FTS/INSS"
+            myMarker = new ms.Symbol( data.SIDC, { uniqueDesignation:data.name });
+            // Now that we have a symbol we can ask for the echelon and set the symbol size
+            var opts = data.options || {};
+            opts.size = opts.size || iconSz[myMarker.getProperties().echelon] || 20;
+            myMarker = myMarker.setOptions(opts);
+            var myicon = L.icon({
+              iconUrl: myMarker.toDataURL(),
+              iconAnchor: [myMarker.getAnchor().x, myMarker.getAnchor().y],
+            });
+            marker =  L.marker(ll, { title:data.name, icon:myicon });
+        }
         else if (data.icon && (data.icon.substr(0,3) === "fa-")) {
             var col = data.iconColor || "#910000";
             myMarker = L.divIcon({

worldmap/worldmap.appcache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# date: May 28th 2018 - v1.1.13
+# date: May 28th 2018 - v1.1.14
 
 CACHE:
 index.html
@@ -39,6 +39,7 @@ leaflet/leaflet.markercluster.freezable-src.js
 leaflet/leaflet.measurecontrol.css
 leaflet/leaflet.measurecontrol.js
 leaflet/leaflet.select-layers.min.js
+leaflet/milsymbol.js
 leaflet/OSMBuildings-Leaflet.js
 leaflet/sockjs.min.js
 leaflet/tile.stamen.js