Added a scale and unit option to the measure tool

src/components/map/Map.js

@@ -58,6 +58,7 @@ function Map({
     },
     measure: {
       type: "chebyshev",
+      scale: "5ft",
     },
   });
 

src/components/map/MapMeasure.js

@@ -21,6 +21,12 @@ function MapMeasure({ selectedToolSettings, active, gridSize }) {
   const [drawingShapeData, setDrawingShapeData] = useState(null);
   const [isBrushDown, setIsBrushDown] = useState(false);
 
+  const toolScale =
+    active && selectedToolSettings.scale.match(/(\d*)([a-zA-Z]*)/);
+  const toolMultiplier =
+    active && !isNaN(parseInt(toolScale[1])) ? parseInt(toolScale[1]) : 1;
+  const toolUnit = active && toolScale[2];
+
   useEffect(() => {
     if (!active) {
       return;
@@ -126,7 +132,9 @@ function MapMeasure({ selectedToolSettings, active, gridSize }) {
         >
           <Tag fill="hsla(230, 25%, 18%, 0.8)" cornerRadius={4} />
           <Text
-            text={shapeData.length.toFixed(2)}
+            text={`${(shapeData.length * toolMultiplier).toFixed(
+              2
+            )}${toolUnit}`}
             fill="white"
             fontSize={24}
             padding={4}

src/components/map/controls/MeasureToolSettings.js

@@ -1,11 +1,13 @@
 import React, { useEffect, useContext } from "react";
-import { Flex } from "theme-ui";
+import { Flex, Input, Text } from "theme-ui";
 
 import ToolSection from "./ToolSection";
 import MeasureChebyshevIcon from "../../../icons/MeasureChebyshevIcon";
 import MeasureEuclideanIcon from "../../../icons/MeasureEuclideanIcon";
 import MeasureManhattanIcon from "../../../icons/MeasureManhattanIcon";
 
+import Divider from "../../Divider";
+
 import MapInteractionContext from "../../../contexts/MapInteractionContext";
 
 function MeasureToolSettings({ settings, onSettingChange }) {
@@ -50,14 +52,31 @@ function MeasureToolSettings({ settings, onSettingChange }) {
     },
   ];
 
-  // TODO Add keyboard shortcuts
-
   return (
     <Flex sx={{ alignItems: "center" }}>
       <ToolSection
         tools={tools}
         onToolClick={(tool) => onSettingChange({ type: tool.id })}
       />
+      <Divider vertical />
+      <Text as="label" variant="body2" sx={{ fontSize: "16px" }} p={1}>
+        Scale:
+      </Text>
+      <Input
+        p={1}
+        pl={0}
+        sx={{
+          width: "40px",
+          border: "none",
+          ":focus": {
+            outline: "none",
+          },
+          lineHeight: 1.2,
+        }}
+        value={settings.scale}
+        onChange={(e) => onSettingChange({ scale: e.target.value })}
+        autoComplete="off"
+      />
     </Flex>
   );
 }