@mapcomponents/react-maplibre 0.1.45 → 0.1.46

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

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">86.66% </span>
+                <span class="strong">77.5% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>26/30</span>
+                <span class='fraction'>31/40</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">81.25% </span>
+                <span class="strong">59.09% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>13/16</span>
+                <span class='fraction'>13/22</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">80% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>3/3</span>
+                <span class='fraction'>4/5</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">85.71% </span>
+                <span class="strong">78.37% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>24/28</span>
+                <span class='fraction'>29/37</span>
             </div>
         
             
@@ -61,7 +61,7 @@
             </div>
         </template>
     </div>
-    <div class='status-line high'></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>
@@ -243,7 +243,27 @@
 <a name='L178'></a><a href='#L178'>178</a>
 <a name='L179'></a><a href='#L179'>179</a>
 <a name='L180'></a><a href='#L180'>180</a>
-<a name='L181'></a><a href='#L181'>181</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L181'></a><a href='#L181'>181</a>
+<a name='L182'></a><a href='#L182'>182</a>
+<a name='L183'></a><a href='#L183'>183</a>
+<a name='L184'></a><a href='#L184'>184</a>
+<a name='L185'></a><a href='#L185'>185</a>
+<a name='L186'></a><a href='#L186'>186</a>
+<a name='L187'></a><a href='#L187'>187</a>
+<a name='L188'></a><a href='#L188'>188</a>
+<a name='L189'></a><a href='#L189'>189</a>
+<a name='L190'></a><a href='#L190'>190</a>
+<a name='L191'></a><a href='#L191'>191</a>
+<a name='L192'></a><a href='#L192'>192</a>
+<a name='L193'></a><a href='#L193'>193</a>
+<a name='L194'></a><a href='#L194'>194</a>
+<a name='L195'></a><a href='#L195'>195</a>
+<a name='L196'></a><a href='#L196'>196</a>
+<a name='L197'></a><a href='#L197'>197</a>
+<a name='L198'></a><a href='#L198'>198</a>
+<a name='L199'></a><a href='#L199'>199</a>
+<a name='L200'></a><a href='#L200'>200</a>
+<a name='L201'></a><a href='#L201'>201</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>
@@ -309,10 +329,14 @@
 <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">8x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">4x</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">4x</span>
 <span class="cline-any cline-yes">4x</span>
@@ -330,7 +354,6 @@
 <span class="cline-any cline-neutral">&nbsp;</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-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -354,6 +377,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-neutral">&nbsp;</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-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">4x</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -362,6 +396,12 @@
 <span class="cline-any cline-yes">12x</span>
 <span class="cline-any cline-yes">8x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">8x</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">8x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-yes">4x</span>
@@ -423,7 +463,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-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useRef, useEffect } from "react";
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useRef, useEffect, useCallback } from "react";
 import useMap from "../../hooks/useMap";
 &nbsp;
 import PropTypes from "prop-types";
@@ -479,7 +519,7 @@ interface MlWmsLayerProps {
  *
  * @component
  */
-const MlWmsLayer = (props:MlWmsLayerProps) =&gt; {
+const MlWmsLayer = (props: MlWmsLayerProps) =&gt; {
   const mapHook = useMap({
     mapId: props.mapId,
     waitForLayer: props.insertBeforeLayer,
@@ -488,10 +528,14 @@ const MlWmsLayer = (props:MlWmsLayerProps) =&gt; {
   const initializedRef = useRef(false);
   const layerId = useRef(props.layerId || "MlWmsLayer-" + mapHook.componentId);
 &nbsp;
-  useEffect(() =&gt; {
-    if (!mapHook.map || initializedRef.current) return;
+  const createLayer = useCallback(() =&gt; {
+    if (!mapHook.map) return;
 &nbsp;
     initializedRef.current = true;
+&nbsp;
+    <span class="missing-if-branch" title="if path not taken" >I</span>if (mapHook.map.map.getLayer(layerId.current)) {
+<span class="cstat-no" title="statement not covered" >      mapHook.cleanup();</span>
+    }
 &nbsp;
     let _propsUrlParams;
     let _wmsUrl = props.url;
@@ -508,8 +552,7 @@ const MlWmsLayer = (props:MlWmsLayerProps) =&gt; {
     };
     let urlParams = new URLSearchParams(urlParamsObj);
     let urlParamsStr =
-      decodeURIComponent(urlParams.toString()) +
-      "".replace(/%2F/g, "/").replace(/%3A/g, ":");
+      decodeURIComponent(urlParams.toString()) + "".replace(/%2F/g, "/").replace(/%3A/g, ":");
 &nbsp;
     mapHook.map.addSource(
       layerId.current,
@@ -534,10 +577,27 @@ const MlWmsLayer = (props:MlWmsLayerProps) =&gt; {
       mapHook.componentId
     );
 &nbsp;
+    // recreate layer if map style.json has changed
+    mapHook.map.on(
+      "styledata",
+<span class="fstat-no" title="function not covered" >      ()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >        if (initializedRef.current &amp;&amp; !mapHook.map?.map.getLayer(layerId.current)) {</span>
+<span class="cstat-no" title="statement not covered" >          console.log("Recreate Layer " + layerId.current);</span>
+<span class="cstat-no" title="statement not covered" >          createLayer();</span>
+        }
+      },
+      mapHook.componentId
+    );
     <span class="missing-if-branch" title="if path not taken" >I</span>if (!props.visible) {
 <span class="cstat-no" title="statement not covered" >      mapHook.map.map.setLayoutProperty(layerId.current, "visibility", "none");</span>
     }
-  }, [mapHook, props]);
+  }, [mapHook.map, props]);
+&nbsp;
+  useEffect(() =&gt; {
+    <span class="missing-if-branch" title="if path not taken" >I</span>if (initializedRef.current) <span class="cstat-no" title="statement not covered" >return;</span>
+&nbsp;
+    createLayer();
+  }, [createLayer]);
 &nbsp;
   useEffect(() =&gt; {
     if (!mapHook.map || !initializedRef.current) return;
@@ -610,7 +670,7 @@ export default MlWmsLayer;
             <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 May 10 2022 16:37:34 GMT+0000 (Coordinated Universal Time)
+                at Sun Jun 12 2022 17:06:19 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">86.66% </span>
+                <span class="strong">77.5% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>26/30</span>
+                <span class='fraction'>31/40</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">81.25% </span>
+                <span class="strong">59.09% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>13/16</span>
+                <span class='fraction'>13/22</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">80% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>3/3</span>
+                <span class='fraction'>4/5</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">85.71% </span>
+                <span class="strong">78.37% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>24/28</span>
+                <span class='fraction'>29/37</span>
             </div>
         
             
@@ -61,7 +61,7 @@
             </div>
         </template>
     </div>
-    <div class='status-line high'></div>
+    <div class='status-line medium'></div>
     <div class="pad1">
 <table class="coverage-summary">
 <thead>
@@ -79,18 +79,18 @@
 </tr>
 </thead>
 <tbody><tr>
-	<td class="file high" data-value="MlWmsLayer.tsx"><a href="MlWmsLayer.tsx.html">MlWmsLayer.tsx</a></td>
-	<td data-value="86.66" class="pic high">
-	<div class="chart"><div class="cover-fill" style="width: 86%"></div><div class="cover-empty" style="width: 14%"></div></div>
+	<td class="file medium" data-value="MlWmsLayer.tsx"><a href="MlWmsLayer.tsx.html">MlWmsLayer.tsx</a></td>
+	<td data-value="77.5" class="pic medium">
+	<div class="chart"><div class="cover-fill" style="width: 77%"></div><div class="cover-empty" style="width: 23%"></div></div>
 	</td>
-	<td data-value="86.66" class="pct high">86.66%</td>
-	<td data-value="30" class="abs high">26/30</td>
-	<td data-value="81.25" class="pct high">81.25%</td>
-	<td data-value="16" class="abs high">13/16</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="3" class="abs high">3/3</td>
-	<td data-value="85.71" class="pct high">85.71%</td>
-	<td data-value="28" class="abs high">24/28</td>
+	<td data-value="77.5" class="pct medium">77.5%</td>
+	<td data-value="40" class="abs medium">31/40</td>
+	<td data-value="59.09" class="pct medium">59.09%</td>
+	<td data-value="22" class="abs medium">13/22</td>
+	<td data-value="80" class="pct high">80%</td>
+	<td data-value="5" class="abs high">4/5</td>
+	<td data-value="78.37" class="pct medium">78.37%</td>
+	<td data-value="37" class="abs medium">29/37</td>
 	</tr>
 
 </tbody>
@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Tue May 10 2022 16:37:34 GMT+0000 (Coordinated Universal Time)
+                at Sun Jun 12 2022 17:06:19 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -1021,7 +1021,7 @@ export default MlWmsLoader;
             <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 May 10 2022 16:37:34 GMT+0000 (Coordinated Universal Time)
+                at Sun Jun 12 2022 17:06:19 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Tue May 10 2022 16:37:34 GMT+0000 (Coordinated Universal Time)
+                at Sun Jun 12 2022 17:06:19 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/contexts/MapContext.tsx.html

@@ -343,7 +343,7 @@ export default MapContext;</pre></td></tr></table></pre>
             <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 May 10 2022 16:37:34 GMT+0000 (Coordinated Universal Time)
+                at Sun Jun 12 2022 17:06:19 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/contexts/SimpleDataContext.js.html

@@ -88,7 +88,7 @@ export default SimpleDataContext;
             <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 May 10 2022 16:37:34 GMT+0000 (Coordinated Universal Time)
+                at Sun Jun 12 2022 17:06:19 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/contexts/SimpleDataProvider.js.html

@@ -262,7 +262,7 @@ export default SimpleDataProvider;
             <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 May 10 2022 16:37:34 GMT+0000 (Coordinated Universal Time)
+                at Sun Jun 12 2022 17:06:19 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/contexts/index.html

@@ -131,7 +131,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 Tue May 10 2022 16:37:34 GMT+0000 (Coordinated Universal Time)
+                at Sun Jun 12 2022 17:06:19 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/hooks/index.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">55.3% </span>
+                <span class="strong">54.14% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>99/179</span>
+                <span class='fraction'>98/181</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">50.98% </span>
+                <span class="strong">49.05% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>52/102</span>
+                <span class='fraction'>52/106</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">60.71% </span>
+                <span class="strong">57.14% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>17/28</span>
+                <span class='fraction'>16/28</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">55.55% </span>
+                <span class="strong">54.33% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>95/171</span>
+                <span class='fraction'>94/173</span>
             </div>
         
             
@@ -80,17 +80,17 @@
 </thead>
 <tbody><tr>
 	<td class="file medium" data-value="useLayer.ts"><a href="useLayer.ts.html">useLayer.ts</a></td>
-	<td data-value="73.77" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 73%"></div><div class="cover-empty" style="width: 27%"></div></div>
+	<td data-value="69.84" class="pic medium">
+	<div class="chart"><div class="cover-fill" style="width: 69%"></div><div class="cover-empty" style="width: 31%"></div></div>
 	</td>
-	<td data-value="73.77" class="pct medium">73.77%</td>
-	<td data-value="61" class="abs medium">45/61</td>
-	<td data-value="66.66" class="pct medium">66.66%</td>
-	<td data-value="54" class="abs medium">36/54</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="8" class="abs high">8/8</td>
-	<td data-value="74.13" class="pct medium">74.13%</td>
-	<td data-value="58" class="abs medium">43/58</td>
+	<td data-value="69.84" class="pct medium">69.84%</td>
+	<td data-value="63" class="abs medium">44/63</td>
+	<td data-value="62.06" class="pct medium">62.06%</td>
+	<td data-value="58" class="abs medium">36/58</td>
+	<td data-value="87.5" class="pct high">87.5%</td>
+	<td data-value="8" class="abs high">7/8</td>
+	<td data-value="70" class="pct medium">70%</td>
+	<td data-value="60" class="abs medium">42/60</td>
 	</tr>
 
 <tr>
@@ -146,7 +146,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 Tue May 10 2022 16:37:34 GMT+0000 (Coordinated Universal Time)
+                at Sun Jun 12 2022 17:06:19 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/hooks/useLayer.ts.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">73.77% </span>
+                <span class="strong">69.84% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>45/61</span>
+                <span class='fraction'>44/63</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">66.66% </span>
+                <span class="strong">62.06% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>36/54</span>
+                <span class='fraction'>36/58</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">87.5% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>8/8</span>
+                <span class='fraction'>7/8</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">74.13% </span>
+                <span class="strong">70% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>43/58</span>
+                <span class='fraction'>42/60</span>
             </div>
         
             
@@ -250,7 +250,15 @@
 <a name='L185'></a><a href='#L185'>185</a>
 <a name='L186'></a><a href='#L186'>186</a>
 <a name='L187'></a><a href='#L187'>187</a>
-<a name='L188'></a><a href='#L188'>188</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L188'></a><a href='#L188'>188</a>
+<a name='L189'></a><a href='#L189'>189</a>
+<a name='L190'></a><a href='#L190'>190</a>
+<a name='L191'></a><a href='#L191'>191</a>
+<a name='L192'></a><a href='#L192'>192</a>
+<a name='L193'></a><a href='#L193'>193</a>
+<a name='L194'></a><a href='#L194'>194</a>
+<a name='L195'></a><a href='#L195'>195</a>
+<a name='L196'></a><a href='#L196'>196</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>
@@ -354,6 +362,18 @@
 <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">14x</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-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">14x</span>
 <span class="cline-any cline-yes">14x</span>
 <span class="cline-any cline-yes">14x</span>
@@ -417,13 +437,9 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">60x</span>
-<span class="cline-any cline-yes">7x</span>
-<span class="cline-any cline-yes">7x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">60x</span>
 <span class="cline-any cline-yes">14x</span>
 <span class="cline-any cline-yes">7x</span>
+<span class="cline-any cline-yes">7x</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>
@@ -499,7 +515,7 @@ function useLayer(props: useLayerProps): useLayerType {
     <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;
     <span class="missing-if-branch" title="if path not taken" >I</span>if (mapHook.map.map.getLayer(layerId.current)) {
-<span class="cstat-no" title="statement not covered" >      mapHook.map.map.removeLayer(layerId.current);</span>
+<span class="cstat-no" title="statement not covered" >      mapHook.cleanup();</span>
     }
     <span class="missing-if-branch" title="if path not taken" >I</span>if (mapHook.map.map.getSource(layerId.current)) {
 <span class="cstat-no" title="statement not covered" >      mapHook.map.map.removeSource(layerId.current);</span>
@@ -540,6 +556,18 @@ function useLayer(props: useLayerProps): useLayerType {
     <span class="missing-if-branch" title="if path not taken" >I</span>if (typeof props.onLeave !== "undefined") {
 <span class="cstat-no" title="statement not covered" >      mapHook.map.on("mouseleave", layerId.current, props.onLeave, mapHook.componentId);</span>
     }
+&nbsp;
+    // recreate layer if style has changed
+    mapHook.map.on(
+      "styledata",
+<span class="fstat-no" title="function not covered" >      ()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >        if (initializedRef.current &amp;&amp; !mapHook.map?.map.getLayer(layerId.current)) {</span>
+<span class="cstat-no" title="statement not covered" >          console.log("Recreate Layer");</span>
+<span class="cstat-no" title="statement not covered" >          createLayer();</span>
+        }
+      },
+      mapHook.componentId
+    );
 &nbsp;
     layerPaintConfRef.current = JSON.stringify(props.options?.paint);
     layerLayoutConfRef.current = JSON.stringify(props.options?.layout);
@@ -602,15 +630,11 @@ function useLayer(props: useLayerProps): useLayerType {
 <span class="cstat-no" title="statement not covered" >      layerPaintConfRef.current = paintString;</span>
     }
   }, [props.options, mapHook.map]);
-&nbsp;
-  const cleanup = () =&gt; {
-    initializedRef.current = false;
-    mapHook.cleanup();
-  };
 &nbsp;
   useEffect(() =&gt; {
     return () =&gt; {
-      cleanup();
+      initializedRef.current = false;
+      mapHook.cleanup();
     };
   }, []);
 &nbsp;
@@ -631,7 +655,7 @@ export default useLayer;
             <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 May 10 2022 16:37:34 GMT+0000 (Coordinated Universal Time)
+                at Sun Jun 12 2022 17:06:19 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>

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

@@ -340,7 +340,7 @@ export type { useMapType };
             <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 May 10 2022 16:37:34 GMT+0000 (Coordinated Universal Time)
+                at Sun Jun 12 2022 17:06:19 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/hooks/useMapState.ts.html

@@ -637,7 +637,7 @@ export default useMapState;
             <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 May 10 2022 16:37:34 GMT+0000 (Coordinated Universal Time)
+                at Sun Jun 12 2022 17:06:19 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>

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

@@ -343,7 +343,7 @@ export default useWms;
             <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 May 10 2022 16:37:34 GMT+0000 (Coordinated Universal Time)
+                at Sun Jun 12 2022 17:06:19 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>

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

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Tue May 10 2022 16:37:34 GMT+0000 (Coordinated Universal Time)
+                at Sun Jun 12 2022 17:06:19 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../prettify.js"></script>
         <script>