@mapcomponents/react-maplibre 0.1.57 → 0.1.58

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

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">56.35% </span>
+                <span class="strong">43.64% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>102/181</span>
+                <span class='fraction'>103/236</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">52.83% </span>
+                <span class="strong">39.47% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>56/106</span>
+                <span class='fraction'>60/152</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">57.14% </span>
+                <span class="strong">43.24% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>16/28</span>
+                <span class='fraction'>16/37</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">56.64% </span>
+                <span class="strong">44.39% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>98/173</span>
+                <span class='fraction'>99/223</span>
             </div>
         
             
@@ -61,7 +61,7 @@
             </div>
         </template>
     </div>
-    <div class='status-line medium'></div>
+    <div class='status-line low'></div>
     <div class="pad1">
 <table class="coverage-summary">
 <thead>
@@ -80,17 +80,32 @@
 </thead>
 <tbody><tr>
 	<td class="file medium" data-value="useLayer.ts"><a href="useLayer.ts.html">useLayer.ts</a></td>
-	<td data-value="76.19" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 76%"></div><div class="cover-empty" style="width: 24%"></div></div>
+	<td data-value="74.24" class="pic medium">
+	<div class="chart"><div class="cover-fill" style="width: 74%"></div><div class="cover-empty" style="width: 26%"></div></div>
 	</td>
-	<td data-value="76.19" class="pct medium">76.19%</td>
-	<td data-value="63" class="abs medium">48/63</td>
-	<td data-value="68.96" class="pct medium">68.96%</td>
-	<td data-value="58" class="abs medium">40/58</td>
+	<td data-value="74.24" class="pct medium">74.24%</td>
+	<td data-value="66" class="abs medium">49/66</td>
+	<td data-value="64.7" class="pct medium">64.7%</td>
+	<td data-value="68" class="abs medium">44/68</td>
 	<td data-value="87.5" class="pct high">87.5%</td>
 	<td data-value="8" class="abs high">7/8</td>
-	<td data-value="76.66" class="pct medium">76.66%</td>
-	<td data-value="60" class="abs medium">46/60</td>
+	<td data-value="74.6" class="pct medium">74.6%</td>
+	<td data-value="63" class="abs medium">47/63</td>
+	</tr>
+
+<tr>
+	<td class="file low" data-value="useLayerEvent.js"><a href="useLayerEvent.js.html">useLayerEvent.js</a></td>
+	<td data-value="0" class="pic low">
+	<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="23" class="abs low">0/23</td>
+	<td data-value="0" class="pct low">0%</td>
+	<td data-value="16" class="abs low">0/16</td>
+	<td data-value="0" class="pct low">0%</td>
+	<td data-value="3" class="abs low">0/3</td>
+	<td data-value="0" class="pct low">0%</td>
+	<td data-value="21" class="abs low">0/21</td>
 	</tr>
 
 <tr>
@@ -123,6 +138,21 @@
 	<td data-value="48" class="abs medium">27/48</td>
 	</tr>
 
+<tr>
+	<td class="file low" data-value="useSource.ts"><a href="useSource.ts.html">useSource.ts</a></td>
+	<td data-value="0" class="pic low">
+	<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="29" class="abs low">0/29</td>
+	<td data-value="0" class="pct low">0%</td>
+	<td data-value="20" class="abs low">0/20</td>
+	<td data-value="0" class="pct low">0%</td>
+	<td data-value="6" class="abs low">0/6</td>
+	<td data-value="0" class="pct low">0%</td>
+	<td data-value="26" class="abs low">0/26</td>
+	</tr>
+
 <tr>
 	<td class="file low" data-value="useWms.js"><a href="useWms.js.html">useWms.js</a></td>
 	<td data-value="2.7" class="pic low">
@@ -146,7 +176,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 Aug 30 2022 13:27:18 GMT+0000 (Coordinated Universal Time)
+                at Tue Oct 04 2022 11:59:51 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>

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

@@ -23,16 +23,16 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">76.19% </span>
+                <span class="strong">74.24% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>48/63</span>
+                <span class='fraction'>49/66</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">68.96% </span>
+                <span class="strong">64.7% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>40/58</span>
+                <span class='fraction'>44/68</span>
             </div>
         
             
@@ -44,9 +44,9 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">76.66% </span>
+                <span class="strong">74.6% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>46/60</span>
+                <span class='fraction'>47/63</span>
             </div>
         
             
@@ -261,7 +261,22 @@
 <a name='L196'></a><a href='#L196'>196</a>
 <a name='L197'></a><a href='#L197'>197</a>
 <a name='L198'></a><a href='#L198'>198</a>
-<a name='L199'></a><a href='#L199'>199</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<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>
+<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></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>
@@ -331,6 +346,13 @@
 <span class="cline-any cline-yes">26x</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">26x</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-yes">26x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">26x</span>
@@ -354,6 +376,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-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">26x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">26x</span>
@@ -404,6 +431,7 @@
 <span class="cline-any cline-yes">49x</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>
@@ -459,201 +487,215 @@
 <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 { useState, useEffect, useCallback, useRef } from "react";
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { useState, useEffect, useCallback, useRef } from 'react';
 &nbsp;
-import useMap, { useMapType } from "./useMap";
+import useMap, { useMapType } from './useMap';
 &nbsp;
-import { LayerSpecification } from "maplibre-gl";
+import { SourceSpecification, LayerSpecification } from 'maplibre-gl';
 &nbsp;
-import MapLibreGlWrapper from "../components/MapLibreMap/lib/MapLibreGlWrapper";
+import MapLibreGlWrapper from '../components/MapLibreMap/lib/MapLibreGlWrapper';
 &nbsp;
-import { MapLayerMouseEvent } from "maplibre-gl";
-import { GeoJSONObject } from "@turf/turf";
+import { MapLayerMouseEvent } from 'maplibre-gl';
+import { GeoJSONObject } from '@turf/turf';
 &nbsp;
 type useLayerType = {
-  map: MapLibreGlWrapper | undefined;
-  layer: LayerSpecification;
-  layerId: string;
-  componentId: string;
-  mapHook: useMapType;
+	map: MapLibreGlWrapper | undefined;
+	layer: LayerSpecification;
+	layerId: string;
+	componentId: string;
+	mapHook: useMapType;
 };
 &nbsp;
 interface useLayerProps {
-  mapId?: string;
-  layerId?: string;
-  idPrefix?: string;
-  insertBeforeLayer?: string;
-  insertBeforeFirstSymbolLayer?: boolean;
-  geojson?: GeoJSONObject;
-  options: Partial&lt;LayerSpecification&gt;;
-  onHover?: MapLayerMouseEvent;
-  onClick?: MapLayerMouseEvent;
-  onLeave?: MapLayerMouseEvent;
+	mapId?: string;
+	layerId?: string;
+	idPrefix?: string;
+	insertBeforeLayer?: string;
+	insertBeforeFirstSymbolLayer?: boolean;
+	geojson?: GeoJSONObject;
+	source?: SourceSpecification | string;
+	options: Partial&lt;LayerSpecification&gt;;
+	onHover?: MapLayerMouseEvent;
+	onClick?: MapLayerMouseEvent;
+	onLeave?: MapLayerMouseEvent;
 }
 &nbsp;
 const legalLayerTypes = [
-  "fill",
-  "line",
-  "symbol",
-  "circle",
-  "heatmap",
-  "fill-extrusion",
-  "raster",
-  "hillshade",
-  "background",
+	'fill',
+	'line',
+	'symbol',
+	'circle',
+	'heatmap',
+	'fill-extrusion',
+	'raster',
+	'hillshade',
+	'background',
 ];
 &nbsp;
 function useLayer(props: useLayerProps): useLayerType {
-  const mapHook = useMap({
-    mapId: props.mapId,
-    waitForLayer: props.insertBeforeLayer,
-  });
-&nbsp;
-  const layerTypeRef = useRef&lt;string&gt;("");
-  const layerPaintConfRef = useRef&lt;string&gt;("");
-  const layerLayoutConfRef = useRef&lt;string&gt;("");
-&nbsp;
-  const [layer, setLayer] = useState&lt;any&gt;();
-&nbsp;
-  const initializedRef = useRef&lt;boolean&gt;(false);
-  const layerId = useRef(
-    props.layerId || (props.idPrefix ? props.idPrefix : <span class="branch-1 cbranch-no" title="branch not covered" >"Layer-")</span> + mapHook.componentId
-  );
-&nbsp;
-  const createLayer = useCallback(() =&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>
-&nbsp;
-    if (mapHook.map.map.getLayer(layerId.current)) {
-      mapHook.cleanup();
-    }
-    <span class="missing-if-branch" title="if path not taken" >I</span>if (mapHook.map.map.getSource(layerId.current)) {
-<span class="cstat-no" title="statement not covered" >      mapHook.map.map.removeSource(layerId.current);</span>
-    }
-    initializedRef.current = true;
-&nbsp;
-    mapHook.map.addLayer(
-      {
-        ...props.options,
-        ...(props.geojson
-          ? {
-              source: {
-                type: "geojson",
-                data: props.geojson,
-              },
-            }
-          : {}),
-        id: layerId.current,
-      },
-      props.insertBeforeLayer
-        ? <span class="branch-0 cbranch-no" title="branch not covered" >props.insertBeforeLayer</span>
-        : props.insertBeforeFirstSymbolLayer
-        ? mapHook.map.firstSymbolLayer
-        : undefined,
-      mapHook.componentId
-    );
-&nbsp;
-    setLayer(mapHook.map.map.getLayer(layerId.current));
-&nbsp;
-    if (typeof props.onHover !== "undefined") {
-      mapHook.map.on("mousemove", layerId.current, props.onHover, mapHook.componentId);
-    }
-&nbsp;
-    if (typeof props.onClick !== "undefined") {
-      mapHook.map.on("click", layerId.current, props.onClick, mapHook.componentId);
-    }
-&nbsp;
-    if (typeof props.onLeave !== "undefined") {
-      mapHook.map.on("mouseleave", layerId.current, props.onLeave, mapHook.componentId);
-    }
-&nbsp;
-    // recreate layer if style has changed
-    mapHook.map.on(
-      "styledata",
-<span class="fstat-no" title="function not covered" >      ()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >        if (initializedRef.current &amp;&amp; !mapHook.map?.map.getLayer(layerId.current)) {</span>
-<span class="cstat-no" title="statement not covered" >          console.log("Recreate Layer");</span>
-<span class="cstat-no" title="statement not covered" >          createLayer();</span>
-        }
-      },
-      mapHook.componentId
-    );
-&nbsp;
-    layerPaintConfRef.current = JSON.stringify(props.options?.paint);
-    layerLayoutConfRef.current = JSON.stringify(props.options?.layout);
-    layerTypeRef.current = props.options.type as LayerSpecification['type'];
-  }, [props, mapHook.map]);
-&nbsp;
-  useEffect(() =&gt; {
-    if (!mapHook.map) return;
-&nbsp;
-    if (
-      initializedRef.current &amp;&amp;
-      (legalLayerTypes.indexOf(props.options.type as LayerSpecification['type']) === -1 ||
-        (legalLayerTypes.indexOf(props.options.type as LayerSpecification['type']) !== -1 &amp;&amp;
-          props.options.type === layerTypeRef.current))
-    ) {
-      return;
-    }
-&nbsp;
-    createLayer();
-  }, [mapHook.map, props.options, createLayer]);
-&nbsp;
-  useEffect(() =&gt; {
-    if (!initializedRef.current || !mapHook.map?.map?.getSource(layerId.current)) return;
-&nbsp;
-    //@ts-ignore setData only exists on GeoJsonSource
-    mapHook.map.map.getSource(layerId.current)?.setData?.(props.geojson);
-  }, [props.geojson, mapHook.map, props.options.type]);
-&nbsp;
-  useEffect(() =&gt; {
-    if (
-      !mapHook.map ||
-      !mapHook.map?.map?.getLayer?.(layerId.current) ||
-      !initializedRef.current ||
-      props.options.type !== layerTypeRef.current
-    )
-      return;
-&nbsp;
-    var key;
-&nbsp;
-    let layoutString = JSON.stringify(props.options.layout);
-    <span class="missing-if-branch" title="if path not taken" >I</span>if (props.options.layout &amp;&amp; layoutString !== layerLayoutConfRef.current) {
-      let oldLayout = <span class="cstat-no" title="statement not covered" >JSON.parse(layerLayoutConfRef.current);</span>
-&nbsp;
-<span class="cstat-no" title="statement not covered" >      for (key in props.options.layout) {</span>
-<span class="cstat-no" title="statement not covered" >        if (props.options.layout?.[key] &amp;&amp; props.options.layout[key] !== oldLayout[key]) {</span>
-<span class="cstat-no" title="statement not covered" >          mapHook.map.map.setLayoutProperty(layerId.current, key, props.options.layout[key]);</span>
-        }
-      }
-<span class="cstat-no" title="statement not covered" >      layerLayoutConfRef.current = layoutString;</span>
-    }
-&nbsp;
-    let paintString = JSON.stringify(props.options.paint);
-    <span class="missing-if-branch" title="if path not taken" >I</span>if (paintString !== layerPaintConfRef.current) {
-      let oldPaint = <span class="cstat-no" title="statement not covered" >JSON.parse(layerPaintConfRef.current);</span>
-<span class="cstat-no" title="statement not covered" >      for (key in props.options.paint) {</span>
-<span class="cstat-no" title="statement not covered" >        if (props.options.paint?.[key] &amp;&amp; props.options.paint[key] !== oldPaint[key]) {</span>
-<span class="cstat-no" title="statement not covered" >          mapHook.map.map.setPaintProperty(layerId.current, key, props.options.paint[key]);</span>
-        }
-      }
-<span class="cstat-no" title="statement not covered" >      layerPaintConfRef.current = paintString;</span>
-    }
-  }, [props.options, mapHook.map]);
-&nbsp;
-  useEffect(() =&gt; {
-    return () =&gt; {
-      initializedRef.current = false;
-      mapHook.cleanup();
-    };
-  }, []);
-&nbsp;
-  return {
-    map: mapHook.map,
-    layer: layer,
-    layerId: layerId.current,
-    componentId: mapHook.componentId,
-    mapHook: mapHook,
-  };
+	const mapHook = useMap({
+		mapId: props.mapId,
+		waitForLayer: props.insertBeforeLayer,
+	});
+&nbsp;
+	const layerTypeRef = useRef&lt;string&gt;('');
+	const layerPaintConfRef = useRef&lt;string&gt;('');
+	const layerLayoutConfRef = useRef&lt;string&gt;('');
+&nbsp;
+	const [layer, setLayer] = useState&lt;any&gt;();
+&nbsp;
+	const initializedRef = useRef&lt;boolean&gt;(false);
+	const layerId = useRef(
+		props.layerId || (props.idPrefix ? props.idPrefix : <span class="branch-1 cbranch-no" title="branch not covered" >'Layer-')</span> + mapHook.componentId
+	);
+&nbsp;
+	const createLayer = useCallback(() =&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>
+&nbsp;
+		if (mapHook.map.map.getLayer(layerId.current)) {
+			mapHook.cleanup();
+		}
+		<span class="missing-if-branch" title="if path not taken" >I</span>if (mapHook.map.map.getSource(layerId.current)) {
+<span class="cstat-no" title="statement not covered" >			mapHook.map.map.removeSource(layerId.current);</span>
+		}
+&nbsp;
+		<span class="missing-if-branch" title="if path not taken" >I</span>if (typeof props.source === 'string') {
+<span class="cstat-no" title="statement not covered" >			if (props.source === '' || !mapHook.map.map.getSource(props.source)) {</span>
+<span class="cstat-no" title="statement not covered" >				return;</span>
+			}
+		}
+&nbsp;
+		initializedRef.current = true;
+&nbsp;
+		mapHook.map.addLayer(
+			{
+				...props.options,
+				...(props.geojson &amp;&amp; !props.source
+					? {
+							source: {
+								type: 'geojson',
+								data: props.geojson,
+							},
+					  }
+					: {}),
+				...(props.source
+					? <span class="branch-0 cbranch-no" title="branch not covered" >{</span>
+							source: props.source,
+					  }
+					: {}),
+				id: layerId.current,
+			},
+			props.insertBeforeLayer
+				? <span class="branch-0 cbranch-no" title="branch not covered" >props.insertBeforeLayer</span>
+				: props.insertBeforeFirstSymbolLayer
+				? mapHook.map.firstSymbolLayer
+				: undefined,
+			mapHook.componentId
+		);
+&nbsp;
+		setLayer(mapHook.map.map.getLayer(layerId.current));
+&nbsp;
+		if (typeof props.onHover !== 'undefined') {
+			mapHook.map.on('mousemove', layerId.current, props.onHover, mapHook.componentId);
+		}
+&nbsp;
+		if (typeof props.onClick !== 'undefined') {
+			mapHook.map.on('click', layerId.current, props.onClick, mapHook.componentId);
+		}
+&nbsp;
+		if (typeof props.onLeave !== 'undefined') {
+			mapHook.map.on('mouseleave', layerId.current, props.onLeave, mapHook.componentId);
+		}
+&nbsp;
+		// recreate layer if style has changed
+		mapHook.map.on(
+			'styledata',
+<span class="fstat-no" title="function not covered" >			()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >				if (initializedRef.current &amp;&amp; !mapHook.map?.map.getLayer(layerId.current)) {</span>
+<span class="cstat-no" title="statement not covered" >					console.log('Recreate Layer');</span>
+<span class="cstat-no" title="statement not covered" >					createLayer();</span>
+				}
+			},
+			mapHook.componentId
+		);
+&nbsp;
+		layerPaintConfRef.current = JSON.stringify(props.options?.paint);
+		layerLayoutConfRef.current = JSON.stringify(props.options?.layout);
+		layerTypeRef.current = props.options.type as LayerSpecification['type'];
+	}, [props, mapHook.map]);
+&nbsp;
+	useEffect(() =&gt; {
+		if (!mapHook.map) return;
+&nbsp;
+		if (
+			initializedRef.current &amp;&amp;
+			(legalLayerTypes.indexOf(props.options.type as LayerSpecification['type']) === -1 ||
+				(legalLayerTypes.indexOf(props.options.type as LayerSpecification['type']) !== -1 &amp;&amp;
+					props.options.type === layerTypeRef.current))
+		) {
+			return;
+		}
+&nbsp;
+		createLayer();
+	}, [mapHook.map, props.options, createLayer]);
+&nbsp;
+	useEffect(() =&gt; {
+		if (!initializedRef.current || !mapHook.map?.map?.getSource(layerId.current)) return;
+&nbsp;
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		//@ts-ignore setData only exists on GeoJsonSource
+		mapHook.map.map.getSource(layerId.current)?.setData?.(props.geojson);
+	}, [props.geojson, mapHook.map, props.options.type]);
+&nbsp;
+	useEffect(() =&gt; {
+		if (
+			!mapHook.map ||
+			!mapHook.map?.map?.getLayer?.(layerId.current) ||
+			!initializedRef.current ||
+			props.options.type !== layerTypeRef.current
+		)
+			return;
+&nbsp;
+		let key;
+&nbsp;
+		const layoutString = JSON.stringify(props.options.layout);
+		<span class="missing-if-branch" title="if path not taken" >I</span>if (props.options.layout &amp;&amp; layoutString !== layerLayoutConfRef.current) {
+			const oldLayout = <span class="cstat-no" title="statement not covered" >JSON.parse(layerLayoutConfRef.current);</span>
+&nbsp;
+<span class="cstat-no" title="statement not covered" >			for (key in props.options.layout) {</span>
+<span class="cstat-no" title="statement not covered" >				if (props.options.layout?.[key] &amp;&amp; props.options.layout[key] !== oldLayout[key]) {</span>
+<span class="cstat-no" title="statement not covered" >					mapHook.map.map.setLayoutProperty(layerId.current, key, props.options.layout[key]);</span>
+				}
+			}
+<span class="cstat-no" title="statement not covered" >			layerLayoutConfRef.current = layoutString;</span>
+		}
+&nbsp;
+		const paintString = JSON.stringify(props.options.paint);
+		<span class="missing-if-branch" title="if path not taken" >I</span>if (paintString !== layerPaintConfRef.current) {
+			const oldPaint = <span class="cstat-no" title="statement not covered" >JSON.parse(layerPaintConfRef.current);</span>
+<span class="cstat-no" title="statement not covered" >			for (key in props.options.paint) {</span>
+<span class="cstat-no" title="statement not covered" >				if (props.options.paint?.[key] &amp;&amp; props.options.paint[key] !== oldPaint[key]) {</span>
+<span class="cstat-no" title="statement not covered" >					mapHook.map.map.setPaintProperty(layerId.current, key, props.options.paint[key]);</span>
+				}
+			}
+<span class="cstat-no" title="statement not covered" >			layerPaintConfRef.current = paintString;</span>
+		}
+	}, [props.options, mapHook.map]);
+&nbsp;
+	useEffect(() =&gt; {
+		return () =&gt; {
+			initializedRef.current = false;
+			mapHook.cleanup();
+		};
+	}, []);
+&nbsp;
+	return {
+		map: mapHook.map,
+		layer: layer,
+		layerId: layerId.current,
+		componentId: mapHook.componentId,
+		mapHook: mapHook,
+	};
 }
 &nbsp;
 export default useLayer;
@@ -664,7 +706,7 @@ export default useLayer;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Tue Aug 30 2022 13:27:18 GMT+0000 (Coordinated Universal Time)
+                at Tue Oct 04 2022 11:59:51 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>