@mapcomponents/react-maplibre 0.1.66 → 0.1.68

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

@@ -32,7 +32,7 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/4</span>
+                <span class='fraction'>0/2</span>
             </div>
         
             
@@ -142,14 +142,7 @@
 <a name='L77'></a><a href='#L77'>77</a>
 <a name='L78'></a><a href='#L78'>78</a>
 <a name='L79'></a><a href='#L79'>79</a>
-<a name='L80'></a><a href='#L80'>80</a>
-<a name='L81'></a><a href='#L81'>81</a>
-<a name='L82'></a><a href='#L82'>82</a>
-<a name='L83'></a><a href='#L83'>83</a>
-<a name='L84'></a><a href='#L84'>84</a>
-<a name='L85'></a><a href='#L85'>85</a>
-<a name='L86'></a><a href='#L86'>86</a>
-<a name='L87'></a><a href='#L87'>87</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L80'></a><a href='#L80'>80</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>
@@ -187,26 +180,25 @@
 <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-no">&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-no">&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-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-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-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-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>
@@ -215,13 +207,6 @@
 <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">10x</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>
@@ -230,6 +215,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">10x</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>
@@ -237,8 +223,8 @@
 <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, useCallback } from "react";
 import useMap from "../../hooks/useMap";
-import { Button, SxProps, Theme } from "@mui/material";
-import	GpsFixedIcon	from "@mui/icons-material/GpsFixed";
+import { Button, SxProps, Theme } from '@mui/material';
+import GpsFixedIcon from '@mui/icons-material/GpsFixed';
 &nbsp;
 export interface MlCenterPositionProps {
 	/**
@@ -273,52 +259,45 @@ const MlCenterPosition = <span class="fstat-no" title="function not covered" >(p
 		mapId: props.mapId,
 		waitForLayer: props.insertBeforeLayer,
 	});
+&nbsp;
 	const [locationAccessDenied, setLocationAccessDenied] = <span class="cstat-no" title="statement not covered" >useState(false);</span>
 &nbsp;
 	const centerCurrentLocation = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
 <span class="cstat-no" title="statement not covered" >		navigator.geolocation.getCurrentPosition(getLocationSuccess, getLocationError);</span>
 	};
 &nbsp;
-	const getLocationSuccess = <span class="cstat-no" title="statement not covered" >useCallback(<span class="fstat-no" title="function not covered" >(l</span>ocation) =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >		mapHook.map?.map.setCenter?.([location.coords.longitude, location.coords.latitude]);</span>
-	}, [mapHook.map]);
+	const getLocationSuccess = <span class="cstat-no" title="statement not covered" >useCallback(</span>
+<span class="fstat-no" title="function not covered" >		(l</span>ocation: GeolocationPosition) =&gt; {
+<span class="cstat-no" title="statement not covered" >			mapHook.map?.map.setCenter?.([location.coords.longitude, location.coords.latitude]);</span>
+		},
+		[mapHook.map]
+	);
 &nbsp;
 	const getLocationError = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >		console.log("Access of user location denied");</span>
+<span class="cstat-no" title="statement not covered" >		console.log('Access of user location denied');</span>
 <span class="cstat-no" title="statement not covered" >		setLocationAccessDenied(true);</span>
 	};
-<span class="cstat-no" title="statement not covered" >	return &lt;&gt;</span>
-			&lt;Button 
+<span class="cstat-no" title="statement not covered" >	return (</span>
+		&lt;&gt;
+			&lt;Button
+				variant="navtools"
 				sx={{
 					zIndex: 1002,
 					color: !locationAccessDenied ? props.onColor : props.offColor,
-					...props.style,
 				}}
-			 onClick={centerCurrentLocation} disabled={locationAccessDenied}&gt;
-				&lt;GpsFixedIcon sx={{ ...(props.style?.['fontSize']?{fontSize: props.style?.['fontSize']}:{}) }} /&gt;{" "}
+				onClick={centerCurrentLocation}
+				disabled={locationAccessDenied}
+			&gt;
+				&lt;GpsFixedIcon sx={{ fontSize: { xs: '1.4em', md: '1em' } }} /&gt;
 			&lt;/Button&gt;
-	&lt;/&gt;;
-&nbsp;
+		&lt;/&gt;
+	);
 };
 &nbsp;
 MlCenterPosition.defaultProps = {
 	mapId: undefined,
-	style: {
-		minWidth: "30px",
-		minHeight: "30px",
-		width: "30px",
-		height: "30px",
-		backgroundColor: "#414141",
-		borderRadius: "23%",
-		margin: 0.15,
-		fontSize: "1.3em",
-		":hover": {
-			backgroundColor: "#515151",
-			color: "#ececec",
-		},
-	},
-	onColor: "#ececec",
-	offColor: "#666",
+	onColor: '#ececec',
+	offColor: '#666',
 };
 export default MlCenterPosition;
 &nbsp;</pre></td></tr></table></pre>
@@ -328,7 +307,7 @@ export default MlCenterPosition;
             <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 2023-01-23T12:34:46.087Z
+                at 2023-02-07T08:13:43.414Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -32,7 +32,7 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/4</span>
+                <span class='fraction'>0/2</span>
             </div>
         
             
@@ -86,7 +86,7 @@
 	<td data-value="16.66" class="pct low">16.66%</td>
 	<td data-value="12" class="abs low">2/12</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="4" class="abs low">0/4</td>
+	<td data-value="2" class="abs low">0/2</td>
 	<td data-value="0" class="pct low">0%</td>
 	<td data-value="4" class="abs low">0/4</td>
 	<td data-value="16.66" class="pct low">16.66%</td>
@@ -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 2023-01-23T12:34:46.087Z
+                at 2023-02-07T08:13:43.414Z
             </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 2023-01-23T12:34:46.087Z
+                at 2023-02-07T08:13:43.414Z
             </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 2023-01-23T12:34:46.087Z
+                at 2023-02-07T08:13:43.414Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/components/MlCreatePdfForm/MlCreatePdfForm.cy.tsx.html

@@ -133,7 +133,7 @@ const {ExampleConfig } = <span class="cstat-no" title="statement not covered" >c
             <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 2023-01-23T12:34:46.087Z
+                at 2023-02-07T08:13:43.414Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -181,7 +181,7 @@ export default MlCreatePdfForm;
             <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 2023-01-23T12:34:46.087Z
+                at 2023-02-07T08:13:43.414Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/components/MlCreatePdfForm/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 2023-01-23T12:34:46.087Z
+                at 2023-02-07T08:13:43.414Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -520,7 +520,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 2023-01-23T12:34:46.087Z
+                at 2023-02-07T08:13:43.414Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/components/MlFeatureEditor/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 2023-01-23T12:34:46.087Z
+                at 2023-02-07T08:13:43.414Z
             </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 2023-01-23T12:34:46.087Z
+                at 2023-02-07T08:13:43.414Z
             </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 2023-01-23T12:34:46.087Z
+                at 2023-02-07T08:13:43.414Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -23,16 +23,16 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">57.89% </span>
+                <span class="strong">56.89% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>33/57</span>
+                <span class='fraction'>33/58</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">50% </span>
+                <span class="strong">46.87% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>16/32</span>
+                <span class='fraction'>15/32</span>
             </div>
         
             
@@ -44,9 +44,9 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">59.25% </span>
+                <span class="strong">58.18% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>32/54</span>
+                <span class='fraction'>32/55</span>
             </div>
         
             
@@ -304,30 +304,7 @@
 <a name='L239'></a><a href='#L239'>239</a>
 <a name='L240'></a><a href='#L240'>240</a>
 <a name='L241'></a><a href='#L241'>241</a>
-<a name='L242'></a><a href='#L242'>242</a>
-<a name='L243'></a><a href='#L243'>243</a>
-<a name='L244'></a><a href='#L244'>244</a>
-<a name='L245'></a><a href='#L245'>245</a>
-<a name='L246'></a><a href='#L246'>246</a>
-<a name='L247'></a><a href='#L247'>247</a>
-<a name='L248'></a><a href='#L248'>248</a>
-<a name='L249'></a><a href='#L249'>249</a>
-<a name='L250'></a><a href='#L250'>250</a>
-<a name='L251'></a><a href='#L251'>251</a>
-<a name='L252'></a><a href='#L252'>252</a>
-<a name='L253'></a><a href='#L253'>253</a>
-<a name='L254'></a><a href='#L254'>254</a>
-<a name='L255'></a><a href='#L255'>255</a>
-<a name='L256'></a><a href='#L256'>256</a>
-<a name='L257'></a><a href='#L257'>257</a>
-<a name='L258'></a><a href='#L258'>258</a>
-<a name='L259'></a><a href='#L259'>259</a>
-<a name='L260'></a><a href='#L260'>260</a>
-<a name='L261'></a><a href='#L261'>261</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>
+<a name='L242'></a><a href='#L242'>242</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>
@@ -465,6 +442,8 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">9x</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-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">9x</span>
@@ -554,9 +533,6 @@
 <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">11x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -569,29 +545,15 @@
 <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>
-<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></td><td class="text"><pre class="prettyprint lang-js">import React, { useRef, useEffect, useState, useCallback, useMemo } from "react";
 import useMap from "../../hooks/useMap";
 import MlGeoJsonLayer from "../MlGeoJsonLayer/MlGeoJsonLayer";
 &nbsp;
-import { Button, SxProps } from "@mui/material";
-import GpsFixedIcon from "@mui/icons-material/GpsFixed";
+import { Button } from '@mui/material';
+import GpsFixedIcon from '@mui/icons-material/GpsFixed';
 &nbsp;
-import { point, circle, lineArc, Feature, Point } from "@turf/turf";
-import { CircleLayerSpecification, FillLayerSpecification } from "maplibre-gl";
+import { point, circle, lineArc, Feature, Point } from '@turf/turf';
+import { CircleLayerSpecification, FillLayerSpecification } from 'maplibre-gl';
 &nbsp;
 interface MlFollowGpsProps {
 	/**
@@ -632,13 +594,13 @@ interface MlFollowGpsProps {
 	 * Use any available paint prop from layer type "fill".
 	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
 	 */
-	orientationConePaint?: FillLayerSpecification["paint"];
+	orientationConePaint?: FillLayerSpecification['paint'];
 	/**
 	 * Position circle paint property object, that is passed to the MlGeoJsonLayer responsible for drawing the position circle.
 	 * Use any available paint prop from layer type "circle".
 	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
 	 */
-	circlePaint?: CircleLayerSpecification["paint"];
+	circlePaint?: CircleLayerSpecification['paint'];
 	/**
 	 * Active button font color
 	 */
@@ -652,11 +614,7 @@ interface MlFollowGpsProps {
 	 * Use any available paint prop from layer type "fill".
 	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
 	 */
-	accuracyPaint?: FillLayerSpecification["paint"];
-	/**
-	 * CSS style object that is applied to the button component
-	 */
-	buttonSx?: SxProps | any;
+	accuracyPaint?: FillLayerSpecification['paint'];
 }
 &nbsp;
 /**
@@ -678,7 +636,7 @@ const MlFollowGps = (props: MlFollowGpsProps) =&gt; {
 	const initiallyCentered = useRef(false);
 &nbsp;
 	const getLocationSuccess = useCallback(
-<span class="fstat-no" title="function not covered" >		(p</span>os) =&gt; {
+<span class="fstat-no" title="function not covered" >		(p</span>os: GeolocationPosition) =&gt; {
 <span class="cstat-no" title="statement not covered" >			if (!mapHook.map) <span class="cstat-no" title="statement not covered" >return;</span></span>
 &nbsp;
 <span class="cstat-no" title="statement not covered" >			if ((!props.centerUserPosition &amp;&amp; !initiallyCentered.current) || props.centerUserPosition) {</span>
@@ -704,7 +662,7 @@ const MlFollowGps = (props: MlFollowGpsProps) =&gt; {
 	);
 &nbsp;
 	const getLocationError = <span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >		console.log("Access of user location denied");</span>
+<span class="cstat-no" title="statement not covered" >		console.log('Access of user location denied');</span>
 <span class="cstat-no" title="statement not covered" >		setLocationAccessDenied(true);</span>
 	};
 &nbsp;
@@ -712,27 +670,29 @@ const MlFollowGps = (props: MlFollowGpsProps) =&gt; {
 		<span class="missing-if-branch" title="else path not taken" >E</span>if (!userLocationGeoJson) {
 			return undefined;
 		}
-		let radius = <span class="cstat-no" title="statement not covered" >0.02;</span>
-		let bearing1 = <span class="cstat-no" title="statement not covered" >deviceOrientation - 15;</span>
-		let bearing2 = <span class="cstat-no" title="statement not covered" >deviceOrientation + 15;</span>
+		const radius = <span class="cstat-no" title="statement not covered" >0.02;</span>
+		const bearing1 = <span class="cstat-no" title="statement not covered" >deviceOrientation - 15;</span>
+		const bearing2 = <span class="cstat-no" title="statement not covered" >deviceOrientation + 15;</span>
 		const options = <span class="cstat-no" title="statement not covered" >{ steps: 65 };</span>
-		let arc = <span class="cstat-no" title="statement not covered" >lineArc(userLocationGeoJson, radius, bearing1, bearing2, options);</span>
-		let copy = <span class="cstat-no" title="statement not covered" >arc;</span>
+		const arc = <span class="cstat-no" title="statement not covered" >lineArc(userLocationGeoJson, radius, bearing1, bearing2, options);</span>
+		const copy = <span class="cstat-no" title="statement not covered" >arc;</span>
 <span class="cstat-no" title="statement not covered" >		copy.geometry.coordinates.push(userLocationGeoJson.geometry.coordinates);</span>
 <span class="cstat-no" title="statement not covered" >		copy.geometry.coordinates.slice(0, 0);</span>
 <span class="cstat-no" title="statement not covered" >		return copy;</span>
 	}, [deviceOrientation, userLocationGeoJson]);
 &nbsp;
-	const handleOrientation = <span class="fstat-no" title="function not covered" >(e</span>vent: any) =&gt; {
-<span class="cstat-no" title="statement not covered" >		setDeviceOrientation(-event.alpha);</span>
+	const handleOrientation = <span class="fstat-no" title="function not covered" >(e</span>vent: DeviceOrientationEvent) =&gt; {
+<span class="cstat-no" title="statement not covered" >		if (event?.alpha) {</span>
+<span class="cstat-no" title="statement not covered" >			setDeviceOrientation(-event.alpha);</span>
+		}
 	};
 &nbsp;
 	useEffect(() =&gt; {
 		if (isFollowed) {
-			let _handleOrientation = handleOrientation;
-			window.addEventListener("deviceorientation", _handleOrientation);
+			const _handleOrientation = handleOrientation;
+			window.addEventListener('deviceorientation', _handleOrientation);
 			return () =&gt; {
-				window.removeEventListener("deviceorientation", _handleOrientation);
+				window.removeEventListener('deviceorientation', _handleOrientation);
 			};
 		} else {
 			initiallyCentered.current = false;
@@ -744,7 +704,7 @@ const MlFollowGps = (props: MlFollowGpsProps) =&gt; {
 		if (!mapHook.map) return;
 &nbsp;
 		if (isFollowed) {
-			let _watchId = navigator.geolocation.watchPosition(getLocationSuccess, getLocationError);
+			const _watchId = navigator.geolocation.watchPosition(getLocationSuccess, getLocationError);
 &nbsp;
 			return () =&gt; {
 				navigator.geolocation.clearWatch(_watchId);
@@ -758,10 +718,10 @@ const MlFollowGps = (props: MlFollowGpsProps) =&gt; {
 			{isFollowed &amp;&amp; userLocationGeoJson &amp;&amp; (
 <span class="branch-2 cbranch-no" title="branch not covered" >				&lt;MlGeoJsonLayer</span>
 					geojson={accuracyGeoJson}
-					type={"fill"}
+					type={'fill'}
 					paint={{
-						"fill-color": "#cbd300",
-						"fill-opacity": 0.3,
+						'fill-color': '#cbd300',
+						'fill-opacity': 0.3,
 						...props.accuracyPaint,
 					}}
 					insertBeforeLayer={props.insertBeforeLayer}
@@ -771,11 +731,11 @@ const MlFollowGps = (props: MlFollowGpsProps) =&gt; {
 			{isFollowed &amp;&amp; orientationCone &amp;&amp; (
 <span class="branch-2 cbranch-no" title="branch not covered" >				&lt;MlGeoJsonLayer</span>
 					geojson={orientationCone}
-					type={"fill"}
+					type={'fill'}
 					paint={{
-						"fill-color": "#0000ff",
-						"fill-antialias": false,
-						"fill-opacity": 0.3,
+						'fill-color': '#0000ff',
+						'fill-antialias': false,
+						'fill-opacity': 0.3,
 						...props.orientationConePaint,
 					}}
 					insertBeforeLayer={props.insertBeforeLayer}
@@ -785,12 +745,12 @@ const MlFollowGps = (props: MlFollowGpsProps) =&gt; {
 			{isFollowed &amp;&amp; userLocationGeoJson &amp;&amp; (
 <span class="branch-2 cbranch-no" title="branch not covered" >				&lt;MlGeoJsonLayer</span>
 					geojson={userLocationGeoJson}
-					type={"circle"}
+					type={'circle'}
 					paint={{
-						"circle-color": "#009ee0",
-						"circle-radius": 5,
-						"circle-stroke-color": "#fafaff",
-						"circle-stroke-width": 1,
+						'circle-color': '#009ee0',
+						'circle-radius': 5,
+						'circle-stroke-color': '#fafaff',
+						'circle-stroke-width': 1,
 						...props.circlePaint,
 					}}
 					insertBeforeLayer={props.insertBeforeLayer}
@@ -798,20 +758,17 @@ const MlFollowGps = (props: MlFollowGpsProps) =&gt; {
 			)}
 &nbsp;
 			&lt;Button
+				variant="navtools"
 				sx={{
 					zIndex: 1002,
 					color: isFollowed ? props.onColor : props.offColor,
-					...props.buttonSx,
 				}}
 				disabled={locationAccessDenied}
 				onClick={() =&gt; {
 					setIsFollowed(!isFollowed);
 				}}
 			&gt;
-				{" "}
-				&lt;GpsFixedIcon
-					sx={{ ...(props.buttonSx?.fontSize ? { fontSize: props.buttonSx?.fontSize } : <span class="branch-1 cbranch-no" title="branch not covered" >{})</span> }}
-				/&gt;{" "}
+				&lt;GpsFixedIcon sx={{ fontSize: { xs: '1.4em', md: '1em' } }} /&gt;
 			&lt;/Button&gt;
 		&lt;/&gt;
 	);
@@ -819,22 +776,8 @@ const MlFollowGps = (props: MlFollowGpsProps) =&gt; {
 &nbsp;
 MlFollowGps.defaultProps = {
 	mapId: undefined,
-	buttonSx: {
-		minWidth: "30px",
-		minHeight: "30px",
-		width: "30px",
-		height: "30px",
-		backgroundColor: "#414141",
-		borderRadius: "23%",
-		margin: 0.15,
-		fontSize: "1.3em",
-		":hover": {
-			backgroundColor: "#515151",
-			color: "#ececec",
-		},
-	},
-	onColor: "#ececec",
-	offColor: "#666",
+	onColor: '#ececec',
+	offColor: '#666',
 	showAccuracyCircle: true,
 	showUserLocation: true,
 	showOrientation: true,
@@ -850,7 +793,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 2023-01-23T12:34:46.087Z
+                at 2023-02-07T08:13:43.414Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>