Adds a ruler to the map (#1332)

* Adds a ruler to the map

* Updating changelog

* Updating changelog

changelog.md

@@ -29,6 +29,7 @@ Saves from 3.x are not compatible with 4.0.
 * **[UI]** Carriers and LHAs now match the colour of airfields, and their destination icons are translucent.
 * **[UI]** Updated intel box text for first turn.
 * **[UI]** Base Capture Cheat is now usable at all bases and can also be used to transfer player-owned bases to OPFOR.
+* **[UI]** Added a ruler to the map.  
 * **[Units/Factions/Mods]** Removes MB-339PAN support, as the mod is now deprecated and no longer works with DCS 2.7+. 
 * **[New Game Wizard]** Mods are now selected via checkboxes in the new game wizard, not as separate factions.
 

resources/ui/map/canvas.html

@@ -24,6 +24,13 @@
         integrity="sha384-XAr1poM2RCR9/QQFki7ylrGSdmvYE0NuHghuRuxb/k9zJQA53y6qR5te5jJRZlcL"
         crossorigin="">
     </script>
+    <link rel="stylesheet"
+          href="https://cdn.jsdelivr.net/gh/gokertanrisever/leaflet-ruler@master/src/leaflet-ruler.css"
+          integrity="sha384-P9DABSdtEY/XDbEInD3q+PlL+BjqPCXGcF8EkhtKSfSTr/dS5PBKa9+/PMkW2xsY"
+          crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/gh/gokertanrisever/leaflet-ruler@master/src/leaflet-ruler.js"
+            integrity="sha384-N2S8y7hRzXUPiepaSiUvBH1ZZ7Tc/ZfchhbPdvOE5v3aBBCIepq9l+dBJPFdo1ZJ"
+            crossorigin="anonymous"></script>
     <script src="map.js" defer="defer"></script>
     <style>
         body { padding: 0; margin: 0; }

resources/ui/map/map.js

@@ -123,6 +123,30 @@ const map = L.map("map", {
 }).setView([0, 0], 3);
 L.control.scale({ maxWidth: 200 }).addTo(map);
 
+const rulerOptions = {
+  position: 'topleft',
+  circleMarker: {
+    color: Colors.Highlight,
+    radius: 2
+  },
+  lineStyle: {
+    color: Colors.Highlight,
+    dashArray: '1,6'
+  },
+  lengthUnit: {
+    display: "nm",
+    decimal: "2",
+    factor: 0.539956803,
+    label: "Distance:"
+  },
+  angleUnit: {
+    display: '°',
+    decimal: 0,
+    label: "Bearing:"
+  }
+};
+L.control.ruler(rulerOptions).addTo(map);
+
 // https://esri.github.io/esri-leaflet/api-reference/layers/basemap-layer.html
 const baseLayers = {
   "Imagery Clarity": L.esri.basemapLayer("ImageryClarity", { maxZoom: 17 }),