@mapcomponents/react-maplibre 0.1.14 → 0.1.15

package/coverage/lcov-report/index.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">34.38% </span>
+                <span class="strong">36.65% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>589/1713</span>
+                <span class='fraction'>640/1746</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">27.97% </span>
+                <span class="strong">28.11% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>254/908</span>
+                <span class='fraction'>262/932</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">32.5% </span>
+                <span class="strong">35.1% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>92/283</span>
+                <span class='fraction'>99/282</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">35.22% </span>
+                <span class="strong">37.56% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>564/1601</span>
+                <span class='fraction'>612/1629</span>
             </div>
         
             
@@ -155,17 +155,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="66.66" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 66%"></div><div class="cover-empty" style="width: 34%"></div></div>
+	<td data-value="65.11" class="pic medium">
+	<div class="chart"><div class="cover-fill" style="width: 65%"></div><div class="cover-empty" style="width: 35%"></div></div>
 	</td>
-	<td data-value="66.66" class="pct medium">66.66%</td>
-	<td data-value="42" class="abs medium">28/42</td>
+	<td data-value="65.11" class="pct medium">65.11%</td>
+	<td data-value="43" class="abs medium">28/43</td>
 	<td data-value="59.09" class="pct medium">59.09%</td>
 	<td data-value="22" class="abs medium">13/22</td>
 	<td data-value="57.14" class="pct medium">57.14%</td>
 	<td data-value="7" class="abs medium">4/7</td>
-	<td data-value="67.5" class="pct medium">67.5%</td>
-	<td data-value="40" class="abs medium">27/40</td>
+	<td data-value="65.85" class="pct medium">65.85%</td>
+	<td data-value="41" class="abs medium">27/41</td>
 	</tr>
 
 <tr>
@@ -185,47 +185,47 @@
 
 <tr>
 	<td class="file medium" data-value="src/components/MlGeoJsonLayer"><a href="src/components/MlGeoJsonLayer/index.html">src/components/MlGeoJsonLayer</a></td>
-	<td data-value="68.18" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 68%"></div><div class="cover-empty" style="width: 32%"></div></div>
+	<td data-value="63.51" class="pic medium">
+	<div class="chart"><div class="cover-fill" style="width: 63%"></div><div class="cover-empty" style="width: 37%"></div></div>
 	</td>
-	<td data-value="68.18" class="pct medium">68.18%</td>
-	<td data-value="66" class="abs medium">45/66</td>
-	<td data-value="57.14" class="pct medium">57.14%</td>
-	<td data-value="56" class="abs medium">32/56</td>
-	<td data-value="87.5" class="pct high">87.5%</td>
-	<td data-value="8" class="abs high">7/8</td>
-	<td data-value="66.12" class="pct medium">66.12%</td>
-	<td data-value="62" class="abs medium">41/62</td>
+	<td data-value="63.51" class="pct medium">63.51%</td>
+	<td data-value="74" class="abs medium">47/74</td>
+	<td data-value="53.22" class="pct medium">53.22%</td>
+	<td data-value="62" class="abs medium">33/62</td>
+	<td data-value="77.77" class="pct medium">77.77%</td>
+	<td data-value="9" class="abs medium">7/9</td>
+	<td data-value="61.42" class="pct medium">61.42%</td>
+	<td data-value="70" class="abs medium">43/70</td>
 	</tr>
 
 <tr>
 	<td class="file medium" data-value="src/components/MlImageMarkerLayer"><a href="src/components/MlImageMarkerLayer/index.html">src/components/MlImageMarkerLayer</a></td>
-	<td data-value="79.54" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 79%"></div><div class="cover-empty" style="width: 21%"></div></div>
+	<td data-value="69.69" class="pic medium">
+	<div class="chart"><div class="cover-fill" style="width: 69%"></div><div class="cover-empty" style="width: 31%"></div></div>
 	</td>
-	<td data-value="79.54" class="pct medium">79.54%</td>
-	<td data-value="44" class="abs medium">35/44</td>
-	<td data-value="62.85" class="pct medium">62.85%</td>
-	<td data-value="35" class="abs medium">22/35</td>
-	<td data-value="87.5" class="pct high">87.5%</td>
-	<td data-value="8" class="abs high">7/8</td>
-	<td data-value="81.39" class="pct high">81.39%</td>
-	<td data-value="43" class="abs high">35/43</td>
+	<td data-value="69.69" class="pct medium">69.69%</td>
+	<td data-value="33" class="abs medium">23/33</td>
+	<td data-value="48.27" class="pct low">48.27%</td>
+	<td data-value="29" class="abs low">14/29</td>
+	<td data-value="83.33" class="pct high">83.33%</td>
+	<td data-value="6" class="abs high">5/6</td>
+	<td data-value="70.96" class="pct medium">70.96%</td>
+	<td data-value="31" class="abs medium">22/31</td>
 	</tr>
 
 <tr>
 	<td class="file medium" data-value="src/components/MlLayer"><a href="src/components/MlLayer/index.html">src/components/MlLayer</a></td>
-	<td data-value="75.67" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 75%"></div><div class="cover-empty" style="width: 25%"></div></div>
+	<td data-value="66.66" class="pic medium">
+	<div class="chart"><div class="cover-fill" style="width: 66%"></div><div class="cover-empty" style="width: 34%"></div></div>
 	</td>
-	<td data-value="75.67" class="pct medium">75.67%</td>
-	<td data-value="37" class="abs medium">28/37</td>
-	<td data-value="50" class="pct medium">50%</td>
-	<td data-value="28" class="abs medium">14/28</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="5" class="abs high">5/5</td>
-	<td data-value="75" class="pct medium">75%</td>
-	<td data-value="36" class="abs medium">27/36</td>
+	<td data-value="66.66" class="pct medium">66.66%</td>
+	<td data-value="45" class="abs medium">30/45</td>
+	<td data-value="44.11" class="pct low">44.11%</td>
+	<td data-value="34" class="abs low">15/34</td>
+	<td data-value="83.33" class="pct high">83.33%</td>
+	<td data-value="6" class="abs high">5/6</td>
+	<td data-value="65.9" class="pct medium">65.9%</td>
+	<td data-value="44" class="abs medium">29/44</td>
 	</tr>
 
 <tr>
@@ -324,13 +324,13 @@
 	<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
 	</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="49" class="abs low">0/49</td>
+	<td data-value="50" class="abs low">0/50</td>
 	<td data-value="0" class="pct low">0%</td>
 	<td data-value="44" class="abs low">0/44</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="11" class="abs low">0/11</td>
+	<td data-value="12" class="abs low">0/12</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="45" class="abs low">0/45</td>
+	<td data-value="46" class="abs low">0/46</td>
 	</tr>
 
 <tr>
@@ -369,13 +369,13 @@
 	<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
 	</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="50" class="abs low">0/50</td>
+	<td data-value="87" class="abs low">0/87</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="24" class="abs low">0/24</td>
+	<td data-value="42" class="abs low">0/42</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="9" class="abs low">0/9</td>
+	<td data-value="10" class="abs low">0/10</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="48" class="abs low">0/48</td>
+	<td data-value="81" class="abs low">0/81</td>
 	</tr>
 
 <tr>
@@ -484,18 +484,18 @@
 	</tr>
 
 <tr>
-	<td class="file low" data-value="src/hooks"><a href="src/hooks/index.html">src/hooks</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 class="file medium" data-value="src/hooks"><a href="src/hooks/index.html">src/hooks</a></td>
+	<td data-value="50.42" class="pic medium">
+	<div class="chart"><div class="cover-fill" style="width: 50%"></div><div class="cover-empty" style="width: 50%"></div></div>
 	</td>
-	<td data-value="0" class="pct low">0%</td>
-	<td data-value="128" class="abs low">0/128</td>
-	<td data-value="0" class="pct low">0%</td>
-	<td data-value="42" class="abs low">0/42</td>
-	<td data-value="0" class="pct low">0%</td>
-	<td data-value="22" class="abs low">0/22</td>
-	<td data-value="0" class="pct low">0%</td>
-	<td data-value="124" class="abs low">0/124</td>
+	<td data-value="50.42" class="pct medium">50.42%</td>
+	<td data-value="117" class="abs medium">59/117</td>
+	<td data-value="33.33" class="pct low">33.33%</td>
+	<td data-value="42" class="abs low">14/42</td>
+	<td data-value="47.36" class="pct low">47.36%</td>
+	<td data-value="19" class="abs low">9/19</td>
+	<td data-value="50.44" class="pct medium">50.44%</td>
+	<td data-value="113" class="abs medium">57/113</td>
 	</tr>
 
 <tr>
@@ -521,7 +521,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener">istanbul</a>
-                at Wed Dec 15 2021 17:41:09 GMT+0000 (Coordinated Universal Time)
+                at Tue Dec 21 2021 11:51:22 GMT+0000 (Coordinated Universal Time)
             </div>
         </div>
         <script src="prettify.js"></script>

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

@@ -340,7 +340,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">istanbul</a>
-                at Wed Dec 15 2021 17:41:09 GMT+0000 (Coordinated Universal Time)
+                at Tue Dec 21 2021 11:51:22 GMT+0000 (Coordinated Universal Time)
             </div>
         </div>
         <script src="../../../prettify.js"></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">istanbul</a>
-                at Wed Dec 15 2021 17:41:09 GMT+0000 (Coordinated Universal Time)
+                at Tue Dec 21 2021 11:51:22 GMT+0000 (Coordinated Universal Time)
             </div>
         </div>
         <script src="../../../prettify.js"></script>

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

@@ -226,7 +226,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">istanbul</a>
-                at Wed Dec 15 2021 17:41:09 GMT+0000 (Coordinated Universal Time)
+                at Tue Dec 21 2021 11:51:22 GMT+0000 (Coordinated Universal Time)
             </div>
         </div>
         <script src="../../../prettify.js"></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">istanbul</a>
-                at Wed Dec 15 2021 17:41:09 GMT+0000 (Coordinated Universal Time)
+                at Tue Dec 21 2021 11:51:22 GMT+0000 (Coordinated Universal Time)
             </div>
         </div>
         <script src="../../../prettify.js"></script>

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

@@ -427,7 +427,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">istanbul</a>
-                at Wed Dec 15 2021 17:41:09 GMT+0000 (Coordinated Universal Time)
+                at Tue Dec 21 2021 11:51:22 GMT+0000 (Coordinated Universal Time)
             </div>
         </div>
         <script src="../../../prettify.js"></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">istanbul</a>
-                at Wed Dec 15 2021 17:41:09 GMT+0000 (Coordinated Universal Time)
+                at Tue Dec 21 2021 11:51:22 GMT+0000 (Coordinated Universal Time)
             </div>
         </div>
         <script src="../../../prettify.js"></script>

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

@@ -529,7 +529,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">istanbul</a>
-                at Wed Dec 15 2021 17:41:09 GMT+0000 (Coordinated Universal Time)
+                at Tue Dec 21 2021 11:51:22 GMT+0000 (Coordinated Universal Time)
             </div>
         </div>
         <script src="../../../prettify.js"></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">istanbul</a>
-                at Wed Dec 15 2021 17:41:09 GMT+0000 (Coordinated Universal Time)
+                at Tue Dec 21 2021 11:51:22 GMT+0000 (Coordinated Universal Time)
             </div>
         </div>
         <script src="../../../prettify.js"></script>

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

@@ -23,9 +23,9 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">66.66% </span>
+                <span class="strong">65.11% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>28/42</span>
+                <span class='fraction'>28/43</span>
             </div>
         
             
@@ -44,9 +44,9 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">67.5% </span>
+                <span class="strong">65.85% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>27/40</span>
+                <span class='fraction'>27/41</span>
             </div>
         
             
@@ -234,7 +234,8 @@
 <a name='L169'></a><a href='#L169'>169</a>
 <a name='L170'></a><a href='#L170'>170</a>
 <a name='L171'></a><a href='#L171'>171</a>
-<a name='L172'></a><a href='#L172'>172</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L172'></a><a href='#L172'>172</a>
+<a name='L173'></a><a href='#L173'>173</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>
@@ -305,6 +306,7 @@
 <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>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">7x</span>
@@ -348,25 +350,26 @@
 <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-yes">1x</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">3x</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">3x</span>
-<span class="cline-any cline-yes">1x</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-yes">1x</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-neutral">&nbsp;</span>
@@ -376,7 +379,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">1x</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>
@@ -386,6 +388,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">1x</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>
@@ -394,7 +397,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">1x</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>
@@ -412,7 +414,7 @@ import {MapContext} from "@mapcomponents/react-core";
 import {v4 as uuidv4} from "uuid";
 import Button from "@mui/material/Button";
 import RoomIcon from "@mui/icons-material/Room";
-import {point} from "@turf/turf"
+import {point, circle} from "@turf/turf"
 import MlGeoJsonLayer from "../MlGeoJsonLayer/MlGeoJsonLayer";
 import MlImageMarkerLayer from "../MlImageMarkerLayer/MlImageMarkerLayer";
 &nbsp;
@@ -438,7 +440,7 @@ const MlFollowGps = (props) =&gt; {
   const initializedRef = useRef(false);
   const mapRef = useRef(undefined);
   const componentId = useRef((props.idPrefix ? <span class="branch-0 cbranch-no" title="branch not covered" >props.idPrefix </span>: "MlFollowGps-") + uuidv4());
-  const [accuracyRadius, setAccuracyRadius] = useState(30);
+  const [accuracyGeoJson, setAccuracyGeoJson] = useState();
 &nbsp;
   useEffect(() =&gt; {
     let _componentId = componentId.current;
@@ -474,8 +476,9 @@ const MlFollowGps = (props) =&gt; {
   const getLocationSuccess = <span class="fstat-no" title="function not covered" >(p</span>os) =&gt; {
 <span class="cstat-no" title="statement not covered" >    if (!mapRef.current) <span class="cstat-no" title="statement not covered" >return;</span></span>
 <span class="cstat-no" title="statement not covered" >    mapRef.current.setCenter([pos.coords.longitude, pos.coords.latitude]);</span>
-<span class="cstat-no" title="statement not covered" >    setAccuracyRadius(pos.coords.accuracy);</span>
-<span class="cstat-no" title="statement not covered" >    setGeoJson(point([pos.coords.longitude, pos.coords.latitude]));</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" >    setGeoJson(geoJsonPoint);</span>
+<span class="cstat-no" title="statement not covered" >    setAccuracyGeoJson(circle(geoJsonPoint, pos.coords.accuracy/1000))</span>
   };
 &nbsp;
   const getLocationError = <span class="fstat-no" title="function not covered" >(e</span>rr) =&gt; {
@@ -487,29 +490,19 @@ const MlFollowGps = (props) =&gt; {
     &lt;&gt;
       {isFollowed &amp;&amp; geoJson &amp;&amp; (
 <span class="branch-2 cbranch-no" title="branch not covered" >        &lt;MlGeoJsonLayer</span>
-          geojson={geoJson}
-          type={"circle"}
+          geojson={accuracyGeoJson}
+          type={"fill"}
           paint={{
-            "circle-radius": {
-              stops: [
-                [0, 0],
-                [
-                  20,
-                  accuracyRadius /
-                    0.075 /
-                    Math.cos((geoJson.geometry.coordinates[1] * Math.PI) / 180),
-                ],
-              ],
-              base: 2,
-            },
-            "circle-color": "#ee7700",
-            "circle-opacity": 0.5,
+            "fill-color": "#ee7700",
+            "fill-opacity": 0.5,
           }}
+          insertBeforeLayer={"MlFollowGpsMarker"}
         /&gt;
       )}
 &nbsp;
       {isFollowed &amp;&amp; geoJson &amp;&amp; (
 <span class="branch-2 cbranch-no" title="branch not covered" >        &lt;MlImageMarkerLayer</span>
+          layerId={"MlFollowGpsMarker"}
           options={{
             type: "symbol",
             source: {
@@ -526,7 +519,7 @@ const MlFollowGps = (props) =&gt; {
       )}
 &nbsp;
       &lt;Button
-        sx={{ zIndex: 1002, color: isFollowed ? "#bbb" : "#666", ...props.style }}
+        sx={{ zIndex: 1002, color: isFollowed ? props.onColor : props.offColor, ...props.style }}
         disabled={locationAccessDenied}
         onClick={() =&gt; {
           if (isFollowed) {
@@ -541,7 +534,7 @@ const MlFollowGps = (props) =&gt; {
         }}
       &gt;
         {" "}
-        &lt;RoomIcon sx={{fontSize: props.style.fontSize}}/&gt;{" "}
+        &lt;RoomIcon sx={{ fontSize: props.style.fontSize }} /&gt;{" "}
       &lt;/Button&gt;
     &lt;/&gt;
   );
@@ -563,6 +556,8 @@ MlFollowGps.defaultProps = {
       color: "#ececec",
     },
   },
+  onColor: "#ececec",
+  offColor: "#666"
 };
 &nbsp;
 MlFollowGps.propTypes = {
@@ -574,6 +569,14 @@ MlFollowGps.propTypes = {
    * CSS style object that is applied to the button component
    */
   style: PropTypes.object,
+  /**
+   * Active button font color
+   */
+  onColor: PropTypes.string,
+  /**
+   * Inactive button font color
+   */
+  offColor: PropTypes.string,
 };
 export default MlFollowGps;
 &nbsp;</pre></td></tr></table></pre>
@@ -583,7 +586,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">istanbul</a>
-                at Wed Dec 15 2021 17:41:09 GMT+0000 (Coordinated Universal Time)
+                at Tue Dec 21 2021 11:51:22 GMT+0000 (Coordinated Universal Time)
             </div>
         </div>
         <script src="../../../prettify.js"></script>

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

@@ -23,9 +23,9 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">66.66% </span>
+                <span class="strong">65.11% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>28/42</span>
+                <span class='fraction'>28/43</span>
             </div>
         
             
@@ -44,9 +44,9 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">67.5% </span>
+                <span class="strong">65.85% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>27/40</span>
+                <span class='fraction'>27/41</span>
             </div>
         
             
@@ -80,17 +80,17 @@
 </thead>
 <tbody><tr>
 	<td class="file medium" data-value="MlFollowGps.js"><a href="MlFollowGps.js.html">MlFollowGps.js</a></td>
-	<td data-value="66.66" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 66%"></div><div class="cover-empty" style="width: 34%"></div></div>
+	<td data-value="65.11" class="pic medium">
+	<div class="chart"><div class="cover-fill" style="width: 65%"></div><div class="cover-empty" style="width: 35%"></div></div>
 	</td>
-	<td data-value="66.66" class="pct medium">66.66%</td>
-	<td data-value="42" class="abs medium">28/42</td>
+	<td data-value="65.11" class="pct medium">65.11%</td>
+	<td data-value="43" class="abs medium">28/43</td>
 	<td data-value="59.09" class="pct medium">59.09%</td>
 	<td data-value="22" class="abs medium">13/22</td>
 	<td data-value="57.14" class="pct medium">57.14%</td>
 	<td data-value="7" class="abs medium">4/7</td>
-	<td data-value="67.5" class="pct medium">67.5%</td>
-	<td data-value="40" class="abs medium">27/40</td>
+	<td data-value="65.85" class="pct medium">65.85%</td>
+	<td data-value="41" class="abs medium">27/41</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">istanbul</a>
-                at Wed Dec 15 2021 17:41:09 GMT+0000 (Coordinated Universal Time)
+                at Tue Dec 21 2021 11:51:22 GMT+0000 (Coordinated Universal Time)
             </div>
         </div>
         <script src="../../../prettify.js"></script>

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

@@ -1183,7 +1183,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">istanbul</a>
-                at Wed Dec 15 2021 17:41:09 GMT+0000 (Coordinated Universal Time)
+                at Tue Dec 21 2021 11:51:22 GMT+0000 (Coordinated Universal Time)
             </div>
         </div>
         <script src="../../../prettify.js"></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">istanbul</a>
-                at Wed Dec 15 2021 17:41:09 GMT+0000 (Coordinated Universal Time)
+                at Tue Dec 21 2021 11:51:22 GMT+0000 (Coordinated Universal Time)
             </div>
         </div>
         <script src="../../../prettify.js"></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">istanbul</a>
-                at Wed Dec 15 2021 17:41:09 GMT+0000 (Coordinated Universal Time)
+                at Tue Dec 21 2021 11:51:22 GMT+0000 (Coordinated Universal Time)
             </div>
         </div>
         <script src="../../../prettify.js"></script>