npm - @mapcomponents/react-maplibre - Versions diffs - 0.1.12 → 0.1.16 - Mend

@mapcomponents/react-maplibre 0.1.12 → 0.1.16

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

package/coverage/lcov-report/{components → src/components}/MlOsmLayer/index.html RENAMED Viewed

@@ -3,15 +3,15 @@
 <html lang="en">
 <head>
-    <title>Code coverage report for components/MlOsmLayer</title>
+    <title>Code coverage report for src/components/MlOsmLayer</title>
     <meta charset="utf-8" />
-    <link rel="stylesheet" href="../../prettify.css" />
-    <link rel="stylesheet" href="../../base.css" />
-    <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
+    <link rel="stylesheet" href="../../../prettify.css" />
+    <link rel="stylesheet" href="../../../base.css" />
+    <link rel="shortcut icon" type="image/x-icon" href="../../../favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <style type='text/css'>
         .coverage-summary .sorter {
-            background-image: url(../../sort-arrow-sprite.png);
+            background-image: url(../../../sort-arrow-sprite.png);
         }
     </style>
 </head>
@@ -19,7 +19,7 @@
 <body>
 <div class='wrapper'>
     <div class='pad1'>
-        <h1><a href="../../index.html">All files</a> components/MlOsmLayer</h1>
+        <h1><a href="../../../index.html">All files</a> src/components/MlOsmLayer</h1>
         <div class='clearfix'>
             <div class='fl pad1y space-right2'>
@@ -101,17 +101,17 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener">istanbul</a>
-                at Sat Dec 04 2021 10:55:55 GMT+0000 (Coordinated Universal Time)
+                at Thu Dec 23 2021 12:19:00 GMT+0000 (Coordinated Universal Time)
             </div>
         </div>
-        <script src="../../prettify.js"></script>
+        <script src="../../../prettify.js"></script>
         <script>
             window.onload = function () {
                 prettyPrint();
             };
         </script>
-        <script src="../../sorter.js"></script>
-        <script src="../../block-navigation.js"></script>
+        <script src="../../../sorter.js"></script>
+        <script src="../../../block-navigation.js"></script>
     </body>
 </html>

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

@@ -3,15 +3,15 @@
 <html lang="en">
 <head>
-    <title>Code coverage report for components/MlScaleReference/MlScaleReference.js</title>
+    <title>Code coverage report for src/components/MlScaleReference/MlScaleReference.js</title>
     <meta charset="utf-8" />
-    <link rel="stylesheet" href="../../prettify.css" />
-    <link rel="stylesheet" href="../../base.css" />
-    <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
+    <link rel="stylesheet" href="../../../prettify.css" />
+    <link rel="stylesheet" href="../../../base.css" />
+    <link rel="shortcut icon" type="image/x-icon" href="../../../favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <style type='text/css'>
         .coverage-summary .sorter {
-            background-image: url(../../sort-arrow-sprite.png);
+            background-image: url(../../../sort-arrow-sprite.png);
         }
     </style>
 </head>
@@ -19,7 +19,7 @@
 <body>
 <div class='wrapper'>
     <div class='pad1'>
-        <h1><a href="../../index.html">All files</a> / <a href="index.html">components/MlScaleReference</a> MlScaleReference.js</h1>
+        <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/components/MlScaleReference</a> MlScaleReference.js</h1>
         <div class='clearfix'>
             <div class='fl pad1y space-right2'>
@@ -535,17 +535,17 @@ export default MlScaleReference;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener">istanbul</a>
-                at Sat Dec 04 2021 10:55:55 GMT+0000 (Coordinated Universal Time)
+                at Thu Dec 23 2021 12:19:00 GMT+0000 (Coordinated Universal Time)
             </div>
         </div>
-        <script src="../../prettify.js"></script>
+        <script src="../../../prettify.js"></script>
         <script>
             window.onload = function () {
                 prettyPrint();
             };
         </script>
-        <script src="../../sorter.js"></script>
-        <script src="../../block-navigation.js"></script>
+        <script src="../../../sorter.js"></script>
+        <script src="../../../block-navigation.js"></script>
     </body>
 </html>

package/coverage/lcov-report/{components → src/components}/MlScaleReference/index.html RENAMED Viewed

@@ -3,15 +3,15 @@
 <html lang="en">
 <head>
-    <title>Code coverage report for components/MlScaleReference</title>
+    <title>Code coverage report for src/components/MlScaleReference</title>
     <meta charset="utf-8" />
-    <link rel="stylesheet" href="../../prettify.css" />
-    <link rel="stylesheet" href="../../base.css" />
-    <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
+    <link rel="stylesheet" href="../../../prettify.css" />
+    <link rel="stylesheet" href="../../../base.css" />
+    <link rel="shortcut icon" type="image/x-icon" href="../../../favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <style type='text/css'>
         .coverage-summary .sorter {
-            background-image: url(../../sort-arrow-sprite.png);
+            background-image: url(../../../sort-arrow-sprite.png);
         }
     </style>
 </head>
@@ -19,7 +19,7 @@
 <body>
 <div class='wrapper'>
     <div class='pad1'>
-        <h1><a href="../../index.html">All files</a> components/MlScaleReference</h1>
+        <h1><a href="../../../index.html">All files</a> src/components/MlScaleReference</h1>
         <div class='clearfix'>
             <div class='fl pad1y space-right2'>
@@ -101,17 +101,17 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener">istanbul</a>
-                at Sat Dec 04 2021 10:55:55 GMT+0000 (Coordinated Universal Time)
+                at Thu Dec 23 2021 12:19:00 GMT+0000 (Coordinated Universal Time)
             </div>
         </div>
-        <script src="../../prettify.js"></script>
+        <script src="../../../prettify.js"></script>
         <script>
             window.onload = function () {
                 prettyPrint();
             };
         </script>
-        <script src="../../sorter.js"></script>
-        <script src="../../block-navigation.js"></script>
+        <script src="../../../sorter.js"></script>
+        <script src="../../../block-navigation.js"></script>
     </body>
 </html>

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

@@ -3,15 +3,15 @@
 <html lang="en">
 <head>
-    <title>Code coverage report for components/MlShareMapState/MlShareMapState.js</title>
+    <title>Code coverage report for src/components/MlShareMapState/MlShareMapState.js</title>
     <meta charset="utf-8" />
-    <link rel="stylesheet" href="../../prettify.css" />
-    <link rel="stylesheet" href="../../base.css" />
-    <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
+    <link rel="stylesheet" href="../../../prettify.css" />
+    <link rel="stylesheet" href="../../../base.css" />
+    <link rel="shortcut icon" type="image/x-icon" href="../../../favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <style type='text/css'>
         .coverage-summary .sorter {
-            background-image: url(../../sort-arrow-sprite.png);
+            background-image: url(../../../sort-arrow-sprite.png);
         }
     </style>
 </head>
@@ -19,34 +19,34 @@
 <body>
 <div class='wrapper'>
     <div class='pad1'>
-        <h1><a href="../../index.html">All files</a> / <a href="index.html">components/MlShareMapState</a> MlShareMapState.js</h1>
+        <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/components/MlShareMapState</a> MlShareMapState.js</h1>
         <div class='clearfix'>
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>0/50</span>
+                <span class='fraction'>0/87</span>
             </div>
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/24</span>
+                <span class='fraction'>0/42</span>
             </div>
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>0/9</span>
+                <span class='fraction'>0/10</span>
             </div>
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>0/48</span>
+                <span class='fraction'>0/81</span>
             </div>
@@ -182,7 +182,71 @@
 <a name='L117'></a><a href='#L117'>117</a>
 <a name='L118'></a><a href='#L118'>118</a>
 <a name='L119'></a><a href='#L119'>119</a>
-<a name='L120'></a><a href='#L120'>120</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L120'></a><a href='#L120'>120</a>
+<a name='L121'></a><a href='#L121'>121</a>
+<a name='L122'></a><a href='#L122'>122</a>
+<a name='L123'></a><a href='#L123'>123</a>
+<a name='L124'></a><a href='#L124'>124</a>
+<a name='L125'></a><a href='#L125'>125</a>
+<a name='L126'></a><a href='#L126'>126</a>
+<a name='L127'></a><a href='#L127'>127</a>
+<a name='L128'></a><a href='#L128'>128</a>
+<a name='L129'></a><a href='#L129'>129</a>
+<a name='L130'></a><a href='#L130'>130</a>
+<a name='L131'></a><a href='#L131'>131</a>
+<a name='L132'></a><a href='#L132'>132</a>
+<a name='L133'></a><a href='#L133'>133</a>
+<a name='L134'></a><a href='#L134'>134</a>
+<a name='L135'></a><a href='#L135'>135</a>
+<a name='L136'></a><a href='#L136'>136</a>
+<a name='L137'></a><a href='#L137'>137</a>
+<a name='L138'></a><a href='#L138'>138</a>
+<a name='L139'></a><a href='#L139'>139</a>
+<a name='L140'></a><a href='#L140'>140</a>
+<a name='L141'></a><a href='#L141'>141</a>
+<a name='L142'></a><a href='#L142'>142</a>
+<a name='L143'></a><a href='#L143'>143</a>
+<a name='L144'></a><a href='#L144'>144</a>
+<a name='L145'></a><a href='#L145'>145</a>
+<a name='L146'></a><a href='#L146'>146</a>
+<a name='L147'></a><a href='#L147'>147</a>
+<a name='L148'></a><a href='#L148'>148</a>
+<a name='L149'></a><a href='#L149'>149</a>
+<a name='L150'></a><a href='#L150'>150</a>
+<a name='L151'></a><a href='#L151'>151</a>
+<a name='L152'></a><a href='#L152'>152</a>
+<a name='L153'></a><a href='#L153'>153</a>
+<a name='L154'></a><a href='#L154'>154</a>
+<a name='L155'></a><a href='#L155'>155</a>
+<a name='L156'></a><a href='#L156'>156</a>
+<a name='L157'></a><a href='#L157'>157</a>
+<a name='L158'></a><a href='#L158'>158</a>
+<a name='L159'></a><a href='#L159'>159</a>
+<a name='L160'></a><a href='#L160'>160</a>
+<a name='L161'></a><a href='#L161'>161</a>
+<a name='L162'></a><a href='#L162'>162</a>
+<a name='L163'></a><a href='#L163'>163</a>
+<a name='L164'></a><a href='#L164'>164</a>
+<a name='L165'></a><a href='#L165'>165</a>
+<a name='L166'></a><a href='#L166'>166</a>
+<a name='L167'></a><a href='#L167'>167</a>
+<a name='L168'></a><a href='#L168'>168</a>
+<a name='L169'></a><a href='#L169'>169</a>
+<a name='L170'></a><a href='#L170'>170</a>
+<a name='L171'></a><a href='#L171'>171</a>
+<a name='L172'></a><a href='#L172'>172</a>
+<a name='L173'></a><a href='#L173'>173</a>
+<a name='L174'></a><a href='#L174'>174</a>
+<a name='L175'></a><a href='#L175'>175</a>
+<a name='L176'></a><a href='#L176'>176</a>
+<a name='L177'></a><a href='#L177'>177</a>
+<a name='L178'></a><a href='#L178'>178</a>
+<a name='L179'></a><a href='#L179'>179</a>
+<a name='L180'></a><a href='#L180'>180</a>
+<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>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -196,7 +260,6 @@
 <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-neutral">&nbsp;</span>
@@ -204,6 +267,18 @@
 <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-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>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -239,19 +314,46 @@
 <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-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-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-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-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-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>
@@ -274,6 +376,32 @@
 <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-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-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-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>
@@ -301,11 +429,12 @@
 <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} 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;
 /**
  * TODO: Add short &amp; useful description
@@ -318,11 +447,21 @@ import { v4 as uuidv4 } from "uuid";
 const MlShareMapState = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(p</span>rops) =&gt; {</span>
   // 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>
-&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(undefined);</span>
   const [map, setMap] = <span class="cstat-no" title="statement not covered" >useState(undefined);</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
+    },
+    filter: {
+      includeBaseLayers: false
+    }
+  })
 &nbsp;
   const mapStateRef = <span class="cstat-no" title="statement not covered" >useRef({});</span>
 &nbsp;
@@ -352,32 +491,59 @@ const MlShareMapState = <span class="cstat-no" title="statement not covered" ><s
 <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;
-    let currentUrlParams = <span class="cstat-no" title="statement not covered" >getCurrentUrlParameters();</span>
+    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.setCenter([mapStateRef.current.lng, mapStateRef.current.lat]);</span>
 <span class="cstat-no" title="statement not covered" >      mapRef.current.setZoom(mapStateRef.current.zoom);</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>
+&nbsp;
+    const currentUrlParams = <span class="cstat-no" title="statement not covered" >getCurrentUrlParameters()</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>
+      }
+    }
+&nbsp;
+  }, [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 },
+              {...mapStateRef.current},
               document.title,
               "?" + urlParams.toString()
             );
@@ -391,7 +557,33 @@ const MlShareMapState = <span class="cstat-no" title="statement not covered" ><s
   }, [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>
-<span class="cstat-no" title="statement not covered" >    return Object.fromEntries(new URLSearchParams(window.location.search));</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>
   };
 &nbsp;
   const refreshMapState = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
@@ -402,7 +594,7 @@ 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({ zoom: event.state.zoom, center: [event.state.lng, event.state.lat] });</span>
+<span class="cstat-no" title="statement not covered" >      mapRef.current.easeTo({zoom: event.state.zoom, center: [event.state.lng, event.state.lat]});</span>
     }
   };
 &nbsp;
@@ -427,17 +619,17 @@ 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">istanbul</a>
-                at Sat Dec 04 2021 10:55:55 GMT+0000 (Coordinated Universal Time)
+                at Thu Dec 23 2021 12:19:00 GMT+0000 (Coordinated Universal Time)
             </div>
         </div>
-        <script src="../../prettify.js"></script>
+        <script src="../../../prettify.js"></script>
         <script>
             window.onload = function () {
                 prettyPrint();
             };
         </script>
-        <script src="../../sorter.js"></script>
-        <script src="../../block-navigation.js"></script>
+        <script src="../../../sorter.js"></script>
+        <script src="../../../block-navigation.js"></script>
     </body>
 </html>