ADD: added APP-6 Symbols to the Map

2023-09-05 18:46:34 +02:00
parent 6d2a1d7556
commit 658830bab6
221 changed files with 73498 additions and 21 deletions
--- a/node_modules/milsymbol/examples/leaflet-imageicons/index.html
+++ b/node_modules/milsymbol/examples/leaflet-imageicons/index.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <style type="text/css">
+    html,
+    body,
+    .mymap {
+      padding: 0;
+      margin: 0;
+      height: 100%;
+      width: 100%;
+    }
+  </style>
+
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
+  <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
+  <script src="../../dist//milsymbol.js"></script>
+  <script src="../situation.json"></script>
+</head>
+
+<body onload="init()">
+  <script>
+    function init() {
+      var osmAttr = '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>';
+      var OSM = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: osmAttr }),
+        latlng = L.latLng(59, 16);
+      var map = L.map('map', { center: latlng, zoom: 5, layers: [OSM] });
+
+      var iconSize = {
+        "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
+      };
+
+      L.geoJson(situation, {
+        pointToLayer: function (feature, latlng) {
+
+          var mysymbol = new ms.Symbol(
+            feature.properties.SIDC, {
+              uniqueDesignation: feature.properties.name
+            })
+          // Now that we have a symbol we can ask for the echelon and set the symbol size
+          mysymbol = mysymbol.setOptions({ size: iconSize[mysymbol.getMetadata().echelon] });
+
+          var myicon = L.icon({
+            iconUrl: mysymbol.toDataURL(),
+            iconAnchor: [mysymbol.getAnchor().x, mysymbol.getAnchor().y],
+          });
+
+          return L.marker(latlng, { icon: myicon, draggable: true });
+        }
+      }).addTo(map);
+    }
+  </script>
+
+  <div id="map" class="mymap"></div>
+
+</body>
+
+</html>