Add the ruler to the new map.

https://github.com/dcs-liberation/dcs_liberation/issues/2158

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" />

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;
+}

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;
+}

client/src/components/ruler/index.ts

@@ -0,0 +1 @@
+export {default} from "./Ruler";

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 {}
+}