@mapcomponents/react-maplibre 0.1.14 → 0.1.18

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

@@ -25,7 +25,7 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>0/49</span>
+                <span class='fraction'>0/50</span>
             </div>
         
             
@@ -39,14 +39,14 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>0/11</span>
+                <span class='fraction'>0/12</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>0/45</span>
+                <span class='fraction'>0/46</span>
             </div>
         
             
@@ -230,8 +230,7 @@
 <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></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L168'></a><a href='#L168'>168</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>
@@ -274,7 +273,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-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>
@@ -377,7 +375,7 @@
 <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>
@@ -430,7 +428,6 @@ const MlNavigationTools = <span class="cstat-no" title="statement not covered" >
     minHeight: "20px",
     width: mediaIsMobile ? "50px" : "30px",
     height: mediaIsMobile ? "50px" : "30px",
-    color: "#bbb",
     backgroundColor: "#414141",
     borderRadius: "23%",
     //border: "1px solid #bbb",
@@ -439,8 +436,8 @@ const MlNavigationTools = <span class="cstat-no" title="statement not covered" >
     fontSize: mediaIsMobile ? "1.5em" : "1.2em",
     ":hover": {
       backgroundColor: "#515151",
-      color: "#ececec",
     },
+    color: "#ececec"
   };
 &nbsp;
 <span class="cstat-no" title="statement not covered" >  useEffect(<span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
@@ -545,7 +542,7 @@ const MlNavigationTools = <span class="cstat-no" title="statement not covered" >
       &lt;Button sx={buttonStyle} onClick={moveToCurrentLocation} disabled={locationAccessDenied}&gt;
         &lt;GpsFixedIcon sx={{fontSize: mediaIsMobile ? "1.5em" : "1.2em"}}/&gt;
       &lt;/Button&gt;
-      &lt;MlFollowGps style={buttonStyle}/&gt;
+      &lt;MlFollowGps style={{...(<span class="fstat-no" title="function not covered" >({</span>color, ...rest}) =&gt; <span class="cstat-no" title="statement not covered" >rest)</span>(buttonStyle)}} /&gt;
       &lt;ButtonGroup
         orientation="vertical"
         sx={{
@@ -555,10 +552,10 @@ const MlNavigationTools = <span class="cstat-no" title="statement not covered" >
           "Button:hover": {border: "none"},
         }}
       &gt;
-        &lt;Button sx={buttonStyle} onClick={zoomIn}&gt;
+        &lt;Button sx={{...buttonStyle, color: "#ececec",}} onClick={zoomIn}&gt;
           &lt;ControlPointIcon sx={{fontSize: mediaIsMobile ? "1.5em" : "1.2em"}}/&gt;
         &lt;/Button&gt;
-        &lt;Button sx={buttonStyle} onClick={zoomOut}&gt;
+        &lt;Button sx={{...buttonStyle, color: "#ececec",}} onClick={zoomOut}&gt;
           &lt;RemoveCircleOutlineIcon sx={{fontSize: mediaIsMobile ? "1.5em" : "1.2em"}}/&gt;
         &lt;/Button&gt;
       &lt;/ButtonGroup&gt;
@@ -573,10 +570,9 @@ export default MlNavigationTools;
             </div><!-- /wrapper -->
             <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 Wed Dec 15 2021 17:41:09 GMT+0000 (Coordinated Universal Time)
+                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
+                at Thu Jan 13 2022 12:08:19 GMT+0000 (Coordinated Universal Time)
             </div>
-        </div>
         <script src="../../../prettify.js"></script>
         <script>
             window.onload = function () {

package/coverage/lcov-report/src/components/MlNavigationTools/index.html

@@ -25,7 +25,7 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>0/49</span>
+                <span class='fraction'>0/50</span>
             </div>
         
             
@@ -39,14 +39,14 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>0/11</span>
+                <span class='fraction'>0/12</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>0/45</span>
+                <span class='fraction'>0/46</span>
             </div>
         
             
@@ -84,13 +84,13 @@
 	<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
 	</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="49" class="abs low">0/49</td>
+	<td data-value="50" class="abs low">0/50</td>
 	<td data-value="0" class="pct low">0%</td>
 	<td data-value="44" class="abs low">0/44</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="11" class="abs low">0/11</td>
+	<td data-value="12" class="abs low">0/12</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="45" class="abs low">0/45</td>
+	<td data-value="46" class="abs low">0/46</td>
 	</tr>
 
 </tbody>
@@ -100,10 +100,9 @@
             </div><!-- /wrapper -->
             <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 Wed Dec 15 2021 17:41:09 GMT+0000 (Coordinated Universal Time)
+                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
+                at Thu Jan 13 2022 12:08:19 GMT+0000 (Coordinated Universal Time)
             </div>
-        </div>
         <script src="../../../prettify.js"></script>
         <script>
             window.onload = function () {

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

@@ -405,10 +405,9 @@ export default MlOsmLayer;
             </div><!-- /wrapper -->
             <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 Wed Dec 15 2021 17:41:09 GMT+0000 (Coordinated Universal Time)
+                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
+                at Thu Jan 13 2022 12:08:19 GMT+0000 (Coordinated Universal Time)
             </div>
-        </div>
         <script src="../../../prettify.js"></script>
         <script>
             window.onload = function () {

package/coverage/lcov-report/src/components/MlOsmLayer/index.html

@@ -100,10 +100,9 @@
             </div><!-- /wrapper -->
             <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 Wed Dec 15 2021 17:41:09 GMT+0000 (Coordinated Universal Time)
+                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
+                at Thu Jan 13 2022 12:08:19 GMT+0000 (Coordinated Universal Time)
             </div>
-        </div>
         <script src="../../../prettify.js"></script>
         <script>
             window.onload = function () {

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

@@ -534,10 +534,9 @@ export default MlScaleReference;
             </div><!-- /wrapper -->
             <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 Wed Dec 15 2021 17:41:09 GMT+0000 (Coordinated Universal Time)
+                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
+                at Thu Jan 13 2022 12:08:19 GMT+0000 (Coordinated Universal Time)
             </div>
-        </div>
         <script src="../../../prettify.js"></script>
         <script>
             window.onload = function () {

package/coverage/lcov-report/src/components/MlScaleReference/index.html

@@ -100,10 +100,9 @@
             </div><!-- /wrapper -->
             <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 Wed Dec 15 2021 17:41:09 GMT+0000 (Coordinated Universal Time)
+                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
+                at Thu Jan 13 2022 12:08:19 GMT+0000 (Coordinated Universal Time)
             </div>
-        </div>
         <script src="../../../prettify.js"></script>
         <script>
             window.onload = function () {

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

@@ -25,28 +25,28 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>0/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,40 +314,93 @@
 <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>
 <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-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-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>
@@ -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;
@@ -426,10 +618,9 @@ export default MlShareMapState;
             </div><!-- /wrapper -->
             <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 Wed Dec 15 2021 17:41:09 GMT+0000 (Coordinated Universal Time)
+                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
+                at Thu Jan 13 2022 12:08:19 GMT+0000 (Coordinated Universal Time)
             </div>
-        </div>
         <script src="../../../prettify.js"></script>
         <script>
             window.onload = function () {