npm - @mapcomponents/react-maplibre - Versions diffs - 0.1.20 → 0.1.21 - Mend

@mapcomponents/react-maplibre 0.1.20 → 0.1.21

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 (83) hide show

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

@@ -25,28 +25,28 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>0/87</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/42</span>
+                <span class='fraction'>0/54</span>
             </div>
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>0/10</span>
+                <span class='fraction'>0/19</span>
             </div>
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>0/81</span>
+                <span class='fraction'>0/100</span>
             </div>
@@ -246,13 +246,72 @@
 <a name='L181'></a><a href='#L181'>181</a>
 <a name='L182'></a><a href='#L182'>182</a>
 <a name='L183'></a><a href='#L183'>183</a>
-<a name='L184'></a><a href='#L184'>184</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L184'></a><a href='#L184'>184</a>
+<a name='L185'></a><a href='#L185'>185</a>
+<a name='L186'></a><a href='#L186'>186</a>
+<a name='L187'></a><a href='#L187'>187</a>
+<a name='L188'></a><a href='#L188'>188</a>
+<a name='L189'></a><a href='#L189'>189</a>
+<a name='L190'></a><a href='#L190'>190</a>
+<a name='L191'></a><a href='#L191'>191</a>
+<a name='L192'></a><a href='#L192'>192</a>
+<a name='L193'></a><a href='#L193'>193</a>
+<a name='L194'></a><a href='#L194'>194</a>
+<a name='L195'></a><a href='#L195'>195</a>
+<a name='L196'></a><a href='#L196'>196</a>
+<a name='L197'></a><a href='#L197'>197</a>
+<a name='L198'></a><a href='#L198'>198</a>
+<a name='L199'></a><a href='#L199'>199</a>
+<a name='L200'></a><a href='#L200'>200</a>
+<a name='L201'></a><a href='#L201'>201</a>
+<a name='L202'></a><a href='#L202'>202</a>
+<a name='L203'></a><a href='#L203'>203</a>
+<a name='L204'></a><a href='#L204'>204</a>
+<a name='L205'></a><a href='#L205'>205</a>
+<a name='L206'></a><a href='#L206'>206</a>
+<a name='L207'></a><a href='#L207'>207</a>
+<a name='L208'></a><a href='#L208'>208</a>
+<a name='L209'></a><a href='#L209'>209</a>
+<a name='L210'></a><a href='#L210'>210</a>
+<a name='L211'></a><a href='#L211'>211</a>
+<a name='L212'></a><a href='#L212'>212</a>
+<a name='L213'></a><a href='#L213'>213</a>
+<a name='L214'></a><a href='#L214'>214</a>
+<a name='L215'></a><a href='#L215'>215</a>
+<a name='L216'></a><a href='#L216'>216</a>
+<a name='L217'></a><a href='#L217'>217</a>
+<a name='L218'></a><a href='#L218'>218</a>
+<a name='L219'></a><a href='#L219'>219</a>
+<a name='L220'></a><a href='#L220'>220</a>
+<a name='L221'></a><a href='#L221'>221</a>
+<a name='L222'></a><a href='#L222'>222</a>
+<a name='L223'></a><a href='#L223'>223</a>
+<a name='L224'></a><a href='#L224'>224</a>
+<a name='L225'></a><a href='#L225'>225</a>
+<a name='L226'></a><a href='#L226'>226</a>
+<a name='L227'></a><a href='#L227'>227</a>
+<a name='L228'></a><a href='#L228'>228</a>
+<a name='L229'></a><a href='#L229'>229</a>
+<a name='L230'></a><a href='#L230'>230</a>
+<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>
 <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>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -281,11 +340,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-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-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -293,23 +355,28 @@
 <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>
 <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-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-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>
@@ -317,67 +384,101 @@
 <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-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-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-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-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-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-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-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-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-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-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-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>
 <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-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-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-no">&nbsp;</span>
@@ -385,10 +486,12 @@
 <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-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -396,17 +499,11 @@
 <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-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-no">&nbsp;</span>
@@ -415,6 +512,9 @@
 <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-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -429,13 +529,22 @@
 <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} from "react";
+<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 "@mapcomponents/react-core";
-import {v4 as uuidv4} from "uuid";
+import { MapContext } from "@mapcomponents/react-core";
+import { v4 as uuidv4 } from "uuid";
 import useMapState from "../../hooks/useMapState";
 &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>
+&nbsp;
+<span class="cstat-no" title="statement not covered" >  return currentParams;</span>
+};
+&nbsp;
+const initialUrlParams = <span class="cstat-no" title="statement not covered" >getCurrentUrlParameters();</span>
+&nbsp;
 /**
  * TODO: Add short &amp; useful description
  *
@@ -450,24 +559,73 @@ const MlShareMapState = <span class="cstat-no" title="statement not covered" ><s
   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 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 [isInitialState, setIsInitialState] = <span class="cstat-no" title="statement not covered" >useState(true);</span>
   const mapState = <span class="cstat-no" title="statement not covered" >useMapState({</span>
     watch: {
       viewport: false,
       layers: true,
-      sources: false
+      sources: false,
     },
     filter: {
-      includeBaseLayers: false
-    }
-  })
+      includeBaseLayers: false,
+    },
+  });
+&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 restoredStatesRef = <span class="cstat-no" title="statement not covered" >useRef({</span>
+    viewport: {
+      center: false,
+      bearing: false,
+      pitch: false,
+      zoom: false,
+    },
+    layers: {
+      ...layersFromUrlParamsRef,
+    },
+  });
 &nbsp;
+  // initial URL-Params
   const mapStateRef = <span class="cstat-no" title="statement not covered" >useRef({});</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>
+<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,
+      });
+    }
+<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,
+      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" >      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>
+<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()
+      );
+    }
+  }, [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>
 &nbsp;
+<span class="cstat-no" title="statement not covered" >    mapStateRef.current = getCurrentUrlParameters();</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
       // try to remove anything this component has added to the MapLibre-gl instance
@@ -484,117 +642,109 @@ const MlShareMapState = <span class="cstat-no" title="statement not covered" ><s
   }, []);
 &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 (!mapRef.current) <span class="cstat-no" title="statement not covered" >return;</span></span>
+&nbsp;
+<span class="cstat-no" title="statement not covered" >    refreshUrlParameters();</span>
+  }, [refreshUrlParameters]);
+&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 (!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>
+&nbsp;
+<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>
+    };
+  }, [refreshUrlParameters, 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.mapExists(props.mapId) || initializedRef.current) <span class="cstat-no" title="statement not covered" >return;</span></span>
     // the MapLibre-gl instance (mapContext.getMap(props.mapId)) is accessible here
     // 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" >    setMap(mapRef.current);</span>
-&nbsp;
-    const currentUrlParams = <span class="cstat-no" title="statement not covered" >getCurrentUrlParameters();</span>
-<span class="cstat-no" title="statement not covered" >    if (currentUrlParams.lat &amp;&amp; currentUrlParams.lng) {</span>
-<span class="cstat-no" title="statement not covered" >      mapStateRef.current.lat = currentUrlParams.lat;</span>
-<span class="cstat-no" title="statement not covered" >      mapStateRef.current.lng = currentUrlParams.lng;</span>
-<span class="cstat-no" title="statement not covered" >      mapStateRef.current.zoom = currentUrlParams.zoom;</span>
-<span class="cstat-no" title="statement not covered" >      mapRef.current.setZoom(mapStateRef.current.zoom);</span>
+<span class="cstat-no" title="statement not covered" >    if (mapStateRef.current.lat &amp;&amp; mapStateRef.current.lng) {</span>
+<span class="cstat-no" title="statement not covered" >      restoreViewportState();</span>
     }
   }, [mapContext.mapIds, mapContext, props.mapId, props.active]);
 &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 (!map) <span class="cstat-no" title="statement not covered" >return;</span></span>
-<span class="cstat-no" title="statement not covered" >    if(!mapState.layers) <span class="cstat-no" title="statement not covered" >return;</span></span>
-<span class="cstat-no" title="statement not covered" >    if(!isInitialState) <span class="cstat-no" title="statement not covered" >return;</span></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;
-    const currentUrlParams = <span class="cstat-no" title="statement not covered" >getCurrentUrlParameters()</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 = {};</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>
+      });
+    }
 &nbsp;
-<span class="cstat-no" title="statement not covered" >    if(currentUrlParams.layers) {</span>
-<span class="cstat-no" title="statement not covered" >      for (let x in currentUrlParams.layers) {</span>
-<span class="cstat-no" title="statement not covered" >        mapRef.current.getLayer(currentUrlParams.layers[x].id).visibility = currentUrlParams.layers[x].visible ? "visible" : "none"</span>
-<span class="cstat-no" title="statement not covered" >        mapRef.current.getLayer(currentUrlParams.layers[x].id).type = currentUrlParams.layers[x].type</span>
+<span class="cstat-no" title="statement not covered" >    for (let 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>
+      }
+<span class="cstat-no" title="statement not covered" >      if (_allDone) {</span>
+<span class="cstat-no" title="statement not covered" >        return;</span>
       }
     }
 &nbsp;
-  }, [mapState.layers, props.mapId, props.active])
+<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" >          layerStatesRestored.current[layer.id] = true;</span>
+<span class="cstat-no" title="statement not covered" >          mapRef.current</span>
+            ?.getLayer(layer.id)
+            ?.setLayoutProperty("visibility", layer.visible ? "visible" : "none");
+        }
+      });
+    }
+  }, [mapState.layers, props.mapId, props.active]);
 &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 (!map) <span class="cstat-no" title="statement not covered" >return;</span></span>
 <span class="cstat-no" title="statement not covered" >    if (!mapState.layers) <span class="cstat-no" title="statement not covered" >return;</span></span>
 &nbsp;
-<span class="cstat-no" title="statement not covered" >    if (props.active) {</span>
-<span class="cstat-no" title="statement not covered" >      setIsInitialState(false)</span>
-<span class="cstat-no" title="statement not covered" >      map.on(</span>
-        "moveend",
-<span class="fstat-no" title="function not covered" >        ()</span> =&gt; {
-          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>
-<span class="cstat-no" title="statement not covered" >            mapLayers.push(new URLSearchParams({</span>
-              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,
-            layers : mapLayers
-          });
-&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" >          if (urlParams.toString() !== currentParams.toString()) {</span>
-<span class="cstat-no" title="statement not covered" >            window.history.pushState(</span>
-              {...mapStateRef.current},
-              document.title,
-              "?" + urlParams.toString()
-            );
-          }
-        },
-        componentId.current
-      );
-    } else {
+<span class="cstat-no" title="statement not covered" >    if (!props.active) {</span>
 <span class="cstat-no" title="statement not covered" >      map.cleanup(componentId.current);</span>
     }
-  }, [props.active, map]);
-&nbsp;
-  const getCurrentUrlParameters = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
-    let parameterObject = <span class="cstat-no" title="statement not covered" >Object.fromEntries(new URLSearchParams(window.location.search))</span>
-&nbsp;
-<span class="cstat-no" title="statement not covered" >    if(window.location.search.indexOf("layers")!==-1) {</span>
-      let layerParamString = <span class="cstat-no" title="statement not covered" >window.location.search.substring(window.location.search.indexOf("layers"))</span>
-<span class="cstat-no" title="statement not covered" >      layerParamString = layerParamString.substring(0, (layerParamString.indexOf("&amp;")!==-1) ? layerParamString.indexOf("&amp;") : layerParamString.length)</span>
-<span class="cstat-no" title="statement not covered" >      parameterObject = Object.fromEntries(new URLSearchParams(window.location.search.replace(layerParamString, "")))</span>
-      let layerParams = <span class="cstat-no" title="statement not covered" >layerParamString.substring(7)</span>
-<span class="cstat-no" title="statement not covered" >      layerParams = layerParams.replaceAll("%3D", "=")</span>
-<span class="cstat-no" title="statement not covered" >      layerParams = layerParams.replaceAll("%26", "&amp;")</span>
-<span class="cstat-no" title="statement not covered" >      layerParams = layerParams.replaceAll("%2C", ",")</span>
-&nbsp;
-<span class="cstat-no" title="statement not covered" >      if (layerParams.indexOf(",")) {</span>
-<span class="cstat-no" title="statement not covered" >        layerParams = layerParams.split(",")</span>
-      } else {
-<span class="cstat-no" title="statement not covered" >        layerParams = [layerParams]</span>
-      }
-&nbsp;
-<span class="cstat-no" title="statement not covered" >      for (let x in layerParams) {</span>
-        let layerState = <span class="cstat-no" title="statement not covered" >layerParams[x].split("&amp;")</span>
-<span class="cstat-no" title="statement not covered" >        layerParams[x] = {}</span>
-<span class="cstat-no" title="statement not covered" >        for (let y in layerState) {</span>
-<span class="cstat-no" title="statement not covered" >          layerParams[x][layerState[y].split("=")[0]] = layerState[y].split("=")[1]</span>
-        }
-      }
-<span class="cstat-no" title="statement not covered" >      parameterObject["layers"] = layerParams</span>
-    }
-<span class="cstat-no" title="statement not covered" >    return parameterObject</span>
-  };
+  }, [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>
+  };
+&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>
+    });
+  };
+&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" >    allStatesRestoredRef.current = true;</span>
   };
 &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({zoom: event.state.zoom, center: [event.state.lng, event.state.lat]});</span>
+<span class="cstat-no" title="statement not covered" >      mapRef.current.easeTo({</span>
+        zoom: event.state.zoom,
+        center: [event.state.lng, event.state.lat],
+      });
     }
   };
 &nbsp;
@@ -619,7 +769,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 Mon Jan 17 2022 10:02:27 GMT+0000 (Coordinated Universal Time)
+                at Fri Jan 21 2022 19:54:16 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>