@mapcomponents/react-maplibre 0.1.57 → 0.1.59

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

@@ -836,360 +836,360 @@ import useMap from "../../hooks/useMap";
  
 interface MlGPXViewerProps {
  
-  /**
-   * 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,
+	/**
+	 * 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,
 }
  
 /**
  * MlGPXViewer returns a dropzone and a button to load a GPX Track into the map.
  */
 const MlGPXViewer = (props:MlGPXViewerProps) => {
-  const dataSource = useContext(GeoJsonContext);
-  const initializedRef = useRef(false);
-  const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
-  const sourceName = "import-source";
-  const layerNameLines = "importer-layer-lines";
-  const layerNamePoints = "importer-layer-points";
+	const dataSource = useContext(GeoJsonContext);
+	const initializedRef = useRef(false);
+	const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
+	const sourceName = "import-source";
+	const layerNameLines = "importer-layer-lines";
+	const layerNamePoints = "importer-layer-points";
  
-  const [open, setIsOpen] = useState(false);
-  const dropZone = useRef<HTMLDivElement>(null);
-  const [zIndex, setZIndex] = useState(0);
-  const [metaData, setMetaData] = useState<{ title: string; value: string; id: number; }[]>([]);
-  const fileupload = useRef<HTMLInputElement>(null);
-  const mediaIsMobile = useMediaQuery("(max-width:900px)");
+	const [open, setIsOpen] = useState(false);
+	const dropZone = useRef<HTMLDivElement>(null);
+	const [zIndex, setZIndex] = useState(0);
+	const [metaData, setMetaData] = useState<{ title: string; value: string; id: number; }[]>([]);
+	const fileupload = useRef<HTMLInputElement>(null);
+	const mediaIsMobile = useMediaQuery("(max-width:900px)");
  
-  const popup = useRef(
-    new Popup({
-      closeButton: false,
-      closeOnClick: true,
-    })
-  );
+	const popup = useRef(
+		new Popup({
+			closeButton: false,
+			closeOnClick: true,
+		})
+	);
  
-  useEffect(() => {
-    if (!mapHook.map || initializedRef.current) return;
+	useEffect(() => {
+		if (!mapHook.map || initializedRef.current) return;
  
-    initializedRef.current = true;
+		initializedRef.current = true;
  
-    mapHook.map.addSource(
-      sourceName,
-      {
-        type: "geojson",
-        data: dataSource.data,
-      },
-      mapHook.componentId
-    );
-    mapHook.map.addLayer(
-      {
-        id: layerNameLines,
-        source: sourceName,
-        type: "line",
-        paint: {
-          "line-width": 4,
-          "line-color": "rgba(212, 55, 23,0.5)",
-        },
-      },
-      props.insertBeforeLayer,
-      mapHook.componentId
-    );
-    mapHook.map.addLayer(
-      {
-        id: layerNamePoints,
-        source: sourceName,
-        type: "circle",
-        paint: {
-          "circle-color": "rgba(72, 77, 99,0.5)",
-          "circle-radius": 7,
-        },
-        filter: ["==", "$type", "Point"],
-      },
-      props.insertBeforeLayer,
-      mapHook.componentId
-    );
+		mapHook.map.addSource(
+			sourceName,
+			{
+				type: "geojson",
+				data: dataSource.data,
+			},
+			mapHook.componentId
+		);
+		mapHook.map.addLayer(
+			{
+				id: layerNameLines,
+				source: sourceName,
+				type: "line",
+				paint: {
+					"line-width": 4,
+					"line-color": "rgba(212, 55, 23,0.5)",
+				},
+			},
+			props.insertBeforeLayer,
+			mapHook.componentId
+		);
+		mapHook.map.addLayer(
+			{
+				id: layerNamePoints,
+				source: sourceName,
+				type: "circle",
+				paint: {
+					"circle-color": "rgba(72, 77, 99,0.5)",
+					"circle-radius": 7,
+				},
+				filter: ["==", "$type", "Point"],
+			},
+			props.insertBeforeLayer,
+			mapHook.componentId
+		);
  
-    [layerNameLines, layerNamePoints].forEach((layerName) => {
-      <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>
+		[layerNameLines, layerNamePoints].forEach((layerName) =&gt; {
+			<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>: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.
+			mapHook.map.map.setLayoutProperty(layerName, "visibility", "visible");
+		});
+		mapHook.map.on(
+			"mouseenter",
+			layerNamePoints,
+<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>
-        //const description = e.features[0].properties.desc;
-        const name = <span class="cstat-no" title="statement not covered" >e.features[0].properties.name;</span>
+				const coordinates = <span class="cstat-no" title="statement not covered" >e.features[0].geometry.coordinates.slice();</span>
+				//const description = e.features[0].properties.desc;
+				const name = <span class="cstat-no" title="statement not covered" >e.features[0].properties.name;</span>
 &nbsp;
-        // Ensure that if the map is zoomed out such that multiple
-        // copies of the feature are visible, the popup appears
-        // over the copy being pointed to.
-<span class="cstat-no" title="statement not covered" >        while (Math.abs(e.lngLat.lng - coordinates[0]) &gt; 180) {</span>
-<span class="cstat-no" title="statement not covered" >          coordinates[0] += e.lngLat.lng &gt; coordinates[0] ? 360 : -360;</span>
-        }
+				// Ensure that if the map is zoomed out such that multiple
+				// copies of the feature are visible, the popup appears
+				// over the copy being pointed to.
+<span class="cstat-no" title="statement not covered" >				while (Math.abs(e.lngLat.lng - coordinates[0]) &gt; 180) {</span>
+<span class="cstat-no" title="statement not covered" >					coordinates[0] += e.lngLat.lng &gt; coordinates[0] ? 360 : -360;</span>
+				}
 &nbsp;
-        // Populate the popup and set its coordinates
+				// 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.map);</span>
-      },
-      mapHook.componentId
-    );
+				// based on the feature found.
+<span class="cstat-no" title="statement not covered" >				popup.current.setLngLat(coordinates).setHTML(name).addTo(mapHook.map.map);</span>
+			},
+			mapHook.componentId
+		);
 &nbsp;
-    mapHook.map.on(
-      "mouseleave",
-      "places",
-<span class="fstat-no" title="function not covered" >      fu</span>nction () {
-<span class="cstat-no" title="statement not covered" >        if(!mapHook.map)<span class="cstat-no" title="statement not covered" >return;</span></span>
+		mapHook.map.on(
+			"mouseleave",
+			"places",
+<span class="fstat-no" title="function not covered" >			fu</span>nction () {
+<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
-    );
+<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.map.setZoom(10);
-  }, [mapHook.map]);
+		mapHook.map.map.setZoom(10);
+	}, [mapHook.map]);
 &nbsp;
-  useEffect(() =&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:any) =&gt; {
-<span class="cstat-no" title="statement not covered" >      setZIndex(0);</span>
-<span class="cstat-no" title="statement not covered" >      stopDefault(event);</span>
-    };
+	useEffect(() =&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:any) =&gt; {
+<span class="cstat-no" title="statement not covered" >			setZIndex(0);</span>
+<span class="cstat-no" title="statement not covered" >			stopDefault(event);</span>
+		};
 &nbsp;
-    window.addEventListener("dragenter", raiseDropZoneAndStopDefault);
-    window.addEventListener("dragover", stopDefault);
+		window.addEventListener("dragenter", raiseDropZoneAndStopDefault);
+		window.addEventListener("dragover", stopDefault);
 &nbsp;
-    _dropZone?.addEventListener("dragleave", lowerDropZone);
+		_dropZone?.addEventListener("dragleave", lowerDropZone);
 &nbsp;
-    window.addEventListener("drop", lowerDropZoneAndStopDefault);
+		window.addEventListener("drop", lowerDropZoneAndStopDefault);
 &nbsp;
-    return () =&gt; {
-      window.removeEventListener("dragenter", raiseDropZoneAndStopDefault);
-      window.removeEventListener("dragover", stopDefault);
-      _dropZone?.removeEventListener("dragleave", lowerDropZone);
-      window.removeEventListener("drop", lowerDropZoneAndStopDefault);
-    };
-  });
+		return () =&gt; {
+			window.removeEventListener("dragenter", raiseDropZoneAndStopDefault);
+			window.removeEventListener("dragover", stopDefault);
+			_dropZone?.removeEventListener("dragleave", lowerDropZone);
+			window.removeEventListener("drop", lowerDropZoneAndStopDefault);
+		};
+	});
 &nbsp;
-  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>
-  };
+	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; {
-    <span class="missing-if-branch" title="else path not taken" >E</span>if (!mapHook.map) return;
+	useEffect(() =&gt; {
+		<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>
+		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" >      if(!mapHook.map)<span class="cstat-no" title="statement not covered" >return;</span></span>
+<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" >			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]);
+<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:any) =&gt; {
-<span class="cstat-no" title="statement not covered" >    event.preventDefault();</span>
+	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>
-<span class="cstat-no" title="statement not covered" >      if (event.dataTransfer.items.length &gt; 1) {</span>
-<span class="cstat-no" title="statement not covered" >        return false;</span>
-      }
-      // 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: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>
+<span class="cstat-no" title="statement not covered" >		if (event.dataTransfer.items) {</span>
+<span class="cstat-no" title="statement not covered" >			if (event.dataTransfer.items.length &gt; 1) {</span>
+<span class="cstat-no" title="statement not covered" >				return false;</span>
+			}
+			// 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: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>
-<span class="cstat-no" title="statement not covered" >        reader.readAsText(file);</span>
-      }
-    } else {
-      // Use DataTransfer interface to access the file(s)
-    }
-<span class="cstat-no" title="statement not covered" >    return;</span>
-  };
+<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>
+<span class="cstat-no" title="statement not covered" >				reader.readAsText(file);</span>
+			}
+		} 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: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>
+	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: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>
+<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: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>
-          const metaDatEntry = <span class="cstat-no" title="statement not covered" >{</span>
-            title: title,
-            value: value,
-            id: new Date().getTime(),
-          };
-<span class="cstat-no" title="statement not covered" >          setMetaData(<span class="fstat-no" title="function not covered" >(p</span>revState) =&gt; <span class="cstat-no" title="statement not covered" >[...prevState, metaDatEntry])</span>;</span>
-        }
-      });
-      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.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.map.fitBounds(bounds as LngLatBoundsLike);</span>
-    } catch (e) {
-<span class="cstat-no" title="statement not covered" >      console.log(e);</span>
-    }
-  };
+<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>
+					const metaDatEntry = <span class="cstat-no" title="statement not covered" >{</span>
+						title: title,
+						value: value,
+						id: new Date().getTime(),
+					};
+<span class="cstat-no" title="statement not covered" >					setMetaData(<span class="fstat-no" title="function not covered" >(p</span>revState) =&gt; <span class="cstat-no" title="statement not covered" >[...prevState, metaDatEntry])</span>;</span>
+				}
+			});
+			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.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.map.fitBounds(bounds as LngLatBoundsLike);</span>
+		} catch (e) {
+<span class="cstat-no" title="statement not covered" >			console.log(e);</span>
+		}
+	};
 &nbsp;
-  const toogleDrawer = <span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >    setIsOpen(<span class="fstat-no" title="function not covered" >(p</span>revState) =&gt; <span class="cstat-no" title="statement not covered" >!prevState)</span>;</span>
-  };
+	const toogleDrawer = <span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >		setIsOpen(<span class="fstat-no" title="function not covered" >(p</span>revState) =&gt; <span class="cstat-no" title="statement not covered" >!prevState)</span>;</span>
+	};
 &nbsp;
-  const fileUploadOnChange = <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 false;</span></span>
+	const fileUploadOnChange = <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 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:any) =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >      if(!payload)<span class="cstat-no" title="statement not covered" >return;</span></span>
+		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: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>
-    };
+<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>
+<span class="cstat-no" title="statement not covered" >		reader.readAsText(file);</span>
 &nbsp;
-<span class="cstat-no" title="statement not covered" >    return;</span>
-  };
+<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>
+	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 (
-    &lt;&gt;
-      &lt;div
-        style={{
-          position: "fixed",
-          right: "5px",
-          bottom: mediaIsMobile ? <span class="branch-0 cbranch-no" title="branch not covered" >"40px" </span>: "25px",
-          display: "flex",
-          flexDirection: "column",
-          gap: "5px",
-          zIndex: 1000,
-        }}
-      &gt;
-        &lt;IconButton
-          onClick={manualUpload}
-          style={{
-            backgroundColor: "rgba(255,255,255,1)",
-          }}
-          size="large"
-        &gt;
-          &lt;input
-            ref={fileupload}
-            onChange={fileUploadOnChange}
-            type="file"
-            id="input"
-            multiple
-            style={{ display: "none" }}
-          &gt;&lt;/input&gt;
-          &lt;FileCopy /&gt;
-        &lt;/IconButton&gt;
-        &lt;IconButton
-          onClick={toogleDrawer}
-          style={{
-            backgroundColor: "rgba(255,255,255,1)",
-          }}
-          size="large"
-        &gt;
-          &lt;InfoIcon /&gt;
-        &lt;/IconButton&gt;
-      &lt;/div&gt;
-      &lt;Drawer variant="persistent" anchor="left" open={open}&gt;
-        &lt;Typography
-          variant="h6"
-          style={{
-            textAlign: "center",
-            padding: "1em",
-          }}
-          noWrap
-        &gt;
-          Informationen zur Route
-        &lt;/Typography&gt;
-        &lt;Divider /&gt;
-        &lt;List&gt;
-          {metaData.map(<span class="fstat-no" title="function not covered" >(i</span>tem) =&gt; (
-<span class="cstat-no" title="statement not covered" >            &lt;ListItem key={`item--${item.id}`}&gt;</span>
-              &lt;ListItemText primary={item.value} /&gt;
-            &lt;/ListItem&gt;
-          ))}
-        &lt;/List&gt;
-      &lt;/Drawer&gt;
-      &lt;div
-        onDrop={dropHandler}
-        ref={dropZone}
-        style={{
-          position: "absolute",
-          left: "0",
-          top: "0",
-          backgroundColor: "rgba(255,255,255,0.5)",
-          width: "100%",
-          height: "100%",
-          zIndex: zIndex,
-        }}
-      &gt;
-        &lt;Typography
-          variant="h6"
-          style={{
-            top: "50%",
-            position: "absolute",
-            left: "50%",
-            msTransform: "translate(-50%, -50%)",
-            transform: " translate(-50%, -50%)",
-          }}
-          noWrap
-        &gt;
-          Gpx-Datei ablegen
-        &lt;/Typography&gt;
-      &lt;/div&gt;
-    &lt;/&gt;
-  );
+<span class="cstat-no" title="statement not covered" >		fileupload.current.click();</span>
+	};
+	return (
+		&lt;&gt;
+			&lt;div
+				style={{
+					position: "fixed",
+					right: "5px",
+					bottom: mediaIsMobile ? <span class="branch-0 cbranch-no" title="branch not covered" >"40px" </span>: "25px",
+					display: "flex",
+					flexDirection: "column",
+					gap: "5px",
+					zIndex: 1000,
+				}}
+			&gt;
+				&lt;IconButton
+					onClick={manualUpload}
+					style={{
+						backgroundColor: "rgba(255,255,255,1)",
+					}}
+					size="large"
+				&gt;
+					&lt;input
+						ref={fileupload}
+						onChange={fileUploadOnChange}
+						type="file"
+						id="input"
+						multiple
+						style={{ display: "none" }}
+					&gt;&lt;/input&gt;
+					&lt;FileCopy /&gt;
+				&lt;/IconButton&gt;
+				&lt;IconButton
+					onClick={toogleDrawer}
+					style={{
+						backgroundColor: "rgba(255,255,255,1)",
+					}}
+					size="large"
+				&gt;
+					&lt;InfoIcon /&gt;
+				&lt;/IconButton&gt;
+			&lt;/div&gt;
+			&lt;Drawer variant="persistent" anchor="left" open={open}&gt;
+				&lt;Typography
+					variant="h6"
+					style={{
+						textAlign: "center",
+						padding: "1em",
+					}}
+					noWrap
+				&gt;
+					Informationen zur Route
+				&lt;/Typography&gt;
+				&lt;Divider /&gt;
+				&lt;List&gt;
+					{metaData.map(<span class="fstat-no" title="function not covered" >(i</span>tem) =&gt; (
+<span class="cstat-no" title="statement not covered" >						&lt;ListItem key={`item--${item.id}`}&gt;</span>
+							&lt;ListItemText primary={item.value} /&gt;
+						&lt;/ListItem&gt;
+					))}
+				&lt;/List&gt;
+			&lt;/Drawer&gt;
+			&lt;div
+				onDrop={dropHandler}
+				ref={dropZone}
+				style={{
+					position: "absolute",
+					left: "0",
+					top: "0",
+					backgroundColor: "rgba(255,255,255,0.5)",
+					width: "100%",
+					height: "100%",
+					zIndex: zIndex,
+				}}
+			&gt;
+				&lt;Typography
+					variant="h6"
+					style={{
+						top: "50%",
+						position: "absolute",
+						left: "50%",
+						msTransform: "translate(-50%, -50%)",
+						transform: " translate(-50%, -50%)",
+					}}
+					noWrap
+				&gt;
+					Gpx-Datei ablegen
+				&lt;/Typography&gt;
+			&lt;/div&gt;
+		&lt;/&gt;
+	);
 };
 &nbsp;
 MlGPXViewer.defaultProps = {
-  visible: true,
+	visible: true,
 };
 &nbsp;
 &nbsp;
@@ -1201,7 +1201,7 @@ export default MlGPXViewer;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Tue Aug 30 2022 13:27:18 GMT+0000 (Coordinated Universal Time)
+                at Tue Oct 04 2022 12:11:13 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>