@mapcomponents/react-maplibre 0.1.46 → 0.1.51

package/dist/setupTests.d.ts

@@ -0,0 +1,12 @@
+export var uuid_regex: string;
+export namespace mockMapLibreMethods {
+    const on: any;
+    const off: any;
+    const addControl: any;
+    const removeControl: any;
+    const hasControl: any;
+    function getCanvas(): HTMLCanvasElement;
+    function getContainer(): {
+        style: {};
+    };
+}

package/dist/stories/components/Readme.d.ts

@@ -0,0 +1,2 @@
+export default Readme;
+declare function Readme(): JSX.Element;

package/dist/ui_components/ImageLoader.d.ts

@@ -0,0 +1,2 @@
+export default ImageLoader;
+declare function ImageLoader(props: any): JSX.Element;

package/dist/ui_components/Legend.d.ts

@@ -0,0 +1 @@
+export default function Legend(props: any): JSX.Element;

package/dist/ui_components/LoadingOverlay.d.ts

@@ -0,0 +1,2 @@
+export default LoadingOverlay;
+declare function LoadingOverlay(): JSX.Element;

package/dist/ui_components/LoadingOverlayContext.d.ts

@@ -0,0 +1,11 @@
+export const LoadingOverlayContext: React.Context<{}>;
+export function LoadingOverlayProvider({ children }: {
+    children: any;
+}): JSX.Element;
+export namespace LoadingOverlayProvider {
+    namespace propTypes {
+        const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+    }
+}
+import React from "react";
+import PropTypes from "prop-types";

package/dist/ui_components/Sidebar.d.ts

@@ -0,0 +1 @@
+export default function Sidebar(props: any): JSX.Element;

package/dist/ui_components/Tooltip.d.ts

@@ -0,0 +1 @@
+export default function Legend(props: any): JSX.Element;

package/dist/ui_components/TopToolbar.d.ts

@@ -0,0 +1 @@
+export default function TopToolbar(props: any): JSX.Element;

package/dist/util/index.d.ts

@@ -0,0 +1,3 @@
+import layerRemovalTest from "./layerRemovalTest";
+import sourceRemovalTest from "./sourceRemovalTest";
+export { layerRemovalTest, sourceRemovalTest };

package/dist/util/layerRemovalTest.d.ts

@@ -0,0 +1,2 @@
+export default layerRemovalTest;
+declare function layerRemovalTest(ComponentName: any, Component: any, regexLayerNameTest: any, humanReadableLayerName: any, beforeWrapperInit: any, afterWrapperInit: any, createWrapperFunction: any): void;

package/dist/util/sourceRemovalTest.d.ts

@@ -0,0 +1,2 @@
+export default sourceRemovalTest;
+declare function sourceRemovalTest(ComponentName: any, Component: any, regexLayerNameTest: any, humanReadableLayerName: any, beforeWrapperInit: any, afterWrapperInit: any): void;

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@mapcomponents/react-maplibre",
-  "version": "0.1.46",
+  "version": "0.1.51",
   "main": "index.js",
   "license": "MIT",
   "module": "dist/index.esm.js",
   "source": "src/index.ts",
+  "types": "dist/index.d.ts",
   "scripts": {
     "build": "rollup -c",
     "start": "start-storybook -p 6006 -s public",

package/public/catalogue/mc_meta.json

@@ -0,0 +1 @@
+{"MlCreatePdfButton":{"name":"MlCreatePdfButton","title":"Export PDF","description":"Creates a PDF file with the current map view.","i18n":{"de":{"title":"PDF Export","description":"Erzeugt eine PDF Datei aus der aktuellen Kartenansicht."}},"tags":["Map add-on"],"category":"add-ons","type":"component","price":5000},"MlFeatureEditor":{"name":"MlFeatureEditor","title":"Sketch tools","description":"Enables the editing of Point, Linestring and Polygon GeoJSON Files.","i18n":{"de":{"title":"Skizzen Werkzeug","description":"Erzeugen und Bearbeiten von Objekten."}},"tags":["Map add-on"],"category":"add-ons","type":"component","price":0},"MlFillExtrusionLayer":{"name":"MlFillExtrusionLayer","title":"Simple 3D buildings","description":"Draws a level, out of the building outline and the height, extrudes 3D Objects as buildings.","i18n":{"de":{"title":"3D Gebäude","description":"Zeichnet eine Ebene mit einfach, aus den Gebäudeumrissen und anhand der Höhen, extrudierten 3D Objekten als Gebäude."}},"tags":["Map add-on"],"category":"add-ons","type":"component","price":5000},"MlFollowGps":{"name":"MlFollowGps","title":"GPS tracker","description":"","i18n":{"de":{"title":"GPS-Tracker","description":""}},"tags":[],"category":"","type":"component","price":0},"MlGeoJsonLayer":{"name":"MlGeoJsonLayer","title":"GeoJSON layer","description":"","i18n":{"de":{"title":"GeoJSON Darstellung","description":""}},"tags":[],"category":"","type":"component","price":0},"MlGPXViewer":{"name":"MlGPXViewer","title":"GPX viewer","description":"","i18n":{"de":{"title":"GPX Darstellung","description":""}},"tags":["Map add-on"],"category":"add-ons","type":"component","price":5000},"MlLayerMagnify":{"name":"MlLayerMagnify","title":"Map magnifier","description":"Hides a part of a map that is superimposed on another MapLibre map.","i18n":{"de":{"title":"Kartenlupe","description":"Kartenlupe blendet einen Teil einer, von zwei übereinanderliegenden, MapLibre Karten aus."}},"tags":["Map add-on"],"category":"add-ons","type":"component","price":5000},"MlLayerSwipe":{"name":"MlLayerSwipe","title":"Map curtain","description":"Map curtain hides an area of the top one of two overlaying MapLibre maps.","i18n":{"de":{"title":"Kartenvorhang","description":"Kartenvorhangs blendet einen Teil einer, von zwei übereinanderliegenden, MapLibre Karten aus."}},"tags":["Map add-on"],"category":"add-ons","type":"component","price":5000},"MlMeasureTool":{"name":"MlMeasureTool","title":"Measure tool","description":"","i18n":{"de":{"title":"Messwerkzeug","description":""}},"tags":[],"category":"","type":"component","price":0},"MlNavigationCompass":{"name":"MlNavigationCompass","title":"Compass","description":"","i18n":{"de":{"title":"Kompass","description":""}},"tags":[],"category":"","type":"component","price":0},"MlNavigationTools":{"name":"MlNavigationTools","title":"Navigation tools","description":"","i18n":{"de":{"title":"Navigationswerkzeuge","description":""}},"tags":[],"category":"","type":"component","price":0},"MlScaleReference":{"name":"MlScaleReference","title":"Reference scale","description":"","i18n":{"de":{"title":"Maßstabsreferenz","description":""}},"tags":[],"category":"","type":"component","price":0},"MlSpatialElevationProfile":{"name":"MlSpatialElevationProfile","title":"3D height profile","description":"Draws a level, out of the building outline and the height, extrudes 3D Objects as buildings.","i18n":{"de":{"title":"3D Höhenprofil","description":"Zeichnet eine Ebene mit einfach, aus den Gebäudeumrissen und anhand der Höhen, extrudierten 3D Objekten als Gebäude."}},"tags":["Map add-on"],"category":"add-ons","type":"component","price":5000},"MlThreeJsLayer":{"name":"MlThreeJsLayer","title":"3D Model","description":"Layer Component, that makes it possible to show 3D Models on the map.","i18n":{"de":{"title":"3D Modelle","description":"Layer Component, das es ermöglicht 3D Modelle auf der Karte darzustellen."}},"tags":["Map layer"],"category":"layer","type":"component","price":5000},"MlTransitionGeoJsonLayer":{"name":"MlTransitionGeoJsonLayer","title":"GeoJSON layer","description":"","i18n":{"de":{"title":"GeoJSON Ebene","description":""}},"tags":[],"category":"","type":"component","price":0},"MlVectorTileLayer":{"name":"MlVectorTileLayer","title":"Vector tile layer","description":"Adds a vector tile layer to the map","i18n":{"de":{"title":"Vector Tiles","description":"Baustein: Vektorenkacheln/Vector Tiles (der Anwendung/Karte hinzufügen)"}},"tags":["Map layer"],"category":"layer","type":"component","price":5000},"MlWmsLoader":{"name":"MlWmsLoader","title":"WMS loader","description":"","i18n":{"de":{"title":"WMS Feature Info","description":""}},"tags":[],"category":"","type":"component","price":0}}

package/src/components/MapLibreMap/MapLibreMap.tsx

@@ -16,7 +16,7 @@ type MapLibreMapProps = {
    * See https://maplibre.org/maplibre-gl-js-docs/api/map/ for a formal documentation of al
    * available properties.
    */
-  options?: MapOptionsType;
+  options?: Partial<MapOptionsType>;
   /**
    * css style definition passed to the map container DOM element
    */

package/src/components/MapLibreMap/lib/MapLibreGlWrapper.ts

@@ -1,4 +1,5 @@
-import { Map, IControl, MapOptions as MapOptionsType } from "!maplibre-gl";
+import { Map, IControl, MapOptions as MapOptionsType,  } from "!maplibre-gl";
+import { Map as MapType  } from "maplibre-gl";
 
 type EventArgArray = [string, string | Function, Function?];
 type LayerState = {
@@ -53,7 +54,7 @@ class MapLibreGlWrapper {
   };
   initRegisteredElements: Function;
   addNativeMaplibreFunctionsAndProps: Function;
-  map: Map;
+  map: MapType;
   style: object;
 
   styleJson: object;
@@ -603,7 +604,7 @@ class MapLibreGlWrapper {
           });
       }
 
-      self.map = new Map(props.mapOptions);
+      self.map = new Map(props.mapOptions) as MapType;
       //@ts-ignore
       window._map = self.map;
 

package/src/components/MlFeatureEditor/MlFeatureEditor.stories.js

@@ -15,11 +15,10 @@ export default storyoptions;
 const Template = (args) => {
   return (
     <MlFeatureEditor
-      debug={true}
+      {...args}
       onChange={(features) => {
         console.log(features);
       }}
-      {...args}
     />
   );
 };

package/src/components/MlFeatureEditor/MlFeatureEditor.test.js

@@ -82,7 +82,7 @@ describe("<MlFeatureEditor>", () => {
     );
 
     // MapLibreGlWrapper now subscribes to "data", "move" events on its own
-    await waitFor(() => expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(6));
+    await waitFor(() => expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(7));
   });
 
   it("should deregister 2 event listeners to the maplibre instance", async () => {
@@ -93,11 +93,11 @@ describe("<MlFeatureEditor>", () => {
     );
 
     // MapLibreGlWrapper now subscribes to "data", "move" events on its own
-    expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(6);
+    expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(7);
 
     wrapper.find(".toggle_layer_visible").simulate("click");
 
-    expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(2);
+    expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(3);
   });
 
   it("should add MapBox-Gl-draw instance using map.addControl to the maplibre instance", async () => {

package/src/components/MlFeatureEditor/MlFeatureEditor.tsx

@@ -9,26 +9,25 @@ import CustomDirectSelectMode from "./custom-direct-select-mode.js";
 
 import useMap from "../../hooks/useMap";
 
-
 interface MlFeatureEditorProps {
   /**
    * Id of the target MapLibre instance in mapContext
    */
-  mapId: string;
+  mapId?: string;
   /**
    * Id of an existing layer in the mapLibre instance to help specify the layer order
    * This layer will be visually beneath the layer with the "insertBeforeLayer" id.
    */
-  insertBeforeLayer: string;
+  insertBeforeLayer?: string;
   /**
    * Input GeoJson data at initialization
    */
-  geojson: any;
+  geojson?: any;
   /**
    * Callback function that is called each time the GeoJson data within has changed within MlFeatureEditor.
    * First parameter is the new GeoJson feature.
    */
-  onChange?: Function
+  onChange?: Function;
   /**
    * Feature editor mode:
    * - "custom_select" edit features
@@ -36,40 +35,30 @@ interface MlFeatureEditorProps {
    * - "draw_point" draw Point
    * - "draw_line_string" draw LineString
    */
-  mode?:string
+  mode?: string;
 }
 
 /**
  * GeoJson Feature editor that allows to create or manipulate GeoJson data
  */
-const MlFeatureEditor = (props:MlFeatureEditorProps) => {
+const MlFeatureEditor = (props: MlFeatureEditorProps) => {
   const draw = useRef<MapboxDraw>();
   const mapHook = useMap({
     mapId: props.mapId,
     waitForLayer: props.insertBeforeLayer,
   });
-  const onChangeRef = useRef(props.onChange);
 
   const drawToolsInitialized = useRef(false);
   const [drawToolsReady, setDrawToolsReady] = useState(false);
 
-  const [mouseUpTrigger, setMouseUpTrigger] = useState(0);
 
-  const modeChangeHandler = (e:any) => {
+  const modeChangeHandler = (e: any) => {
     console.log("MlFeatureEditor mode change to " + e.mode);
     //setDrawMode(e.mode);
   };
 
-  const mouseUpHandler = () => {
-    setMouseUpTrigger(Math.random());
-  };
-
   useEffect(() => {
-    if (
-      mapHook.map &&
-      !drawToolsInitialized.current
-    ) {
-      
+    if (mapHook.map && !drawToolsInitialized.current) {
       drawToolsInitialized.current = true;
 
       if (
@@ -96,34 +85,47 @@ const MlFeatureEditor = (props:MlFeatureEditorProps) => {
         ),
       });
 
-      mapHook.map.on("draw.modechange", modeChangeHandler, mapHook.componentId);
-
       mapHook.map.addControl(draw.current, "top-left", mapHook.componentId);
 
-      mapHook.map.on("mouseup", mouseUpHandler, mapHook.componentId);
+
+      mapHook.map.on("draw.modechange", modeChangeHandler, mapHook.componentId);
 
       setDrawToolsReady(true);
     }
-  }, [mapHook.map,  props, drawToolsInitialized]);
+  }, [mapHook.map, props, drawToolsInitialized]);
 
   useEffect(() => {
-    if (
-      draw.current &&
-      props.geojson?.geometry
-    ) {
-      draw.current.set({ type: "FeatureCollection", features: [props.geojson] });
+    if (!mapHook.map || !drawToolsReady) return;
+
+    const changeHandler = () => {
+      if (draw.current) {
+        // update drawnFeatures state object
+        if (typeof props.onChange === "function") {
+          let currentFeatureCollection = draw.current.getAll?.();
+          props.onChange(currentFeatureCollection?.features);
+        }
+      }
+    };
+
+    mapHook.map.on("mouseup", changeHandler);
+
+    mapHook.map.on("touchend", changeHandler);
+
+    return () => {
+      if (!mapHook.map) return;
+
+      mapHook.map.map.off("mouseup", changeHandler);
+
+      mapHook.map.map.off("touchend", changeHandler);
     }
-  }, [props.geojson, drawToolsReady]);
+
+  }, [drawToolsReady, mapHook.map])
 
   useEffect(() => {
-    if (draw.current && mouseUpTrigger) {
-      // update drawnFeatures state object
-      let currentFeatureCollection = draw.current.getAll();
-      if (typeof onChangeRef.current === "function") {
-        onChangeRef.current(currentFeatureCollection.features);
-      }
+    if (draw.current && props.geojson?.geometry) {
+      draw.current.set({ type: "FeatureCollection", features: [props.geojson] });
     }
-  }, [mouseUpTrigger]);
+  }, [props.geojson, drawToolsReady]);
 
   useEffect(() => {
     if (props.mode && draw.current) {
@@ -132,7 +134,7 @@ const MlFeatureEditor = (props:MlFeatureEditorProps) => {
     }
   }, [props.mode]);
 
-  return (<></>);
-}
+  return <></>;
+};
 
 export default MlFeatureEditor;

package/src/components/MlFeatureEditor/lib/utils.js

@@ -39,8 +39,7 @@ const drawUtils = {
   getDrawInstance: (map) => {
     for (var i = map._controls.length - 1; i >= 0; i--) {
       if (
-        map._controls[i].options &&
-        map._controls[i].options.defaultMode === "custom_select"
+        map._controls[i]?.modes?.SIMPLE_SELECT === "simple_select"
       ) {
         return map._controls[i];
       }

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.tsx

@@ -8,6 +8,9 @@ import getDefaultPaintPropsByType from "./util/getDefaultPaintPropsByType";
 import getDefaulLayerTypeByGeometry from "./util/getDefaultLayerTypeByGeometry";
 import { Feature, FeatureCollection } from "@turf/turf";
 
+
+import { LineLayerSpecification, CircleLayerSpecification, FillLayerSpecification,MapLayerMouseEvent, LayerSpecification } from "maplibre-gl";
+
 type MlGeoJsonLayerProps = {
   /**
    * Id of the target MapLibre instance in mapContext
@@ -16,6 +19,8 @@ type MlGeoJsonLayerProps = {
   /**
    * Id of an existing layer in the mapLibre instance to help specify the layer order
    * This layer will be visually beneath the layer with the "insertBeforeLayer" id.
+   * This layer will not be added to the maplibre-gl instance until a layer with an 
+   * id that matches the value of insertBeforeLayer is created.
    */
   insertBeforeLayer?: string;
   /**
@@ -30,7 +35,7 @@ type MlGeoJsonLayerProps = {
    * Type of the layer that will be added to the MapLibre instance.
    * Possible values: "line", "circle", "fill"
    */
-  type?: string;
+  type?: "fill" | "line" | "circle";
   /**
    * Paint property object, that is passed to the addLayer call.
    * Possible props depend on the layer type.
@@ -38,7 +43,7 @@ type MlGeoJsonLayerProps = {
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
    */
-  paint?: any;
+  paint?: CircleLayerSpecification['paint'] | FillLayerSpecification['paint'] | LineLayerSpecification['layout'];
   /**
    * Layout property object, that is passed to the addLayer call.
    * Possible props depend on the layer type.
@@ -46,28 +51,28 @@ type MlGeoJsonLayerProps = {
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
    */
-  layout?: any;
+  layout?: CircleLayerSpecification['layout'] | FillLayerSpecification['layout'] | LineLayerSpecification['layout'];
   /**
    * Javascript object that is spread into the addLayer commands first parameter.
    */
-  options?: any;
+  options?: CircleLayerSpecification | FillLayerSpecification | LineLayerSpecification;
   /**
    * Javascript object with optional properties "fill", "line", "circle" to override implicit layer type default paint properties.
    */
-  defaultPaintOverrides?: any;
+  defaultPaintOverrides?: { circle?: CircleLayerSpecification['paint'], fill?: FillLayerSpecification['paint'], line?: LineLayerSpecification['paint'] };
   /**
    * Hover event handler that is executed whenever a geometry rendered by this component is hovered.
    */
-  onHover?: Function;
+  onHover?: MapLayerMouseEvent;
   /**
    * Click event handler that is executed whenever a geometry rendered by this component is clicked.
    */
-  onClick?: Function;
+  onClick?: MapLayerMouseEvent;
   /**
    * Leave event handler that is executed whenever a geometry rendered by this component is
    * left/unhovered.
    */
-  onLeave?: Function;
+  onLeave?: MapLayerMouseEvent;
 }
 
 /**
@@ -91,7 +96,7 @@ const MlGeoJsonLayer = (props: MlGeoJsonLayerProps) => {
         ),
       layout: props.layout || {},
       ...props.options,
-      type: layerType,
+      type: layerType as LayerSpecification['type'],
     },
     insertBeforeLayer: props.insertBeforeLayer,
     onHover: props.onHover,

package/src/components/MlGeoJsonLayer/util/getDefaultLayerTypeByGeometry.ts

@@ -1,4 +1,5 @@
 import { Feature, FeatureCollection } from "@turf/turf";
+import { LayerSpecification } from "maplibre-gl";
 
 const mapGeometryTypesToLayerTypes = {
   Position: "circle",
@@ -13,7 +14,7 @@ const mapGeometryTypesToLayerTypes = {
 
 const getDefaulLayerTypeByGeometry: Function = (
   geojson: Feature | FeatureCollection
-): string => {
+): LayerSpecification['type'] => {
   if (geojson?.type === "Feature") {
     return mapGeometryTypesToLayerTypes?.[geojson?.geometry?.type]
       ? mapGeometryTypesToLayerTypes[geojson.geometry.type]

package/src/components/MlMeasureTool/MlMeasureTool.stories.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef, useState } from "react";
 
 import MlMeasureTool from "./MlMeasureTool";
 
@@ -7,61 +7,90 @@ import StraightenOutlinedIcon from "@mui/icons-material/StraightenOutlined";
 import SquareFootOutlinedIcon from "@mui/icons-material/SquareFootOutlined";
 import Grid from "@mui/material/Grid";
 import Box from "@mui/material/Box";
+import { MenuItem, Select } from "@mui/material";
 
 const storyoptions = {
   title: "MapComponents/MlMeasureTool",
   component: MlMeasureTool,
-  argTypes: {
-  },
+  argTypes: {},
   decorators: mapContextDecorator,
 };
 export default storyoptions;
 
-const Template = (args) => (
-  <div style={{ width: "200px", position: "absolute", zIndex:105 }}>
-    <Grid
-      container
-      style={{
-        textAlign: "left",
-        alignItems: "center",
-      }}
-    >
-      <SquareFootOutlinedIcon />
+const Template = (args) => {
+  const [unit, setUnit] = useState("kilometers");
+  const handleChange = (event) => {
+    setUnit(event.target.value);
+  };
 
-      <h4 style={{ margin: "0px" }}>Measure Polygon</h4>
-    </Grid>
+  return (
+    <div style={{ width: "200px", position: "absolute", zIndex: 105 }}>
+      <Select
+        name={"units"}
+        onChange={handleChange}
+        label={"Unit for measurement"}
+        defaultValue={"kilometers"}
+      >
+        <MenuItem value={"kilometers"}>Kilometers</MenuItem>
+        <MenuItem value={"miles"}>Miles</MenuItem>
+      </Select>
+      <Grid
+        container
+        style={{
+          textAlign: "left",
+          alignItems: "center",
+        }}
+      >
+        <SquareFootOutlinedIcon />
+        <h4 style={{ margin: "0px" }}>Measure Polygon</h4>
+      </Grid>
 
-    <Box m={2} style={{ textAlign: "left" }}>
-      <MlMeasureTool measureType={"polygon"} />
-    </Box>
-  </div>
-)
+      <Box m={2} style={{ textAlign: "left" }}>
+        Area: <MlMeasureTool measureType={"polygon"} unit={unit} />
+      </Box>
+    </div>
+  );
+};
 
-const LineTemplate = (args) => (
-  <div style={{ width: "200px", position: "absolute", zIndex:105, }}>
-    <Grid
-      container
-      style={{
-        textAlign: "left",
-        alignItems: "center",
-      }}
-    >
-      <StraightenOutlinedIcon />
+const LineTemplate = (args) => {
+  const [unit, setUnit] = useState("kilometers");
+  const handleChange = (event) => {
+    setUnit(event.target.value);
+  };
 
-      <h4 style={{ margin: "0px" }}>Measure Line</h4>
-    </Grid>
+  return (
+    <div style={{ width: "200px", position: "absolute", zIndex: 105 }}>
+      <Select
+        name={"units"}
+        onChange={handleChange}
+        label={"Unit for measurement"}
+        defaultValue={"kilometers"}
+      >
+        <MenuItem value={"kilometers"}> Kilometers</MenuItem>
+        <MenuItem value={"miles"}> Miles</MenuItem>
+      </Select>
+      <Grid
+        container
+        style={{
+          textAlign: "left",
+          alignItems: "center",
+        }}
+      >
+        <StraightenOutlinedIcon />
+        <h4 style={{ margin: "0px" }}>Measure Line</h4>
+      </Grid>
 
-    <Box m={2} style={{ textAlign: "left" }}>
-      <MlMeasureTool measureType={"line"} />
-    </Box>
-  </div>
-)
+      <Box m={2} style={{ textAlign: "left" }}>
+        Length: <MlMeasureTool measureType={"line"} unit={unit} />
+      </Box>
+    </div>
+  );
+};
 
-export const MeasureLine = LineTemplate.bind( {});
+export const MeasureLine = LineTemplate.bind({});
 MeasureLine.parameters = {};
 MeasureLine.args = {};
 
 export const MeasurePolygon = Template.bind({});
 MeasurePolygon.parameters = {};
 MeasurePolygon.args = {};
-

package/src/components/MlMeasureTool/MlMeasureTool.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import MlFeatureEditor from "../MlFeatureEditor/MlFeatureEditor";
 import * as turf from "@turf/turf";
 
@@ -6,28 +6,55 @@ interface MlMeasureToolProps {
   /**
    * String that specify if the Tool measures an area ("polygon") or length ("line")
    */
-  measureType: string;
+  measureType?: string;
+  /**
+   * String that dictates which unit of measurement is used
+   */
+  unit?: turf.Units;
+}
+
+//const unitSquareConvert = {
+//  kilometers: 1,
+//  miles: 1 / 2.58998811,
+//};
+function getUnitSquareMultiplier(measureType:string | undefined) {
+  return measureType === "miles" ? 1 / 2.58998811 : 1;
+}
+function getUnitLabel(measureType:string | undefined) {
+  return measureType === "miles" ? 'mi' : 'km';
 }
 
 const MlMeasureTool = (props: MlMeasureToolProps) => {
-  const [length, setLength] = useState(0)
+  const [length, setLength] = useState(0);
+  const [currentFeatures, setCurrentFeatures] = useState([undefined]);
+
+  useEffect(() => {
+    if (currentFeatures[0]) {
+      setLength(
+        props.measureType === "polygon"
+          ? (turf.area(currentFeatures[0]) / 1000000) * getUnitSquareMultiplier(props.unit)
+          : turf.length(currentFeatures[0], { units: props.unit })
+      );
+    }
+  }, [props.unit, currentFeatures]);
 
   return (
     <>
       <MlFeatureEditor
-        onChange={(features) => {
-          console.log(features);
-          if(features[0]) {
-            setLength(props.measureType === "polygon" ? turf.area(features[0]) / 1000000 : turf.length(features[0]));
-          }}}
-        mode = {props.measureType === "polygon" ? "custom_polygon" : "draw_line_string"}
+        onChange={(features:any) => {
+          setCurrentFeatures(features);
+        }}
+        mode={props.measureType === "polygon" ? "custom_polygon" : "draw_line_string"}
       />
-      {props.measureType === "polygon" ? "Area" : "Length"}: {length.toFixed(2)} {props.measureType === "polygon" ? "km²" : "km"}
-  </>);
+      {length.toFixed(2)} {getUnitLabel(props.unit)}
+      {props.measureType === "polygon" ? "²" : ""}
+    </>
+  );
 };
 
 MlMeasureTool.defaultProps = {
   mapId: undefined,
   measureType: "line",
+  unit: "kilometers",
 };
 export default MlMeasureTool;