@mapcomponents/react-maplibre 0.1.61 → 0.1.63

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

@@ -23,16 +23,16 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">78.94% </span>
+                <span class="strong">75% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>30/38</span>
+                <span class='fraction'>30/40</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">68.96% </span>
+                <span class="strong">58.82% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>20/29</span>
+                <span class='fraction'>20/34</span>
             </div>
         
             
@@ -44,9 +44,9 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">80.55% </span>
+                <span class="strong">76.31% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>29/36</span>
+                <span class='fraction'>29/38</span>
             </div>
         
             
@@ -203,7 +203,24 @@
 <a name='L138'></a><a href='#L138'>138</a>
 <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>
+<a name='L141'></a><a href='#L141'>141</a>
+<a name='L142'></a><a href='#L142'>142</a>
+<a name='L143'></a><a href='#L143'>143</a>
+<a name='L144'></a><a href='#L144'>144</a>
+<a name='L145'></a><a href='#L145'>145</a>
+<a name='L146'></a><a href='#L146'>146</a>
+<a name='L147'></a><a href='#L147'>147</a>
+<a name='L148'></a><a href='#L148'>148</a>
+<a name='L149'></a><a href='#L149'>149</a>
+<a name='L150'></a><a href='#L150'>150</a>
+<a name='L151'></a><a href='#L151'>151</a>
+<a name='L152'></a><a href='#L152'>152</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>
+<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>
@@ -256,10 +273,15 @@
 <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-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-no">&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-no">&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>
@@ -273,6 +295,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-neutral">&nbsp;</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>
@@ -290,8 +313,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">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>
@@ -320,12 +343,10 @@
 <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>
@@ -335,6 +356,7 @@
 <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-neutral">&nbsp;</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>
@@ -343,16 +365,17 @@
 <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></td><td class="text"><pre class="prettyprint lang-js">import React, { useState, useEffect, useRef } from "react";
-import "./MlFeatureEditor.css";
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useState, useEffect, useRef } from 'react';
+import './MlFeatureEditor.css';
 &nbsp;
-import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";
-import MapboxDraw from "@mapbox/mapbox-gl-draw";
-import CustomPolygonMode from "./custom-polygon-mode.js";
-import CustomSelectMode from "./custom-select-mode.js";
-import CustomDirectSelectMode from "./custom-direct-select-mode.js";
+import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
+import MapboxDraw from '@mapbox/mapbox-gl-draw';
+import CustomPolygonMode from './custom-polygon-mode.js';
+import CustomSelectMode from './custom-select-mode.js';
+import CustomDirectSelectMode from './custom-direct-select-mode.js';
 &nbsp;
-import useMap from "../../hooks/useMap";
+import useMap from '../../hooks/useMap';
+import { GeoJSONObject, Feature } from '@turf/turf';
 &nbsp;
 interface MlFeatureEditorProps {
 	/**
@@ -367,12 +390,17 @@ interface MlFeatureEditorProps {
 	/**
 	 * Input GeoJson data at initialization
 	 */
-	geojson?: any;
+	geojson?: Feature;
 	/**
 	 * 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?: (para: GeoJSONObject[]) =&gt; void;
+	/**
+	 * Callback function that is called each time the GeoJson data within has been finished within MlFeatureEditor.
+	 * First parameter is the new GeoJson feature.
+	 */
+	onFinish?: () =&gt; void;
 	/**
 	 * Feature editor mode:
 	 * - "custom_select" edit features
@@ -395,11 +423,16 @@ const MlFeatureEditor = (props: MlFeatureEditorProps) =&gt; {
 &nbsp;
 	const drawToolsInitialized = useRef(false);
 	const [drawToolsReady, setDrawToolsReady] = useState(false);
-&nbsp;
 &nbsp;
 	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>
+<span class="cstat-no" title="statement not covered" >		console.log('MlFeatureEditor mode change to ' + e.mode);</span>
 		//setDrawMode(e.mode);
+<span class="cstat-no" title="statement not covered" >		if (</span>
+			typeof props.onFinish === 'function' &amp;&amp;
+			(e.mode === 'custom_select' || e.mode === 'simple_select')
+		) {
+<span class="cstat-no" title="statement not covered" >			props.onFinish();</span>
+		}
 	};
 &nbsp;
 	useEffect(() =&gt; {
@@ -408,17 +441,19 @@ const MlFeatureEditor = (props: MlFeatureEditorProps) =&gt; {
 &nbsp;
 			<span class="missing-if-branch" title="if path not taken" >I</span>if (
 				mapHook.map.map.style &amp;&amp;
-				mapHook.map.map.getSource("mapbox-gl-draw-cold") &amp;&amp;
+				mapHook.map.map.getSource('mapbox-gl-draw-cold') &amp;&amp;
 <span class="branch-2 cbranch-no" title="branch not covered" >				draw.current</span>
 			) {
 				// remove old Mapbox-gl-Draw from Mapbox instance when hot-reloading this component during development
+				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 				// @ts-ignore
 <span class="cstat-no" title="statement not covered" >				draw.current?.remove();</span>
 			}
 &nbsp;
 			draw.current = new MapboxDraw({
 				displayControlsDefault: false,
-				defaultMode: props.mode || <span class="branch-1 cbranch-no" title="branch not covered" >"custom_select",</span>
+				defaultMode: props.mode || <span class="branch-1 cbranch-no" title="branch not covered" >'custom_select',</span>
+				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 				// @ts-ignore
 				modes: Object.assign(
 					{
@@ -430,10 +465,9 @@ const MlFeatureEditor = (props: MlFeatureEditorProps) =&gt; {
 				),
 			});
 &nbsp;
-			mapHook.map.addControl(draw.current, "top-left", mapHook.componentId);
+			mapHook.map.addControl(draw.current, 'top-left', mapHook.componentId);
 &nbsp;
-&nbsp;
-			mapHook.map.on("draw.modechange", modeChangeHandler, mapHook.componentId);
+			mapHook.map.on('draw.modechange', modeChangeHandler, mapHook.componentId);
 &nbsp;
 			setDrawToolsReady(true);
 		}
@@ -445,35 +479,34 @@ const MlFeatureEditor = (props: MlFeatureEditorProps) =&gt; {
 		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" >				if (typeof props.onChange === 'function') {</span>
+					const 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);
+		mapHook.map.on('mouseup', changeHandler);
 &nbsp;
-		mapHook.map.on("touchend", changeHandler);
+		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);
-		}
-&nbsp;
-	}, [drawToolsReady, mapHook.map])
+			mapHook.map.map.off('mouseup', changeHandler);
+			mapHook.map.map.off('touchend', changeHandler);
+		};
+	}, [drawToolsReady, mapHook.map]);
 &nbsp;
 	useEffect(() =&gt; {
 		if (draw.current &amp;&amp; props.geojson?.geometry) {
-			draw.current.set({ type: "FeatureCollection", features: [props.geojson] });
+			draw.current.set({ type: 'FeatureCollection', features: [props.geojson as any] });
 		}
 	}, [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) {
+			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 			// @ts-ignore
 <span class="cstat-no" title="statement not covered" >			draw.current.changeMode(props.mode);</span>
 		}
@@ -490,7 +523,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 Wed Nov 16 2022 12:51:59 GMT+0000 (Coordinated Universal Time)
+                at 2022-12-16T12:30:49.297Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -23,16 +23,16 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">78.94% </span>
+                <span class="strong">75% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>30/38</span>
+                <span class='fraction'>30/40</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">68.96% </span>
+                <span class="strong">58.82% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>20/29</span>
+                <span class='fraction'>20/34</span>
             </div>
         
             
@@ -44,9 +44,9 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">80.55% </span>
+                <span class="strong">76.31% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>29/36</span>
+                <span class='fraction'>29/38</span>
             </div>
         
             
@@ -80,17 +80,17 @@
 </thead>
 <tbody><tr>
 	<td class="file medium" data-value="MlFeatureEditor.tsx"><a href="MlFeatureEditor.tsx.html">MlFeatureEditor.tsx</a></td>
-	<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 data-value="75" class="pic medium">
+	<div class="chart"><div class="cover-fill" style="width: 75%"></div><div class="cover-empty" style="width: 25%"></div></div>
 	</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="40" class="abs medium">30/40</td>
+	<td data-value="58.82" class="pct medium">58.82%</td>
+	<td data-value="34" class="abs medium">20/34</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>
+	<td data-value="76.31" class="pct medium">76.31%</td>
+	<td data-value="38" class="abs medium">29/38</td>
 	</tr>
 
 </tbody>
@@ -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 Wed Nov 16 2022 12:51:59 GMT+0000 (Coordinated Universal Time)
+                at 2022-12-16T12:30:49.297Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -325,7 +325,7 @@ export default MlFillExtrusionLayer;
             <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 Wed Nov 16 2022 12:51:59 GMT+0000 (Coordinated Universal Time)
+                at 2022-12-16T12:30:49.297Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/components/MlFillExtrusionLayer/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 Wed Nov 16 2022 12:51:59 GMT+0000 (Coordinated Universal Time)
+                at 2022-12-16T12:30:49.297Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -850,7 +850,7 @@ export default MlFollowGps;
             <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 Wed Nov 16 2022 12:51:59 GMT+0000 (Coordinated Universal Time)
+                at 2022-12-16T12:30:49.297Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/components/MlFollowGps/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 Wed Nov 16 2022 12:51:59 GMT+0000 (Coordinated Universal Time)
+                at 2022-12-16T12:30:49.297Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -440,7 +440,9 @@
 <a name='L375'></a><a href='#L375'>375</a>
 <a name='L376'></a><a href='#L376'>376</a>
 <a name='L377'></a><a href='#L377'>377</a>
-<a name='L378'></a><a href='#L378'>378</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L378'></a><a href='#L378'>378</a>
+<a name='L379'></a><a href='#L379'>379</a>
+<a name='L380'></a><a href='#L380'>380</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>
@@ -720,6 +722,8 @@
 <span class="cline-any cline-neutral">&nbsp;</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-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">18x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -1052,7 +1056,7 @@ const MlGPXViewer = (props:MlGPXViewerProps) =&gt; {
 <span class="cstat-no" title="statement not covered" >				if (node.nodeName === "link") {</span>
 <span class="cstat-no" title="statement not covered" >					value = node.getAttribute("href");</span>
 				}
-<span class="cstat-no" title="statement not covered" >				if (!!value?.trim().length) {</span>
+<span class="cstat-no" title="statement not covered" >				if (value?.trim().length) {</span>
 					const metaDatEntry = <span class="cstat-no" title="statement not covered" >{</span>
 						title: title,
 						value: value,
@@ -1097,6 +1101,8 @@ const MlGPXViewer = (props:MlGPXViewerProps) =&gt; {
 &nbsp;
 <span class="cstat-no" title="statement not covered" >		fileupload.current.click();</span>
 	};
+&nbsp;
+		
 	return (
 		&lt;&gt;
 			&lt;div
@@ -1201,7 +1207,7 @@ export default MlGPXViewer;
             <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 Wed Nov 16 2022 12:51:59 GMT+0000 (Coordinated Universal Time)
+                at 2022-12-16T12:30:49.297Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/components/MlGPXViewer/gpxConverter.js.html

@@ -1630,7 +1630,7 @@ export default toGeoJSON;
             <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 Wed Nov 16 2022 12:51:59 GMT+0000 (Coordinated Universal Time)
+                at 2022-12-16T12:30:49.297Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -116,7 +116,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 Wed Nov 16 2022 12:51:59 GMT+0000 (Coordinated Universal Time)
+                at 2022-12-16T12:30:49.297Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -174,7 +174,17 @@
 <a name='L109'></a><a href='#L109'>109</a>
 <a name='L110'></a><a href='#L110'>110</a>
 <a name='L111'></a><a href='#L111'>111</a>
-<a name='L112'></a><a href='#L112'>112</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L112'></a><a href='#L112'>112</a>
+<a name='L113'></a><a href='#L113'>113</a>
+<a name='L114'></a><a href='#L114'>114</a>
+<a name='L115'></a><a href='#L115'>115</a>
+<a name='L116'></a><a href='#L116'>116</a>
+<a name='L117'></a><a href='#L117'>117</a>
+<a name='L118'></a><a href='#L118'>118</a>
+<a name='L119'></a><a href='#L119'>119</a>
+<a name='L120'></a><a href='#L120'>120</a>
+<a name='L121'></a><a href='#L121'>121</a>
+<a name='L122'></a><a href='#L122'>122</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>
@@ -256,10 +266,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">11x</span>
-<span class="cline-any cline-yes">32x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">32x</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>
@@ -275,28 +282,46 @@
 <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">11x</span>
+<span class="cline-any cline-yes">32x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">32x</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">32x</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></td><td class="text"><pre class="prettyprint lang-js">import React from "react";
-&nbsp;
-import useLayer from "../../hooks/useLayer";
+<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-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">32x</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></td><td class="text"><pre class="prettyprint lang-js">import React from 'react';
 &nbsp;
-import { v4 as uuidv4 } from "uuid";
+import useLayer from '../../hooks/useLayer';
 &nbsp;
-import getDefaultPaintPropsByType from "./util/getDefaultPaintPropsByType";
-import getDefaulLayerTypeByGeometry from "./util/getDefaultLayerTypeByGeometry";
-import { Feature, FeatureCollection } from "@turf/turf";
+import { v4 as uuidv4 } from 'uuid';
 &nbsp;
+import getDefaultPaintPropsByType from './util/getDefaultPaintPropsByType';
+import getDefaulLayerTypeByGeometry from './util/getDefaultLayerTypeByGeometry';
+import { Feature, FeatureCollection } from '@turf/turf';
 &nbsp;
-import { LineLayerSpecification, CircleLayerSpecification, FillLayerSpecification,MapLayerMouseEvent, LayerSpecification } from "maplibre-gl";
+import {
+	LineLayerSpecification,
+	CircleLayerSpecification,
+	FillLayerSpecification,
+	MapLayerMouseEvent,
+	LayerSpecification,
+} from 'maplibre-gl';
 &nbsp;
 type MlGeoJsonLayerProps = {
 	/**
@@ -306,7 +331,7 @@ 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 
+	 * 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;
@@ -322,7 +347,7 @@ type MlGeoJsonLayerProps = {
 	 * Type of the layer that will be added to the MapLibre instance.
 	 * Possible values: "line", "circle", "fill"
 	 */
-	type?: "fill" | "line" | "circle";
+	type?: 'fill' | 'line' | 'circle';
 	/**
 	 * Paint property object, that is passed to the addLayer call.
 	 * Possible props depend on the layer type.
@@ -330,7 +355,10 @@ 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?: CircleLayerSpecification['paint'] | FillLayerSpecification['paint'] | LineLayerSpecification['paint'];
+	paint?:
+		| CircleLayerSpecification['paint']
+		| FillLayerSpecification['paint']
+		| LineLayerSpecification['paint'];
 	/**
 	 * Layout property object, that is passed to the addLayer call.
 	 * Possible props depend on the layer type.
@@ -338,7 +366,10 @@ 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?: CircleLayerSpecification['layout'] | FillLayerSpecification['layout'] | LineLayerSpecification['layout'];
+	layout?:
+		| CircleLayerSpecification['layout']
+		| FillLayerSpecification['layout']
+		| LineLayerSpecification['layout'];
 	/**
 	 * Javascript object that is spread into the addLayer commands first parameter.
 	 */
@@ -346,7 +377,11 @@ type MlGeoJsonLayerProps = {
 	/**
 	 * Javascript object with optional properties "fill", "line", "circle" to override implicit layer type default paint properties.
 	 */
-	defaultPaintOverrides?: { circle?: CircleLayerSpecification['paint'], fill?: FillLayerSpecification['paint'], line?: LineLayerSpecification['paint'] };
+	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.
 	 */
@@ -360,27 +395,23 @@ type MlGeoJsonLayerProps = {
 	 * left/unhovered.
 	 */
 	onLeave?: MapLayerMouseEvent;
-}
+};
 &nbsp;
 /**
  * Adds source and layer of types "line", "fill" or "circle" to display GeoJSON data on the map.
  *
  * @component
  */
+&nbsp;
 const MlGeoJsonLayer = (props: MlGeoJsonLayerProps) =&gt; {
 	const layerType = props.type || <span class="branch-1 cbranch-no" title="branch not covered" >getDefaulLayerTypeByGeometry(props.geojson);</span>
 	// Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
 	useLayer({
 		mapId: props.mapId,
-		layerId: props.layerId || "MlGeoJsonLayer-" + uuidv4(),
+		layerId: props.layerId || 'MlGeoJsonLayer-' + uuidv4(),
 		geojson: props.geojson,
 		options: {
-			paint:
-				props.paint ||
-				getDefaultPaintPropsByType(
-					layerType,
-					props.defaultPaintOverrides
-				),
+			paint: props.paint || getDefaultPaintPropsByType(layerType, props.defaultPaintOverrides),
 			layout: props.layout || {},
 			...props.options,
 			type: layerType as LayerSpecification['type'],
@@ -391,10 +422,9 @@ const MlGeoJsonLayer = (props: MlGeoJsonLayerProps) =&gt; {
 		onLeave: props.onLeave,
 	});
 &nbsp;
-	return (&lt;&gt;&lt;/&gt;);
+	return &lt;&gt;&lt;/&gt;;
 };
 &nbsp;
-&nbsp;
 export default MlGeoJsonLayer;
 &nbsp;</pre></td></tr></table></pre>
 
@@ -403,7 +433,7 @@ export default MlGeoJsonLayer;
             <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 Wed Nov 16 2022 12:51:59 GMT+0000 (Coordinated Universal Time)
+                at 2022-12-16T12:30:49.297Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>