npm - @mapcomponents/react-maplibre - Versions diffs - 0.1.34 → 0.1.35 - Mend

@mapcomponents/react-maplibre 0.1.34 → 0.1.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (305) hide show

package/coverage/lcov-report/src/components/MlGPXViewer/{MlGPXViewer.js.html → MlGPXViewer.tsx.html} RENAMED Viewed

@@ -3,7 +3,7 @@
 <html lang="en">
 <head>
-    <title>Code coverage report for src/components/MlGPXViewer/MlGPXViewer.js</title>
+    <title>Code coverage report for src/components/MlGPXViewer/MlGPXViewer.tsx</title>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="../../../prettify.css" />
     <link rel="stylesheet" href="../../../base.css" />
@@ -19,20 +19,20 @@
 <body>
 <div class='wrapper'>
     <div class='pad1'>
-        <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/components/MlGPXViewer</a> MlGPXViewer.js</h1>
+        <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/components/MlGPXViewer</a> MlGPXViewer.tsx</h1>
         <div class='clearfix'>
             <div class='fl pad1y space-right2'>
-                <span class="strong">46.42% </span>
+                <span class="strong">40.31% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>52/112</span>
+                <span class='fraction'>52/129</span>
             </div>
             <div class='fl pad1y space-right2'>
-                <span class="strong">23.07% </span>
+                <span class="strong">15.9% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>6/26</span>
+                <span class='fraction'>7/44</span>
             </div>
@@ -44,9 +44,9 @@
             <div class='fl pad1y space-right2'>
-                <span class="strong">47.16% </span>
+                <span class="strong">43.47% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>50/106</span>
+                <span class='fraction'>50/115</span>
             </div>
@@ -422,7 +422,43 @@
 <a name='L357'></a><a href='#L357'>357</a>
 <a name='L358'></a><a href='#L358'>358</a>
 <a name='L359'></a><a href='#L359'>359</a>
-<a name='L360'></a><a href='#L360'>360</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L360'></a><a href='#L360'>360</a>
+<a name='L361'></a><a href='#L361'>361</a>
+<a name='L362'></a><a href='#L362'>362</a>
+<a name='L363'></a><a href='#L363'>363</a>
+<a name='L364'></a><a href='#L364'>364</a>
+<a name='L365'></a><a href='#L365'>365</a>
+<a name='L366'></a><a href='#L366'>366</a>
+<a name='L367'></a><a href='#L367'>367</a>
+<a name='L368'></a><a href='#L368'>368</a>
+<a name='L369'></a><a href='#L369'>369</a>
+<a name='L370'></a><a href='#L370'>370</a>
+<a name='L371'></a><a href='#L371'>371</a>
+<a name='L372'></a><a href='#L372'>372</a>
+<a name='L373'></a><a href='#L373'>373</a>
+<a name='L374'></a><a href='#L374'>374</a>
+<a name='L375'></a><a href='#L375'>375</a>
+<a name='L376'></a><a href='#L376'>376</a>
+<a name='L377'></a><a href='#L377'>377</a>
+<a name='L378'></a><a href='#L378'>378</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>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -511,10 +547,13 @@
 <span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-yes">12x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">6x</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>
@@ -541,6 +580,8 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -591,6 +632,8 @@
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">18x</span>
@@ -607,15 +650,19 @@
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-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-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">18x</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>
@@ -653,18 +700,26 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">18x</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>
 <span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">18x</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">18x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -760,37 +815,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-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-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useContext, useRef, useEffect, useState } from "react";
-import PropTypes from "prop-types";
-import { bbox } from "@turf/turf";
+import { bbox } from '@turf/turf';
 import Divider from "@mui/material/Divider";
 import Typography from "@mui/material/Typography";
 import Drawer from "@mui/material/Drawer";
 import IconButton from "@mui/material/IconButton";
 import InfoIcon from "@mui/icons-material/Info";
 import FileCopy from "@mui/icons-material/FileCopy";
-import { Popup } from "maplibre-gl";
+import { Popup, LngLatBoundsLike, GeoJSONSource } from "maplibre-gl";
 import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import ListItemText from "@mui/material/ListItemText";
@@ -799,12 +834,31 @@ import toGeoJSON from "./gpxConverter";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import useMap from "../../hooks/useMap";
 &nbsp;
+interface MlGPXViewerProps {
+&nbsp;
+  /**
+   * Id of the target MapLibre instance in mapHook
+   */
+  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,
+  /**
+   * Prefix of the component id this component uses when adding elements to the MapLibreGl-instance
+   */
+  idPrefix?: string,
+  /**
+   * Sets the layers layout-property "visibility" to "none" if false or "visible" if true
+   */
+  visible?: boolean,
+}
+&nbsp;
 /**
  * MlGPXViewer returns a dropzone and a button to load a GPX Track into the map.
- *
- * @component
  */
-const MlGPXViewer = (props) =&gt; {
+const MlGPXViewer = (props:MlGPXViewerProps) =&gt; {
   const dataSource = useContext(GeoJsonContext);
   const initializedRef = useRef(false);
   const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
@@ -813,10 +867,10 @@ const MlGPXViewer = (props) =&gt; {
   const layerNamePoints = "importer-layer-points";
 &nbsp;
   const [open, setIsOpen] = useState(false);
-  const dropZone = useRef(null);
+  const dropZone = useRef&lt;HTMLDivElement&gt;(null);
   const [zIndex, setZIndex] = useState(0);
-  const [metaData, setMetaData] = useState([]);
-  const fileupload = useRef(null);
+  const [metaData, setMetaData] = useState&lt;{ title: string; value: string; id: number; }[]&gt;([]);
+  const fileupload = useRef&lt;HTMLInputElement&gt;(null);
   const mediaIsMobile = useMediaQuery("(max-width:900px)");
 &nbsp;
   const popup = useRef(
@@ -868,12 +922,15 @@ const MlGPXViewer = (props) =&gt; {
     );
 &nbsp;
     [layerNameLines, layerNamePoints].forEach((layerName) =&gt; {
-      mapHook.map.setLayoutProperty(layerName, "visibility", "visible");
+      <span class="missing-if-branch" title="if path not taken" >I</span>if(!mapHook.map)<span class="cstat-no" title="statement not covered" >return;</span>
+&nbsp;
+      mapHook.map.map.setLayoutProperty(layerName, "visibility", "visible");
     });
     mapHook.map.on(
       "mouseenter",
       layerNamePoints,
-<span class="fstat-no" title="function not covered" >      (e</span>) =&gt; {
+<span class="fstat-no" title="function not covered" >      (e</span>:any) =&gt; {
+<span class="cstat-no" title="statement not covered" >        if(!mapHook.map)<span class="cstat-no" title="statement not covered" >return;</span></span>
         // Change the cursor style as a UI indicator.
 &nbsp;
         const coordinates = <span class="cstat-no" title="statement not covered" >e.features[0].geometry.coordinates.slice();</span>
@@ -890,7 +947,7 @@ const MlGPXViewer = (props) =&gt; {
         // Populate the popup and set its coordinates
 &nbsp;
         // based on the feature found.
-<span class="cstat-no" title="statement not covered" >        popup.current.setLngLat(coordinates).setHTML(name).addTo(mapHook.map);</span>
+<span class="cstat-no" title="statement not covered" >        popup.current.setLngLat(coordinates).setHTML(name).addTo(mapHook.map.map);</span>
       },
       mapHook.componentId
     );
@@ -899,25 +956,27 @@ const MlGPXViewer = (props) =&gt; {
       "mouseleave",
       "places",
 <span class="fstat-no" title="function not covered" >      fu</span>nction () {
-<span class="cstat-no" title="statement not covered" >        mapHook.map.getCanvas().style.cursor = "";</span>
+<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.getCanvas().style.cursor = "";</span>
 <span class="cstat-no" title="statement not covered" >        popup.current.remove();</span>
       },
       mapHook.componentId
     );
 &nbsp;
-    mapHook.map.setZoom(10);
+    mapHook.map.map.setZoom(10);
   }, [mapHook.map]);
 &nbsp;
   useEffect(() =&gt; {
-    const dropZoneCurrent = dropZone.current;
-    const raiseDropZoneAndStopDefault = <span class="fstat-no" title="function not covered" >(e</span>vent) =&gt; {
+    const _dropZone = dropZone.current;
+    const raiseDropZoneAndStopDefault = <span class="fstat-no" title="function not covered" >(e</span>vent:any) =&gt; {
 <span class="cstat-no" title="statement not covered" >      setZIndex(1000);</span>
 <span class="cstat-no" title="statement not covered" >      stopDefault(event);</span>
     };
     const lowerDropZone = <span class="fstat-no" title="function not covered" >()</span> =&gt; {
 <span class="cstat-no" title="statement not covered" >      setZIndex(0);</span>
     };
-    const lowerDropZoneAndStopDefault = <span class="fstat-no" title="function not covered" >(e</span>vent) =&gt; {
+    const lowerDropZoneAndStopDefault = <span class="fstat-no" title="function not covered" >(e</span>vent:any) =&gt; {
 <span class="cstat-no" title="statement not covered" >      setZIndex(0);</span>
 <span class="cstat-no" title="statement not covered" >      stopDefault(event);</span>
     };
@@ -925,34 +984,36 @@ const MlGPXViewer = (props) =&gt; {
     window.addEventListener("dragenter", raiseDropZoneAndStopDefault);
     window.addEventListener("dragover", stopDefault);
 &nbsp;
-    dropZoneCurrent.addEventListener("dragleave", lowerDropZone);
+    _dropZone?.addEventListener("dragleave", lowerDropZone);
 &nbsp;
     window.addEventListener("drop", lowerDropZoneAndStopDefault);
 &nbsp;
     return () =&gt; {
       window.removeEventListener("dragenter", raiseDropZoneAndStopDefault);
       window.removeEventListener("dragover", stopDefault);
-      dropZoneCurrent.removeEventListener("dragleave", lowerDropZone);
+      _dropZone?.removeEventListener("dragleave", lowerDropZone);
       window.removeEventListener("drop", lowerDropZoneAndStopDefault);
     };
   });
 &nbsp;
-  const stopDefault = <span class="fstat-no" title="function not covered" >(e</span>vent) =&gt; {
+  const stopDefault = <span class="fstat-no" title="function not covered" >(e</span>vent:any) =&gt; {
 <span class="cstat-no" title="statement not covered" >    event.preventDefault();</span>
 <span class="cstat-no" title="statement not covered" >    event.stopPropagation();</span>
   };
 &nbsp;
   useEffect(() =&gt; {
-    if (!mapHook.map) return;
+    <span class="missing-if-branch" title="else path not taken" >E</span>if (!mapHook.map) return;
 &nbsp;
     const visibility = <span class="cstat-no" title="statement not covered" >props.visible ? "visible" : "none";</span>
 &nbsp;
 <span class="cstat-no" title="statement not covered" >    [layerNameLines, layerNamePoints].forEach(<span class="fstat-no" title="function not covered" >(l</span>ayerName) =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >      mapHook.map.setLayoutProperty(layerName, "visibility", visibility);</span>
+<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.setLayoutProperty(layerName, "visibility", visibility);</span>
     });
   }, [props.visible]);
 &nbsp;
-  const dropHandler = <span class="fstat-no" title="function not covered" >(e</span>vent) =&gt; {
+  const dropHandler = <span class="fstat-no" title="function not covered" >(e</span>vent:any) =&gt; {
 <span class="cstat-no" title="statement not covered" >    event.preventDefault();</span>
 &nbsp;
 <span class="cstat-no" title="statement not covered" >    if (event.dataTransfer.items) {</span>
@@ -962,7 +1023,9 @@ const MlGPXViewer = (props) =&gt; {
       // If dropped items aren't files, reject them
 <span class="cstat-no" title="statement not covered" >      if (event.dataTransfer.items[0].kind === "file") {</span>
         const reader = <span class="cstat-no" title="statement not covered" >new FileReader();</span>
-<span class="cstat-no" title="statement not covered" >        reader.onload = <span class="fstat-no" title="function not covered" >(p</span>ayload) =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >        reader.onload = <span class="fstat-no" title="function not covered" >(p</span>ayload:any) =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >          if(!payload?.currentTarget?.result)<span class="cstat-no" title="statement not covered" >return;</span></span>
+&nbsp;
 <span class="cstat-no" title="statement not covered" >          addGPXToMap(payload.currentTarget.result);</span>
         };
         const file = <span class="cstat-no" title="statement not covered" >event.dataTransfer.items[0].getAsFile();</span>
@@ -971,23 +1034,25 @@ const MlGPXViewer = (props) =&gt; {
     } else {
       // Use DataTransfer interface to access the file(s)
     }
+<span class="cstat-no" title="statement not covered" >    return;</span>
   };
 &nbsp;
-  const addGPXToMap = <span class="fstat-no" title="function not covered" >(g</span>pxAsString) =&gt; {
-<span class="cstat-no" title="statement not covered" >    if (!mapHook.map) <span class="cstat-no" title="statement not covered" >return;</span></span>
+  const addGPXToMap = <span class="fstat-no" title="function not covered" >(g</span>pxAsString:string) =&gt; {
+<span class="cstat-no" title="statement not covered" >    if (!mapHook.map || !dataSource.setData) <span class="cstat-no" title="statement not covered" >return;</span></span>
+&nbsp;
 <span class="cstat-no" title="statement not covered" >    try {</span>
 <span class="cstat-no" title="statement not covered" >      setMetaData([]);</span>
       const domParser = <span class="cstat-no" title="statement not covered" >new DOMParser();</span>
       const gpxDoc = <span class="cstat-no" title="statement not covered" >domParser.parseFromString(gpxAsString, "application/xml");</span>
       const metadata = <span class="cstat-no" title="statement not covered" >gpxDoc.querySelector("metadata");</span>
-<span class="cstat-no" title="statement not covered" >      metadata.childNodes.forEach(<span class="fstat-no" title="function not covered" >(n</span>ode) =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >      metadata?.childNodes.forEach(<span class="fstat-no" title="function not covered" >(n</span>ode:Element) =&gt; {</span>
         let value = <span class="cstat-no" title="statement not covered" >node.textContent;</span>
         const title = <span class="cstat-no" title="statement not covered" >node.nodeName;</span>
 &nbsp;
 <span class="cstat-no" title="statement not covered" >        if (node.nodeName === "link") {</span>
 <span class="cstat-no" title="statement not covered" >          value = node.getAttribute("href");</span>
         }
-<span class="cstat-no" title="statement not covered" >        if (!!value.trim().length) {</span>
+<span class="cstat-no" title="statement not covered" >        if (!!value?.trim().length) {</span>
           const metaDatEntry = <span class="cstat-no" title="statement not covered" >{</span>
             title: title,
             value: value,
@@ -998,9 +1063,9 @@ const MlGPXViewer = (props) =&gt; {
       });
       const data = <span class="cstat-no" title="statement not covered" >toGeoJSON.gpx(gpxDoc);</span>
 <span class="cstat-no" title="statement not covered" >      dataSource.setData(data);</span>
-<span class="cstat-no" title="statement not covered" >      mapHook.map.getSource(sourceName).setData(data);</span>
+<span class="cstat-no" title="statement not covered" >      (mapHook.map.map.getSource(sourceName) as GeoJSONSource).setData(data as GeoJSON);</span>
       const bounds = <span class="cstat-no" title="statement not covered" >bbox(data);</span>
-<span class="cstat-no" title="statement not covered" >      mapHook.map.fitBounds(bounds);</span>
+<span class="cstat-no" title="statement not covered" >      mapHook.map.map.fitBounds(bounds as LngLatBoundsLike);</span>
     } catch (e) {
 <span class="cstat-no" title="statement not covered" >      console.log(e);</span>
     }
@@ -1011,17 +1076,25 @@ const MlGPXViewer = (props) =&gt; {
   };
 &nbsp;
   const fileUploadOnChange = <span class="fstat-no" title="function not covered" >()</span> =&gt; {
-    const file = <span class="cstat-no" title="statement not covered" >fileupload.current.files[0];</span>
+<span class="cstat-no" title="statement not covered" >    if(!fileupload.current)<span class="cstat-no" title="statement not covered" >return false;</span></span>
+&nbsp;
+    const file = <span class="cstat-no" title="statement not covered" >fileupload.current?.files?.[0];</span>
 <span class="cstat-no" title="statement not covered" >    if (!file) <span class="cstat-no" title="statement not covered" >return false;</span></span>
     const reader = <span class="cstat-no" title="statement not covered" >new FileReader();</span>
-<span class="cstat-no" title="statement not covered" >    reader.onload = <span class="fstat-no" title="function not covered" >(p</span>ayload) =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >    reader.onload = <span class="fstat-no" title="function not covered" >(p</span>ayload:any) =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >      if(!payload)<span class="cstat-no" title="statement not covered" >return;</span></span>
+&nbsp;
 <span class="cstat-no" title="statement not covered" >      addGPXToMap(payload.currentTarget.result);</span>
     };
 &nbsp;
 <span class="cstat-no" title="statement not covered" >    reader.readAsText(file);</span>
+&nbsp;
+<span class="cstat-no" title="statement not covered" >    return;</span>
   };
 &nbsp;
   const manualUpload = <span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >    if(!fileupload.current)<span class="cstat-no" title="statement not covered" >return;</span></span>
+&nbsp;
 <span class="cstat-no" title="statement not covered" >    fileupload.current.click();</span>
   };
   return (
@@ -1119,25 +1192,6 @@ MlGPXViewer.defaultProps = {
   visible: true,
 };
 &nbsp;
-MlGPXViewer.propTypes = {
-  /**
-   * Id of the target MapLibre instance in mapHook
-   */
-  mapId: PropTypes.string,
-  /**
-   * Prefix of the component id this component uses when adding elements to the MapLibreGl-instance
-   */
-  idPrefix: PropTypes.string,
-  /**
-   * Sets the layers layout-property "visibility" to "none" if false or "visible" if true
-   */
-  visible: PropTypes.bool,
-  /**
-   * 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: PropTypes.string,
-};
 &nbsp;
 export default MlGPXViewer;
 &nbsp;</pre></td></tr></table></pre>
@@ -1147,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 Thu Mar 24 2022 19:39:33 GMT+0000 (Coordinated Universal Time)
+                at Wed Apr 20 2022 07:57:24 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -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 Thu Mar 24 2022 19:39:33 GMT+0000 (Coordinated Universal Time)
+                at Wed Apr 20 2022 07:57:24 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/components/MlGPXViewer/index.html CHANGED Viewed

@@ -23,16 +23,16 @@
         <div class='clearfix'>
             <div class='fl pad1y space-right2'>
-                <span class="strong">13.43% </span>
+                <span class="strong">12.93% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>59/439</span>
+                <span class='fraction'>59/456</span>
             </div>
             <div class='fl pad1y space-right2'>
-                <span class="strong">3.05% </span>
+                <span class="strong">3.23% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>7/229</span>
+                <span class='fraction'>8/247</span>
             </div>
@@ -44,9 +44,9 @@
             <div class='fl pad1y space-right2'>
-                <span class="strong">14.92% </span>
+                <span class="strong">14.57% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>57/382</span>
+                <span class='fraction'>57/391</span>
             </div>
@@ -79,18 +79,18 @@
 </tr>
 </thead>
 <tbody><tr>
-	<td class="file low" data-value="MlGPXViewer.js"><a href="MlGPXViewer.js.html">MlGPXViewer.js</a></td>
-	<td data-value="46.42" class="pic low">
-	<div class="chart"><div class="cover-fill" style="width: 46%"></div><div class="cover-empty" style="width: 54%"></div></div>
+	<td class="file low" data-value="MlGPXViewer.tsx"><a href="MlGPXViewer.tsx.html">MlGPXViewer.tsx</a></td>
+	<td data-value="40.31" class="pic low">
+	<div class="chart"><div class="cover-fill" style="width: 40%"></div><div class="cover-empty" style="width: 60%"></div></div>
 	</td>
-	<td data-value="46.42" class="pct low">46.42%</td>
-	<td data-value="112" class="abs low">52/112</td>
-	<td data-value="23.07" class="pct low">23.07%</td>
-	<td data-value="26" class="abs low">6/26</td>
+	<td data-value="40.31" class="pct low">40.31%</td>
+	<td data-value="129" class="abs low">52/129</td>
+	<td data-value="15.9" class="pct low">15.9%</td>
+	<td data-value="44" class="abs low">7/44</td>
 	<td data-value="25" class="pct low">25%</td>
 	<td data-value="24" class="abs low">6/24</td>
-	<td data-value="47.16" class="pct low">47.16%</td>
-	<td data-value="106" class="abs low">50/106</td>
+	<td data-value="43.47" class="pct low">43.47%</td>
+	<td data-value="115" class="abs low">50/115</td>
 	</tr>
 <tr>
@@ -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 Thu Mar 24 2022 19:39:33 GMT+0000 (Coordinated Universal Time)
+                at Wed Apr 20 2022 07:57:24 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>