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>
--- a/node_modules/milsymbol/examples/leaflet-imageicons/preview.png
+++ b/node_modules/milsymbol/examples/leaflet-imageicons/preview.png
--- a/node_modules/milsymbol/examples/leaflet-imageicons/readme.md
+++ b/node_modules/milsymbol/examples/leaflet-imageicons/readme.md
@@ -0,0 +1,5 @@
+## milsymbol in LeafLet - L.icon()
+
+Using the toDataURL() method in milsymbol makes it possible to assign the output from milsymbol as an image source. This way you can use the output from milsymbol in ordinary L.icon() markers in LeafLet.
+
+This example is using LeafLet 1.3.1 but will work without any problem in in LeafLet 0.7.3+.