@mapcomponents/react-maplibre 0.1.20 → 0.1.21

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

@@ -25,28 +25,28 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>0/87</span>
+                <span class='fraction'>0/108</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/42</span>
+                <span class='fraction'>0/54</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>0/10</span>
+                <span class='fraction'>0/19</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>0/81</span>
+                <span class='fraction'>0/100</span>
             </div>
         
             
@@ -84,13 +84,13 @@
 	<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
 	</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="87" class="abs low">0/87</td>
+	<td data-value="108" class="abs low">0/108</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="42" class="abs low">0/42</td>
+	<td data-value="54" class="abs low">0/54</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="10" class="abs low">0/10</td>
+	<td data-value="19" class="abs low">0/19</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="81" class="abs low">0/81</td>
+	<td data-value="100" class="abs low">0/100</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 Mon Jan 17 2022 10:02:27 GMT+0000 (Coordinated Universal Time)
+                at Fri Jan 21 2022 19:54:16 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -769,7 +769,7 @@ export default MlSpatialElevationProfile;
             <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 17 2022 10:02:27 GMT+0000 (Coordinated Universal Time)
+                at Fri Jan 21 2022 19:54:16 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/components/MlSpatialElevationProfile/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 Mon Jan 17 2022 10:02:27 GMT+0000 (Coordinated Universal Time)
+                at Fri Jan 21 2022 19:54:16 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -688,7 +688,7 @@ export default MlThreeJsLayer;</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 Mon Jan 17 2022 10:02:27 GMT+0000 (Coordinated Universal Time)
+                at Fri Jan 21 2022 19:54:16 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/components/MlThreeJsLayer/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 Mon Jan 17 2022 10:02:27 GMT+0000 (Coordinated Universal Time)
+                at Fri Jan 21 2022 19:54:16 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -295,7 +295,7 @@ export default MlUseMapDebugger;
             <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 17 2022 10:02:27 GMT+0000 (Coordinated Universal Time)
+                at Fri Jan 21 2022 19:54:16 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/components/MlUseMapDebugger/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 Mon Jan 17 2022 10:02:27 GMT+0000 (Coordinated Universal Time)
+                at Fri Jan 21 2022 19:54:16 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -23,16 +23,16 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">89.36% </span>
+                <span class="strong">85.71% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>42/47</span>
+                <span class='fraction'>42/49</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">63.63% </span>
+                <span class="strong">58.33% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>14/22</span>
+                <span class='fraction'>14/24</span>
             </div>
         
             
@@ -44,9 +44,9 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">88.63% </span>
+                <span class="strong">84.78% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>39/44</span>
+                <span class='fraction'>39/46</span>
             </div>
         
             
@@ -196,7 +196,19 @@
 <a name='L131'></a><a href='#L131'>131</a>
 <a name='L132'></a><a href='#L132'>132</a>
 <a name='L133'></a><a href='#L133'>133</a>
-<a name='L134'></a><a href='#L134'>134</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L134'></a><a href='#L134'>134</a>
+<a name='L135'></a><a href='#L135'>135</a>
+<a name='L136'></a><a href='#L136'>136</a>
+<a name='L137'></a><a href='#L137'>137</a>
+<a name='L138'></a><a href='#L138'>138</a>
+<a name='L139'></a><a href='#L139'>139</a>
+<a name='L140'></a><a href='#L140'>140</a>
+<a name='L141'></a><a href='#L141'>141</a>
+<a name='L142'></a><a href='#L142'>142</a>
+<a name='L143'></a><a href='#L143'>143</a>
+<a name='L144'></a><a href='#L144'>144</a>
+<a name='L145'></a><a href='#L145'>145</a>
+<a name='L146'></a><a href='#L146'>146</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>
@@ -298,14 +310,22 @@
 <span class="cline-any cline-yes">8x</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-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-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-neutral">&nbsp;</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>
@@ -329,6 +349,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-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useContext, useRef, useEffect } from "react";
 import { MapContext } from "@mapcomponents/react-core";
 import PropTypes from "prop-types";
@@ -431,11 +455,19 @@ const MlVectorTileLayer = (props) =&gt; {
   useEffect(() =&gt; {
     if (!mapRef.current) return;
 &nbsp;
-    // toggle layer visibility by changing the layout object's visibility property
-<span class="cstat-no" title="statement not covered" >    if (props.visible) {</span>
-<span class="cstat-no" title="statement not covered" >      mapRef.current.setLayoutProperty(layerName + idSuffixRef.current, "visibility", "visible");</span>
-    } else {
-<span class="cstat-no" title="statement not covered" >      mapRef.current.setLayoutProperty(layerName + idSuffixRef.current, "visibility", "none");</span>
+<span class="cstat-no" title="statement not covered" >    for (var key in props.layers) {</span>
+<span class="cstat-no" title="statement not covered" >      if (mapRef.current.getLayer(layerIdsRef.current[key])) {</span>
+        // toggle layer visibility by changing the layout object's visibility property
+<span class="cstat-no" title="statement not covered" >        if (props.visible) {</span>
+<span class="cstat-no" title="statement not covered" >          mapContext</span>
+            .getMap(props.mapId)
+            .setLayoutProperty(layerIdsRef.current[key], "visibility", "visible");
+        } else {
+<span class="cstat-no" title="statement not covered" >          mapContext</span>
+            .getMap(props.mapId)
+            .setLayoutProperty(layerIdsRef.current[key], "visibility", "none");
+        }
+      }
     }
   }, [props.visible]);
 &nbsp;
@@ -455,6 +487,10 @@ MlVectorTileLayer.propTypes = {
    * Object that hold layers
    */
   layers: PropTypes.object,
+  /**
+   * Boolean value to control the visibility of this layer
+   */
+  visible: PropTypes.bool,
   /**
    * String of the URL of a wms layer
    */
@@ -469,7 +505,7 @@ export default MlVectorTileLayer;
             <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 17 2022 10:02:27 GMT+0000 (Coordinated Universal Time)
+                at Fri Jan 21 2022 19:54:16 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -23,16 +23,16 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">89.36% </span>
+                <span class="strong">85.71% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>42/47</span>
+                <span class='fraction'>42/49</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">63.63% </span>
+                <span class="strong">58.33% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>14/22</span>
+                <span class='fraction'>14/24</span>
             </div>
         
             
@@ -44,9 +44,9 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">88.63% </span>
+                <span class="strong">84.78% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>39/44</span>
+                <span class='fraction'>39/46</span>
             </div>
         
             
@@ -80,17 +80,17 @@
 </thead>
 <tbody><tr>
 	<td class="file high" data-value="MlVectorTileLayer.js"><a href="MlVectorTileLayer.js.html">MlVectorTileLayer.js</a></td>
-	<td data-value="89.36" class="pic high">
-	<div class="chart"><div class="cover-fill" style="width: 89%"></div><div class="cover-empty" style="width: 11%"></div></div>
+	<td data-value="85.71" class="pic high">
+	<div class="chart"><div class="cover-fill" style="width: 85%"></div><div class="cover-empty" style="width: 15%"></div></div>
 	</td>
-	<td data-value="89.36" class="pct high">89.36%</td>
-	<td data-value="47" class="abs high">42/47</td>
-	<td data-value="63.63" class="pct medium">63.63%</td>
-	<td data-value="22" class="abs medium">14/22</td>
+	<td data-value="85.71" class="pct high">85.71%</td>
+	<td data-value="49" class="abs high">42/49</td>
+	<td data-value="58.33" class="pct medium">58.33%</td>
+	<td data-value="24" class="abs medium">14/24</td>
 	<td data-value="100" class="pct high">100%</td>
 	<td data-value="6" class="abs high">6/6</td>
-	<td data-value="88.63" class="pct high">88.63%</td>
-	<td data-value="44" class="abs high">39/44</td>
+	<td data-value="84.78" class="pct high">84.78%</td>
+	<td data-value="46" class="abs high">39/46</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 Mon Jan 17 2022 10:02:27 GMT+0000 (Coordinated Universal Time)
+                at Fri Jan 21 2022 19:54:16 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -262,7 +262,7 @@ export default MlWmsFeatureInfoPopup;
             <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 17 2022 10:02:27 GMT+0000 (Coordinated Universal Time)
+                at Fri Jan 21 2022 19:54:16 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/components/MlWmsFeatureInfoPopup/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 Mon Jan 17 2022 10:02:27 GMT+0000 (Coordinated Universal Time)
+                at Fri Jan 21 2022 19:54:16 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">83.33% </span>
+                <span class="strong">86.66% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>35/42</span>
+                <span class='fraction'>26/30</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">63.63% </span>
+                <span class="strong">81.25% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>14/22</span>
+                <span class='fraction'>13/16</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>5/5</span>
+                <span class='fraction'>3/3</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">84.61% </span>
+                <span class="strong">85.71% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>33/39</span>
+                <span class='fraction'>24/28</span>
             </div>
         
             
@@ -229,25 +229,7 @@
 <a name='L164'></a><a href='#L164'>164</a>
 <a name='L165'></a><a href='#L165'>165</a>
 <a name='L166'></a><a href='#L166'>166</a>
-<a name='L167'></a><a href='#L167'>167</a>
-<a name='L168'></a><a href='#L168'>168</a>
-<a name='L169'></a><a href='#L169'>169</a>
-<a name='L170'></a><a href='#L170'>170</a>
-<a name='L171'></a><a href='#L171'>171</a>
-<a name='L172'></a><a href='#L172'>172</a>
-<a name='L173'></a><a href='#L173'>173</a>
-<a name='L174'></a><a href='#L174'>174</a>
-<a name='L175'></a><a href='#L175'>175</a>
-<a name='L176'></a><a href='#L176'>176</a>
-<a name='L177'></a><a href='#L177'>177</a>
-<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>
-<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></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L167'></a><a href='#L167'>167</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>
@@ -294,33 +276,15 @@
 <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">8x</span>
+<span class="cline-any cline-yes">12x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">8x</span>
-<span class="cline-any cline-yes">8x</span>
-<span class="cline-any cline-yes">8x</span>
-<span class="cline-any cline-yes">8x</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">8x</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-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-neutral">&nbsp;</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">8x</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-yes">4x</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-yes">4x</span>
@@ -367,18 +331,18 @@
 <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">8x</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-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-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">8x</span>
+<span class="cline-any cline-yes">12x</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>
@@ -431,8 +395,8 @@
 <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 } from "react";
-import { MapContext } from "@mapcomponents/react-core";
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useRef, useEffect } from "react";
+import useMap from "../../hooks/useMap";
 &nbsp;
 import PropTypes from "prop-types";
 import { v4 as uuidv4 } from "uuid";
@@ -478,31 +442,13 @@ const defaultProps = {
  * @component
  */
 const MlWmsLayer = (props) =&gt; {
-  const mapContext = useContext(MapContext);
+  const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
 &nbsp;
-  const componentId = useRef(props.layerId || ("MlWmsLayer-" + uuidv4()));
-  const mapRef = useRef(null);
   const initializedRef = useRef(false);
-  const layerId = useRef(props.layerId || componentId.current);
+  const layerId = useRef(props.layerId || "MlWmsLayer-" + mapHook.componentId);
 &nbsp;
   useEffect(() =&gt; {
-    let _componentId = componentId.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 = null;
-      }
-      initializedRef.current = false;
-    };
-  }, []);
-&nbsp;
-  useEffect(() =&gt; {
-    if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
-&nbsp;
-    mapRef.current = mapContext.getMap(props.mapId);
-    <span class="missing-if-branch" title="if path not taken" >I</span>if (!mapRef.current) <span class="cstat-no" title="statement not covered" >return;</span>
+    if (!mapHook.map || initializedRef.current) return;
 &nbsp;
     initializedRef.current = true;
 &nbsp;
@@ -523,7 +469,7 @@ const MlWmsLayer = (props) =&gt; {
     let urlParamsStr =
       decodeURIComponent(urlParams.toString()) + "".replace(/%2F/g, "/").replace(/%3A/g, ":");
 &nbsp;
-    mapRef.current.addSource(
+    mapHook.map.addSource(
       layerId.current,
       {
         type: "raster",
@@ -532,35 +478,35 @@ const MlWmsLayer = (props) =&gt; {
         attribution: props.attribution,
         ...props.sourceOptions,
       },
-      componentId.current
+      mapHook.componentId
     );
 &nbsp;
-    mapRef.current.addLayer(
+    mapHook.map.addLayer(
       {
         id: layerId.current,
         type: "raster",
-        source: componentId.current,
+        source: layerId.current,
         ...props.layerOptions,
       },
       props.insertBeforeLayer,
-      componentId.current
+      mapHook.componentId
     );
 &nbsp;
     <span class="missing-if-branch" title="if path not taken" >I</span>if (!props.visible) {
-<span class="cstat-no" title="statement not covered" >      mapRef.current.setLayoutProperty(componentId.current, "visibility", "none");</span>
+<span class="cstat-no" title="statement not covered" >      mapHook.map.setLayoutProperty(layerId.current, "visibility", "none");</span>
     }
-  }, [mapContext.mapIds, mapContext, props]);
+  }, [mapHook.map, props]);
 &nbsp;
   useEffect(() =&gt; {
-    if (!mapRef.current || <span class="branch-1 cbranch-no" title="branch not covered" >!initializedRef.current)</span> return;
+    if (!mapHook.map || !initializedRef.current) return;
 &nbsp;
     // toggle layer visibility by changing the layout object's visibility property
-<span class="cstat-no" title="statement not covered" >    if (props.visible) {</span>
-<span class="cstat-no" title="statement not covered" >      mapRef.current.setLayoutProperty(componentId.current, "visibility", "visible");</span>
-    } else {
-<span class="cstat-no" title="statement not covered" >      mapRef.current.setLayoutProperty(componentId.current, "visibility", "none");</span>
+    if (props.visible) {
+      mapHook.map.setLayoutProperty(layerId.current, "visibility", "visible");
+    } else <span class="missing-if-branch" title="else path not taken" >E</span>{
+<span class="cstat-no" title="statement not covered" >      mapHook.map.setLayoutProperty(layerId.current, "visibility", "none");</span>
     }
-  }, [props.visible]);
+  }, [props.visible, mapHook.map]);
 &nbsp;
   return &lt;&gt;&lt;/&gt;;
 };
@@ -622,7 +568,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 Mon Jan 17 2022 10:02:27 GMT+0000 (Coordinated Universal Time)
+                at Fri Jan 21 2022 19:54:16 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>