@mapcomponents/react-maplibre 0.1.55 → 0.1.56

package/coverage/lcov-report/index.html

@@ -23,16 +23,16 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">36.65% </span>
+                <span class="strong">36.64% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>651/1776</span>
+                <span class='fraction'>653/1782</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">29.77% </span>
+                <span class="strong">29.62% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>301/1011</span>
+                <span class='fraction'>301/1016</span>
             </div>
         
             
@@ -44,9 +44,9 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">38.2% </span>
+                <span class="strong">38.19% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>627/1641</span>
+                <span class='fraction'>629/1647</span>
             </div>
         
             
@@ -170,17 +170,17 @@
 
 <tr>
 	<td class="file medium" data-value="src/components/MlFollowGps"><a href="src/components/MlFollowGps/index.html">src/components/MlFollowGps</a></td>
-	<td data-value="60.78" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 60%"></div><div class="cover-empty" style="width: 40%"></div></div>
+	<td data-value="57.89" class="pic medium">
+	<div class="chart"><div class="cover-fill" style="width: 57%"></div><div class="cover-empty" style="width: 43%"></div></div>
 	</td>
-	<td data-value="60.78" class="pct medium">60.78%</td>
-	<td data-value="51" class="abs medium">31/51</td>
-	<td data-value="64" class="pct medium">64%</td>
-	<td data-value="25" class="abs medium">16/25</td>
+	<td data-value="57.89" class="pct medium">57.89%</td>
+	<td data-value="57" class="abs medium">33/57</td>
+	<td data-value="50" class="pct medium">50%</td>
+	<td data-value="32" class="abs medium">16/32</td>
 	<td data-value="70" class="pct medium">70%</td>
 	<td data-value="10" class="abs medium">7/10</td>
-	<td data-value="62.5" class="pct medium">62.5%</td>
-	<td data-value="48" class="abs medium">30/48</td>
+	<td data-value="59.25" class="pct medium">59.25%</td>
+	<td data-value="54" class="abs medium">32/54</td>
 	</tr>
 
 <tr>
@@ -356,7 +356,7 @@
 	<td data-value="5.71" class="pct low">5.71%</td>
 	<td data-value="35" class="abs low">2/35</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="46" class="abs low">0/46</td>
+	<td data-value="44" class="abs low">0/44</td>
 	<td data-value="0" class="pct low">0%</td>
 	<td data-value="8" class="abs low">0/8</td>
 	<td data-value="6.66" class="pct low">6.66%</td>
@@ -566,7 +566,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 Tue Jul 19 2022 12:57:03 GMT+0000 (Coordinated Universal Time)
+                at Thu Aug 11 2022 13:20:32 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="prettify.js"></script>
         <script>

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

@@ -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 Tue Jul 19 2022 12:57:03 GMT+0000 (Coordinated Universal Time)
+                at Thu Aug 11 2022 13:20:32 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 Tue Jul 19 2022 12:57:03 GMT+0000 (Coordinated Universal Time)
+                at Thu Aug 11 2022 13:20:32 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -328,7 +328,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 Tue Jul 19 2022 12:57:03 GMT+0000 (Coordinated Universal Time)
+                at Thu Aug 11 2022 13:20:32 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/components/MlCenterPosition/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 Tue Jul 19 2022 12:57:03 GMT+0000 (Coordinated Universal Time)
+                at Thu Aug 11 2022 13:20:32 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 Tue Jul 19 2022 12:57:03 GMT+0000 (Coordinated Universal Time)
+                at Thu Aug 11 2022 13:20:32 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 Tue Jul 19 2022 12:57:03 GMT+0000 (Coordinated Universal Time)
+                at Thu Aug 11 2022 13:20:32 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -490,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 Tue Jul 19 2022 12:57:03 GMT+0000 (Coordinated Universal Time)
+                at Thu Aug 11 2022 13:20:32 GMT+0000 (Coordinated Universal Time)
             </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 Tue Jul 19 2022 12:57:03 GMT+0000 (Coordinated Universal Time)
+                at Thu Aug 11 2022 13:20:32 GMT+0000 (Coordinated Universal Time)
             </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 Tue Jul 19 2022 12:57:03 GMT+0000 (Coordinated Universal Time)
+                at Thu Aug 11 2022 13:20:32 GMT+0000 (Coordinated Universal Time)
             </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 Tue Jul 19 2022 12:57:03 GMT+0000 (Coordinated Universal Time)
+                at Thu Aug 11 2022 13:20:32 GMT+0000 (Coordinated Universal Time)
             </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">60.78% </span>
+                <span class="strong">57.89% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>31/51</span>
+                <span class='fraction'>33/57</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">64% </span>
+                <span class="strong">50% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>16/25</span>
+                <span class='fraction'>16/32</span>
             </div>
         
             
@@ -44,9 +44,9 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">62.5% </span>
+                <span class="strong">59.25% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>30/48</span>
+                <span class='fraction'>32/54</span>
             </div>
         
             
@@ -294,7 +294,53 @@
 <a name='L229'></a><a href='#L229'>229</a>
 <a name='L230'></a><a href='#L230'>230</a>
 <a name='L231'></a><a href='#L231'>231</a>
-<a name='L232'></a><a href='#L232'>232</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L232'></a><a href='#L232'>232</a>
+<a name='L233'></a><a href='#L233'>233</a>
+<a name='L234'></a><a href='#L234'>234</a>
+<a name='L235'></a><a href='#L235'>235</a>
+<a name='L236'></a><a href='#L236'>236</a>
+<a name='L237'></a><a href='#L237'>237</a>
+<a name='L238'></a><a href='#L238'>238</a>
+<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>
+<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>
@@ -365,7 +411,7 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">9x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">9x</span>
 <span class="cline-any cline-yes">9x</span>
 <span class="cline-any cline-yes">9x</span>
 <span class="cline-any cline-yes">9x</span>
@@ -376,12 +422,20 @@
 <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-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-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-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-no">&nbsp;</span>
@@ -423,6 +477,8 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">3x</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>
 <span class="cline-any cline-yes">7x</span>
@@ -430,9 +486,6 @@
 <span class="cline-any cline-yes">5x</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">2x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -491,6 +544,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-yes">3x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -501,6 +555,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-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>
@@ -525,14 +581,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, { useEffect, useState, useCallback, useMemo } from "react";
+<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 } from "@mui/material";
-import  GpsFixedIcon  from "@mui/icons-material/GpsFixed";
+import { Button, SxProps } 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";
 &nbsp;
 interface MlFollowGpsProps {
   /**
@@ -557,13 +616,29 @@ interface MlFollowGpsProps {
    * By default, if showUserLocation is true, a transparent circle will be drawn around the user location
    * indicating the accuracy (95% confidence level) of the user's location. Set to false to disable.
    */
-  showAccuracyCircle?: boolean,
+  showAccuracyCircle?: boolean;
   /**
-   * position circle paint property object, that is passed to the MlGeoJsonLayer responsible for drawing the accuracy circle.
+   * Use the MapLibre.flyTo function to center the map to the current users position if true.
+   * Otherwise the MapLibre.setCenter function is used.
+   */
+  useFlyTo?: boolean;
+  /**
+   * Center map to current position once updated location data is recieved.
+   * "false" will center the map once on component activation and then display the updated user location on the map.
+   */
+  centerUserPosition?: boolean;
+  /**
+   * Orientation cone paint property object, that is passed to the MlGeoJsonLayer responsible for drawing the orientation cone polygon.
    * Use any available paint prop from layer type "fill".
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
    */
-  circlePaint?: any;
+  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"];
   /**
    * Active button font color
    */
@@ -573,15 +648,15 @@ interface MlFollowGpsProps {
    */
   offColor?: string;
   /**
-   * Accuracy paint property object, that is passed to the MlGeoJsonLayer responsible for drawing the accuracy circle.
+   * Accuracy paint property object, that is passed to the MlGeoJsonLayer responsible for drawing the accuracy polygon.
    * Use any available paint prop from layer type "fill".
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
    */
-  accuracyPaint?: any;
+  accuracyPaint?: FillLayerSpecification["paint"];
   /**
    * CSS style object that is applied to the button component
    */
-  style?: any;
+  buttonSx?: SxProps | any;
 }
 &nbsp;
 /**
@@ -596,22 +671,30 @@ const MlFollowGps = (props: MlFollowGpsProps) =&gt; {
   });
 &nbsp;
   const [isFollowed, setIsFollowed] = useState(false);
-  const [userLocationGeoJson, setUserLocationGeoJson] =
-    useState&lt;Feature&lt;Point&gt;&gt;();
+  const [userLocationGeoJson, setUserLocationGeoJson] = useState&lt;Feature&lt;Point&gt;&gt;();
   const [locationAccessDenied, setLocationAccessDenied] = useState(false);
   const [accuracyGeoJson, setAccuracyGeoJson] = useState&lt;Feature&gt;();
   const [deviceOrientation, setDeviceOrientation] = useState(0);
+  const initiallyCentered = useRef(false);
 &nbsp;
   const getLocationSuccess = useCallback(
 <span class="fstat-no" title="function not covered" >    (p</span>os) =&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" >      mapHook.map.map.flyTo({</span>
-        center: [pos.coords.longitude, pos.coords.latitude],
-        zoom: 18,
-        speed: 1,
-        curve: 1,
-      });
+<span class="cstat-no" title="statement not covered" >      if ((!props.centerUserPosition &amp;&amp; !initiallyCentered.current) || props.centerUserPosition) {</span>
+<span class="cstat-no" title="statement not covered" >        if (props.useFlyTo) {</span>
+<span class="cstat-no" title="statement not covered" >          mapHook.map.map.flyTo({</span>
+            center: [pos.coords.longitude, pos.coords.latitude],
+            zoom: 18,
+            speed: 1,
+            curve: 1,
+          });
+        } else {
+<span class="cstat-no" title="statement not covered" >          mapHook.map.map.setCenter([pos.coords.longitude, pos.coords.latitude]);</span>
+        }
+&nbsp;
+<span class="cstat-no" title="statement not covered" >        initiallyCentered.current = true;</span>
+      }
 <span class="cstat-no" title="statement not covered" >      if (!props.showUserLocation) <span class="cstat-no" title="statement not covered" >return;</span></span>
       const geoJsonPoint = <span class="cstat-no" title="statement not covered" >point([pos.coords.longitude, pos.coords.latitude]);</span>
 <span class="cstat-no" title="statement not covered" >      setUserLocationGeoJson(geoJsonPoint);</span>
@@ -651,6 +734,8 @@ const MlFollowGps = (props: MlFollowGpsProps) =&gt; {
       return () =&gt; {
         window.removeEventListener("deviceorientation", _handleOrientation);
       };
+    } else {
+      initiallyCentered.current = false;
     }
     return;
   }, [isFollowed]);
@@ -659,10 +744,7 @@ const MlFollowGps = (props: MlFollowGpsProps) =&gt; {
     if (!mapHook.map) return;
 &nbsp;
     if (isFollowed) {
-      let _watchId = navigator.geolocation.watchPosition(
-        getLocationSuccess,
-        getLocationError
-      );
+      let _watchId = navigator.geolocation.watchPosition(getLocationSuccess, getLocationError);
 &nbsp;
       return () =&gt; {
         navigator.geolocation.clearWatch(_watchId);
@@ -694,6 +776,7 @@ const MlFollowGps = (props: MlFollowGpsProps) =&gt; {
             "fill-color": "#0000ff",
             "fill-antialias": false,
             "fill-opacity": 0.3,
+            ...props.orientationConePaint,
           }}
           insertBeforeLayer={props.insertBeforeLayer}
         /&gt;
@@ -718,7 +801,7 @@ const MlFollowGps = (props: MlFollowGpsProps) =&gt; {
         sx={{
           zIndex: 1002,
           color: isFollowed ? props.onColor : props.offColor,
-          ...props.style,
+          ...props.buttonSx,
         }}
         disabled={locationAccessDenied}
         onClick={() =&gt; {
@@ -726,7 +809,9 @@ const MlFollowGps = (props: MlFollowGpsProps) =&gt; {
         }}
       &gt;
         {" "}
-        &lt;GpsFixedIcon sx={{ ...(props.style?.fontSize?{fontSize: props.style?.fontSize}:<span class="branch-1 cbranch-no" title="branch not covered" >{})</span> }} /&gt;{" "}
+        &lt;GpsFixedIcon
+          sx={{ ...(props.buttonSx?.fontSize ? { fontSize: props.buttonSx?.fontSize } : <span class="branch-1 cbranch-no" title="branch not covered" >{})</span> }}
+        /&gt;{" "}
       &lt;/Button&gt;
     &lt;/&gt;
   );
@@ -734,7 +819,7 @@ const MlFollowGps = (props: MlFollowGpsProps) =&gt; {
 &nbsp;
 MlFollowGps.defaultProps = {
   mapId: undefined,
-  style: {
+  buttonSx: {
     minWidth: "30px",
     minHeight: "30px",
     width: "30px",
@@ -753,6 +838,8 @@ MlFollowGps.defaultProps = {
   showAccuracyCircle: true,
   showUserLocation: true,
   showOrientation: true,
+  centerUserPosition: true,
+  useFlyTo: false,
 };
 &nbsp;
 export default MlFollowGps;
@@ -763,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 Tue Jul 19 2022 12:57:03 GMT+0000 (Coordinated Universal Time)
+                at Thu Aug 11 2022 13:20:32 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -23,16 +23,16 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">60.78% </span>
+                <span class="strong">57.89% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>31/51</span>
+                <span class='fraction'>33/57</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">64% </span>
+                <span class="strong">50% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>16/25</span>
+                <span class='fraction'>16/32</span>
             </div>
         
             
@@ -44,9 +44,9 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">62.5% </span>
+                <span class="strong">59.25% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>30/48</span>
+                <span class='fraction'>32/54</span>
             </div>
         
             
@@ -80,17 +80,17 @@
 </thead>
 <tbody><tr>
 	<td class="file medium" data-value="MlFollowGps.tsx"><a href="MlFollowGps.tsx.html">MlFollowGps.tsx</a></td>
-	<td data-value="60.78" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 60%"></div><div class="cover-empty" style="width: 40%"></div></div>
+	<td data-value="57.89" class="pic medium">
+	<div class="chart"><div class="cover-fill" style="width: 57%"></div><div class="cover-empty" style="width: 43%"></div></div>
 	</td>
-	<td data-value="60.78" class="pct medium">60.78%</td>
-	<td data-value="51" class="abs medium">31/51</td>
-	<td data-value="64" class="pct medium">64%</td>
-	<td data-value="25" class="abs medium">16/25</td>
+	<td data-value="57.89" class="pct medium">57.89%</td>
+	<td data-value="57" class="abs medium">33/57</td>
+	<td data-value="50" class="pct medium">50%</td>
+	<td data-value="32" class="abs medium">16/32</td>
 	<td data-value="70" class="pct medium">70%</td>
 	<td data-value="10" class="abs medium">7/10</td>
-	<td data-value="62.5" class="pct medium">62.5%</td>
-	<td data-value="48" class="abs medium">30/48</td>
+	<td data-value="59.25" class="pct medium">59.25%</td>
+	<td data-value="54" class="abs medium">32/54</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 Tue Jul 19 2022 12:57:03 GMT+0000 (Coordinated Universal Time)
+                at Thu Aug 11 2022 13:20:32 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -1201,7 +1201,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 Tue Jul 19 2022 12:57:03 GMT+0000 (Coordinated Universal Time)
+                at Thu Aug 11 2022 13:20:32 GMT+0000 (Coordinated Universal Time)
             </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 Tue Jul 19 2022 12:57:03 GMT+0000 (Coordinated Universal Time)
+                at Thu Aug 11 2022 13:20:32 GMT+0000 (Coordinated Universal Time)
             </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 Tue Jul 19 2022 12:57:03 GMT+0000 (Coordinated Universal Time)
+                at Thu Aug 11 2022 13:20:32 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -403,7 +403,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 Tue Jul 19 2022 12:57:03 GMT+0000 (Coordinated Universal Time)
+                at Thu Aug 11 2022 13:20:32 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>