@mapcomponents/react-maplibre 0.1.46 → 0.1.51

package/coverage/lcov-report/index.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">36.41% </span>
+                <span class="strong">36.79% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>638/1752</span>
+                <span class='fraction'>648/1761</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">29.54% </span>
+                <span class="strong">30.06% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>294/995</span>
+                <span class='fraction'>301/1001</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">35.86% </span>
+                <span class="strong">35.71% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>104/290</span>
+                <span class='fraction'>105/294</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">37.98% </span>
+                <span class="strong">38.37% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>615/1619</span>
+                <span class='fraction'>624/1626</span>
             </div>
         
             
@@ -125,17 +125,17 @@
 
 <tr>
 	<td class="file medium" data-value="src/components/MlFeatureEditor"><a href="src/components/MlFeatureEditor/index.html">src/components/MlFeatureEditor</a></td>
-	<td data-value="78.78" class="pic medium">
+	<td data-value="78.94" class="pic medium">
 	<div class="chart"><div class="cover-fill" style="width: 78%"></div><div class="cover-empty" style="width: 22%"></div></div>
 	</td>
-	<td data-value="78.78" class="pct medium">78.78%</td>
-	<td data-value="33" class="abs medium">26/33</td>
-	<td data-value="68" class="pct medium">68%</td>
-	<td data-value="25" class="abs medium">17/25</td>
-	<td data-value="71.42" class="pct medium">71.42%</td>
-	<td data-value="7" class="abs medium">5/7</td>
-	<td data-value="78.78" class="pct medium">78.78%</td>
-	<td data-value="33" class="abs medium">26/33</td>
+	<td data-value="78.94" class="pct medium">78.94%</td>
+	<td data-value="38" class="abs medium">30/38</td>
+	<td data-value="68.96" class="pct medium">68.96%</td>
+	<td data-value="29" class="abs medium">20/29</td>
+	<td data-value="75" class="pct medium">75%</td>
+	<td data-value="8" class="abs medium">6/8</td>
+	<td data-value="80.55" class="pct high">80.55%</td>
+	<td data-value="36" class="abs high">29/36</td>
 	</tr>
 
 <tr>
@@ -305,17 +305,17 @@
 
 <tr>
 	<td class="file low" data-value="src/components/MlMeasureTool"><a href="src/components/MlMeasureTool/index.html">src/components/MlMeasureTool</a></td>
-	<td data-value="0" class="pic low">
-	<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
+	<td data-value="18.18" class="pic low">
+	<div class="chart"><div class="cover-fill" style="width: 18%"></div><div class="cover-empty" style="width: 82%"></div></div>
 	</td>
+	<td data-value="18.18" class="pct low">18.18%</td>
+	<td data-value="11" class="abs low">2/11</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="7" class="abs low">0/7</td>
-	<td data-value="0" class="pct low">0%</td>
-	<td data-value="10" class="abs low">0/10</td>
-	<td data-value="0" class="pct low">0%</td>
-	<td data-value="2" class="abs low">0/2</td>
+	<td data-value="12" class="abs low">0/12</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="7" class="abs low">0/7</td>
+	<td data-value="5" class="abs low">0/5</td>
+	<td data-value="18.18" class="pct low">18.18%</td>
+	<td data-value="11" class="abs low">2/11</td>
 	</tr>
 
 <tr>
@@ -530,17 +530,17 @@
 
 <tr>
 	<td class="file medium" data-value="src/hooks"><a href="src/hooks/index.html">src/hooks</a></td>
-	<td data-value="54.14" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 54%"></div><div class="cover-empty" style="width: 46%"></div></div>
+	<td data-value="56.35" class="pic medium">
+	<div class="chart"><div class="cover-fill" style="width: 56%"></div><div class="cover-empty" style="width: 44%"></div></div>
 	</td>
-	<td data-value="54.14" class="pct medium">54.14%</td>
-	<td data-value="181" class="abs medium">98/181</td>
-	<td data-value="49.05" class="pct low">49.05%</td>
-	<td data-value="106" class="abs low">52/106</td>
+	<td data-value="56.35" class="pct medium">56.35%</td>
+	<td data-value="181" class="abs medium">102/181</td>
+	<td data-value="52.83" class="pct medium">52.83%</td>
+	<td data-value="106" class="abs medium">56/106</td>
 	<td data-value="57.14" class="pct medium">57.14%</td>
 	<td data-value="28" class="abs medium">16/28</td>
-	<td data-value="54.33" class="pct medium">54.33%</td>
-	<td data-value="173" class="abs medium">94/173</td>
+	<td data-value="56.64" class="pct medium">56.64%</td>
+	<td data-value="173" class="abs medium">98/173</td>
 	</tr>
 
 </tbody>
@@ -551,7 +551,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Sun Jun 12 2022 17:06:19 GMT+0000 (Coordinated Universal Time)
+                at Tue Jul 12 2022 21:19:26 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="prettify.js"></script>
         <script>

package/coverage/lcov-report/src/components/MapLibreMap/MapLibreMap.tsx.html

@@ -207,7 +207,7 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">18x</span>
+<span class="cline-any cline-yes">19x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -242,43 +242,43 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">18x</span>
-<span class="cline-any cline-yes">247x</span>
-<span class="cline-any cline-yes">247x</span>
+<span class="cline-any cline-yes">19x</span>
+<span class="cline-any cline-yes">271x</span>
+<span class="cline-any cline-yes">271x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">247x</span>
+<span class="cline-any cline-yes">271x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">247x</span>
-<span class="cline-any cline-yes">247x</span>
-<span class="cline-any cline-yes">247x</span>
+<span class="cline-any cline-yes">271x</span>
+<span class="cline-any cline-yes">271x</span>
+<span class="cline-any cline-yes">271x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">247x</span>
-<span class="cline-any cline-yes">73x</span>
+<span class="cline-any cline-yes">271x</span>
+<span class="cline-any cline-yes">82x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">73x</span>
+<span class="cline-any cline-yes">82x</span>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">247x</span>
-<span class="cline-any cline-yes">73x</span>
+<span class="cline-any cline-yes">271x</span>
+<span class="cline-any cline-yes">82x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">73x</span>
-<span class="cline-any cline-yes">73x</span>
-<span class="cline-any cline-yes">73x</span>
+<span class="cline-any cline-yes">82x</span>
+<span class="cline-any cline-yes">82x</span>
+<span class="cline-any cline-yes">82x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">73x</span>
-<span class="cline-any cline-yes">73x</span>
+<span class="cline-any cline-yes">82x</span>
+<span class="cline-any cline-yes">82x</span>
 <span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">67x</span>
+<span class="cline-any cline-yes">76x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -286,8 +286,8 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">247x</span>
-<span class="cline-any cline-yes">73x</span>
+<span class="cline-any cline-yes">271x</span>
+<span class="cline-any cline-yes">82x</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -295,10 +295,10 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">247x</span>
+<span class="cline-any cline-yes">271x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">18x</span>
+<span class="cline-any cline-yes">19x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useRef, useEffect, useContext, FC,  RefObject } from "react";
@@ -319,7 +319,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&lt;MapOptionsType&gt;;
   /**
    * css style definition passed to the map container DOM element
    */
@@ -427,7 +427,7 @@ export default MapLibreMap;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Sun Jun 12 2022 17:06:19 GMT+0000 (Coordinated Universal Time)
+                at Tue Jul 12 2022 21:19:26 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/components/MapLibreMap/index.html

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Sun Jun 12 2022 17:06:19 GMT+0000 (Coordinated Universal Time)
+                at Tue Jul 12 2022 21:19:26 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/components/MlCreatePdfButton/MlCreatePdfButton.tsx.html

@@ -223,7 +223,7 @@ export default MlCreatePdfButton;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Sun Jun 12 2022 17:06:19 GMT+0000 (Coordinated Universal Time)
+                at Tue Jul 12 2022 21:19:26 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/components/MlCreatePdfButton/index.html

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Sun Jun 12 2022 17:06:19 GMT+0000 (Coordinated Universal Time)
+                at Tue Jul 12 2022 21:19:26 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/components/MlFeatureEditor/MlFeatureEditor.tsx.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">78.78% </span>
+                <span class="strong">78.94% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>26/33</span>
+                <span class='fraction'>30/38</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">68% </span>
+                <span class="strong">68.96% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>17/25</span>
+                <span class='fraction'>20/29</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">71.42% </span>
+                <span class="strong">75% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>5/7</span>
+                <span class='fraction'>6/8</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">78.78% </span>
+                <span class="strong">80.55% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>26/33</span>
+                <span class='fraction'>29/36</span>
             </div>
         
             
@@ -201,8 +201,9 @@
 <a name='L136'></a><a href='#L136'>136</a>
 <a name='L137'></a><a href='#L137'>137</a>
 <a name='L138'></a><a href='#L138'>138</a>
-<a name='L139'></a><a href='#L139'>139</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L139'></a><a href='#L139'>139</a>
+<a name='L140'></a><a href='#L140'>140</a>
+<a name='L141'></a><a href='#L141'>141</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -251,12 +252,10 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">16x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">16x</span>
 <span class="cline-any cline-yes">16x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">16x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">16x</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -264,15 +263,7 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">16x</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">16x</span>
 <span class="cline-any cline-yes">12x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">4x</span>
@@ -301,7 +292,6 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -310,25 +300,39 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">16x</span>
-<span class="cline-any cline-yes">8x</span>
+<span class="cline-any cline-yes">12x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">16x</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">16x</span>
+<span class="cline-any cline-yes">8x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">16x</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -350,26 +354,25 @@ import CustomDirectSelectMode from "./custom-direct-select-mode.js";
 &nbsp;
 import useMap from "../../hooks/useMap";
 &nbsp;
-&nbsp;
 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
@@ -377,40 +380,30 @@ interface MlFeatureEditorProps {
    * - "draw_point" draw Point
    * - "draw_line_string" draw LineString
    */
-  mode?:string
+  mode?: string;
 }
 &nbsp;
 /**
  * GeoJson Feature editor that allows to create or manipulate GeoJson data
  */
-const MlFeatureEditor = (props:MlFeatureEditorProps) =&gt; {
+const MlFeatureEditor = (props: MlFeatureEditorProps) =&gt; {
   const draw = useRef&lt;MapboxDraw&gt;();
   const mapHook = useMap({
     mapId: props.mapId,
     waitForLayer: props.insertBeforeLayer,
   });
-  const onChangeRef = useRef(props.onChange);
 &nbsp;
   const drawToolsInitialized = useRef(false);
   const [drawToolsReady, setDrawToolsReady] = useState(false);
 &nbsp;
-  const [mouseUpTrigger, setMouseUpTrigger] = useState(0);
 &nbsp;
-  const modeChangeHandler = <span class="fstat-no" title="function not covered" >(e</span>:any) =&gt; {
+  const modeChangeHandler = <span class="fstat-no" title="function not covered" >(e</span>: any) =&gt; {
 <span class="cstat-no" title="statement not covered" >    console.log("MlFeatureEditor mode change to " + e.mode);</span>
     //setDrawMode(e.mode);
   };
-&nbsp;
-  const mouseUpHandler = <span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >    setMouseUpTrigger(Math.random());</span>
-  };
 &nbsp;
   useEffect(() =&gt; {
-    if (
-      mapHook.map &amp;&amp;
-      !drawToolsInitialized.current
-    ) {
-      
+    if (mapHook.map &amp;&amp; !drawToolsInitialized.current) {
       drawToolsInitialized.current = true;
 &nbsp;
       <span class="missing-if-branch" title="if path not taken" >I</span>if (
@@ -436,35 +429,48 @@ const MlFeatureEditor = (props:MlFeatureEditorProps) =&gt; {
           MapboxDraw.modes
         ),
       });
-&nbsp;
-      mapHook.map.on("draw.modechange", modeChangeHandler, mapHook.componentId);
 &nbsp;
       mapHook.map.addControl(draw.current, "top-left", mapHook.componentId);
 &nbsp;
-      mapHook.map.on("mouseup", mouseUpHandler, mapHook.componentId);
+&nbsp;
+      mapHook.map.on("draw.modechange", modeChangeHandler, mapHook.componentId);
 &nbsp;
       setDrawToolsReady(true);
     }
-  }, [mapHook.map,  props, drawToolsInitialized]);
+  }, [mapHook.map, props, drawToolsInitialized]);
 &nbsp;
   useEffect(() =&gt; {
-    if (
-      draw.current &amp;&amp;
-      props.geojson?.geometry
-    ) {
-      draw.current.set({ type: "FeatureCollection", features: [props.geojson] });
+    if (!mapHook.map || !drawToolsReady) return;
+&nbsp;
+    const changeHandler = <span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >      if (draw.current) {</span>
+        // update drawnFeatures state object
+<span class="cstat-no" title="statement not covered" >        if (typeof props.onChange === "function") {</span>
+          let currentFeatureCollection = <span class="cstat-no" title="statement not covered" >draw.current.getAll?.();</span>
+<span class="cstat-no" title="statement not covered" >          props.onChange(currentFeatureCollection?.features);</span>
+        }
+      }
+    };
+&nbsp;
+    mapHook.map.on("mouseup", changeHandler);
+&nbsp;
+    mapHook.map.on("touchend", changeHandler);
+&nbsp;
+    return () =&gt; {
+      <span class="missing-if-branch" title="if path not taken" >I</span>if (!mapHook.map) <span class="cstat-no" title="statement not covered" >return;</span>
+&nbsp;
+      mapHook.map.map.off("mouseup", changeHandler);
+&nbsp;
+      mapHook.map.map.off("touchend", changeHandler);
     }
-  }, [props.geojson, drawToolsReady]);
+&nbsp;
+  }, [drawToolsReady, mapHook.map])
 &nbsp;
   useEffect(() =&gt; {
-    <span class="missing-if-branch" title="if path not taken" >I</span>if (draw.current &amp;&amp; <span class="branch-1 cbranch-no" title="branch not covered" >mouseUpTrigger)</span> {
-      // update drawnFeatures state object
-      let currentFeatureCollection = <span class="cstat-no" title="statement not covered" >draw.current.getAll();</span>
-<span class="cstat-no" title="statement not covered" >      if (typeof onChangeRef.current === "function") {</span>
-<span class="cstat-no" title="statement not covered" >        onChangeRef.current(currentFeatureCollection.features);</span>
-      }
+    if (draw.current &amp;&amp; props.geojson?.geometry) {
+      draw.current.set({ type: "FeatureCollection", features: [props.geojson] });
     }
-  }, [mouseUpTrigger]);
+  }, [props.geojson, drawToolsReady]);
 &nbsp;
   useEffect(() =&gt; {
     <span class="missing-if-branch" title="if path not taken" >I</span>if (props.mode &amp;&amp; draw.current) {
@@ -473,8 +479,8 @@ const MlFeatureEditor = (props:MlFeatureEditorProps) =&gt; {
     }
   }, [props.mode]);
 &nbsp;
-  return (&lt;&gt;&lt;/&gt;);
-}
+  return &lt;&gt;&lt;/&gt;;
+};
 &nbsp;
 export default MlFeatureEditor;
 &nbsp;</pre></td></tr></table></pre>
@@ -484,7 +490,7 @@ export default MlFeatureEditor;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Sun Jun 12 2022 17:06:19 GMT+0000 (Coordinated Universal Time)
+                at Tue Jul 12 2022 21:19:26 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>