diff --git a/client/package-lock.json b/client/package-lock.json
index cec30017..9c27dca1 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -22,6 +22,7 @@
         "electron-window-state": "^5.0.3",
         "esri-leaflet": "^3.0.7",
         "leaflet": "^1.7.1",
+        "leaflet-ruler": "^1.0.0",
         "milsymbol": "^2.0.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
@@ -9491,20 +9492,6 @@
       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
       "dev": true
     },
-    "node_modules/fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
     "node_modules/function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -13116,6 +13103,14 @@
       "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
       "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
     },
+    "node_modules/leaflet-ruler": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/leaflet-ruler/-/leaflet-ruler-1.0.0.tgz",
+      "integrity": "sha512-5Ti99czL+hhcd5rMmT5JBkDvzErPUM+ogJbP6NDzJEMK5vCGqS9/1BrMpVeCcCaxViSWLPf9qcXRGcGO85UCZA==",
+      "peerDependencies": {
+        "leaflet": "^1.0.0"
+      }
+    },
     "node_modules/leaflet.heat": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/leaflet.heat/-/leaflet.heat-0.2.0.tgz",
@@ -27420,13 +27415,6 @@
       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
       "dev": true
     },
-    "fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
-      "optional": true
-    },
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -30121,6 +30109,12 @@
       "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
       "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
     },
+    "leaflet-ruler": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/leaflet-ruler/-/leaflet-ruler-1.0.0.tgz",
+      "integrity": "sha512-5Ti99czL+hhcd5rMmT5JBkDvzErPUM+ogJbP6NDzJEMK5vCGqS9/1BrMpVeCcCaxViSWLPf9qcXRGcGO85UCZA==",
+      "requires": {}
+    },
     "leaflet.heat": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/leaflet.heat/-/leaflet.heat-0.2.0.tgz",
diff --git a/client/package.json b/client/package.json
index 6fdc724c..4b628063 100644
--- a/client/package.json
+++ b/client/package.json
@@ -19,6 +19,7 @@
     "electron-window-state": "^5.0.3",
     "esri-leaflet": "^3.0.7",
     "leaflet": "^1.7.1",
+    "leaflet-ruler": "^1.0.0",
     "milsymbol": "^2.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
diff --git a/client/src/components/liberationmap/LiberationMap.tsx b/client/src/components/liberationmap/LiberationMap.tsx
index 62aeb90a..5863184c 100644
--- a/client/src/components/liberationmap/LiberationMap.tsx
+++ b/client/src/components/liberationmap/LiberationMap.tsx
@@ -18,6 +18,7 @@ import { useEffect, useRef } from "react";
 import { BasemapLayer } from "react-esri-leaflet";
 import { LayersControl, MapContainer, ScaleControl } from "react-leaflet";
 import Iadsnetworklayer from "../iadsnetworklayer";
+import LeafletRuler from "../ruler/Ruler";
 
 export default function LiberationMap() {
   const map = useRef<Map>();
@@ -32,6 +33,7 @@ export default function LiberationMap() {
       whenCreated={(mapInstance) => (map.current = mapInstance)}
     >
       <ScaleControl />
+      <LeafletRuler />
       <LayersControl collapsed={false}>
         <LayersControl.BaseLayer name="Imagery Clarity" checked>
           <BasemapLayer name="ImageryClarity" />
diff --git a/client/src/components/ruler/Ruler.css b/client/src/components/ruler/Ruler.css
new file mode 100644
index 00000000..643f774b
--- /dev/null
+++ b/client/src/components/ruler/Ruler.css
@@ -0,0 +1,9 @@
+@import "~leaflet-ruler/src/leaflet-ruler.css";
+
+.result-tooltip{
+  border-color: #435466;
+}
+
+.moving-tooltip{
+  border-color: #435466;
+}
diff --git a/client/src/components/ruler/Ruler.tsx b/client/src/components/ruler/Ruler.tsx
new file mode 100644
index 00000000..00a789b4
--- /dev/null
+++ b/client/src/components/ruler/Ruler.tsx
@@ -0,0 +1,38 @@
+/// <reference path="./leaflet-ruler.d.ts" />
+import { useEffect } from "react";
+import { useMap } from "react-leaflet";
+import L from "leaflet";
+import "leaflet-ruler";
+import "./Ruler.css"
+
+export default function LeafletRuler() {
+  const map = useMap();
+
+  useEffect(() => {
+    if (!map) return;
+
+    var options = {
+          position: 'topleft',
+          circleMarker: {               // Leaflet circle marker options for points used in this plugin
+            color: 'yellow',
+            radius: 2
+          },
+          lineStyle: {                  // Leaflet polyline options for lines used in this plugin
+            color: 'yellow',
+            dashArray: '1,6'
+          },
+          lengthUnit: {
+            factor: 0.539956803,    //  from km to nm
+            display: 'NM',
+            decimal: 2,
+            label: "Distance",
+          }
+        };
+    if( L.control.hasOwnProperty('ruler') )
+    {
+      L.control.ruler(options).addTo(map);
+    }
+  }, [map]);
+
+  return null;
+}
diff --git a/client/src/components/ruler/index.ts b/client/src/components/ruler/index.ts
new file mode 100644
index 00000000..10798478
--- /dev/null
+++ b/client/src/components/ruler/index.ts
@@ -0,0 +1 @@
+export {default} from "./Ruler";
diff --git a/client/src/components/ruler/leaflet-ruler.d.ts b/client/src/components/ruler/leaflet-ruler.d.ts
new file mode 100644
index 00000000..8232659b
--- /dev/null
+++ b/client/src/components/ruler/leaflet-ruler.d.ts
@@ -0,0 +1,35 @@
+interface CircleMarker {
+  color: string;
+  radius: number;
+}
+
+interface LineStyle {
+  color: string;
+  dashArray: string;
+}
+
+interface LengthUnit {
+  display: string;
+  decimal: number;
+  factor: number?;
+  label: string;
+}
+
+interface AngleUnit {
+  display: string;
+  decimal: number;
+  factor: number?;
+  label: string;
+}
+
+interface RulerOptions {
+  position?: string;
+  circleMarker?: CircleMarker;
+  lineStyle?: LineStyle;
+  lengthUnit?: LengthUnit;
+  angleUnit?: AngleUnit;
+}
+
+declare namespace L.control {
+  function ruler (options: RulerOptions) : L.Control {}
+}