@mapcomponents/react-maplibre 0.1.18 → 0.1.22

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 Thu Jan 13 2022 12:08:19 GMT+0000 (Coordinated Universal Time)
+                at Sun Jan 23 2022 11:43:07 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 Thu Jan 13 2022 12:08:19 GMT+0000 (Coordinated Universal Time)
+                at Sun Jan 23 2022 11:43:07 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 Thu Jan 13 2022 12:08:19 GMT+0000 (Coordinated Universal Time)
+                at Sun Jan 23 2022 11:43:07 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 Thu Jan 13 2022 12:08:19 GMT+0000 (Coordinated Universal Time)
+                at Sun Jan 23 2022 11:43:07 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 Thu Jan 13 2022 12:08:19 GMT+0000 (Coordinated Universal Time)
+                at Sun Jan 23 2022 11:43:07 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 Thu Jan 13 2022 12:08:19 GMT+0000 (Coordinated Universal Time)
+                at Sun Jan 23 2022 11:43:07 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 Thu Jan 13 2022 12:08:19 GMT+0000 (Coordinated Universal Time)
+                at Sun Jan 23 2022 11:43:07 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">83.92% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>42/47</span>
+                <span class='fraction'>47/56</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">63.63% </span>
+                <span class="strong">57.69% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>14/22</span>
+                <span class='fraction'>15/26</span>
             </div>
         
             
@@ -44,9 +44,9 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">88.63% </span>
+                <span class="strong">83.01% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>39/44</span>
+                <span class='fraction'>44/53</span>
             </div>
         
             
@@ -196,7 +196,38 @@
 <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>
+<a name='L147'></a><a href='#L147'>147</a>
+<a name='L148'></a><a href='#L148'>148</a>
+<a name='L149'></a><a href='#L149'>149</a>
+<a name='L150'></a><a href='#L150'>150</a>
+<a name='L151'></a><a href='#L151'>151</a>
+<a name='L152'></a><a href='#L152'>152</a>
+<a name='L153'></a><a href='#L153'>153</a>
+<a name='L154'></a><a href='#L154'>154</a>
+<a name='L155'></a><a href='#L155'>155</a>
+<a name='L156'></a><a href='#L156'>156</a>
+<a name='L157'></a><a href='#L157'>157</a>
+<a name='L158'></a><a href='#L158'>158</a>
+<a name='L159'></a><a href='#L159'>159</a>
+<a name='L160'></a><a href='#L160'>160</a>
+<a name='L161'></a><a href='#L161'>161</a>
+<a name='L162'></a><a href='#L162'>162</a>
+<a name='L163'></a><a href='#L163'>163</a>
+<a name='L164'></a><a href='#L164'>164</a>
+<a name='L165'></a><a href='#L165'>165</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>
@@ -216,6 +247,7 @@
 <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-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">8x</span>
 <span class="cline-any cline-yes">2x</span>
@@ -268,6 +300,7 @@
 <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>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -277,6 +310,23 @@
 <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-yes">4x</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-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-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">4x</span>
@@ -298,14 +348,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 +387,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";
@@ -347,6 +409,7 @@ const MlVectorTileLayer = (props) =&gt; {
   const idSuffixRef = useRef(new Date().getTime());
   const layerIdsRef = useRef({});
   const layerPaintConfsRef = useRef({});
+  const layerLayoutConfsRef = useRef({});
   const initializedRef = useRef(false);
   const mapRef = useRef(null);
 &nbsp;
@@ -379,7 +442,7 @@ const MlVectorTileLayer = (props) =&gt; {
       tiles: [props.url],
       tileSize: 512,
       attribution: "",
-      //...props.sourceOptions,
+      ...props.sourceOptions,
     });
 &nbsp;
     for (let key in props.layers) {
@@ -401,6 +464,7 @@ const MlVectorTileLayer = (props) =&gt; {
         ...props.layers[key],
       });
       layerPaintConfsRef.current[key] = JSON.stringify(props.layers[key].paint);
+      layerLayoutConfsRef.current[key] = JSON.stringify(props.layers[key].layout);
     }
   }, [mapContext.mapIds, props, mapContext]);
 &nbsp;
@@ -410,9 +474,10 @@ const MlVectorTileLayer = (props) =&gt; {
     // initialize the layer and add it to the MapLibre-gl instance or do something else with it
     for (var key in props.layers) {
       if (mapRef.current.getLayer(layerIdsRef.current[key])) {
-        let layerConfString = JSON.stringify(props.layers[key].paint);
+        // update changed paint property
+        let layerPaintConfString = JSON.stringify(props.layers[key].paint);
 &nbsp;
-        <span class="missing-if-branch" title="if path not taken" >I</span>if (layerConfString !== layerPaintConfsRef.current[key]) {
+        <span class="missing-if-branch" title="if path not taken" >I</span>if (layerPaintConfString !== layerPaintConfsRef.current[key]) {
 <span class="cstat-no" title="statement not covered" >          for (let paintKey in props.layers[key].paint) {</span>
 <span class="cstat-no" title="statement not covered" >            mapContext</span>
               .getMap(props.mapId)
@@ -423,7 +488,23 @@ const MlVectorTileLayer = (props) =&gt; {
               );
           }
         }
-        layerPaintConfsRef.current[key] = layerConfString;
+        layerPaintConfsRef.current[key] = layerPaintConfString;
+&nbsp;
+        // update changed layout property
+        let layerLayoutConfString = JSON.stringify(props.layers[key].layout);
+&nbsp;
+        <span class="missing-if-branch" title="if path not taken" >I</span>if (layerLayoutConfString !== layerLayoutConfsRef.current[key]) {
+<span class="cstat-no" title="statement not covered" >          for (let layoutKey in props.layers[key].layout) {</span>
+<span class="cstat-no" title="statement not covered" >            mapContext</span>
+              .getMap(props.mapId)
+              .setLayoutProperty(
+                layerIdsRef.current[key],
+                layoutKey,
+                props.layers[key].layout[layoutKey]
+              );
+          }
+        }
+        layerLayoutConfsRef.current[key] = layerLayoutConfString;
       }
     }
   }, [props.layers, props, mapContext]);
@@ -431,11 +512,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 +544,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 +562,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 Thu Jan 13 2022 12:08:19 GMT+0000 (Coordinated Universal Time)
+                at Sun Jan 23 2022 11:43:07 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">83.92% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>42/47</span>
+                <span class='fraction'>47/56</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">63.63% </span>
+                <span class="strong">57.69% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>14/22</span>
+                <span class='fraction'>15/26</span>
             </div>
         
             
@@ -44,9 +44,9 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">88.63% </span>
+                <span class="strong">83.01% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>39/44</span>
+                <span class='fraction'>44/53</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="83.92" class="pic high">
+	<div class="chart"><div class="cover-fill" style="width: 83%"></div><div class="cover-empty" style="width: 17%"></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="83.92" class="pct high">83.92%</td>
+	<td data-value="56" class="abs high">47/56</td>
+	<td data-value="57.69" class="pct medium">57.69%</td>
+	<td data-value="26" class="abs medium">15/26</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="83.01" class="pct high">83.01%</td>
+	<td data-value="53" class="abs high">44/53</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 Thu Jan 13 2022 12:08:19 GMT+0000 (Coordinated Universal Time)
+                at Sun Jan 23 2022 11:43:07 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 Thu Jan 13 2022 12:08:19 GMT+0000 (Coordinated Universal Time)
+                at Sun Jan 23 2022 11:43:07 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 Thu Jan 13 2022 12:08:19 GMT+0000 (Coordinated Universal Time)
+                at Sun Jan 23 2022 11:43:07 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>