@mapcomponents/react-maplibre 0.1.62 → 0.1.64

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">77.5% </span>
+                <span class="strong">72% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>31/40</span>
+                <span class='fraction'>36/50</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">59.09% </span>
+                <span class="strong">59.25% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>13/22</span>
+                <span class='fraction'>16/27</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">80% </span>
+                <span class="strong">85.71% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>4/5</span>
+                <span class='fraction'>6/7</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">78.37% </span>
+                <span class="strong">71.73% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>29/37</span>
+                <span class='fraction'>33/46</span>
             </div>
         
             
@@ -263,7 +263,26 @@
 <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>
+<a name='L201'></a><a href='#L201'>201</a>
+<a name='L202'></a><a href='#L202'>202</a>
+<a name='L203'></a><a href='#L203'>203</a>
+<a name='L204'></a><a href='#L204'>204</a>
+<a name='L205'></a><a href='#L205'>205</a>
+<a name='L206'></a><a href='#L206'>206</a>
+<a name='L207'></a><a href='#L207'>207</a>
+<a name='L208'></a><a href='#L208'>208</a>
+<a name='L209'></a><a href='#L209'>209</a>
+<a name='L210'></a><a href='#L210'>210</a>
+<a name='L211'></a><a href='#L211'>211</a>
+<a name='L212'></a><a href='#L212'>212</a>
+<a name='L213'></a><a href='#L213'>213</a>
+<a name='L214'></a><a href='#L214'>214</a>
+<a name='L215'></a><a href='#L215'>215</a>
+<a name='L216'></a><a href='#L216'>216</a>
+<a name='L217'></a><a href='#L217'>217</a>
+<a name='L218'></a><a href='#L218'>218</a>
+<a name='L219'></a><a href='#L219'>219</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>
@@ -329,30 +348,34 @@
 <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-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">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-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-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">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-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -402,6 +425,19 @@
 <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-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">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>
@@ -463,25 +499,26 @@
 <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";
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useMemo, useRef, useEffect, useCallback } from 'react';
+import useMap from '../../hooks/useMap';
 &nbsp;
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
+import { RasterLayerSpecification, RasterSourceSpecification } from 'maplibre-gl';
 &nbsp;
 const defaultProps = {
 	visible: true,
 	urlParameters: {
-		bbox: "{bbox-epsg-3857}",
-		format: "image/png",
-		service: "WMS",
-		version: "1.1.1",
-		request: "GetMap",
-		srs: "EPSG:3857",
+		bbox: '{bbox-epsg-3857}',
+		format: 'image/png',
+		service: 'WMS',
+		version: '1.1.1',
+		request: 'GetMap',
+		srs: 'EPSG:3857',
 		width: 256,
 		height: 256,
-		styles: "",
+		styles: '',
 	},
-	attribution: "",
+	attribution: '',
 	sourceOptions: {
 		minZoom: 0,
 		maxZoom: 20,
@@ -493,13 +530,13 @@ const defaultProps = {
 };
 &nbsp;
 interface MlWmsLayerProps {
-	urlParameters?: any;
+	urlParameters?: { [key: string]: string };
 	url: string;
 	visible?: boolean;
 	attribution?: string;
 	mapId?: string;
-	sourceOptions?: any;
-	layerOptions?: any;
+	sourceOptions?: RasterSourceSpecification;
+	layerOptions?: RasterLayerSpecification;
 	insertBeforeLayer?: string;
 	layerId?: string;
 }
@@ -526,40 +563,44 @@ const MlWmsLayer = (props: MlWmsLayerProps) =&gt; {
 	});
 &nbsp;
 	const initializedRef = useRef(false);
-	const layerId = useRef(props.layerId || "MlWmsLayer-" + mapHook.componentId);
-&nbsp;
-	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>
-		}
+	const layerId = useRef(props.layerId || 'MlWmsLayer-' + mapHook.componentId);
 &nbsp;
+	const tileUrl = useMemo(() =&gt; {
 		let _propsUrlParams;
 		let _wmsUrl = props.url;
-		<span class="missing-if-branch" title="if path not taken" >I</span>if (props.url.indexOf("?") !== -1) {
-<span class="cstat-no" title="statement not covered" >			_propsUrlParams = props.url.split("?");</span>
+		<span class="missing-if-branch" title="if path not taken" >I</span>if (props.url.indexOf('?') !== -1) {
+<span class="cstat-no" title="statement not covered" >			_propsUrlParams = props.url.split('?');</span>
 <span class="cstat-no" title="statement not covered" >			_wmsUrl = _propsUrlParams[0];</span>
 		}
-		let _urlParamsFromUrl = new URLSearchParams(_propsUrlParams?.[1]);
+		const _urlParamsFromUrl = new URLSearchParams(_propsUrlParams?.[1]);
 		// first spread in default props manually to enable overriding a single parameter without replacing the whole default urlParameters object
-		let urlParamsObj = {
+		const urlParamsObj = {
 			...defaultProps.urlParameters,
 			...Object.fromEntries(_urlParamsFromUrl),
 			...props.urlParameters,
 		};
-		let urlParams = new URLSearchParams(urlParamsObj);
-		let urlParamsStr =
-			decodeURIComponent(urlParams.toString()) + "".replace(/%2F/g, "/").replace(/%3A/g, ":");
+		const urlParams = new URLSearchParams(urlParamsObj as unknown as Record&lt;string, string&gt;);
+		const urlParamsStr =
+			decodeURIComponent(urlParams.toString()) + ''.replace(/%2F/g, '/').replace(/%3A/g, ':');
+&nbsp;
+		return _wmsUrl + '?' + urlParamsStr;
+	}, [props.urlParameters, props.url]);
+&nbsp;
+	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;
 		mapHook.map.addSource(
 			layerId.current,
 			{
-				type: "raster",
-				tiles: [_wmsUrl + "?" + urlParamsStr],
-				tileSize: urlParamsObj.width,
+				type: 'raster',
+				tiles: [tileUrl],
+				tileSize: 256,
 				attribution: props.attribution,
 				...props.sourceOptions,
 			},
@@ -569,7 +610,7 @@ const MlWmsLayer = (props: MlWmsLayerProps) =&gt; {
 		mapHook.map.addLayer(
 			{
 				id: layerId.current,
-				type: "raster",
+				type: 'raster',
 				source: layerId.current,
 				...props.layerOptions,
 			},
@@ -579,34 +620,47 @@ const MlWmsLayer = (props: MlWmsLayerProps) =&gt; {
 &nbsp;
 		// recreate layer if map style.json 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.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" >					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>
+<span class="cstat-no" title="statement not covered" >			mapHook.map.map.setLayoutProperty(layerId.current, 'visibility', 'none');</span>
 		}
-	}, [mapHook.map, props]);
+	}, [mapHook.map, props, tileUrl]);
 &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; {
+		<span class="missing-if-branch" title="else path not taken" >E</span>if (!mapHook.map || !mapHook.map?.map?.style?.sourceCaches?.[layerId.current] || <span class="branch-2 cbranch-no" title="branch not covered" >!initializedRef.current)</span> return;
+&nbsp;
+		const source = <span class="cstat-no" title="statement not covered" >mapHook.map.map.getSource(layerId.current) as RasterSourceSpecification;</span>
+<span class="cstat-no" title="statement not covered" >		source.tiles = [tileUrl];</span>
+&nbsp;
+<span class="cstat-no" title="statement not covered" >		mapHook.map.map.style.sourceCaches[layerId.current].clearTiles();</span>
+&nbsp;
+<span class="cstat-no" title="statement not covered" >		mapHook.map.map.style.sourceCaches[layerId.current].update(mapHook.map.map.transform);</span>
+&nbsp;
+<span class="cstat-no" title="statement not covered" >		mapHook.map.map.triggerRepaint();</span>
+	}, [mapHook.map, tileUrl]);
 &nbsp;
 	useEffect(() =&gt; {
 		if (!mapHook.map || !initializedRef.current) return;
 &nbsp;
 		// toggle layer visibility by changing the layout object's visibility property
 		if (props.visible) {
-			mapHook.map.map.setLayoutProperty(layerId.current, "visibility", "visible");
+			mapHook.map.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.map.setLayoutProperty(layerId.current, "visibility", "none");</span>
+<span class="cstat-no" title="statement not covered" >			mapHook.map.map.setLayoutProperty(layerId.current, 'visibility', 'none');</span>
 		}
 	}, [props.visible, mapHook.map]);
 &nbsp;
@@ -670,7 +724,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 Sat Nov 26 2022 10:32:12 GMT+0000 (Coordinated Universal Time)
+                at 2023-01-15T17:55:43.336Z
             </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">77.5% </span>
+                <span class="strong">72% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>31/40</span>
+                <span class='fraction'>36/50</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">59.09% </span>
+                <span class="strong">59.25% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>13/22</span>
+                <span class='fraction'>16/27</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">80% </span>
+                <span class="strong">85.71% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>4/5</span>
+                <span class='fraction'>6/7</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">78.37% </span>
+                <span class="strong">71.73% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>29/37</span>
+                <span class='fraction'>33/46</span>
             </div>
         
             
@@ -80,17 +80,17 @@
 </thead>
 <tbody><tr>
 	<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 data-value="72" class="pic medium">
+	<div class="chart"><div class="cover-fill" style="width: 72%"></div><div class="cover-empty" style="width: 28%"></div></div>
 	</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>
+	<td data-value="72" class="pct medium">72%</td>
+	<td data-value="50" class="abs medium">36/50</td>
+	<td data-value="59.25" class="pct medium">59.25%</td>
+	<td data-value="27" class="abs medium">16/27</td>
+	<td data-value="85.71" class="pct high">85.71%</td>
+	<td data-value="7" class="abs high">6/7</td>
+	<td data-value="71.73" class="pct medium">71.73%</td>
+	<td data-value="46" class="abs medium">33/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 Sat Nov 26 2022 10:32:12 GMT+0000 (Coordinated Universal Time)
+                at 2023-01-15T17:55:43.336Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>