@mapcomponents/react-maplibre 0.1.56 → 0.1.58

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

@@ -594,69 +594,69 @@ import { point, circle, lineArc, Feature, Point } from "@turf/turf";
 import { CircleLayerSpecification, FillLayerSpecification } from "maplibre-gl";
  
 interface MlFollowGpsProps {
-  /**
-   * Id of the target MapLibre instance in mapContext
-   */
-  mapId?: string;
-  /**
-   * The layerId of an existing layer this layer should be rendered visually beneath
-   * https://maplibre.org/maplibre-gl-js-docs/api/map/#map#addlayer - see "beforeId" property
-   */
-  insertBeforeLayer?: string;
-  /**
-   * By default a dot will be shown on the map at the user's location. Set to false to disable.
-   */
-  showUserLocation?: boolean;
-  /**
-   * 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?: boolean;
-  /**
-   * 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;
-  /**
-   * 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
-   */
-  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
-   */
-  onColor?: string;
-  /**
-   * Inactive button font color
-   */
-  offColor?: string;
-  /**
-   * 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?: FillLayerSpecification["paint"];
-  /**
-   * CSS style object that is applied to the button component
-   */
-  buttonSx?: SxProps | any;
+	/**
+	 * Id of the target MapLibre instance in mapContext
+	 */
+	mapId?: string;
+	/**
+	 * The layerId of an existing layer this layer should be rendered visually beneath
+	 * https://maplibre.org/maplibre-gl-js-docs/api/map/#map#addlayer - see "beforeId" property
+	 */
+	insertBeforeLayer?: string;
+	/**
+	 * By default a dot will be shown on the map at the user's location. Set to false to disable.
+	 */
+	showUserLocation?: boolean;
+	/**
+	 * 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?: boolean;
+	/**
+	 * 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;
+	/**
+	 * 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
+	 */
+	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
+	 */
+	onColor?: string;
+	/**
+	 * Inactive button font color
+	 */
+	offColor?: string;
+	/**
+	 * 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?: FillLayerSpecification["paint"];
+	/**
+	 * CSS style object that is applied to the button component
+	 */
+	buttonSx?: SxProps | any;
 }
  
 /**
@@ -665,181 +665,181 @@ interface MlFollowGpsProps {
  *
  */
 const MlFollowGps = (props: MlFollowGpsProps) => {
-  const mapHook = useMap({
-    mapId: props.mapId,
-    waitForLayer: props.insertBeforeLayer,
-  });
+	const mapHook = useMap({
+		mapId: props.mapId,
+		waitForLayer: props.insertBeforeLayer,
+	});
  
-  const [isFollowed, setIsFollowed] = useState(false);
-  const [userLocationGeoJson, setUserLocationGeoJson] = useState<Feature<Point>>();
-  const [locationAccessDenied, setLocationAccessDenied] = useState(false);
-  const [accuracyGeoJson, setAccuracyGeoJson] = useState<Feature>();
-  const [deviceOrientation, setDeviceOrientation] = useState(0);
-  const initiallyCentered = useRef(false);
+	const [isFollowed, setIsFollowed] = useState(false);
+	const [userLocationGeoJson, setUserLocationGeoJson] = useState<Feature<Point>>();
+	const [locationAccessDenied, setLocationAccessDenied] = useState(false);
+	const [accuracyGeoJson, setAccuracyGeoJson] = useState<Feature>();
+	const [deviceOrientation, setDeviceOrientation] = useState(0);
+	const initiallyCentered = useRef(false);
  
-  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>
+	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" >      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>
-        }
+<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>
-<span class="cstat-no" title="statement not covered" >      setAccuracyGeoJson(circle(geoJsonPoint, pos.coords.accuracy / 1000));</span>
-    },
-    [mapHook.map, props]
-  );
+<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>
+<span class="cstat-no" title="statement not covered" >			setAccuracyGeoJson(circle(geoJsonPoint, pos.coords.accuracy / 1000));</span>
+		},
+		[mapHook.map, props]
+	);
 &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" >    setLocationAccessDenied(true);</span>
-  };
+	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" >		setLocationAccessDenied(true);</span>
+	};
 &nbsp;
-  const orientationCone = useMemo(() =&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 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);</span>
-<span class="cstat-no" title="statement not covered" >    return copy;</span>
-  }, [deviceOrientation, userLocationGeoJson]);
+	const orientationCone = useMemo(() =&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 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);</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: any) =&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);
-      };
-    } else {
-      initiallyCentered.current = false;
-    }
-    return;
-  }, [isFollowed]);
+	useEffect(() =&gt; {
+		if (isFollowed) {
+			let _handleOrientation = handleOrientation;
+			window.addEventListener("deviceorientation", _handleOrientation);
+			return () =&gt; {
+				window.removeEventListener("deviceorientation", _handleOrientation);
+			};
+		} else {
+			initiallyCentered.current = false;
+		}
+		return;
+	}, [isFollowed]);
 &nbsp;
-  useEffect(() =&gt; {
-    if (!mapHook.map) return;
+	useEffect(() =&gt; {
+		if (!mapHook.map) return;
 &nbsp;
-    if (isFollowed) {
-      let _watchId = navigator.geolocation.watchPosition(getLocationSuccess, getLocationError);
+		if (isFollowed) {
+			let _watchId = navigator.geolocation.watchPosition(getLocationSuccess, getLocationError);
 &nbsp;
-      return () =&gt; {
-        navigator.geolocation.clearWatch(_watchId);
-      };
-    }
-    return;
-  }, [mapHook.map, isFollowed, getLocationSuccess]);
+			return () =&gt; {
+				navigator.geolocation.clearWatch(_watchId);
+			};
+		}
+		return;
+	}, [mapHook.map, isFollowed, getLocationSuccess]);
 &nbsp;
-  return (
-    &lt;&gt;
-      {isFollowed &amp;&amp; userLocationGeoJson &amp;&amp; (
-<span class="branch-2 cbranch-no" title="branch not covered" >        &lt;MlGeoJsonLayer</span>
-          geojson={accuracyGeoJson}
-          type={"fill"}
-          paint={{
-            "fill-color": "#cbd300",
-            "fill-opacity": 0.3,
-            ...props.accuracyPaint,
-          }}
-          insertBeforeLayer={props.insertBeforeLayer}
-        /&gt;
-      )}
+	return (
+		&lt;&gt;
+			{isFollowed &amp;&amp; userLocationGeoJson &amp;&amp; (
+<span class="branch-2 cbranch-no" title="branch not covered" >				&lt;MlGeoJsonLayer</span>
+					geojson={accuracyGeoJson}
+					type={"fill"}
+					paint={{
+						"fill-color": "#cbd300",
+						"fill-opacity": 0.3,
+						...props.accuracyPaint,
+					}}
+					insertBeforeLayer={props.insertBeforeLayer}
+				/&gt;
+			)}
 &nbsp;
-      {isFollowed &amp;&amp; orientationCone &amp;&amp; (
-<span class="branch-2 cbranch-no" title="branch not covered" >        &lt;MlGeoJsonLayer</span>
-          geojson={orientationCone}
-          type={"fill"}
-          paint={{
-            "fill-color": "#0000ff",
-            "fill-antialias": false,
-            "fill-opacity": 0.3,
-            ...props.orientationConePaint,
-          }}
-          insertBeforeLayer={props.insertBeforeLayer}
-        /&gt;
-      )}
+			{isFollowed &amp;&amp; orientationCone &amp;&amp; (
+<span class="branch-2 cbranch-no" title="branch not covered" >				&lt;MlGeoJsonLayer</span>
+					geojson={orientationCone}
+					type={"fill"}
+					paint={{
+						"fill-color": "#0000ff",
+						"fill-antialias": false,
+						"fill-opacity": 0.3,
+						...props.orientationConePaint,
+					}}
+					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",
-            "circle-radius": 5,
-            "circle-stroke-color": "#fafaff",
-            "circle-stroke-width": 1,
-            ...props.circlePaint,
-          }}
-          insertBeforeLayer={props.insertBeforeLayer}
-        /&gt;
-      )}
+			{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",
+						"circle-radius": 5,
+						"circle-stroke-color": "#fafaff",
+						"circle-stroke-width": 1,
+						...props.circlePaint,
+					}}
+					insertBeforeLayer={props.insertBeforeLayer}
+				/&gt;
+			)}
 &nbsp;
-      &lt;Button
-        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;/Button&gt;
-    &lt;/&gt;
-  );
+			&lt;Button
+				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;/Button&gt;
+		&lt;/&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",
-  showAccuracyCircle: true,
-  showUserLocation: true,
-  showOrientation: true,
-  centerUserPosition: true,
-  useFlyTo: false,
+	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",
+	showAccuracyCircle: true,
+	showUserLocation: true,
+	showOrientation: true,
+	centerUserPosition: true,
+	useFlyTo: false,
 };
 &nbsp;
 export default MlFollowGps;
@@ -850,7 +850,7 @@ export default MlFollowGps;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Thu Aug 11 2022 13:20:32 GMT+0000 (Coordinated Universal Time)
+                at Tue Oct 04 2022 11:59:51 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Thu Aug 11 2022 13:20:32 GMT+0000 (Coordinated Universal Time)
+                at Tue Oct 04 2022 11:59:51 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>