From a50a6fa9174dca53074ef599f6b81051f5bbbd02 Mon Sep 17 00:00:00 2001
From: bgreman <47828384+bgreman@users.noreply.github.com>
Date: Thu, 24 Jun 2021 02:58:39 -0400
Subject: [PATCH] Adds a ruler to the map (#1332)

* Adds a ruler to the map

* Updating changelog

* Updating changelog
---
 changelog.md                 |  1 +
 resources/ui/map/canvas.html |  7 +++++++
 resources/ui/map/map.js      | 24 ++++++++++++++++++++++++
 3 files changed, 32 insertions(+)

diff --git a/changelog.md b/changelog.md
index a1ad99b4..aba18ad6 100644
--- a/changelog.md
+++ b/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.
 
diff --git a/resources/ui/map/canvas.html b/resources/ui/map/canvas.html
index 42830fe8..ff99669a 100644
--- a/resources/ui/map/canvas.html
+++ b/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; }
diff --git a/resources/ui/map/map.js b/resources/ui/map/map.js
index 18b6a436..9999231a 100644
--- a/resources/ui/map/map.js
+++ b/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: '&deg;',
+    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 }),