npm - @mapcomponents/react-maplibre - Versions diffs - 0.1.66 → 0.1.67 - Mend

@mapcomponents/react-maplibre 0.1.66 → 0.1.67

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (179) hide show

package/coverage/lcov-report/src/components/MlShareMapState/{MlShareMapState.js.html → MlShareMapState.tsx.html} RENAMED Viewed

@@ -3,7 +3,7 @@
 <html lang="en">
 <head>
-    <title>Code coverage report for src/components/MlShareMapState/MlShareMapState.js</title>
+    <title>Code coverage report for src/components/MlShareMapState/MlShareMapState.tsx</title>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="../../../prettify.css" />
     <link rel="stylesheet" href="../../../base.css" />
@@ -19,34 +19,34 @@
 <body>
 <div class='wrapper'>
     <div class='pad1'>
-        <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/components/MlShareMapState</a> MlShareMapState.js</h1>
+        <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/components/MlShareMapState</a> MlShareMapState.tsx</h1>
         <div class='clearfix'>
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">7.47% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>0/108</span>
+                <span class='fraction'>8/107</span>
             </div>
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">1.56% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/54</span>
+                <span class='fraction'>1/64</span>
             </div>
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">5.88% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>0/19</span>
+                <span class='fraction'>1/17</span>
             </div>
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">8% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>0/100</span>
+                <span class='fraction'>8/100</span>
             </div>
@@ -296,21 +296,52 @@
 <a name='L231'></a><a href='#L231'>231</a>
 <a name='L232'></a><a href='#L232'>232</a>
 <a name='L233'></a><a href='#L233'>233</a>
-<a name='L234'></a><a href='#L234'>234</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L234'></a><a href='#L234'>234</a>
+<a name='L235'></a><a href='#L235'>235</a>
+<a name='L236'></a><a href='#L236'>236</a>
+<a name='L237'></a><a href='#L237'>237</a>
+<a name='L238'></a><a href='#L238'>238</a>
+<a name='L239'></a><a href='#L239'>239</a>
+<a name='L240'></a><a href='#L240'>240</a>
+<a name='L241'></a><a href='#L241'>241</a>
+<a name='L242'></a><a href='#L242'>242</a>
+<a name='L243'></a><a href='#L243'>243</a>
+<a name='L244'></a><a href='#L244'>244</a>
+<a name='L245'></a><a href='#L245'>245</a>
+<a name='L246'></a><a href='#L246'>246</a>
+<a name='L247'></a><a href='#L247'>247</a>
+<a name='L248'></a><a href='#L248'>248</a>
+<a name='L249'></a><a href='#L249'>249</a>
+<a name='L250'></a><a href='#L250'>250</a>
+<a name='L251'></a><a href='#L251'>251</a>
+<a name='L252'></a><a href='#L252'>252</a>
+<a name='L253'></a><a href='#L253'>253</a>
+<a name='L254'></a><a href='#L254'>254</a>
+<a name='L255'></a><a href='#L255'>255</a>
+<a name='L256'></a><a href='#L256'>256</a>
+<a name='L257'></a><a href='#L257'>257</a>
+<a name='L258'></a><a href='#L258'>258</a>
+<a name='L259'></a><a href='#L259'>259</a>
+<a name='L260'></a><a href='#L260'>260</a>
+<a name='L261'></a><a href='#L261'>261</a>
+<a name='L262'></a><a href='#L262'>262</a>
+<a name='L263'></a><a href='#L263'>263</a>
+<a name='L264'></a><a href='#L264'>264</a>
+<a name='L265'></a><a href='#L265'>265</a>
+<a name='L266'></a><a href='#L266'>266</a>
+<a name='L267'></a><a href='#L267'>267</a>
+<a name='L268'></a><a href='#L268'>268</a>
+<a name='L269'></a><a href='#L269'>269</a>
+<a name='L270'></a><a href='#L270'>270</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>
 <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-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>
@@ -320,7 +351,38 @@
 <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-yes">10x</span>
+<span class="cline-any cline-yes">10x</span>
+<span class="cline-any cline-yes">10x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">10x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">10x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-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-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">10x</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>
@@ -374,13 +436,13 @@
 <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-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>
@@ -445,6 +507,8 @@
 <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-neutral">&nbsp;</span>
@@ -461,6 +525,9 @@
 <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-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -479,6 +546,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-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -490,19 +559,21 @@
 <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-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-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-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>
@@ -515,35 +586,49 @@
 <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-yes">10x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">10x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useRef, useEffect, useContext, useState, useCallback } from "react";
-import PropTypes from "prop-types";
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useRef, useEffect, useContext, useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+&nbsp;
+import MapContext from '../../contexts/MapContext';
+import { v4 as uuidv4 } from 'uuid';
+import useMapState from '../../hooks/useMapState';
+import MapLibreGlWrapper from '../MapLibreMap/lib/MapLibreGlWrapper';
 &nbsp;
-import MapContext from "../../contexts/MapContext";
-import { v4 as uuidv4 } from "uuid";
-import useMapState from "../../hooks/useMapState";
+export interface MapState {
+	lat?: number;
+	lng?: number;
+	zoom?: number;
+	bearing?: number;
+	pitch?: number;
+	layers?: {
+		visible: boolean;
+		id: string;
+	}[];
+}
 &nbsp;
-const getCurrentUrlParameters = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
-	let currentParams = <span class="cstat-no" title="statement not covered" >Object.fromEntries(new URLSearchParams(window.location.search));</span>
-<span class="cstat-no" title="statement not covered" >	currentParams.layers = JSON.parse(currentParams?.layers ? currentParams.layers : "[]");</span>
+const getCurrentUrlParameters = (): MapState =&gt; {
+	const currentParams = Object.fromEntries(new URLSearchParams(window.location.search));
+	currentParams.layers = JSON.parse(currentParams?.layers ? <span class="branch-0 cbranch-no" title="branch not covered" >currentParams.layers </span>: '[]');
 &nbsp;
-<span class="cstat-no" title="statement not covered" >	return currentParams;</span>
+	return currentParams;
 };
 &nbsp;
-const initialUrlParams = <span class="cstat-no" title="statement not covered" >getCurrentUrlParameters();</span>
+const initialUrlParams = getCurrentUrlParameters();
 &nbsp;
 /**
  * TODO: Add short &amp; useful description
@@ -553,14 +638,27 @@ const initialUrlParams = <span class="cstat-no" title="statement not covered" >g
  *
  * @component
  */
-const MlShareMapState = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(p</span>rops) =&gt; {</span>
+&nbsp;
+export interface MlShareMapStateProps {
+	//
+	mapId?: string;
+	idPrefix?: string;
+	active?: boolean;
+}
+&nbsp;
+export interface LayerStatesInterface {
+	//
+	[key: string]: boolean;
+}
+&nbsp;
+const MlShareMapState = <span class="fstat-no" title="function not covered" >(p</span>rops: MlShareMapStateProps) =&gt; {
 	// Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
 	const mapContext = <span class="cstat-no" title="statement not covered" >useContext(MapContext);</span>
 	const initializedRef = <span class="cstat-no" title="statement not covered" >useRef(false);</span>
-	const mapRef = <span class="cstat-no" title="statement not covered" >useRef(undefined);</span>
-	const [map, setMap] = <span class="cstat-no" title="statement not covered" >useState(undefined);</span>
+	const mapRef = <span class="cstat-no" title="statement not covered" >useRef&lt;MapLibreGlWrapper | undefined&gt;();</span>
+	const [map, setMap] = <span class="cstat-no" title="statement not covered" >useState&lt;MapLibreGlWrapper | undefined&gt;(undefined);</span>
 	const layersFromUrlParamsRef = <span class="cstat-no" title="statement not covered" >useRef({});</span>
-	const componentId = <span class="cstat-no" title="statement not covered" >useRef((props.idPrefix ? props.idPrefix : "MlShareMapState-") + uuidv4());</span>
+	const componentId = <span class="cstat-no" title="statement not covered" >useRef((props.idPrefix ? props.idPrefix : 'MlShareMapState-') + uuidv4());</span>
 	const mapState = <span class="cstat-no" title="statement not covered" >useMapState({</span>
 		watch: {
 			viewport: false,
@@ -573,7 +671,7 @@ const MlShareMapState = <span class="cstat-no" title="statement not covered" ><s
 	});
 &nbsp;
 	const allStatesRestoredRef = <span class="cstat-no" title="statement not covered" >useRef(false);</span>
-	const layerStatesRestored = <span class="cstat-no" title="statement not covered" >useRef(undefined);</span>
+	const layerStatesRestored = <span class="cstat-no" title="statement not covered" >useRef&lt;LayerStatesInterface&gt;();</span>
 	const restoredStatesRef = <span class="cstat-no" title="statement not covered" >useRef({</span>
 		viewport: {
 			center: false,
@@ -587,42 +685,42 @@ const MlShareMapState = <span class="cstat-no" title="statement not covered" ><s
 	});
 &nbsp;
 	// initial URL-Params
-	const mapStateRef = <span class="cstat-no" title="statement not covered" >useRef({});</span>
+	const mapStateRef = <span class="cstat-no" title="statement not covered" >useRef&lt;MapState&gt;({});</span>
 &nbsp;
 	const refreshUrlParameters = <span class="cstat-no" title="statement not covered" >useCallback(<span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
 <span class="cstat-no" title="statement not covered" >		if (!props.active) <span class="cstat-no" title="statement not covered" >return;</span></span>
 &nbsp;
-		let mapLayers = <span class="cstat-no" title="statement not covered" >[];</span>
-<span class="cstat-no" title="statement not covered" >		for (let x in mapState.layers) {</span>
+		const mapLayers = <span class="cstat-no" title="statement not covered" >[];</span>
+<span class="cstat-no" title="statement not covered" >		for (const x in mapState.layers) {</span>
 <span class="cstat-no" title="statement not covered" >			mapLayers.push({</span>
-				id: mapState.layers[x].id,
-				type: mapState.layers[x].type,
-				visible: mapState.layers[x].visible,
+				id: mapState.layers[x]?.id,
+				type: mapState.layers[x]?.type,
+				visible: mapState.layers[x]?.visible,
 			});
 		}
 <span class="cstat-no" title="statement not covered" >		refreshMapState();</span>
-		let urlParams = <span class="cstat-no" title="statement not covered" >new URLSearchParams({</span>
-			...getCurrentUrlParameters(),
-			...mapStateRef.current,
+		const urlParams = <span class="cstat-no" title="statement not covered" >new URLSearchParams({</span>
+			...(getCurrentUrlParameters() as Record&lt;string, string&gt;),
+			...(mapStateRef.current as Record&lt;string, string&gt;),
 			layers: JSON.stringify(mapLayers),
 		});
-<span class="cstat-no" title="statement not covered" >		JSON.parse(Object.fromEntries(urlParams).layers).forEach(<span class="fstat-no" title="function not covered" >(e</span>l) =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >		JSON.parse(Object.fromEntries(urlParams).layers).forEach(<span class="fstat-no" title="function not covered" >(e</span>l: { id: number }) =&gt; {</span>
+			// is iD a number?
 <span class="cstat-no" title="statement not covered" >			layersFromUrlParamsRef.current[el.id] = false;</span>
 		});
 &nbsp;
-		let currentParams = <span class="cstat-no" title="statement not covered" >new URLSearchParams(window.location.search);</span>
-<span class="cstat-no" title="statement not covered" >		checkRestorationStates(mapState.layers);</span>
+		const currentParams = <span class="cstat-no" title="statement not covered" >new URLSearchParams(window.location.search);</span>
 <span class="cstat-no" title="statement not covered" >		if (urlParams.toString() !== currentParams.toString()) {</span>
 <span class="cstat-no" title="statement not covered" >			window.history.pushState(</span>
 				{ ...mapStateRef.current },
 				document.title,
-				"?" + urlParams.toString()
+				'?' + urlParams.toString()
 			);
 		}
 	}, [mapState.layers, props.active]);
 &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" >		mapStateRef.current = getCurrentUrlParameters();</span>
 &nbsp;
@@ -650,12 +748,12 @@ const MlShareMapState = <span class="cstat-no" title="statement not covered" ><s
 <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 (!mapRef.current) <span class="cstat-no" title="statement not covered" >return;</span></span>
 &nbsp;
-		let _refreshUrlParameters = <span class="cstat-no" title="statement not covered" >refreshUrlParameters;</span>
+		const _refreshUrlParameters = <span class="cstat-no" title="statement not covered" >refreshUrlParameters;</span>
 &nbsp;
-<span class="cstat-no" title="statement not covered" >		mapRef.current.on("moveend", _refreshUrlParameters, componentId.current);</span>
+<span class="cstat-no" title="statement not covered" >		mapRef.current.on('moveend', _refreshUrlParameters, componentId.current);</span>
 &nbsp;
 <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?.off("moveend", _refreshUrlParameters);</span>
+<span class="cstat-no" title="statement not covered" >			mapRef.current?.map.off('moveend', _refreshUrlParameters);</span>
 		};
 	}, [refreshUrlParameters, map]);
 &nbsp;
@@ -674,14 +772,16 @@ const MlShareMapState = <span class="cstat-no" title="statement not covered" ><s
 <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 (!mapState?.layers?.length) <span class="cstat-no" title="statement not covered" >return;</span></span>
 &nbsp;
-<span class="cstat-no" title="statement not covered" >		if (typeof layerStatesRestored.current === "undefined") {</span>
-<span class="cstat-no" title="statement not covered" >			layerStatesRestored.current = {};</span>
-<span class="cstat-no" title="statement not covered" >			initialUrlParams?.layers.forEach(<span class="fstat-no" title="function not covered" >(l</span>ayer) =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >				layerStatesRestored.current[layer.id] = false;</span>
+<span class="cstat-no" title="statement not covered" >		if (typeof layerStatesRestored.current === 'undefined') {</span>
+<span class="cstat-no" title="statement not covered" >			layerStatesRestored.current = undefined;</span>
+<span class="cstat-no" title="statement not covered" >			initialUrlParams?.layers?.forEach(<span class="fstat-no" title="function not covered" >(l</span>ayer: { id: string }) =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >				if (layerStatesRestored.current?.[layer.id]) {</span>
+<span class="cstat-no" title="statement not covered" >					layerStatesRestored.current[layer.id] = false;</span>
+				}
 			});
 		}
 &nbsp;
-<span class="cstat-no" title="statement not covered" >		for (let key in layerStatesRestored.current) {</span>
+<span class="cstat-no" title="statement not covered" >		for (const key in layerStatesRestored.current) {</span>
 			let _allDone = <span class="cstat-no" title="statement not covered" >true;</span>
 <span class="cstat-no" title="statement not covered" >			if (layerStatesRestored.current[key] === false) {</span>
 <span class="cstat-no" title="statement not covered" >				_allDone = false;</span>
@@ -693,11 +793,14 @@ const MlShareMapState = <span class="cstat-no" title="statement not covered" ><s
 &nbsp;
 <span class="cstat-no" title="statement not covered" >		if (initialUrlParams.layers) {</span>
 <span class="cstat-no" title="statement not covered" >			initialUrlParams.layers.forEach(<span class="fstat-no" title="function not covered" >(l</span>ayer) =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >				if (mapRef.current?.getLayer(layer.id) &amp;&amp; layerStatesRestored.current[layer.id] === false) {</span>
+<span class="cstat-no" title="statement not covered" >				if (</span>
+					mapRef.current?.map.getLayer(layer.id) &amp;&amp; //number oder str?
+					layerStatesRestored.current?.[layer.id] === false
+				) {
 <span class="cstat-no" title="statement not covered" >					layerStatesRestored.current[layer.id] = true;</span>
-<span class="cstat-no" title="statement not covered" >					mapRef.current</span>
+<span class="cstat-no" title="statement not covered" >					mapRef.current.map</span>
 						?.getLayer(layer.id)
-						?.setLayoutProperty("visibility", layer.visible ? "visible" : "none");
+						?.setLayoutProperty('visibility', layer.visible ? 'visible' : 'none');
 				}
 			});
 		}
@@ -712,28 +815,32 @@ const MlShareMapState = <span class="cstat-no" title="statement not covered" ><s
 		}
 	}, [props.active, map, mapState.layers]);
 &nbsp;
-	const refreshMapState = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >		mapStateRef.current.lat = mapRef.current.getCenter().lat;</span>
-<span class="cstat-no" title="statement not covered" >		mapStateRef.current.lng = mapRef.current.getCenter().lng;</span>
-<span class="cstat-no" title="statement not covered" >		mapStateRef.current.zoom = mapRef.current.getZoom();</span>
-<span class="cstat-no" title="statement not covered" >		mapStateRef.current.bearing = mapRef.current.getBearing();</span>
-<span class="cstat-no" title="statement not covered" >		mapStateRef.current.pitch = mapRef.current.getPitch();</span>
-	};
+	//ist .current?.map. richtig?
 &nbsp;
-	const checkRestorationStates = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(s</span>tateArray) =&gt; {</span>
-		let tempArray = <span class="cstat-no" title="statement not covered" >{};</span>
-<span class="cstat-no" title="statement not covered" >		stateArray.forEach(<span class="fstat-no" title="function not covered" >(e</span>l, i, arr) =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >			if (!arr[el.key]) <span class="cstat-no" title="statement not covered" >tempArray[el.key] = true;</span></span>
-		});
+	const refreshMapState = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >		mapStateRef.current.lat = mapRef.current?.map.getCenter().lat;</span>
+<span class="cstat-no" title="statement not covered" >		mapStateRef.current.lng = mapRef.current?.map.getCenter().lng;</span>
+<span class="cstat-no" title="statement not covered" >		mapStateRef.current.zoom = mapRef.current?.map.getZoom();</span>
+<span class="cstat-no" title="statement not covered" >		mapStateRef.current.bearing = mapRef.current?.map.getBearing();</span>
+<span class="cstat-no" title="statement not covered" >		mapStateRef.current.pitch = mapRef.current?.map.getPitch();</span>
 	};
 &nbsp;
 	const restoreViewportState = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
 <span class="cstat-no" title="statement not covered" >		if (!restoredStatesRef.current.viewport.center) {</span>
 <span class="cstat-no" title="statement not covered" >			restoredStatesRef.current.viewport.center = true;</span>
-<span class="cstat-no" title="statement not covered" >			mapRef.current.setCenter([mapStateRef.current.lng, mapStateRef.current.lat]);</span>
-<span class="cstat-no" title="statement not covered" >			mapRef.current.setZoom(mapStateRef.current.zoom);</span>
-<span class="cstat-no" title="statement not covered" >			mapRef.current.setBearing(mapStateRef.current.bearing);</span>
-<span class="cstat-no" title="statement not covered" >			mapRef.current.setPitch(mapStateRef.current.pitch);</span>
+&nbsp;
+<span class="cstat-no" title="statement not covered" >			if (mapStateRef.current.lng &amp;&amp; mapStateRef.current.lat) {</span>
+<span class="cstat-no" title="statement not covered" >				mapRef.current?.map.setCenter([mapStateRef.current.lng, mapStateRef.current.lat]);</span>
+			}
+<span class="cstat-no" title="statement not covered" >			if (mapStateRef.current.zoom) {</span>
+<span class="cstat-no" title="statement not covered" >				mapRef.current?.map.setZoom(mapStateRef.current.zoom);</span>
+			}
+<span class="cstat-no" title="statement not covered" >			if (mapStateRef.current.bearing) {</span>
+<span class="cstat-no" title="statement not covered" >				mapRef.current?.map.setBearing(mapStateRef.current.bearing);</span>
+			}
+<span class="cstat-no" title="statement not covered" >			if (mapStateRef.current.pitch) {</span>
+<span class="cstat-no" title="statement not covered" >				mapRef.current?.map.setPitch(mapStateRef.current.pitch);</span>
+			}
 		}
 &nbsp;
 <span class="cstat-no" title="statement not covered" >		allStatesRestoredRef.current = true;</span>
@@ -741,7 +848,8 @@ const MlShareMapState = <span class="cstat-no" title="statement not covered" ><s
 &nbsp;
 <span class="cstat-no" title="statement not covered" >	window.onpopstate = <span class="fstat-no" title="function not covered" >(e</span>vent) =&gt; {</span>
 <span class="cstat-no" title="statement not covered" >		if (event.state &amp;&amp; event.state.lng &amp;&amp; event.state.lat &amp;&amp; event.state.zoom) {</span>
-<span class="cstat-no" title="statement not covered" >			mapRef.current.easeTo({</span>
+<span class="cstat-no" title="statement not covered" >			mapRef.current?.map.easeTo({</span>
+				// so möglich?
 				zoom: event.state.zoom,
 				center: [event.state.lng, event.state.lat],
 			});
@@ -749,13 +857,13 @@ const MlShareMapState = <span class="cstat-no" title="statement not covered" ><s
 	};
 &nbsp;
 <span class="cstat-no" title="statement not covered" >	return &lt;&gt;&lt;/&gt;;</span>
-};
+};;
 &nbsp;
-<span class="cstat-no" title="statement not covered" >MlShareMapState.defaultProps = {</span>
+MlShareMapState.defaultProps = {
 	mapId: undefined,
 };
 &nbsp;
-<span class="cstat-no" title="statement not covered" >MlShareMapState.propTypes = {</span>
+MlShareMapState.propTypes = {
 	/**
 	 * Id of the target MapLibre instance in mapContext
 	 */
@@ -769,7 +877,7 @@ export default MlShareMapState;
             <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 2023-01-23T12:34:46.087Z
+                at 2023-01-30T08:41:54.902Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/components/MlShareMapState/index.html CHANGED Viewed

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">7.47% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>0/108</span>
+                <span class='fraction'>8/107</span>
             </div>
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">1.56% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/54</span>
+                <span class='fraction'>1/64</span>
             </div>
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">5.88% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>0/19</span>
+                <span class='fraction'>1/17</span>
             </div>
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">8% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>0/100</span>
+                <span class='fraction'>8/100</span>
             </div>
@@ -79,18 +79,18 @@
 </tr>
 </thead>
 <tbody><tr>
-	<td class="file low" data-value="MlShareMapState.js"><a href="MlShareMapState.js.html">MlShareMapState.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 class="file low" data-value="MlShareMapState.tsx"><a href="MlShareMapState.tsx.html">MlShareMapState.tsx</a></td>
+	<td data-value="7.47" class="pic low">
+	<div class="chart"><div class="cover-fill" style="width: 7%"></div><div class="cover-empty" style="width: 93%"></div></div>
 	</td>
-	<td data-value="0" class="pct low">0%</td>
-	<td data-value="108" class="abs low">0/108</td>
-	<td data-value="0" class="pct low">0%</td>
-	<td data-value="54" class="abs low">0/54</td>
-	<td data-value="0" class="pct low">0%</td>
-	<td data-value="19" class="abs low">0/19</td>
-	<td data-value="0" class="pct low">0%</td>
-	<td data-value="100" class="abs low">0/100</td>
+	<td data-value="7.47" class="pct low">7.47%</td>
+	<td data-value="107" class="abs low">8/107</td>
+	<td data-value="1.56" class="pct low">1.56%</td>
+	<td data-value="64" class="abs low">1/64</td>
+	<td data-value="5.88" class="pct low">5.88%</td>
+	<td data-value="17" class="abs low">1/17</td>
+	<td data-value="8" class="pct low">8%</td>
+	<td data-value="100" class="abs low">8/100</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 2023-01-23T12:34:46.087Z
+                at 2023-01-30T08:41:54.902Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/components/MlSketchTool/LayerList/ColorPicker.tsx.html CHANGED Viewed

@@ -199,7 +199,7 @@ export default function <span class="fstat-no" title="function not covered" >Pai
             <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 2023-01-23T12:34:46.087Z
+                at 2023-01-30T08:41:54.902Z
             </div>
         <script src="../../../../prettify.js"></script>
         <script>