@mapcomponents/react-maplibre 0.1.26 → 0.1.30

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

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">70.37% </span>
+                <span class="strong">60% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>19/27</span>
+                <span class='fraction'>30/50</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">71.42% </span>
+                <span class="strong">65.21% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>10/14</span>
+                <span class='fraction'>15/23</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">66.66% </span>
+                <span class="strong">70% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>4/6</span>
+                <span class='fraction'>7/10</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">72% </span>
+                <span class="strong">61.7% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>18/25</span>
+                <span class='fraction'>29/47</span>
             </div>
         
             
@@ -219,7 +219,69 @@
 <a name='L154'></a><a href='#L154'>154</a>
 <a name='L155'></a><a href='#L155'>155</a>
 <a name='L156'></a><a href='#L156'>156</a>
-<a name='L157'></a><a href='#L157'>157</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L157'></a><a href='#L157'>157</a>
+<a name='L158'></a><a href='#L158'>158</a>
+<a name='L159'></a><a href='#L159'>159</a>
+<a name='L160'></a><a href='#L160'>160</a>
+<a name='L161'></a><a href='#L161'>161</a>
+<a name='L162'></a><a href='#L162'>162</a>
+<a name='L163'></a><a href='#L163'>163</a>
+<a name='L164'></a><a href='#L164'>164</a>
+<a name='L165'></a><a href='#L165'>165</a>
+<a name='L166'></a><a href='#L166'>166</a>
+<a name='L167'></a><a href='#L167'>167</a>
+<a name='L168'></a><a href='#L168'>168</a>
+<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>
+<a name='L173'></a><a href='#L173'>173</a>
+<a name='L174'></a><a href='#L174'>174</a>
+<a name='L175'></a><a href='#L175'>175</a>
+<a name='L176'></a><a href='#L176'>176</a>
+<a name='L177'></a><a href='#L177'>177</a>
+<a name='L178'></a><a href='#L178'>178</a>
+<a name='L179'></a><a href='#L179'>179</a>
+<a name='L180'></a><a href='#L180'>180</a>
+<a name='L181'></a><a href='#L181'>181</a>
+<a name='L182'></a><a href='#L182'>182</a>
+<a name='L183'></a><a href='#L183'>183</a>
+<a name='L184'></a><a href='#L184'>184</a>
+<a name='L185'></a><a href='#L185'>185</a>
+<a name='L186'></a><a href='#L186'>186</a>
+<a name='L187'></a><a href='#L187'>187</a>
+<a name='L188'></a><a href='#L188'>188</a>
+<a name='L189'></a><a href='#L189'>189</a>
+<a name='L190'></a><a href='#L190'>190</a>
+<a name='L191'></a><a href='#L191'>191</a>
+<a name='L192'></a><a href='#L192'>192</a>
+<a name='L193'></a><a href='#L193'>193</a>
+<a name='L194'></a><a href='#L194'>194</a>
+<a name='L195'></a><a href='#L195'>195</a>
+<a name='L196'></a><a href='#L196'>196</a>
+<a name='L197'></a><a href='#L197'>197</a>
+<a name='L198'></a><a href='#L198'>198</a>
+<a name='L199'></a><a href='#L199'>199</a>
+<a name='L200'></a><a href='#L200'>200</a>
+<a name='L201'></a><a href='#L201'>201</a>
+<a name='L202'></a><a href='#L202'>202</a>
+<a name='L203'></a><a href='#L203'>203</a>
+<a name='L204'></a><a href='#L204'>204</a>
+<a name='L205'></a><a href='#L205'>205</a>
+<a name='L206'></a><a href='#L206'>206</a>
+<a name='L207'></a><a href='#L207'>207</a>
+<a name='L208'></a><a href='#L208'>208</a>
+<a name='L209'></a><a href='#L209'>209</a>
+<a name='L210'></a><a href='#L210'>210</a>
+<a name='L211'></a><a href='#L211'>211</a>
+<a name='L212'></a><a href='#L212'>212</a>
+<a name='L213'></a><a href='#L213'>213</a>
+<a name='L214'></a><a href='#L214'>214</a>
+<a name='L215'></a><a href='#L215'>215</a>
+<a name='L216'></a><a href='#L216'>216</a>
+<a name='L217'></a><a href='#L217'>217</a>
+<a name='L218'></a><a href='#L218'>218</a>
+<a name='L219'></a><a href='#L219'>219</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>
@@ -237,13 +299,13 @@
 <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-yes">2x</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-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">9x</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>
@@ -259,15 +321,47 @@
 <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-neutral">&nbsp;</span>
 <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-yes">9x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-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-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-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>
+<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">9x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-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>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">9x</span>
 <span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -314,6 +408,19 @@
 <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-yes">3x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -324,7 +431,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-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>
@@ -344,7 +451,24 @@
 <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>
+<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-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>
@@ -375,13 +499,13 @@
 <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 } from "react";
+<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";
 import PropTypes from "prop-types";
 import useMap from "../../hooks/useMap";
 &nbsp;
 import Button from "@mui/material/Button";
-import RoomIcon from "@mui/icons-material/Room";
-import { point, circle } from "@turf/turf";
+import GpsFixedIcon from "@mui/icons-material/GpsFixed";
+import { point, circle, lineArc } from "@turf/turf";
 import MlGeoJsonLayer from "../MlGeoJsonLayer/MlGeoJsonLayer";
 &nbsp;
 /**
@@ -397,10 +521,10 @@ const MlFollowGps = (props) =&gt; {
   const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
 &nbsp;
   const [isFollowed, setIsFollowed] = useState(false);
-  const [geoJson, setGeoJson] = useState(undefined);
+  const [userLocationGeoJson, setUserLocationGeoJson] = useState(undefined);
   const [locationAccessDenied, setLocationAccessDenied] = useState(false);
-&nbsp;
   const [accuracyGeoJson, setAccuracyGeoJson] = useState();
+  const [deviceOrientation, setDeviceOrientation] = useState(0);
 &nbsp;
   const getLocationSuccess = useCallback(
 <span class="fstat-no" title="function not covered" >    (p</span>os) =&gt; {
@@ -412,17 +536,49 @@ const MlFollowGps = (props) =&gt; {
         speed: 1,
         curve: 1,
       });
+<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" >      setGeoJson(geoJsonPoint);</span>
+<span class="cstat-no" title="statement not covered" >      setUserLocationGeoJson(geoJsonPoint);</span>
 <span class="cstat-no" title="statement not covered" >      setAccuracyGeoJson(circle(geoJsonPoint, pos.coords.accuracy / 1000));</span>
     },
-    [mapHook.map]
+    [mapHook.map, props]
   );
 &nbsp;
   const getLocationError = <span class="fstat-no" title="function not covered" >(e</span>rr) =&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" >    setLocationAccessDenied(true);</span>
   };
+&nbsp;
+  const orientationCone = useMemo(
+    () =&gt; {
+      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 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>
+<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, userLocationGeoJson.geometry.coordinates);</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) =&gt; {
+<span class="cstat-no" title="statement not covered" >    setDeviceOrientation(-event.alpha)</span>
+  } 
+&nbsp;
+  useEffect(() =&gt; {
+    if (isFollowed) {
+      let _handleOrientation = handleOrientation;
+      window.addEventListener('deviceorientation', _handleOrientation)
+      return () =&gt; {
+        window.removeEventListener('deviceorientation', _handleOrientation)
+      }
+    }
+  }, [isFollowed]);
 &nbsp;
   useEffect(() =&gt; {
     if (!mapHook.map) return;
@@ -434,11 +590,11 @@ const MlFollowGps = (props) =&gt; {
         navigator.geolocation.clearWatch(_watchId);
       };
     }
-  }, [isFollowed, getLocationSuccess]);
+  }, [mapHook.map, isFollowed, getLocationSuccess]);
 &nbsp;
   return (
     &lt;&gt;
-      {isFollowed &amp;&amp; geoJson &amp;&amp; (
+      {isFollowed &amp;&amp; userLocationGeoJson &amp;&amp; (
 <span class="branch-2 cbranch-no" title="branch not covered" >        &lt;MlGeoJsonLayer</span>
           geojson={accuracyGeoJson}
           type={"fill"}
@@ -451,9 +607,22 @@ const MlFollowGps = (props) =&gt; {
         /&gt;
       )}
 &nbsp;
-      {isFollowed &amp;&amp; geoJson &amp;&amp; (
+      {isFollowed &amp;&amp; orientationCone &amp;&amp; (
 <span class="branch-2 cbranch-no" title="branch not covered" >        &lt;MlGeoJsonLayer</span>
-          geojson={geoJson}
+          geojson={orientationCone}
+          type={"fill"}
+          paint={{
+            "fill-color": "#0000ff",
+            "fill-antialias": false,
+            "fill-opacity": 0.3,
+          }}
+          insertBeforeLayer={props.insertBeforeLayer}
+        /&gt;
+      )}
+&nbsp;
+      {isFollowed &amp;&amp; userLocationGeoJson &amp;&amp; (
+<span class="branch-2 cbranch-no" title="branch not covered" >        &lt;MlGeoJsonLayer</span>
+          geojson={userLocationGeoJson}
           type={"circle"}
           paint={{
             "circle-color": "#009ee0",
@@ -474,7 +643,7 @@ const MlFollowGps = (props) =&gt; {
         }}
       &gt;
         {" "}
-        &lt;RoomIcon sx={{ fontSize: props.style.fontSize }} /&gt;{" "}
+        &lt;GpsFixedIcon sx={{ fontSize: props.style.fontSize }} /&gt;{" "}
       &lt;/Button&gt;
     &lt;/&gt;
   );
@@ -498,6 +667,9 @@ MlFollowGps.defaultProps = {
   },
   onColor: "#ececec",
   offColor: "#666",
+  showAccuracyCircle: true,
+  showUserLocation: true,
+  showOrientation: true
 };
 &nbsp;
 MlFollowGps.propTypes = {
@@ -529,6 +701,20 @@ MlFollowGps.propTypes = {
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
    */
   circlePaint: PropTypes.object,
+  /**
+   * 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: PropTypes.bool,
+  /**
+   * By default a dot will be shown on the map at the user's location. Set to false to disable.
+   */
+  showUserLocation: PropTypes.bool,
+  /**
+   * By default a cone will be shown on the map at the user's location to indicate the device's orientation.
+   * Set to false to disable.
+   */
+  showOrientation: PropTypes.bool,
 };
 export default MlFollowGps;
 &nbsp;</pre></td></tr></table></pre>
@@ -538,7 +724,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 Feb 02 2022 11:57:29 GMT+0000 (Coordinated Universal Time)
+                at Sun Feb 20 2022 16:39:08 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">70.37% </span>
+                <span class="strong">60% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>19/27</span>
+                <span class='fraction'>30/50</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">71.42% </span>
+                <span class="strong">65.21% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>10/14</span>
+                <span class='fraction'>15/23</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">66.66% </span>
+                <span class="strong">70% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>4/6</span>
+                <span class='fraction'>7/10</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">72% </span>
+                <span class="strong">61.7% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>18/25</span>
+                <span class='fraction'>29/47</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="70.37" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 70%"></div><div class="cover-empty" style="width: 30%"></div></div>
+	<td data-value="60" class="pic medium">
+	<div class="chart"><div class="cover-fill" style="width: 60%"></div><div class="cover-empty" style="width: 40%"></div></div>
 	</td>
-	<td data-value="70.37" class="pct medium">70.37%</td>
-	<td data-value="27" class="abs medium">19/27</td>
-	<td data-value="71.42" class="pct medium">71.42%</td>
-	<td data-value="14" class="abs medium">10/14</td>
-	<td data-value="66.66" class="pct medium">66.66%</td>
-	<td data-value="6" class="abs medium">4/6</td>
-	<td data-value="72" class="pct medium">72%</td>
-	<td data-value="25" class="abs medium">18/25</td>
+	<td data-value="60" class="pct medium">60%</td>
+	<td data-value="50" class="abs medium">30/50</td>
+	<td data-value="65.21" class="pct medium">65.21%</td>
+	<td data-value="23" class="abs medium">15/23</td>
+	<td data-value="70" class="pct medium">70%</td>
+	<td data-value="10" class="abs medium">7/10</td>
+	<td data-value="61.7" class="pct medium">61.7%</td>
+	<td data-value="47" class="abs medium">29/47</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 Feb 02 2022 11:57:29 GMT+0000 (Coordinated Universal Time)
+                at Sun Feb 20 2022 16:39:08 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>