@mapcomponents/react-maplibre 0.1.25 → 0.1.29

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

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">51.56% </span>
+                <span class="strong">46.42% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>66/128</span>
+                <span class='fraction'>52/112</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">26.66% </span>
+                <span class="strong">23.07% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>8/30</span>
+                <span class='fraction'>6/26</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">29.62% </span>
+                <span class="strong">25% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>8/27</span>
+                <span class='fraction'>6/24</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">52.89% </span>
+                <span class="strong">47.16% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>64/121</span>
+                <span class='fraction'>50/106</span>
             </div>
         
             
@@ -61,7 +61,7 @@
             </div>
         </template>
     </div>
-    <div class='status-line medium'></div>
+    <div class='status-line low'></div>
     <pre><table class="coverage">
 <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
 <a name='L2'></a><a href='#L2'>2</a>
@@ -422,19 +422,7 @@
 <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>
-<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></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L360'></a><a href='#L360'>360</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>
@@ -457,53 +445,31 @@
 <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-yes">18x</span>
+<span class="cline-any cline-yes">18x</span>
+<span class="cline-any cline-yes">18x</span>
+<span class="cline-any cline-yes">18x</span>
+<span class="cline-any cline-yes">18x</span>
+<span class="cline-any cline-yes">18x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">18x</span>
+<span class="cline-any cline-yes">18x</span>
+<span class="cline-any cline-yes">18x</span>
+<span class="cline-any cline-yes">18x</span>
+<span class="cline-any cline-yes">18x</span>
+<span class="cline-any cline-yes">18x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">12x</span>
-<span class="cline-any cline-yes">12x</span>
-<span class="cline-any cline-yes">12x</span>
-<span class="cline-any cline-yes">12x</span>
-<span class="cline-any cline-yes">12x</span>
-<span class="cline-any cline-yes">12x</span>
-<span class="cline-any cline-yes">12x</span>
-<span class="cline-any cline-yes">12x</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-yes">12x</span>
-<span class="cline-any cline-yes">12x</span>
-<span class="cline-any cline-yes">12x</span>
-<span class="cline-any cline-yes">12x</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-yes">18x</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">18x</span>
 <span class="cline-any cline-yes">12x</span>
-<span class="cline-any cline-yes">6x</span>
-<span class="cline-any cline-yes">6x</span>
-<span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">3x</span>
-<span class="cline-any cline-yes">3x</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-yes">3x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">3x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">12x</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-yes">6x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">6x</span>
@@ -547,7 +513,9 @@
 <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-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>
@@ -566,50 +534,56 @@
 <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">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-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">6x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">12x</span>
-<span class="cline-any cline-yes">12x</span>
-<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">18x</span>
+<span class="cline-any cline-yes">18x</span>
+<span class="cline-any cline-yes">18x</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-yes">12x</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-yes">12x</span>
+<span class="cline-any cline-yes">18x</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">12x</span>
-<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">18x</span>
+<span class="cline-any cline-yes">18x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">18x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">18x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">12x</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-yes">9x</span>
-<span class="cline-any cline-yes">9x</span>
+<span class="cline-any cline-yes">18x</span>
+<span class="cline-any cline-yes">15x</span>
+<span class="cline-any cline-yes">15x</span>
+<span class="cline-any cline-yes">15x</span>
+<span class="cline-any cline-yes">15x</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">12x</span>
+<span class="cline-any cline-yes">18x</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">12x</span>
+<span class="cline-any cline-yes">18x</span>
 <span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -619,7 +593,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">12x</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>
@@ -640,7 +614,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">12x</span>
+<span class="cline-any cline-yes">18x</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>
@@ -673,11 +647,11 @@
 <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">12x</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-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">18x</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>
@@ -688,10 +662,12 @@
 <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">12x</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-yes">12x</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>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -780,11 +756,11 @@
 <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>
-<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>
@@ -805,25 +781,23 @@
 <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";
+<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 {MapContext} from "@mapcomponents/react-core";
-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 } from "maplibre-gl";
 import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import ListItemText from "@mui/material/ListItemText";
 import GeoJsonContext from "./util/GeoJsonContext";
 import toGeoJSON from "./gpxConverter";
 import useMediaQuery from "@mui/material/useMediaQuery";
-&nbsp;
-import {v4 as uuidv4} from "uuid";
+import useMap from "../../hooks/useMap";
 &nbsp;
 /**
  * MlGPXViewer returns a dropzone and a button to load a GPX Track into the map.
@@ -832,11 +806,8 @@ import {v4 as uuidv4} from "uuid";
  */
 const MlGPXViewer = (props) =&gt; {
   const dataSource = useContext(GeoJsonContext);
-  const componentId = useRef((props.idPrefix ? <span class="branch-0 cbranch-no" title="branch not covered" >props.idPrefix </span>: "MlGpxViewer-") + uuidv4());
-  const mapContext = useContext(MapContext);
-  const mapId = props.mapId;
   const initializedRef = useRef(false);
-  const mapRef = useRef(null);
+  const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
   const sourceName = "import-source";
   const layerNameLines = "importer-layer-lines";
   const layerNamePoints = "importer-layer-points";
@@ -856,36 +827,19 @@ const MlGPXViewer = (props) =&gt; {
   );
 &nbsp;
   useEffect(() =&gt; {
-    let _componentId = componentId.current;
-    let _popup = popup.current;
-    return () =&gt; {
-      // This is the cleanup function, it is called when this react component is removed from react-dom
-      if (mapRef.current) {
-        mapRef.current.cleanup(_componentId);
-&nbsp;
-        mapRef.current.getCanvas().style.cursor = "";
-&nbsp;
-        mapRef.current = null;
-      }
-      _popup.remove();
-    };
-  }, []);
-&nbsp;
-  useEffect(() =&gt; {
-    if (!mapContext.mapExists(mapId) || initializedRef.current) return;
+    if (!mapHook.map || initializedRef.current) return;
 &nbsp;
     initializedRef.current = true;
-    mapRef.current = mapContext.getMap(mapId);
 &nbsp;
-    mapRef.current.addSource(
+    mapHook.map.addSource(
       sourceName,
       {
         type: "geojson",
         data: dataSource.data,
       },
-      componentId.current
+      mapHook.componentId
     );
-    mapRef.current.addLayer(
+    mapHook.map.addLayer(
       {
         id: layerNameLines,
         source: sourceName,
@@ -896,9 +850,9 @@ const MlGPXViewer = (props) =&gt; {
         },
       },
       props.insertBeforeLayer,
-      componentId.current
+      mapHook.componentId
     );
-    mapRef.current.addLayer(
+    mapHook.map.addLayer(
       {
         id: layerNamePoints,
         source: sourceName,
@@ -910,40 +864,49 @@ const MlGPXViewer = (props) =&gt; {
         filter: ["==", "$type", "Point"],
       },
       props.insertBeforeLayer,
-      componentId.current
+      mapHook.componentId
     );
 &nbsp;
     [layerNameLines, layerNamePoints].forEach((layerName) =&gt; {
-      mapRef.current.setLayoutProperty(layerName, "visibility", "visible");
+      mapHook.map.setLayoutProperty(layerName, "visibility", "visible");
     });
-    mapRef.current.on("mouseenter", layerNamePoints, <span class="fstat-no" title="function not covered" >(e</span>) =&gt; {
-      // Change the cursor style as a UI indicator.
-<span class="cstat-no" title="statement not covered" >      mapContext.getMap(props.mapId).getCanvas().style.cursor = "pointer";</span>
+    mapHook.map.on(
+      "mouseenter",
+      layerNamePoints,
+<span class="fstat-no" title="function not covered" >      (e</span>) =&gt; {
+        // 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(mapRef.current);</span>
-    });
+        // based on the feature found.
+<span class="cstat-no" title="statement not covered" >        popup.current.setLngLat(coordinates).setHTML(name).addTo(mapHook.map);</span>
+      },
+      mapHook.componentId
+    );
 &nbsp;
-    mapRef.current.on("mouseleave", "places", <span class="fstat-no" title="function not covered" >fu</span>nction () {
-<span class="cstat-no" title="statement not covered" >      mapRef.current.getCanvas().style.cursor = "";</span>
-<span class="cstat-no" title="statement not covered" >      popup.current.remove();</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" >        mapHook.map.getCanvas().style.cursor = "";</span>
+<span class="cstat-no" title="statement not covered" >        popup.current.remove();</span>
+      },
+      mapHook.componentId
+    );
 &nbsp;
-    mapRef.current.setZoom(10);
-  }, [mapContext.mapIds, mapContext, dataSource.data, mapId, props]);
+    mapHook.map.setZoom(10);
+  }, [mapHook.map]);
 &nbsp;
   useEffect(() =&gt; {
     const dropZoneCurrent = dropZone.current;
@@ -969,9 +932,8 @@ const MlGPXViewer = (props) =&gt; {
     return () =&gt; {
       window.removeEventListener("dragenter", raiseDropZoneAndStopDefault);
       window.removeEventListener("dragover", stopDefault);
-      window.removeEventListener("drop", stopDefault);
       dropZoneCurrent.removeEventListener("dragleave", lowerDropZone);
-      window.removeEventListener("drop", <span class="fstat-no" title="function not covered" >(e</span>vent) =&gt; <span class="cstat-no" title="statement not covered" >lowerDropZoneAndStopDefault)</span>;
+      window.removeEventListener("drop", lowerDropZoneAndStopDefault);
     };
   });
 &nbsp;
@@ -981,12 +943,12 @@ const MlGPXViewer = (props) =&gt; {
   };
 &nbsp;
   useEffect(() =&gt; {
-    if (!mapRef.current) return;
+    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" >      mapRef.current.setLayoutProperty(layerName, "visibility", visibility);</span>
+<span class="cstat-no" title="statement not covered" >      mapHook.map.setLayoutProperty(layerName, "visibility", visibility);</span>
     });
   }, [props.visible]);
 &nbsp;
@@ -1012,7 +974,7 @@ const MlGPXViewer = (props) =&gt; {
   };
 &nbsp;
   const addGPXToMap = <span class="fstat-no" title="function not covered" >(g</span>pxAsString) =&gt; {
-<span class="cstat-no" title="statement not covered" >    if (!mapRef.current) <span class="cstat-no" title="statement not covered" >return;</span></span>
+<span class="cstat-no" title="statement not covered" >    if (!mapHook.map) <span class="cstat-no" title="statement not covered" >return;</span></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>
@@ -1036,9 +998,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" >      mapRef.current.getSource(sourceName).setData(data);</span>
+<span class="cstat-no" title="statement not covered" >      mapHook.map.getSource(sourceName).setData(data);</span>
       const bounds = <span class="cstat-no" title="statement not covered" >bbox(data);</span>
-<span class="cstat-no" title="statement not covered" >      mapRef.current.fitBounds(bounds);</span>
+<span class="cstat-no" title="statement not covered" >      mapHook.map.fitBounds(bounds);</span>
     } catch (e) {
 <span class="cstat-no" title="statement not covered" >      console.log(e);</span>
     }
@@ -1064,15 +1026,17 @@ const MlGPXViewer = (props) =&gt; {
   };
   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;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={{
@@ -1086,9 +1050,9 @@ const MlGPXViewer = (props) =&gt; {
             type="file"
             id="input"
             multiple
-            style={{display: "none"}}
+            style={{ display: "none" }}
           &gt;&lt;/input&gt;
-          &lt;FileCopy/&gt;
+          &lt;FileCopy /&gt;
         &lt;/IconButton&gt;
         &lt;IconButton
           onClick={toogleDrawer}
@@ -1097,7 +1061,7 @@ const MlGPXViewer = (props) =&gt; {
           }}
           size="large"
         &gt;
-          &lt;InfoIcon/&gt;
+          &lt;InfoIcon /&gt;
         &lt;/IconButton&gt;
       &lt;/div&gt;
       &lt;Drawer variant="persistent" anchor="left" open={open}&gt;
@@ -1111,11 +1075,11 @@ const MlGPXViewer = (props) =&gt; {
         &gt;
           Informationen zur Route
         &lt;/Typography&gt;
-        &lt;Divider/&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;ListItemText primary={item.value} /&gt;
             &lt;/ListItem&gt;
           ))}
         &lt;/List&gt;
@@ -1157,7 +1121,7 @@ MlGPXViewer.defaultProps = {
 &nbsp;
 MlGPXViewer.propTypes = {
   /**
-   * Id of the target MapLibre instance in mapContext
+   * Id of the target MapLibre instance in mapHook
    */
   mapId: PropTypes.string,
   /**
@@ -1183,7 +1147,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 Mon Jan 31 2022 16:41:51 GMT+0000 (Coordinated Universal Time)
+                at Sun Feb 20 2022 15:15:59 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -596,10 +596,10 @@
 <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">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</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">2x</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>
@@ -701,7 +701,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>
@@ -721,7 +721,7 @@
 <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">1x</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-neutral">&nbsp;</span>
@@ -1099,7 +1099,7 @@
 <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">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>
@@ -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 Mon Jan 31 2022 16:41:51 GMT+0000 (Coordinated Universal Time)
+                at Sun Feb 20 2022 15:15:59 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>