@mapcomponents/react-maplibre 0.1.63 → 0.1.65

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

@@ -25,28 +25,28 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>0/96</span>
+                <span class='fraction'>0/108</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/57</span>
+                <span class='fraction'>0/62</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>0/21</span>
+                <span class='fraction'>0/30</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>0/91</span>
+                <span class='fraction'>0/102</span>
             </div>
         
             
@@ -380,7 +380,27 @@
 <a name='L315'></a><a href='#L315'>315</a>
 <a name='L316'></a><a href='#L316'>316</a>
 <a name='L317'></a><a href='#L317'>317</a>
-<a name='L318'></a><a href='#L318'>318</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L318'></a><a href='#L318'>318</a>
+<a name='L319'></a><a href='#L319'>319</a>
+<a name='L320'></a><a href='#L320'>320</a>
+<a name='L321'></a><a href='#L321'>321</a>
+<a name='L322'></a><a href='#L322'>322</a>
+<a name='L323'></a><a href='#L323'>323</a>
+<a name='L324'></a><a href='#L324'>324</a>
+<a name='L325'></a><a href='#L325'>325</a>
+<a name='L326'></a><a href='#L326'>326</a>
+<a name='L327'></a><a href='#L327'>327</a>
+<a name='L328'></a><a href='#L328'>328</a>
+<a name='L329'></a><a href='#L329'>329</a>
+<a name='L330'></a><a href='#L330'>330</a>
+<a name='L331'></a><a href='#L331'>331</a>
+<a name='L332'></a><a href='#L332'>332</a>
+<a name='L333'></a><a href='#L333'>333</a>
+<a name='L334'></a><a href='#L334'>334</a>
+<a name='L335'></a><a href='#L335'>335</a>
+<a name='L336'></a><a href='#L336'>336</a>
+<a name='L337'></a><a href='#L337'>337</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>
@@ -446,6 +466,8 @@
 <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-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -453,22 +475,14 @@
 <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-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-no">&nbsp;</span>
 <span class="cline-any cline-no">&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-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>
@@ -496,6 +510,14 @@
 <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-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -505,7 +527,6 @@
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -517,12 +538,9 @@
 <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-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-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -592,52 +610,63 @@
 <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-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-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-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-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-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-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-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-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-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>
@@ -676,6 +705,15 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -697,31 +735,32 @@
 <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, useContext, useCallback, useState } from "react";
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useRef, useEffect, useContext, useCallback, useState, useMemo } from 'react';
 &nbsp;
-import MapContext from "../../contexts/MapContext";
-import { v4 as uuidv4 } from "uuid";
+import MapContext from '../../contexts/MapContext';
+import { v4 as uuidv4 } from 'uuid';
 &nbsp;
-import MlWmsLayer from "../MlWmsLayer/MlWmsLayer";
-import MlMarker from "../MlMarker/MlMarker";
-import MlLayer from "../MlLayer/MlLayer";
-import useWms from "../../hooks/useWms";
+import MlWmsLayer from '../MlWmsLayer/MlWmsLayer';
+import MlMarker from '../MlMarker/MlMarker';
+import useWms, { useWmsProps } from '../../hooks/useWms';
 &nbsp;
-import VisibilityIcon from "@mui/icons-material/Visibility";
-import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
-import List from "@mui/material/List";
-import ListItem from "@mui/material/ListItem";
-import ListItemText from "@mui/material/ListItemText";
-import IconButton from "@mui/material/IconButton";
-import { LngLat } from "maplibre-gl";
-import MapLibreGlWrapper from "../MapLibreMap/lib/MapLibreGlWrapper";
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import IconButton from '@mui/material/IconButton';
+import { LngLat } from 'maplibre-gl';
+import MapLibreGlWrapper from '../MapLibreMap/lib/MapLibreGlWrapper';
+import { Layer2, Layer3 } from 'wms-capabilities';
+import { useWmsReturnType } from '../../hooks/useWms';
 &nbsp;
-var originShift = <span class="cstat-no" title="statement not covered" >(2 * Math.PI * 6378137) / 2.0;</span>
+const originShift = <span class="cstat-no" title="statement not covered" >(2 * Math.PI * 6378137) / 2.0;</span>
 const lngLatToMeters = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >fu</span>nction (lnglat: LngLat, accuracy = <span class="branch-0 cbranch-no" title="branch not covered" >{ enable: true, decimal: 1 })</span> {</span>
-	var lng = <span class="cstat-no" title="statement not covered" >lnglat.lng;</span>
-	var lat = <span class="cstat-no" title="statement not covered" >lnglat.lat;</span>
-	var x = <span class="cstat-no" title="statement not covered" >(lng * originShift) / 180.0;</span>
-	var y = <span class="cstat-no" title="statement not covered" >Math.log(Math.tan(((90 + lat) * Math.PI) / 360.0)) / (Math.PI / 180.0);</span>
+	const lng = <span class="cstat-no" title="statement not covered" >lnglat.lng;</span>
+	const lat = <span class="cstat-no" title="statement not covered" >lnglat.lat;</span>
+	let x = <span class="cstat-no" title="statement not covered" >(lng * originShift) / 180.0;</span>
+	let y = <span class="cstat-no" title="statement not covered" >Math.log(Math.tan(((90 + lat) * Math.PI) / 360.0)) / (Math.PI / 180.0);</span>
 <span class="cstat-no" title="statement not covered" >	y = (y * originShift) / 180.0;</span>
 <span class="cstat-no" title="statement not covered" >	if (accuracy.enable) {</span>
 <span class="cstat-no" title="statement not covered" >		x = Number(x.toFixed(accuracy.decimal));</span>
@@ -730,7 +769,7 @@ const lngLatToMeters = <span class="cstat-no" title="statement not covered" ><sp
 <span class="cstat-no" title="statement not covered" >	return [x, y];</span>
 };
 &nbsp;
-interface MlWmsLoaderProps {
+export interface MlWmsLoaderProps {
 	/**
 	 * WMS URL
 	 */
@@ -742,19 +781,21 @@ interface MlWmsLoaderProps {
 	/**
 	 * URL parameters that will be used in the getCapabilities request
 	 */
-	urlParameters: object;
+	urlParameters?: useWmsProps['urlParameters'];
 	/**
 	 * URL parameters that will be added when requesting WMS capabilities
 	 */
-	wmsUrlParameters: object;
-	/**
-	 * URL parameters that will be added when requesting tiles
-	 */
-	layerUrlParameters: object;
-	lngLat: LngLat;
-	idPrefix: string;
+	wmsUrlParameters?: { [key: string]: string };
+	lngLat?: LngLat;
+	idPrefix?: string;
 }
 &nbsp;
+export type LayerType = {
+	visible: boolean;
+	Name: string;
+	Attribution?: { Title: string };
+} &amp; Omit&lt;Layer2, 'Layer'&gt; &amp;
+	Partial&lt;Pick&lt;Layer2, 'Layer'&gt;&gt;;
 /**
  * Loads a WMS getCapabilities xml document and adds a MlWmsLayer component for each layer that is
  * offered by the WMS.
@@ -766,30 +807,22 @@ interface MlWmsLoaderProps {
 const MlWmsLoader = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(p</span>rops: MlWmsLoaderProps) =&gt; {</span>
 	// Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
 	const mapContext: MapContextType = <span class="cstat-no" title="statement not covered" >useContext(MapContext);</span>
-	const { capabilities, error, setUrl, getFeatureInfoUrl, wmsUrl }: any = <span class="cstat-no" title="statement not covered" >useWms({</span>
-		url: undefined,
+	const { capabilities, error, setUrl, getFeatureInfoUrl, wmsUrl }: useWmsReturnType = <span class="cstat-no" title="statement not covered" >useWms({</span>
 		urlParameters: props.urlParameters,
 	});
-	let layerType: {
-		visible: boolean;
-		queryable: boolean;
-		Name: string;
-		Title: string;
-		LatLonBoundingBox: Array&lt;number&gt;;
-		EX_GeographicBoundingBox: Array&lt;number&gt;;
-		Abstract: any;
-	};
 &nbsp;
 	const initializedRef = <span class="cstat-no" title="statement not covered" >useRef(false);</span>
 	const mapRef = <span class="cstat-no" title="statement not covered" >useRef&lt;MapLibreGlWrapper&gt;();</span>
-	const componentId = <span class="cstat-no" title="statement not covered" >useRef((props.idPrefix ? props.idPrefix : "MlWmsLoader-") + uuidv4());</span>
-	const [layers, setLayers] = <span class="cstat-no" title="statement not covered" >useState&lt;Array&lt;typeof layerType&gt;&gt;([]);</span>
+	const componentId = <span class="cstat-no" title="statement not covered" >useRef((props.idPrefix ? props.idPrefix : 'MlWmsLoader-') + uuidv4());</span>
+	const [layers, setLayers] = <span class="cstat-no" title="statement not covered" >useState&lt;Array&lt;LayerType&gt;&gt;([]);</span>
 &nbsp;
-	const [featureInfoLngLat, setFeatureInfoLngLat] = <span class="cstat-no" title="statement not covered" >useState&lt;{lng:number,lat:number} | undefined&gt;();</span>
+	const [featureInfoLngLat, setFeatureInfoLngLat] = <span class="cstat-no" title="statement not covered" >useState&lt;</span>
+		{ lng: number; lat: number } | undefined
+	&gt;();
 	const [featureInfoContent, setFeatureInfoContent] = <span class="cstat-no" title="statement not covered" >useState&lt;string | undefined&gt;(undefined);</span>
 &nbsp;
 <span class="cstat-no" title="statement not covered" >	useEffect(<span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
-		let _componentId = <span class="cstat-no" title="statement not covered" >componentId.current;</span>
+		const _componentId = <span class="cstat-no" title="statement not covered" >componentId.current;</span>
 &nbsp;
 <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
@@ -811,68 +844,72 @@ const MlWmsLoader = <span class="cstat-no" title="statement not covered" ><span
 &nbsp;
 <span class="cstat-no" title="statement not covered" >		setUrl(props.url);</span>
 	}, [props.url]);
+&nbsp;
+	const attribution = <span class="cstat-no" title="statement not covered" >useMemo(<span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >		return layers</span>
+			.filter(<span class="fstat-no" title="function not covered" >(e</span>l) =&gt; <span class="cstat-no" title="statement not covered" >el.visible &amp;&amp; el?.Attribution?.Title)</span>
+			.map(<span class="fstat-no" title="function not covered" >(e</span>l) =&gt; <span class="cstat-no" title="statement not covered" >el?.Attribution?.Title)</span>
+			.filter(<span class="fstat-no" title="function not covered" >(v</span>alue, index, self) =&gt; <span class="cstat-no" title="statement not covered" >self.indexOf(value) === index)</span>
+			.join(' ');
+	}, [layers]);
 &nbsp;
 	const getFeatureInfo = <span class="cstat-no" title="statement not covered" >useCallback(</span>
 <span class="fstat-no" title="function not covered" >		(e</span>v) =&gt; {
 <span class="cstat-no" title="statement not covered" >			if (!mapRef.current) <span class="cstat-no" title="statement not covered" >return;</span></span>
 <span class="cstat-no" title="statement not covered" >			setFeatureInfoLngLat(undefined);</span>
 <span class="cstat-no" title="statement not covered" >			setFeatureInfoContent(undefined);</span>
-			let _bounds = <span class="cstat-no" title="statement not covered" >mapRef.current.map.getBounds();</span>
-			let _sw = <span class="cstat-no" title="statement not covered" >lngLatToMeters(_bounds._sw);</span>
-			let _ne = <span class="cstat-no" title="statement not covered" >lngLatToMeters(_bounds._ne);</span>
-			let bbox = <span class="cstat-no" title="statement not covered" >[_sw[0], _sw[1], _ne[0], _ne[1]];</span>
-			let _getFeatureInfoUrlParams = <span class="cstat-no" title="statement not covered" >{</span>
-				REQUEST: "GetFeatureInfo",
+			const _bounds = <span class="cstat-no" title="statement not covered" >mapRef.current.map.getBounds();</span>
+			const _sw = <span class="cstat-no" title="statement not covered" >lngLatToMeters(_bounds._sw);</span>
+			const _ne = <span class="cstat-no" title="statement not covered" >lngLatToMeters(_bounds._ne);</span>
+			const bbox = <span class="cstat-no" title="statement not covered" >[_sw[0], _sw[1], _ne[0], _ne[1]];</span>
+			const _getFeatureInfoUrlParams = <span class="cstat-no" title="statement not covered" >{</span>
+				REQUEST: 'GetFeatureInfo',
 &nbsp;
-				BBOX: bbox.join(","),
-				SERVICE: "WMS",
+				BBOX: bbox.join(','),
+				SERVICE: 'WMS',
 				INFO_FORMAT:
-					capabilities?.Capability?.Request?.GetFeatureInfo.Format.indexOf("text/html") !== -1
-						? "text/html"
-						: "text/plain",
-				FEATURE_COUNT: "10",
+					capabilities?.Capability?.Request?.GetFeatureInfo.Format.indexOf('text/html') !== -1
+						? 'text/html'
+						: 'text/plain',
+				FEATURE_COUNT: '10',
 				LAYERS: layers
-					.map(<span class="fstat-no" title="function not covered" >(l</span>ayer: typeof layerType) =&gt;
-<span class="cstat-no" title="statement not covered" >						layer.visible &amp;&amp; layer.queryable ? layer.Name : undefined</span>
-					)
+					.map(<span class="fstat-no" title="function not covered" >(l</span>ayer: LayerType) =&gt; (<span class="cstat-no" title="statement not covered" >layer.visible &amp;&amp; layer.queryable ? layer.Title : undefined)</span>)
 					.filter(<span class="fstat-no" title="function not covered" >(n</span>) =&gt; <span class="cstat-no" title="statement not covered" >n)</span>,
 				QUERY_LAYERS: layers
-					.map(<span class="fstat-no" title="function not covered" >(l</span>ayer: typeof layerType) =&gt;
-<span class="cstat-no" title="statement not covered" >						layer.visible &amp;&amp; layer.queryable ? layer.Name : undefined</span>
-					)
+					.map(<span class="fstat-no" title="function not covered" >(l</span>ayer: LayerType) =&gt; (<span class="cstat-no" title="statement not covered" >layer.visible &amp;&amp; layer.queryable ? layer.Title : undefined)</span>)
 					.filter(<span class="fstat-no" title="function not covered" >(n</span>) =&gt; <span class="cstat-no" title="statement not covered" >n)</span>,
 				WIDTH: mapRef.current?.map._container.clientWidth,
 				HEIGHT: mapRef.current?.map._container.clientHeight,
-				srs: "EPSG:3857",
-				CRS: "EPSG:3857",
-				version: "1.3.0",
+				srs: 'EPSG:3857',
+				CRS: 'EPSG:3857',
+				version: '1.3.0',
 				X: ev.point.x,
 				Y: ev.point.y,
 				I: ev.point.x,
 				J: ev.point.y,
-				buffer: "50",
+				buffer: '50',
 			};
 &nbsp;
 			let _gfiUrl: string | undefined = <span class="cstat-no" title="statement not covered" >getFeatureInfoUrl;</span>
 			let _gfiUrlParts;
-<span class="cstat-no" title="statement not covered" >			if (_gfiUrl?.indexOf?.("?") !== -1) {</span>
-<span class="cstat-no" title="statement not covered" >				_gfiUrlParts = props.url.split("?");</span>
+<span class="cstat-no" title="statement not covered" >			if (_gfiUrl?.indexOf?.('?') !== -1) {</span>
+<span class="cstat-no" title="statement not covered" >				_gfiUrlParts = props.url.split('?');</span>
 <span class="cstat-no" title="statement not covered" >				_gfiUrl = _gfiUrlParts[0];</span>
 			}
-			let _urlParamsFromUrl = <span class="cstat-no" title="statement not covered" >new URLSearchParams(_gfiUrlParts?.[1]);</span>
+			const _urlParamsFromUrl = <span class="cstat-no" title="statement not covered" >new URLSearchParams(_gfiUrlParts?.[1]);</span>
 &nbsp;
-			let urlParamsObj = <span class="cstat-no" title="statement not covered" >{</span>
+			const urlParamsObj = <span class="cstat-no" title="statement not covered" >{</span>
 				...Object.fromEntries(_urlParamsFromUrl),
 				..._getFeatureInfoUrlParams,
 			};
 			// create URLSearchParams object to assemble the URL Parameters
 			// "as any" can be removed once the URLSearchParams ts spec is fixed
-			let urlParams = <span class="cstat-no" title="statement not covered" >new URLSearchParams(urlParamsObj as any);</span>
+			const urlParams = <span class="cstat-no" title="statement not covered" >new URLSearchParams(urlParamsObj as unknown as Record&lt;string, string&gt;);</span>
 &nbsp;
-<span class="cstat-no" title="statement not covered" >			fetch(props.url + "?" + urlParams.toString())</span>
+<span class="cstat-no" title="statement not covered" >			fetch(props.url + '?' + urlParams.toString())</span>
 				.then(<span class="fstat-no" title="function not covered" >(r</span>es) =&gt; {
 <span class="cstat-no" title="statement not covered" >					if (!res.ok) {</span>
-<span class="cstat-no" title="statement not covered" >						throw new Error("FeatureInfo could not be fetched");</span>
+<span class="cstat-no" title="statement not covered" >						throw new Error('FeatureInfo could not be fetched');</span>
 					}
 <span class="cstat-no" title="statement not covered" >					return res.text();</span>
 				})
@@ -890,37 +927,61 @@ const MlWmsLoader = <span class="cstat-no" title="statement not covered" ><span
 &nbsp;
 		const _getFeatureInfo = <span class="cstat-no" title="statement not covered" >getFeatureInfo;</span>
 &nbsp;
-<span class="cstat-no" title="statement not covered" >		mapRef.current.on("click", _getFeatureInfo, componentId.current);</span>
+<span class="cstat-no" title="statement not covered" >		mapRef.current.on('click', _getFeatureInfo, componentId.current);</span>
 <span class="cstat-no" title="statement not covered" >		return <span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >			mapRef.current?.map.off?.("click", _getFeatureInfo);</span>
+<span class="cstat-no" title="statement not covered" >			mapRef.current?.map.off?.('click', _getFeatureInfo);</span>
 		};
 	}, [getFeatureInfo]);
 &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 (!capabilities?.Service) <span class="cstat-no" title="statement not covered" >return;</span></span>
 &nbsp;
-<span class="cstat-no" title="statement not covered" >		if (capabilities?.Capability?.Layer?.SRS?.indexOf?.("EPSG:3857") === -1) {</span>
+<span class="cstat-no" title="statement not covered" >		if (capabilities?.Capability?.Layer?.CRS?.indexOf?.('EPSG:3857') === -1) {</span>
 <span class="cstat-no" title="statement not covered" >			console.log(</span>
-				"MlWmsLoader (" + capabilities.Service.Title + "): No WGS 84/Pseudo-Mercator support"
+				'MlWmsLoader (' + capabilities.Service.Title + '): No WGS 84/Pseudo-Mercator support'
 			);
 		} else {
 <span class="cstat-no" title="statement not covered" >			console.log(</span>
-				"MlWmsLoader (" + capabilities.Service.Title + "): WGS 84/Pseudo-Mercator supported"
+				'MlWmsLoader (' + capabilities.Service.Title + '): WGS 84/Pseudo-Mercator supported'
 			);
 &nbsp;
 			let _LatLonBoundingBox: Array&lt;number&gt; = <span class="cstat-no" title="statement not covered" >[];</span>
-<span class="cstat-no" title="statement not covered" >			setLayers(</span>
-				capabilities?.Capability?.Layer?.Layer.map(<span class="fstat-no" title="function not covered" >(l</span>ayer: typeof layerType, idx: number) =&gt; {
-<span class="cstat-no" title="statement not covered" >					if (idx === 0) {</span>
-<span class="cstat-no" title="statement not covered" >						_LatLonBoundingBox = layer.LatLonBoundingBox;</span>
-<span class="cstat-no" title="statement not covered" >						if (!_LatLonBoundingBox) {</span>
+&nbsp;
+			// collect aueriable Layer2 layers
+			let _layers: LayerType[] = <span class="cstat-no" title="statement not covered" >capabilities?.Capability?.Layer?.Layer.filter(</span>
+<span class="fstat-no" title="function not covered" >				(e</span>l) =&gt; <span class="cstat-no" title="statement not covered" >!el.Layer?.length</span>
+			).map(<span class="fstat-no" title="function not covered" >(l</span>ayer: Layer2 &amp; { Name: string }, idx: number) =&gt; {
+<span class="cstat-no" title="statement not covered" >				if (idx === 0) {</span>
+<span class="cstat-no" title="statement not covered" >					_LatLonBoundingBox = layer.EX_GeographicBoundingBox;</span>
+				}
+<span class="cstat-no" title="statement not covered" >				return {</span>
+					visible: capabilities?.Capability?.Layer?.Layer?.length &gt; 2 ? idx &gt; 1 : true,
+					Attribution: { Title: '' },
+					...layer,
+				};
+			});
+&nbsp;
+			// collect aueriable Layer3 layers
+<span class="cstat-no" title="statement not covered" >			capabilities?.Capability?.Layer?.Layer.forEach(<span class="fstat-no" title="function not covered" >(e</span>l) =&gt; {</span>
+				const tmpLayers = <span class="cstat-no" title="statement not covered" >el?.Layer?.filter(<span class="fstat-no" title="function not covered" >(e</span>l) =&gt; <span class="cstat-no" title="statement not covered" >el.CRS.length)</span>.map(</span>
+<span class="fstat-no" title="function not covered" >					(l</span>ayer: Layer3, idx: number) =&gt; {
+<span class="cstat-no" title="statement not covered" >						if (idx === 0) {</span>
 <span class="cstat-no" title="statement not covered" >							_LatLonBoundingBox = layer.EX_GeographicBoundingBox;</span>
 						}
+<span class="cstat-no" title="statement not covered" >						return {</span>
+							visible: false,
+							Attribution: { Title: '' },
+							...layer,
+						};
 					}
-<span class="cstat-no" title="statement not covered" >					layer.visible = capabilities?.Capability?.Layer?.Layer?.length &gt; 2 ? idx &gt; 1 : true;</span>
-<span class="cstat-no" title="statement not covered" >					return layer;</span>
-				})
-			);
+				);
+&nbsp;
+<span class="cstat-no" title="statement not covered" >				if (tmpLayers) {</span>
+<span class="cstat-no" title="statement not covered" >					_layers = [..._layers, ...tmpLayers];</span>
+				}
+			});
+&nbsp;
+<span class="cstat-no" title="statement not covered" >			setLayers(_layers);</span>
 &nbsp;
 			// zoom to extent of first layer
 <span class="cstat-no" title="statement not covered" >			if (mapRef.current &amp;&amp; _LatLonBoundingBox.length &gt; 3) {</span>
@@ -938,7 +999,6 @@ const MlWmsLoader = <span class="cstat-no" title="statement not covered" ><span
 		// initialize the layer and add it to the MapLibre-gl instance or do something else with it
 <span class="cstat-no" title="statement not covered" >		initializedRef.current = true;</span>
 <span class="cstat-no" title="statement not covered" >		mapRef.current = mapContext.getMap(props.mapId);</span>
-<span class="cstat-no" title="statement not covered" >		console.log("set url " + props.url);</span>
 <span class="cstat-no" title="statement not covered" >		setUrl(props.url);</span>
 	}, [mapContext.mapIds, mapContext, props.mapId, props.url]);
 &nbsp;
@@ -946,21 +1006,9 @@ const MlWmsLoader = <span class="cstat-no" title="statement not covered" ><span
 		&lt;&gt;
 			{error &amp;&amp; &lt;p&gt;{error}&lt;/p&gt;}
 			&lt;h3 key="title"&gt;{capabilities?.Service?.Title}&lt;/h3&gt;
-			{console.log(componentId.current)}
-			{capabilities?.Capability?.Layer?.Layer.map(<span class="fstat-no" title="function not covered" >(l</span>ayer: any, idx: number) =&gt; (
-<span class="cstat-no" title="statement not covered" >				&lt;MlLayer</span>
-					layerId={"Order-" + componentId.current + "-" + idx}
-					key={componentId.current + "-" + idx}
-					{...(idx &gt; 0
-						? {
-								insertBeforeLayer: "Order-" + componentId.current + "-" + (idx - 1),
-							}
-						: undefined)}
-				/&gt;
-			))}
 			&lt;List dense key="layers"&gt;
 				{wmsUrl &amp;&amp;
-					layers?.map?.(<span class="fstat-no" title="function not covered" >(l</span>ayer: typeof layerType, idx) =&gt; {
+					layers?.map?.(<span class="fstat-no" title="function not covered" >(l</span>ayer, idx) =&gt; {
 <span class="cstat-no" title="statement not covered" >						return layer?.Name ? (</span>
 							&lt;ListItem
 								key={layer.Name + idx}
@@ -969,7 +1017,7 @@ const MlWmsLoader = <span class="cstat-no" title="statement not covered" ><span
 										edge="end"
 										aria-label="toggle visibility"
 										onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; {
-											let _layers: Array&lt;typeof layerType&gt; = <span class="cstat-no" title="statement not covered" >[...layers];</span>
+											const _layers: Array&lt;LayerType&gt; = <span class="cstat-no" title="statement not covered" >[...layers];</span>
 <span class="cstat-no" title="statement not covered" >											_layers[idx].visible = !_layers[idx].visible;</span>
 <span class="cstat-no" title="statement not covered" >											setLayers([..._layers]);</span>
 										}}
@@ -978,22 +1026,31 @@ const MlWmsLoader = <span class="cstat-no" title="statement not covered" ><span
 									&lt;/IconButton&gt;
 								}
 							&gt;
-								&lt;ListItemText primary={layer?.Title} secondary={layer?.Abstract} /&gt;
-								&lt;MlWmsLayer
-									key={layer?.Name + idx}
-									url={wmsUrl}
-									urlParameters={{ ...props.wmsUrlParameters, layers: layer?.Name }}
-									visible={layers[idx].visible}
-									insertBeforeLayer={"Order-" + componentId.current + "-" + idx}
-								/&gt;
+								&lt;ListItemText primary={layer?.Title} /&gt;
 							&lt;/ListItem&gt;
 						) : (
 							&lt;&gt;&lt;/&gt;
 						);
 					})}
 			&lt;/List&gt;
-			&lt;p key="description" style={{ fontSize: ".7em" }}&gt;
-				{capabilities?.Capability?.Layer?.Abstract}
+			{wmsUrl &amp;&amp; layers?.length &amp;&amp; (
+				&lt;MlWmsLayer
+					key={componentId.current}
+					url={wmsUrl}
+					attribution={attribution}
+					urlParameters={{
+						...props.wmsUrlParameters,
+						layers: layers
+							?.filter?.(<span class="fstat-no" title="function not covered" >(l</span>ayer) =&gt; <span class="cstat-no" title="statement not covered" >layer.visible)</span>
+							.map(<span class="fstat-no" title="function not covered" >(e</span>l) =&gt; <span class="cstat-no" title="statement not covered" >el.Name)</span>
+							.reverse()
+							.join(','),
+					}}
+				/&gt;
+			)}
+&nbsp;
+			&lt;p key="description" style={{ fontSize: '.7em' }}&gt;
+				{capabilities?.Capability?.Layer?.['Abstract']}
 			&lt;/p&gt;
 &nbsp;
 			{featureInfoLngLat &amp;&amp; &lt;MlMarker {...featureInfoLngLat} content={featureInfoContent} /&gt;}
@@ -1002,14 +1059,14 @@ const MlWmsLoader = <span class="cstat-no" title="statement not covered" ><span
 };
 &nbsp;
 <span class="cstat-no" title="statement not covered" >MlWmsLoader.defaultProps = {</span>
-	url: "",
+	url: '',
 	urlParameters: {
-		SERVICE: "WMS",
-		VERSION: "1.3.0",
-		REQUEST: "GetCapabilities",
+		SERVICE: 'WMS',
+		VERSION: '1.3.0',
+		REQUEST: 'GetCapabilities',
 	},
 	wmsUrlParameters: {
-		TRANSPARENT: "TRUE",
+		TRANSPARENT: 'TRUE',
 	},
 };
 &nbsp;
@@ -1021,7 +1078,7 @@ export default MlWmsLoader;
             <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 2022-12-16T12:30:49.297Z
+                at 2023-01-23T12:27:40.277Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>