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
@@ -0,0 +1,71 @@
+<!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.divIcon({
+            className: '',
+            html: mysymbol.asSVG(),
+            iconAnchor: new L.Point(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>
@@ -0,0 +1,5 @@
+## milsymbol in LeafLet - L.divIcon()
+
+You can use the SVG XML output directly in a L.divIcon(), this way you can also add other HTML information to your markers if you want to. This is the simplest way of using milsymbol in LeafLet, but might run into performance issues if you are using a very large number of symbols.
+
+This example is using LeafLet 1.3.1.