@mapcomponents/react-maplibre 0.1.57 → 0.1.59

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

@@ -514,203 +514,203 @@ import useMapState from "../../hooks/useMapState";
  *
  */
 const MlLayerSwitcher = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(p</span>rops) =&gt; {</span>
-  const mapContext = <span class="cstat-no" title="statement not covered" >useContext(MapContext);</span>
-  const showBaseSources = <span class="cstat-no" title="statement not covered" >!!props.baseSourceConfig?.layers?.length;</span>
-  const showDetailLayer = <span class="cstat-no" title="statement not covered" >!!props.detailLayerConfig?.layers?.length;</span>
-  const { layers } = <span class="cstat-no" title="statement not covered" >useMapState({</span>
-    mapId: props.mapId,
-    watch: {
-      viewport: false,
-      layers: true,
-      sources: false,
-    },
-    filter: {},
-  });
-  const [activeLayers, setActiveLayers] = <span class="cstat-no" title="statement not covered" >useState([]);</span>
-  const [activeDetailLayers, setActiveDetailLayers] = <span class="cstat-no" title="statement not covered" >useState([]);</span>
-  const { t } = <span class="cstat-no" title="statement not covered" >useTranslation();</span>
+	const mapContext = <span class="cstat-no" title="statement not covered" >useContext(MapContext);</span>
+	const showBaseSources = <span class="cstat-no" title="statement not covered" >!!props.baseSourceConfig?.layers?.length;</span>
+	const showDetailLayer = <span class="cstat-no" title="statement not covered" >!!props.detailLayerConfig?.layers?.length;</span>
+	const { layers } = <span class="cstat-no" title="statement not covered" >useMapState({</span>
+		mapId: props.mapId,
+		watch: {
+			viewport: false,
+			layers: true,
+			sources: false,
+		},
+		filter: {},
+	});
+	const [activeLayers, setActiveLayers] = <span class="cstat-no" title="statement not covered" >useState([]);</span>
+	const [activeDetailLayers, setActiveDetailLayers] = <span class="cstat-no" title="statement not covered" >useState([]);</span>
+	const { t } = <span class="cstat-no" title="statement not covered" >useTranslation();</span>
 &nbsp;
-<span class="cstat-no" title="statement not covered" >  useEffect(<span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
-    //Set base state to activate only the first layer
-<span class="cstat-no" title="statement not covered" >    if (mapContext.map) {</span>
-      const disableAllButFirst = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(c</span>onfig, i) =&gt; {</span>
-        const layers = <span class="cstat-no" title="statement not covered" >getLayerListFromId(config.layerId);</span>
-        const visible = <span class="cstat-no" title="statement not covered" >i === 0 ? "visible" : "none";</span>
+<span class="cstat-no" title="statement not covered" >	useEffect(<span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
+		//Set base state to activate only the first layer
+<span class="cstat-no" title="statement not covered" >		if (mapContext.map) {</span>
+			const disableAllButFirst = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(c</span>onfig, i) =&gt; {</span>
+				const layers = <span class="cstat-no" title="statement not covered" >getLayerListFromId(config.layerId);</span>
+				const visible = <span class="cstat-no" title="statement not covered" >i === 0 ? "visible" : "none";</span>
 &nbsp;
-<span class="cstat-no" title="statement not covered" >        layers.forEach(<span class="fstat-no" title="function not covered" >(l</span>ayer) =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >          if (layer) {</span>
-<span class="cstat-no" title="statement not covered" >            changeLayerState(layer, visible);</span>
-          }
-        });
-      };
+<span class="cstat-no" title="statement not covered" >				layers.forEach(<span class="fstat-no" title="function not covered" >(l</span>ayer) =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >					if (layer) {</span>
+<span class="cstat-no" title="statement not covered" >						changeLayerState(layer, visible);</span>
+					}
+				});
+			};
 &nbsp;
-<span class="cstat-no" title="statement not covered" >      props.baseSourceConfig.layers.forEach(<span class="fstat-no" title="function not covered" >(c</span>onfig, i) =&gt; <span class="cstat-no" title="statement not covered" >disableAllButFirst(config, i))</span>;</span>
-<span class="cstat-no" title="statement not covered" >      props.detailLayerConfig.layers.forEach(<span class="fstat-no" title="function not covered" >(c</span>onfig, i) =&gt; <span class="cstat-no" title="statement not covered" >disableAllButFirst(config, i))</span>;</span>
-    }
-<span class="cstat-no" title="statement not covered" >    return <span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
-      // This is the cleanup function, it is called when this react component is removed from react-dom
-      // try to remove anything this component has added to the MapLibre-gl instance
-      // e.g.: remove the layer
-      // mapContext.getMap(props.mapId).removeLayer(layerRef.current);
-      // check for the existence of map.style before calling getLayer or getSource
-    };
-  }, [mapContext.map]);
+<span class="cstat-no" title="statement not covered" >			props.baseSourceConfig.layers.forEach(<span class="fstat-no" title="function not covered" >(c</span>onfig, i) =&gt; <span class="cstat-no" title="statement not covered" >disableAllButFirst(config, i))</span>;</span>
+<span class="cstat-no" title="statement not covered" >			props.detailLayerConfig.layers.forEach(<span class="fstat-no" title="function not covered" >(c</span>onfig, i) =&gt; <span class="cstat-no" title="statement not covered" >disableAllButFirst(config, i))</span>;</span>
+		}
+<span class="cstat-no" title="statement not covered" >		return <span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
+			// This is the cleanup function, it is called when this react component is removed from react-dom
+			// try to remove anything this component has added to the MapLibre-gl instance
+			// e.g.: remove the layer
+			// mapContext.getMap(props.mapId).removeLayer(layerRef.current);
+			// check for the existence of map.style before calling getLayer or getSource
+		};
+	}, [mapContext.map]);
 &nbsp;
-<span class="cstat-no" title="statement not covered" >  useEffect(<span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >    if (mapContext.map?.style?._layers) {</span>
-      let newactiveLayers = <span class="cstat-no" title="statement not covered" >[];</span>
-      let newactiveDetailLayers = <span class="cstat-no" title="statement not covered" >[];</span>
-<span class="cstat-no" title="statement not covered" >      props.baseSourceConfig.layers.forEach(<span class="fstat-no" title="function not covered" >(l</span>ayerConfig) =&gt; {</span>
-        const layers = <span class="cstat-no" title="statement not covered" >getLayerListFromId(layerConfig.layerId);</span>
+<span class="cstat-no" title="statement not covered" >	useEffect(<span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >		if (mapContext.map?.style?._layers) {</span>
+			let newactiveLayers = <span class="cstat-no" title="statement not covered" >[];</span>
+			let newactiveDetailLayers = <span class="cstat-no" title="statement not covered" >[];</span>
+<span class="cstat-no" title="statement not covered" >			props.baseSourceConfig.layers.forEach(<span class="fstat-no" title="function not covered" >(l</span>ayerConfig) =&gt; {</span>
+				const layers = <span class="cstat-no" title="statement not covered" >getLayerListFromId(layerConfig.layerId);</span>
 &nbsp;
-<span class="cstat-no" title="statement not covered" >        layers.forEach(<span class="fstat-no" title="function not covered" >(l</span>ayer) =&gt; {</span>
-          const visibilty = <span class="cstat-no" title="statement not covered" >mapContext.map?.getLayoutProperty(layer, "visibility");</span>
-<span class="cstat-no" title="statement not covered" >          if (mapContext.map.baseLayers.indexOf(layer) !== -1) {</span>
-<span class="cstat-no" title="statement not covered" >            layer = "styleBase";</span>
-          }
+<span class="cstat-no" title="statement not covered" >				layers.forEach(<span class="fstat-no" title="function not covered" >(l</span>ayer) =&gt; {</span>
+					const visibilty = <span class="cstat-no" title="statement not covered" >mapContext.map?.getLayoutProperty(layer, "visibility");</span>
+<span class="cstat-no" title="statement not covered" >					if (mapContext.map.baseLayers.indexOf(layer) !== -1) {</span>
+<span class="cstat-no" title="statement not covered" >						layer = "styleBase";</span>
+					}
 &nbsp;
-<span class="cstat-no" title="statement not covered" >          if (newactiveLayers.indexOf(layer) === -1 &amp;&amp; visibilty === "visible") {</span>
-<span class="cstat-no" title="statement not covered" >            newactiveLayers.push(layer);</span>
-          }
-        });
-      });
-<span class="cstat-no" title="statement not covered" >      props.detailLayerConfig.layers.forEach(<span class="fstat-no" title="function not covered" >({</span> layerId }) =&gt; {</span>
-        const visibilty = <span class="cstat-no" title="statement not covered" >mapContext.map?.getLayoutProperty(layerId, "visibility");</span>
-<span class="cstat-no" title="statement not covered" >        if (newactiveDetailLayers.indexOf(layerId) === -1 &amp;&amp; visibilty === "visible") {</span>
-<span class="cstat-no" title="statement not covered" >          newactiveDetailLayers.push(layerId);</span>
-        }
-      });
-<span class="cstat-no" title="statement not covered" >      setActiveLayers(newactiveLayers);</span>
+<span class="cstat-no" title="statement not covered" >					if (newactiveLayers.indexOf(layer) === -1 &amp;&amp; visibilty === "visible") {</span>
+<span class="cstat-no" title="statement not covered" >						newactiveLayers.push(layer);</span>
+					}
+				});
+			});
+<span class="cstat-no" title="statement not covered" >			props.detailLayerConfig.layers.forEach(<span class="fstat-no" title="function not covered" >({</span> layerId }) =&gt; {</span>
+				const visibilty = <span class="cstat-no" title="statement not covered" >mapContext.map?.getLayoutProperty(layerId, "visibility");</span>
+<span class="cstat-no" title="statement not covered" >				if (newactiveDetailLayers.indexOf(layerId) === -1 &amp;&amp; visibilty === "visible") {</span>
+<span class="cstat-no" title="statement not covered" >					newactiveDetailLayers.push(layerId);</span>
+				}
+			});
+<span class="cstat-no" title="statement not covered" >			setActiveLayers(newactiveLayers);</span>
 &nbsp;
-<span class="cstat-no" title="statement not covered" >      setActiveDetailLayers(newactiveDetailLayers);</span>
-    }
-  }, [layers]);
+<span class="cstat-no" title="statement not covered" >			setActiveDetailLayers(newactiveDetailLayers);</span>
+		}
+	}, [layers]);
 &nbsp;
-  const getLayerListFromId = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(i</span>d) =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >    return id === "styleBase" ? mapContext?.map.baseLayers : [id];</span>
-  };
+	const getLayerListFromId = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(i</span>d) =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >		return id === "styleBase" ? mapContext?.map.baseLayers : [id];</span>
+	};
 &nbsp;
-  const handleDetailLayerBoxClick = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(l</span>ayerId) =&gt; {</span>
-    const cfg = <span class="cstat-no" title="statement not covered" >props.detailLayerConfig.layers.find(<span class="fstat-no" title="function not covered" >(e</span>) =&gt; <span class="cstat-no" title="statement not covered" >e.layerId === layerId)</span>;</span>
-<span class="cstat-no" title="statement not covered" >    if (cfg.linkedTo) {</span>
-<span class="cstat-no" title="statement not covered" >      handleLayerBoxClick(cfg.linkedTo);</span>
-    }
-    const nextVisiblityClickedLayer =
-<span class="cstat-no" title="statement not covered" >      mapContext?.map.getLayer(layerId)?.getLayoutProperty("visibility") === "visible"</span>
-        ? "none"
-        : "visible";
-<span class="cstat-no" title="statement not covered" >    changeLayerState(layerId, nextVisiblityClickedLayer);</span>
-  };
+	const handleDetailLayerBoxClick = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(l</span>ayerId) =&gt; {</span>
+		const cfg = <span class="cstat-no" title="statement not covered" >props.detailLayerConfig.layers.find(<span class="fstat-no" title="function not covered" >(e</span>) =&gt; <span class="cstat-no" title="statement not covered" >e.layerId === layerId)</span>;</span>
+<span class="cstat-no" title="statement not covered" >		if (cfg.linkedTo) {</span>
+<span class="cstat-no" title="statement not covered" >			handleLayerBoxClick(cfg.linkedTo);</span>
+		}
+		const nextVisiblityClickedLayer =
+<span class="cstat-no" title="statement not covered" >			mapContext?.map.getLayer(layerId)?.getLayoutProperty("visibility") === "visible"</span>
+				? "none"
+				: "visible";
+<span class="cstat-no" title="statement not covered" >		changeLayerState(layerId, nextVisiblityClickedLayer);</span>
+	};
 &nbsp;
-  const handleLayerBoxClick = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(i</span>d) =&gt; {</span>
-    let layers = <span class="cstat-no" title="statement not covered" >getLayerListFromId(id);</span>
-    const nextVisiblityClickedLayer =
-<span class="cstat-no" title="statement not covered" >      mapContext?.map.getLayer(layers[0])?.getLayoutProperty("visibility") === "visible"</span>
-        ? "none"
-        : "visible";
+	const handleLayerBoxClick = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(i</span>d) =&gt; {</span>
+		let layers = <span class="cstat-no" title="statement not covered" >getLayerListFromId(id);</span>
+		const nextVisiblityClickedLayer =
+<span class="cstat-no" title="statement not covered" >			mapContext?.map.getLayer(layers[0])?.getLayoutProperty("visibility") === "visible"</span>
+				? "none"
+				: "visible";
 &nbsp;
-<span class="cstat-no" title="statement not covered" >    props.baseSourceConfig.layers.forEach(<span class="fstat-no" title="function not covered" >(c</span>onfig, i) =&gt; {</span>
-      let layers = <span class="cstat-no" title="statement not covered" >getLayerListFromId(config.layerId);</span>
-      let visible = <span class="cstat-no" title="statement not covered" >"none";</span>
-<span class="cstat-no" title="statement not covered" >      if (config.layerId === id) {</span>
-<span class="cstat-no" title="statement not covered" >        visible = nextVisiblityClickedLayer;</span>
-      }
+<span class="cstat-no" title="statement not covered" >		props.baseSourceConfig.layers.forEach(<span class="fstat-no" title="function not covered" >(c</span>onfig, i) =&gt; {</span>
+			let layers = <span class="cstat-no" title="statement not covered" >getLayerListFromId(config.layerId);</span>
+			let visible = <span class="cstat-no" title="statement not covered" >"none";</span>
+<span class="cstat-no" title="statement not covered" >			if (config.layerId === id) {</span>
+<span class="cstat-no" title="statement not covered" >				visible = nextVisiblityClickedLayer;</span>
+			}
 &nbsp;
-      //To avoid disabling all base layers we activate the first one
-<span class="cstat-no" title="statement not covered" >      if (nextVisiblityClickedLayer === "none" &amp;&amp; i === 0) {</span>
-<span class="cstat-no" title="statement not covered" >        visible = "visible";</span>
-      }
-<span class="cstat-no" title="statement not covered" >      layers.forEach(<span class="fstat-no" title="function not covered" >(l</span>ayer) =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >        if (layer) {</span>
-<span class="cstat-no" title="statement not covered" >          changeLayerState(layer, visible);</span>
-        }
-      });
-    });
-  };
+			//To avoid disabling all base layers we activate the first one
+<span class="cstat-no" title="statement not covered" >			if (nextVisiblityClickedLayer === "none" &amp;&amp; i === 0) {</span>
+<span class="cstat-no" title="statement not covered" >				visible = "visible";</span>
+			}
+<span class="cstat-no" title="statement not covered" >			layers.forEach(<span class="fstat-no" title="function not covered" >(l</span>ayer) =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >				if (layer) {</span>
+<span class="cstat-no" title="statement not covered" >					changeLayerState(layer, visible);</span>
+				}
+			});
+		});
+	};
 &nbsp;
-  const changeLayerState = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(l</span>ayer, visible = <span class="branch-0 cbranch-no" title="branch not covered" >"none")</span> =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >    mapContext.map?.setLayoutProperty(layer, "visibility", visible);</span>
-  };
+	const changeLayerState = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(l</span>ayer, visible = <span class="branch-0 cbranch-no" title="branch not covered" >"none")</span> =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >		mapContext.map?.setLayoutProperty(layer, "visibility", visible);</span>
+	};
 &nbsp;
-<span class="cstat-no" title="statement not covered" >  return (</span>
-    &lt;&gt;
-      &lt;Card sx={{ zIndex: 101, position: "absolute", minWidth: "200px" }}&gt;
-        &lt;CardContent&gt;
-          {showBaseSources &amp;&amp; (
-            &lt;Box sx={{ minHeight: "150px" }}&gt;
-              &lt;Typography variant="h6"&gt;{t(props.baseSourceConfig.label || "Map type")}&lt;/Typography&gt;
-              &lt;Divider /&gt;
-              &lt;Box sx={{ display: "flex", paddingTop: "1rem" }}&gt;
-                {props.baseSourceConfig.layers.map(<span class="fstat-no" title="function not covered" >({</span> src, label, layerId }) =&gt; {
-<span class="cstat-no" title="statement not covered" >                  return (</span>
-                    &lt;LayerBox
-                      mapId={props.mapId}
-                      key={layerId}
-                      activeLayers={activeLayers}
-                      label={t(label)}
-                      layerId={layerId}
-                      thumbnail={src}
-                      handleLayerBoxClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >                        handleLayerBoxClick(layerId);</span>
-                      }}
-                    /&gt;
-                  );
-                })}
-              &lt;/Box&gt;
-            &lt;/Box&gt;
-          )}
-          {showDetailLayer &amp;&amp; (
-            &lt;Box sx={{ minHeight: "150px" }}&gt;
-              &lt;Typography variant="h6"&gt;{t("Map details")}&lt;/Typography&gt;
-              &lt;Divider /&gt;
-              &lt;Box sx={{ display: "flex", paddingTop: "1rem" }}&gt;
-                {props.detailLayerConfig.layers.map(<span class="fstat-no" title="function not covered" >({</span> src, label, layerId }) =&gt; {
-<span class="cstat-no" title="statement not covered" >                  return (</span>
-                    &lt;LayerBox
-                      mapId={props.mapId}
-                      activeLayers={activeDetailLayers}
-                      label={t(label)}
-                      layerId={layerId}
-                      key={layerId}
-                      thumbnail={src}
-                      handleLayerBoxClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >                        handleDetailLayerBoxClick(layerId);</span>
-                      }}
-                    /&gt;
-                  );
-                })}
-              &lt;/Box&gt;
-            &lt;/Box&gt;
-          )}
-        &lt;/CardContent&gt;{" "}
-      &lt;/Card&gt;
-    &lt;/&gt;
-  );
+<span class="cstat-no" title="statement not covered" >	return (</span>
+		&lt;&gt;
+			&lt;Card sx={{ zIndex: 101, position: "absolute", minWidth: "200px" }}&gt;
+				&lt;CardContent&gt;
+					{showBaseSources &amp;&amp; (
+						&lt;Box sx={{ minHeight: "150px" }}&gt;
+							&lt;Typography variant="h6"&gt;{t(props.baseSourceConfig.label || "Map type")}&lt;/Typography&gt;
+							&lt;Divider /&gt;
+							&lt;Box sx={{ display: "flex", paddingTop: "1rem" }}&gt;
+								{props.baseSourceConfig.layers.map(<span class="fstat-no" title="function not covered" >({</span> src, label, layerId }) =&gt; {
+<span class="cstat-no" title="statement not covered" >									return (</span>
+										&lt;LayerBox
+											mapId={props.mapId}
+											key={layerId}
+											activeLayers={activeLayers}
+											label={t(label)}
+											layerId={layerId}
+											thumbnail={src}
+											handleLayerBoxClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >												handleLayerBoxClick(layerId);</span>
+											}}
+										/&gt;
+									);
+								})}
+							&lt;/Box&gt;
+						&lt;/Box&gt;
+					)}
+					{showDetailLayer &amp;&amp; (
+						&lt;Box sx={{ minHeight: "150px" }}&gt;
+							&lt;Typography variant="h6"&gt;{t("Map details")}&lt;/Typography&gt;
+							&lt;Divider /&gt;
+							&lt;Box sx={{ display: "flex", paddingTop: "1rem" }}&gt;
+								{props.detailLayerConfig.layers.map(<span class="fstat-no" title="function not covered" >({</span> src, label, layerId }) =&gt; {
+<span class="cstat-no" title="statement not covered" >									return (</span>
+										&lt;LayerBox
+											mapId={props.mapId}
+											activeLayers={activeDetailLayers}
+											label={t(label)}
+											layerId={layerId}
+											key={layerId}
+											thumbnail={src}
+											handleLayerBoxClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >												handleDetailLayerBoxClick(layerId);</span>
+											}}
+										/&gt;
+									);
+								})}
+							&lt;/Box&gt;
+						&lt;/Box&gt;
+					)}
+				&lt;/CardContent&gt;{" "}
+			&lt;/Card&gt;
+		&lt;/&gt;
+	);
 };
 &nbsp;
 <span class="cstat-no" title="statement not covered" >MlLayerSwitcher.propTypes = {</span>
-  baseSourceConfig: PropTypes.shape({
-    label: PropTypes.string,
-    layers: PropTypes.arrayOf(
-      PropTypes.shape({
-        layerId: PropTypes.string.isRequired,
-        src: PropTypes.string,
-        label: PropTypes.string.isRequired,
-      })
-    ),
-  }),
-  detailLayerConfig: PropTypes.shape({
-    label: PropTypes.string,
-    layers: PropTypes.arrayOf(
-      PropTypes.shape({
-        layerId: PropTypes.string.isRequired,
-        src: PropTypes.string,
-        label: PropTypes.string.isRequired,
-        linkedTo: PropTypes.string,
-      })
-    ),
-  }),
-  mapId: PropTypes.string,
+	baseSourceConfig: PropTypes.shape({
+		label: PropTypes.string,
+		layers: PropTypes.arrayOf(
+			PropTypes.shape({
+				layerId: PropTypes.string.isRequired,
+				src: PropTypes.string,
+				label: PropTypes.string.isRequired,
+			})
+		),
+	}),
+	detailLayerConfig: PropTypes.shape({
+		label: PropTypes.string,
+		layers: PropTypes.arrayOf(
+			PropTypes.shape({
+				layerId: PropTypes.string.isRequired,
+				src: PropTypes.string,
+				label: PropTypes.string.isRequired,
+				linkedTo: PropTypes.string,
+			})
+		),
+	}),
+	mapId: PropTypes.string,
 };
 &nbsp;
 export default MlLayerSwitcher;
@@ -721,7 +721,7 @@ export default MlLayerSwitcher;
             <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 12:11:13 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/components/MlLayerSwitcher/components/LayerBox.js.html

@@ -222,66 +222,66 @@ import useMapState from "../../../hooks/useMapState";
  *
  */
 const LayerBox = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(p</span>rops) =&gt; {</span>
-  const { layers } = <span class="cstat-no" title="statement not covered" >useMapState({</span>
-    mapId: props.mapId,
-    watch: {
-      viewport: false,
-      layers: true,
-      sources: false,
-    },
-    filter: {
-      matchLayerIds: props.layerId,
-    },
-  });
-  const width = <span class="cstat-no" title="statement not covered" >"40px";</span>
+	const { layers } = <span class="cstat-no" title="statement not covered" >useMapState({</span>
+		mapId: props.mapId,
+		watch: {
+			viewport: false,
+			layers: true,
+			sources: false,
+		},
+		filter: {
+			matchLayerIds: props.layerId,
+		},
+	});
+	const width = <span class="cstat-no" title="statement not covered" >"40px";</span>
 &nbsp;
-  const defaultClass = <span class="cstat-no" title="statement not covered" >css`</span>
-    &amp; img:hover {
-    }
-  `;
+	const defaultClass = <span class="cstat-no" title="statement not covered" >css`</span>
+		&amp; img:hover {
+		}
+	`;
 &nbsp;
-<span class="cstat-no" title="statement not covered" >  return (</span>
-    &lt;&gt;
-      &lt;Box
-        key={props.layerId}
-        className={defaultClass}
-        sx={{
-          width,
-          height: "53px",
-          justifyContent: "center",
-          py: 0.25,
-          px: "1rem",
-          cursor: "pointer",
-        }}
-        onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >          props?.handleLayerBoxClick?.(props.layerId);</span>
-        }}
-      &gt;
-        &lt;ImageLoader
-          style={{
-            border: "2px solid " + (layers?.[0]?.visible ? "#64c864" : "#fd720f"),
-            borderRadius: "8px",
-            height: "40px",
-            width: "40px",
-          }}
-          src={props.thumbnail}
-        /&gt;
+<span class="cstat-no" title="statement not covered" >	return (</span>
+		&lt;&gt;
+			&lt;Box
+				key={props.layerId}
+				className={defaultClass}
+				sx={{
+					width,
+					height: "53px",
+					justifyContent: "center",
+					py: 0.25,
+					px: "1rem",
+					cursor: "pointer",
+				}}
+				onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >					props?.handleLayerBoxClick?.(props.layerId);</span>
+				}}
+			&gt;
+				&lt;ImageLoader
+					style={{
+						border: "2px solid " + (layers?.[0]?.visible ? "#64c864" : "#fd720f"),
+						borderRadius: "8px",
+						height: "40px",
+						width: "40px",
+					}}
+					src={props.thumbnail}
+				/&gt;
 &nbsp;
-        &lt;div
-          className="mllayerswitcher-layer-text"
-          style={{
-            textAlign: "center",
-            color: "rgb(112, 117, 122)",
-            fontFamily: "Roboto, Arial",
-            width,
-            fontSize: "0.60rem",
-          }}
-        &gt;
-          {props.label}
-        &lt;/div&gt;
-      &lt;/Box&gt;
-    &lt;/&gt;
-  );
+				&lt;div
+					className="mllayerswitcher-layer-text"
+					style={{
+						textAlign: "center",
+						color: "rgb(112, 117, 122)",
+						fontFamily: "Roboto, Arial",
+						width,
+						fontSize: "0.60rem",
+					}}
+				&gt;
+					{props.label}
+				&lt;/div&gt;
+			&lt;/Box&gt;
+		&lt;/&gt;
+	);
 };
 &nbsp;
 export default LayerBox;
@@ -292,7 +292,7 @@ export default LayerBox;
             <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 12:11:13 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/components/MlLayerSwitcher/components/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 Aug 30 2022 13:27:18 GMT+0000 (Coordinated Universal Time)
+                at Tue Oct 04 2022 12:11:13 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/components/MlLayerSwitcher/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 Aug 30 2022 13:27:18 GMT+0000 (Coordinated Universal Time)
+                at Tue Oct 04 2022 12:11:13 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>