@mapcomponents/react-maplibre 0.1.59 → 0.1.60

package/coverage/lcov-report/src/components/MlShareMapState/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 Oct 04 2022 12:11:13 GMT+0000 (Coordinated Universal Time)
+                at Fri Nov 04 2022 12:45:22 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -742,7 +742,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 Tue Oct 04 2022 12:11:13 GMT+0000 (Coordinated Universal Time)
+                at Fri Nov 04 2022 12:45:22 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 Tue Oct 04 2022 12:11:13 GMT+0000 (Coordinated Universal Time)
+                at Fri Nov 04 2022 12:45:22 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 Tue Oct 04 2022 12:11:13 GMT+0000 (Coordinated Universal Time)
+                at Fri Nov 04 2022 12:45:22 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 Tue Oct 04 2022 12:11:13 GMT+0000 (Coordinated Universal Time)
+                at Fri Nov 04 2022 12:45:22 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -577,7 +577,7 @@ export default MlTransitionGeoJsonLayer;
             <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 Oct 04 2022 12:11:13 GMT+0000 (Coordinated Universal Time)
+                at Fri Nov 04 2022 12:45:22 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/components/MlTransitionGeoJsonLayer/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 Oct 04 2022 12:11:13 GMT+0000 (Coordinated Universal Time)
+                at Fri Nov 04 2022 12:45:22 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 Tue Oct 04 2022 12:11:13 GMT+0000 (Coordinated Universal Time)
+                at Fri Nov 04 2022 12:45:22 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 Tue Oct 04 2022 12:11:13 GMT+0000 (Coordinated Universal Time)
+                at Fri Nov 04 2022 12:45:22 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">80% </span>
+                <span class="strong">79.24% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>36/45</span>
+                <span class='fraction'>42/53</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">59.09% </span>
+                <span class="strong">65.62% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>13/22</span>
+                <span class='fraction'>21/32</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">80% </span>
+                <span class="strong">88.88% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>4/5</span>
+                <span class='fraction'>8/9</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">80.95% </span>
+                <span class="strong">84.78% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>34/42</span>
+                <span class='fraction'>39/46</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>
@@ -202,25 +202,8 @@
 <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></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L140'></a><a href='#L140'>140</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>
@@ -249,22 +232,18 @@
 <span class="cline-any cline-yes">12x</span>
 <span class="cline-any cline-yes">12x</span>
 <span class="cline-any cline-yes">12x</span>
-<span class="cline-any cline-yes">12x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">12x</span>
-<span class="cline-any cline-yes">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-yes">12x</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-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-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-neutral">&nbsp;</span>
@@ -273,13 +252,12 @@
 <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>
-<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">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-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -295,11 +273,11 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</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-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">4x</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-no">&nbsp;</span>
@@ -313,16 +291,11 @@
 <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-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-yes">4x</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-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>
@@ -331,10 +304,6 @@
 <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-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -345,49 +314,45 @@
 <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-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>
 <span class="cline-any cline-neutral">&nbsp;</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">10x</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">12x</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-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-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-yes">12x</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, { useRef, useEffect, useCallback } from "react";
-import useMap from "../../hooks/useMap";
-import PropTypes from "prop-types";
+import useMap from '../../hooks/useMap';
+import { LayerSpecification } from 'maplibre-gl';
+import { VectorSourceSpecification } from 'maplibre-gl';
 &nbsp;
 interface MlVectorTileLayerProps {
 	mapId?: string;
 	insertBeforeLayer?: string;
 	layerId?: string;
-	sourceOptions?: any;
+	sourceOptions?: VectorSourceSpecification;
 	url?: string;
-	layers?: any;
+	layers: LayerSpecification[];
 }
 &nbsp;
 /**
@@ -402,137 +367,118 @@ const MlVectorTileLayer = (props: MlVectorTileLayerProps) =&gt; {
 		waitForLayer: props.insertBeforeLayer,
 	});
 &nbsp;
-	const layerIdsRef = useRef({});
-	const layerId = useRef(props.layerId || "MlVectorTileLayer-" + mapHook.componentId);
+	const layerId = useRef(props.layerId || 'MlVectorTileLayer-' + mapHook.componentId);
 	const layerPaintConfsRef = useRef({});
 	const layerLayoutConfsRef = useRef({});
 	const initializedRef = useRef(false);
 &nbsp;
-	const createLayer = useCallback(() =&gt; {
+	const createLayers = 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>
+		if (mapHook.map.map.getSource(layerId.current)) {
+			mapHook.cleanup();
 		}
 &nbsp;
-		// Add the new layer to the openlayers instance once it is available
+		// Add the new layer to the maplibre instance once it is available
 		mapHook.map.addSource(
 			layerId.current,
 			{
-				type: "vector",
+				type: 'vector',
 				tiles: [props.url],
 				tileSize: 512,
-				attribution: "",
+				attribution: '',
 				...props.sourceOptions,
 			},
 			mapHook.componentId
 		);
 &nbsp;
-		for (let key in props.layers) {
-			let _layerId = layerId.current + "_" + key;
-			layerIdsRef.current[key] = _layerId;
-&nbsp;
+		props.layers.forEach((layer) =&gt; {
+			<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>
 			mapHook.map.addLayer(
 				{
-					id: _layerId,
 					source: layerId.current,
-					type: "line",
 					minzoom: 0,
 					maxzoom: 22,
 					layout: {},
 					paint: {
-						"line-opacity": 0.5,
-						"line-color": "rgb(80, 80, 80)",
-						"line-width": 2,
+						'line-opacity': 0.5,
+						'line-color': 'rgb(80, 80, 80)',
+						'line-width': 2,
 					},
-					...props.layers[key],
+					...layer,
 				},
 				props.insertBeforeLayer,
 				mapHook.componentId
 			);
-			layerPaintConfsRef.current[key] = JSON.stringify(props.layers[key].paint);
-			layerLayoutConfsRef.current[key] = JSON.stringify(props.layers[key].layout);
+			layerPaintConfsRef.current[layer.id] = JSON.stringify(layer.paint);
+			layerLayoutConfsRef.current[layer.id] = JSON.stringify(layer.layout);
 &nbsp;
 			// recreate layer if style has changed
 			mapHook.map.on(
-				"styledata",
+				'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.getSource(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>
+<span class="cstat-no" title="statement not covered" >						console.log('Recreate Layer ' + layerId.current);</span>
+<span class="cstat-no" title="statement not covered" >						createLayers();</span>
 					}
 				},
 				mapHook.componentId
 			);
-		}
+		});
 	}, [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]);
+	const updateLayers = useCallback(() =&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;
-	useEffect(() =&gt; {
-		if (!mapHook.map || !initializedRef.current) return;
-		// initialize the layer and add it to the MapLibre-gl instance or do something else with it
-		for (var key in props.layers) {
-			<span class="missing-if-branch" title="else path not taken" >E</span>if (mapHook.map.map.getLayer(layerIdsRef.current[key])) {
+		props.layers.forEach((layer) =&gt; {
+			<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>
+			<span class="missing-if-branch" title="else path not taken" >E</span>if (mapHook.map.map.getLayer(layer.id)) {
 				// update changed paint property
-				let layerPaintConfString = JSON.stringify(props.layers[key].paint);
+				const layerPaintConfString = JSON.stringify(layer.paint);
 &nbsp;
-				<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" >						mapHook.map.map.setPaintProperty(</span>
-							layerIdsRef.current[key],
-							paintKey,
-							props.layers[key].paint[paintKey]
-						);
+				<span class="missing-if-branch" title="if path not taken" >I</span>if (layerPaintConfString !== layerPaintConfsRef.current[layer.id]) {
+<span class="cstat-no" title="statement not covered" >					for (const paintKey in layer.paint) {</span>
+<span class="cstat-no" title="statement not covered" >						mapHook.map.map.setPaintProperty(layer.id, paintKey, layer.paint[paintKey]);</span>
 					}
 				}
-				layerPaintConfsRef.current[key] = layerPaintConfString;
+				layerPaintConfsRef.current[layer.id] = layerPaintConfString;
 &nbsp;
 				// update changed layout property
-				let layerLayoutConfString = JSON.stringify(props.layers[key].layout);
+				const layerLayoutConfString = JSON.stringify(layer.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" >						mapHook.map.map.setLayoutProperty(</span>
-							layerIdsRef.current[key],
-							layoutKey,
-							props.layers[key].layout[layoutKey]
-						);
+				<span class="missing-if-branch" title="if path not taken" >I</span>if (layerLayoutConfString !== layerLayoutConfsRef.current[layer.id]) {
+<span class="cstat-no" title="statement not covered" >					for (const layoutKey in layer.layout) {</span>
+<span class="cstat-no" title="statement not covered" >						mapHook.map.map.setLayoutProperty(layer.id, layoutKey, layer.layout[layoutKey]);</span>
 					}
 				}
-				layerLayoutConfsRef.current[key] = layerLayoutConfString;
+				layerLayoutConfsRef.current[layer.id] = layerLayoutConfString;
 			}
-		}
+		});
+	}, [mapHook.map, props.layers]);
+&nbsp;
+	// initial layer creation
+	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>
+		createLayers();
+	}, [createLayers]);
+&nbsp;
+	// if layers get removed or added
+	useEffect(() =&gt; {
+		if (!mapHook.map || !initializedRef.current) return;
+		createLayers();
+	}, [props.layers.length, mapHook.map]);
+&nbsp;
+	// on layout/paint update
+	useEffect(() =&gt; {
+		if (!mapHook.map || !initializedRef.current) return;
+		updateLayers();
 	}, [props.layers, mapHook.map]);
 &nbsp;
 	return &lt;&gt;&lt;/&gt;;
 };
 &nbsp;
-MlVectorTileLayer.propTypes = {
-	/**
-	 * Id of the target MapLibre instance in mapContext
-	 */
-	mapId: PropTypes.string,
-	/**
-	 * Options object that will be used as first parameter on the MapLibreGl.addSource call see MapLibre source options documentation.
-	 */
-	sourceOptions: PropTypes.object,
-	/**
-	 * Object that hold layers
-	 */
-	layers: PropTypes.object,
-	/**
-	 * String of the URL of a wms layer
-	 */
-	url: PropTypes.string,
-};
-&nbsp;
 export default MlVectorTileLayer;
 &nbsp;</pre></td></tr></table></pre>
 
@@ -541,7 +487,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 Tue Oct 04 2022 12:11:13 GMT+0000 (Coordinated Universal Time)
+                at Fri Nov 04 2022 12:45:22 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">80% </span>
+                <span class="strong">79.24% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>36/45</span>
+                <span class='fraction'>42/53</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">59.09% </span>
+                <span class="strong">65.62% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>13/22</span>
+                <span class='fraction'>21/32</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">80% </span>
+                <span class="strong">88.88% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>4/5</span>
+                <span class='fraction'>8/9</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">80.95% </span>
+                <span class="strong">84.78% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>34/42</span>
+                <span class='fraction'>39/46</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="MlVectorTileLayer.tsx"><a href="MlVectorTileLayer.tsx.html">MlVectorTileLayer.tsx</a></td>
-	<td data-value="80" class="pic high">
-	<div class="chart"><div class="cover-fill" style="width: 80%"></div><div class="cover-empty" style="width: 20%"></div></div>
+	<td class="file medium" data-value="MlVectorTileLayer.tsx"><a href="MlVectorTileLayer.tsx.html">MlVectorTileLayer.tsx</a></td>
+	<td data-value="79.24" class="pic medium">
+	<div class="chart"><div class="cover-fill" style="width: 79%"></div><div class="cover-empty" style="width: 21%"></div></div>
 	</td>
-	<td data-value="80" class="pct high">80%</td>
-	<td data-value="45" class="abs high">36/45</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="80.95" class="pct high">80.95%</td>
-	<td data-value="42" class="abs high">34/42</td>
+	<td data-value="79.24" class="pct medium">79.24%</td>
+	<td data-value="53" class="abs medium">42/53</td>
+	<td data-value="65.62" class="pct medium">65.62%</td>
+	<td data-value="32" class="abs medium">21/32</td>
+	<td data-value="88.88" class="pct high">88.88%</td>
+	<td data-value="9" class="abs high">8/9</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 Tue Oct 04 2022 12:11:13 GMT+0000 (Coordinated Universal Time)
+                at Fri Nov 04 2022 12:45:22 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 Tue Oct 04 2022 12:11:13 GMT+0000 (Coordinated Universal Time)
+                at Fri Nov 04 2022 12:45:22 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 Tue Oct 04 2022 12:11:13 GMT+0000 (Coordinated Universal Time)
+                at Fri Nov 04 2022 12:45:22 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>