@mapcomponents/react-maplibre 0.1.13 → 0.1.17

package/coverage/lcov-report/src/hooks/useMap.js.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">78.57% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>0/42</span>
+                <span class='fraction'>22/28</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">50% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/12</span>
+                <span class='fraction'>6/12</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">80% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>0/8</span>
+                <span class='fraction'>4/5</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">77.77% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>0/41</span>
+                <span class='fraction'>21/27</span>
             </div>
         
             
@@ -61,7 +61,7 @@
             </div>
         </template>
     </div>
-    <div class='status-line low'></div>
+    <div class='status-line medium'></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>
@@ -133,74 +133,16 @@
 <a name='L68'></a><a href='#L68'>68</a>
 <a name='L69'></a><a href='#L69'>69</a>
 <a name='L70'></a><a href='#L70'>70</a>
-<a name='L71'></a><a href='#L71'>71</a>
-<a name='L72'></a><a href='#L72'>72</a>
-<a name='L73'></a><a href='#L73'>73</a>
-<a name='L74'></a><a href='#L74'>74</a>
-<a name='L75'></a><a href='#L75'>75</a>
-<a name='L76'></a><a href='#L76'>76</a>
-<a name='L77'></a><a href='#L77'>77</a>
-<a name='L78'></a><a href='#L78'>78</a>
-<a name='L79'></a><a href='#L79'>79</a>
-<a name='L80'></a><a href='#L80'>80</a>
-<a name='L81'></a><a href='#L81'>81</a>
-<a name='L82'></a><a href='#L82'>82</a>
-<a name='L83'></a><a href='#L83'>83</a>
-<a name='L84'></a><a href='#L84'>84</a>
-<a name='L85'></a><a href='#L85'>85</a>
-<a name='L86'></a><a href='#L86'>86</a>
-<a name='L87'></a><a href='#L87'>87</a>
-<a name='L88'></a><a href='#L88'>88</a>
-<a name='L89'></a><a href='#L89'>89</a>
-<a name='L90'></a><a href='#L90'>90</a>
-<a name='L91'></a><a href='#L91'>91</a>
-<a name='L92'></a><a href='#L92'>92</a>
-<a name='L93'></a><a href='#L93'>93</a>
-<a name='L94'></a><a href='#L94'>94</a>
-<a name='L95'></a><a href='#L95'>95</a>
-<a name='L96'></a><a href='#L96'>96</a>
-<a name='L97'></a><a href='#L97'>97</a>
-<a name='L98'></a><a href='#L98'>98</a>
-<a name='L99'></a><a href='#L99'>99</a>
-<a name='L100'></a><a href='#L100'>100</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L71'></a><a href='#L71'>71</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-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-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-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-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-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-yes">33x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">33x</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>
@@ -209,51 +151,51 @@
 <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">33x</span>
+<span class="cline-any cline-yes">33x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">33x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">33x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">33x</span>
+<span class="cline-any cline-yes">10x</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">10x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">4x</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-yes">4x</span>
+<span class="cline-any cline-yes">4x</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-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">33x</span>
+<span class="cline-any cline-yes">30x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">10x</span>
 <span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-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-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">10x</span>
+<span class="cline-any cline-yes">10x</span>
+<span class="cline-any cline-yes">10x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">33x</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>
@@ -264,98 +206,69 @@
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { useContext, useState, useEffect, useRef } from "react";
 import { v4 as uuidv4 } from "uuid";
 import { MapContext } from "@mapcomponents/react-core";
+import useMapState from "./useMapState";
 &nbsp;
-function <span class="fstat-no" title="function not covered" >useMap(</span>props) {
+function useMap(props) {
   // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-  const mapContext = <span class="cstat-no" title="statement not covered" >useContext(MapContext);</span>
+  const mapContext = useContext(MapContext);
+&nbsp;
+  const mapState = useMapState({
+    mapId: props.mapId,
+    watch: {
+      viewport: false,
+      layers: true,
+      sources: false,
+    },
+  });
 &nbsp;
-  const initializedRef = <span class="cstat-no" title="statement not covered" >useRef(false);</span>
-  const mapRef = <span class="cstat-no" title="statement not covered" >useRef(undefined);</span>
+  const initializedRef = useRef(false);
+  const mapRef = useRef(undefined);
 &nbsp;
-  const [center, setCenter] = <span class="cstat-no" title="statement not covered" >useState(undefined);</span>
-  const [layerIds, setLayerIds] = <span class="cstat-no" title="statement not covered" >useState(undefined);</span>
-  const layerIdsRef = <span class="cstat-no" title="statement not covered" >useRef(undefined);</span>
+  const componentId = useRef(uuidv4());
 &nbsp;
-  const [layers, setLayers] = <span class="cstat-no" title="statement not covered" >useState(undefined);</span>
-  const layersRef = <span class="cstat-no" title="statement not covered" >useRef(undefined);</span>
-  //const mapRef = useRef(props.map);
-  const componentId = <span class="cstat-no" title="statement not covered" >useRef(uuidv4());</span>
+  const [mapIsReady, setMapIsReady] = useState(undefined);
 &nbsp;
-<span class="cstat-no" title="statement not covered" >  useEffect(<span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
-    let _componentId = <span class="cstat-no" title="statement not covered" >componentId.current;</span>
+  useEffect(() =&gt; {
+    let _componentId = componentId.current;
 &nbsp;
-<span class="cstat-no" title="statement not covered" >    return <span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >      if (mapRef.current) {</span>
-<span class="cstat-no" title="statement not covered" >        mapRef.current.cleanup(_componentId);</span>
-<span class="cstat-no" title="statement not covered" >        mapRef.current = undefined;</span>
+    return () =&gt; {
+      if (mapRef.current) {
+        mapRef.current.cleanup(_componentId);
+        mapRef.current = undefined;
       }
-<span class="cstat-no" title="statement not covered" >      initializedRef.current = false;</span>
+      initializedRef.current = false;
+      setMapIsReady(false);
     };
   }, []);
 &nbsp;
-  const buildLayerObjects = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(l</span>ayers) =&gt; {</span>
-    let res = <span class="cstat-no" title="statement not covered" >{};</span>
-<span class="cstat-no" title="statement not covered" >    Object.keys(layers).forEach(<span class="fstat-no" title="function not covered" >(l</span>ayerId) =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >      if (mapRef.current.baseLayers.indexOf(layerId) === -1) {</span>
-<span class="cstat-no" title="statement not covered" >        res[layerId] = {</span>
-          //filter: layers[layerId].filter,
-          id: layers[layerId].id,
-          //layout: layers[layerId].layout,
-          //maxzoom: layers[layerId].maxzoom,
-          //metadata: layers[layerId].metadata,
-          //minzoom: layers[layerId].minzoom,
-          paint: layers[layerId].paint,
-          //source: layers[layerId].source,
-          //sourceLayer: layers[layerId].sourceLayer,
-          type: layers[layerId].type,
-          visibility: layers[layerId].visibility,
-        };
-      }
-    });
-<span class="cstat-no" title="statement not covered" >    return res;</span>
-  };
+  useEffect(() =&gt; {
+    if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
 &nbsp;
-<span class="cstat-no" title="statement not covered" >  useEffect(<span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >    if (!mapContext.mapExists(props.mapId) || initializedRef.current) <span class="cstat-no" title="statement not covered" >return;</span></span>
-    // the MapLibre-gl instance (mapContext.getMap(props.mapId)) is accessible here
-    // initialize the layer and add it to the MapLibre-gl instance or do something else with it
-<span class="cstat-no" title="statement not covered" >    initializedRef.current = true;</span>
-<span class="cstat-no" title="statement not covered" >    mapRef.current = mapContext.getMap(props.mapId);</span>
+    //check if insertBeforeLayer exists
+    <span class="missing-if-branch" title="if path not taken" >I</span>if (props.waitForLayer) {
+      let layerFound = <span class="cstat-no" title="statement not covered" >false;</span>
 &nbsp;
-<span class="cstat-no" title="statement not covered" >    setLayerIds([...mapRef.current.style._order]);</span>
-<span class="cstat-no" title="statement not covered" >    mapRef.current.on(</span>
-      "idle",
-<span class="fstat-no" title="function not covered" >      ()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >        if (JSON.stringify(mapRef.current.style._order) !== layerIdsRef.current) {</span>
-          let layerIds = <span class="cstat-no" title="statement not covered" >[...mapRef.current.style._order];</span>
-<span class="cstat-no" title="statement not covered" >          layerIdsRef.current = JSON.stringify(layerIds);</span>
-<span class="cstat-no" title="statement not covered" >          setLayerIds(layerIds);</span>
+<span class="cstat-no" title="statement not covered" >      mapState?.layers?.forEach(<span class="fstat-no" title="function not covered" >(l</span>ayer) =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >        if (layer.id === props.waitForLayer) {</span>
+<span class="cstat-no" title="statement not covered" >          layerFound = true;</span>
         }
+      });
+<span class="cstat-no" title="statement not covered" >      if (!layerFound) {</span>
+<span class="cstat-no" title="statement not covered" >        return;</span>
+      }
+    }
+    // the MapLibre-gl instance (mapContext.getMap(props.mapId)) is accessible here
+    // initialize the layer and add it to the MapLibre-gl instance or do something else with it
+    initializedRef.current = true;
+    mapRef.current = mapContext.getMap(props.mapId);
+    setMapIsReady(true);
+  }, [mapContext.mapIds, mapState.layers, mapContext, props.mapId]);
 &nbsp;
-        let layerStates = <span class="cstat-no" title="statement not covered" >buildLayerObjects(mapRef.current.style._layers);</span>
-        let layerStatesString = <span class="cstat-no" title="statement not covered" >JSON.stringify(layerStates);</span>
-<span class="cstat-no" title="statement not covered" >        if (layerStatesString !== layersRef.current) {</span>
-<span class="cstat-no" title="statement not covered" >          layersRef.current = layerStatesString;</span>
-<span class="cstat-no" title="statement not covered" >          setLayers(layerStates);</span>
-        }
-      },
-      componentId.current
-    );
-&nbsp;
-<span class="cstat-no" title="statement not covered" >    setCenter(mapRef.current.getCenter());</span>
-<span class="cstat-no" title="statement not covered" >    mapRef.current.on(</span>
-      "move",
-<span class="fstat-no" title="function not covered" >      ()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >        setCenter(mapRef.current.getCenter());</span>
-      },
-      componentId.current
-    );
-  }, [mapContext.mapIds, mapContext, props.mapId]);
-&nbsp;
-<span class="cstat-no" title="statement not covered" >  return {</span>
-    layers,
-    layerIds,
-    center,
+  return {
+    map: mapRef.current,
+    mapIsReady,
+    componentId: componentId.current,
+    layers: mapState.layers,
   };
 }
 &nbsp;
@@ -366,10 +279,9 @@ export default useMap;
             </div><!-- /wrapper -->
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
-                <a href="https://istanbul.js.org/" target="_blank" rel="noopener">istanbul</a>
-                at Wed Dec 15 2021 17:14:00 GMT+0000 (Coordinated Universal Time)
+                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
+                at Sun Jan 09 2022 17:13:08 GMT+0000 (Coordinated Universal Time)
             </div>
-        </div>
         <script src="../../prettify.js"></script>
         <script>
             window.onload = function () {