npm - @mapcomponents/react-maplibre - Versions diffs - 0.1.13 → 0.1.17 - Mend

@mapcomponents/react-maplibre 0.1.13 → 0.1.17

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

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

@@ -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:14:00 GMT+0000 (Coordinated Universal Time)
+                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
+                at Sun Jan 09 2022 17:13:08 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 CHANGED Viewed

@@ -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:14:00 GMT+0000 (Coordinated Universal Time)
+                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
+                at Sun Jan 09 2022 17:13:08 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 CHANGED Viewed

@@ -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:14:00 GMT+0000 (Coordinated Universal Time)
+                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
+                at Sun Jan 09 2022 17:13:08 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 CHANGED Viewed

@@ -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:14:00 GMT+0000 (Coordinated Universal Time)
+                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
+                at Sun Jan 09 2022 17:13:08 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 CHANGED Viewed

@@ -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:14:00 GMT+0000 (Coordinated Universal Time)
+                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
+                at Sun Jan 09 2022 17:13:08 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 CHANGED Viewed

@@ -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:14:00 GMT+0000 (Coordinated Universal Time)
+                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
+                at Sun Jan 09 2022 17:13:08 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 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/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:14:00 GMT+0000 (Coordinated Universal Time)
+                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
+                at Sun Jan 09 2022 17:13:08 GMT+0000 (Coordinated Universal Time)
             </div>
-        </div>
         <script src="../../../prettify.js"></script>
         <script>
             window.onload = function () {