@mapcomponents/react-maplibre 0.1.25 → 0.1.29

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

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">64.7% </span>
+                <span class="strong">73.8% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>44/68</span>
+                <span class='fraction'>31/42</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">53.22% </span>
+                <span class="strong">59.09% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>33/62</span>
+                <span class='fraction'>26/44</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">88.88% </span>
+                <span class="strong">100% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>8/9</span>
+                <span class='fraction'>6/6</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">62.5% </span>
+                <span class="strong">71.05% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>40/64</span>
+                <span class='fraction'>27/38</span>
             </div>
         
             
@@ -80,17 +80,17 @@
 </thead>
 <tbody><tr>
 	<td class="file medium" data-value="MlGeoJsonLayer.js"><a href="MlGeoJsonLayer.js.html">MlGeoJsonLayer.js</a></td>
-	<td data-value="64.7" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 64%"></div><div class="cover-empty" style="width: 36%"></div></div>
+	<td data-value="73.8" class="pic medium">
+	<div class="chart"><div class="cover-fill" style="width: 73%"></div><div class="cover-empty" style="width: 27%"></div></div>
 	</td>
-	<td data-value="64.7" class="pct medium">64.7%</td>
-	<td data-value="68" class="abs medium">44/68</td>
-	<td data-value="53.22" class="pct medium">53.22%</td>
-	<td data-value="62" class="abs medium">33/62</td>
-	<td data-value="88.88" class="pct high">88.88%</td>
-	<td data-value="9" class="abs high">8/9</td>
-	<td data-value="62.5" class="pct medium">62.5%</td>
-	<td data-value="64" class="abs medium">40/64</td>
+	<td data-value="73.8" class="pct medium">73.8%</td>
+	<td data-value="42" class="abs medium">31/42</td>
+	<td data-value="59.09" class="pct medium">59.09%</td>
+	<td data-value="44" class="abs medium">26/44</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="6" class="abs high">6/6</td>
+	<td data-value="71.05" class="pct medium">71.05%</td>
+	<td data-value="38" class="abs medium">27/38</td>
 	</tr>
 
 </tbody>
@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Jan 31 2022 16:41:51 GMT+0000 (Coordinated Universal Time)
+                at Sun Feb 20 2022 15:15:59 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -295,7 +295,7 @@ export default MlImageMarkerLayer;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Jan 31 2022 16:41:51 GMT+0000 (Coordinated Universal Time)
+                at Sun Feb 20 2022 15:15:59 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Jan 31 2022 16:41:51 GMT+0000 (Coordinated Universal Time)
+                at Sun Feb 20 2022 15:15:59 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -176,7 +176,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-yes">1x</span>
+<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">16x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -391,7 +391,7 @@ export default MlLayer;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Jan 31 2022 16:41:51 GMT+0000 (Coordinated Universal Time)
+                at Sun Feb 20 2022 15:15:59 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Jan 31 2022 16:41:51 GMT+0000 (Coordinated Universal Time)
+                at Sun Feb 20 2022 15:15:59 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -283,7 +283,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-yes">1x</span>
+<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-yes">3x</span>
@@ -458,11 +458,11 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">2x</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>
@@ -691,7 +691,7 @@ export default MlLayerMagnify;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Jan 31 2022 16:41:51 GMT+0000 (Coordinated Universal Time)
+                at Sun Feb 20 2022 15:15:59 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Jan 31 2022 16:41:51 GMT+0000 (Coordinated Universal Time)
+                at Sun Feb 20 2022 15:15:59 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -211,7 +211,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-yes">1x</span>
+<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -325,7 +325,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-yes">1x</span>
+<span class="cline-any cline-yes">2x</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>
@@ -481,7 +481,7 @@ export default MlLayerSwipe;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Jan 31 2022 16:41:51 GMT+0000 (Coordinated Universal Time)
+                at Sun Feb 20 2022 15:15:59 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Jan 31 2022 16:41:51 GMT+0000 (Coordinated Universal Time)
+                at Sun Feb 20 2022 15:15:59 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -733,7 +733,7 @@ export default MlLayerSwitcher;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Jan 31 2022 16:41:51 GMT+0000 (Coordinated Universal Time)
+                at Sun Feb 20 2022 15:15:59 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/components/MlLayerSwitcher/components/LayerBox.js.html

@@ -292,7 +292,7 @@ export default LayerBox;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Jan 31 2022 16:41:51 GMT+0000 (Coordinated Universal Time)
+                at Sun Feb 20 2022 15:15:59 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

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

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Jan 31 2022 16:41:51 GMT+0000 (Coordinated Universal Time)
+                at Sun Feb 20 2022 15:15:59 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

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

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Jan 31 2022 16:41:51 GMT+0000 (Coordinated Universal Time)
+                at Sun Feb 20 2022 15:15:59 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -538,7 +538,7 @@ export default MlMarker;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Jan 31 2022 16:41:51 GMT+0000 (Coordinated Universal Time)
+                at Sun Feb 20 2022 15:15:59 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Jan 31 2022 16:41:51 GMT+0000 (Coordinated Universal Time)
+                at Sun Feb 20 2022 15:15:59 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">60.97% </span>
+                <span class="strong">53.12% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>25/41</span>
+                <span class='fraction'>17/32</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">37.5% </span>
+                <span class="strong">20% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>6/16</span>
+                <span class='fraction'>2/10</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">50% </span>
+                <span class="strong">57.14% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>4/8</span>
+                <span class='fraction'>4/7</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">60% </span>
+                <span class="strong">51.61% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>24/40</span>
+                <span class='fraction'>16/31</span>
             </div>
         
             
@@ -272,29 +272,7 @@
 <a name='L207'></a><a href='#L207'>207</a>
 <a name='L208'></a><a href='#L208'>208</a>
 <a name='L209'></a><a href='#L209'>209</a>
-<a name='L210'></a><a href='#L210'>210</a>
-<a name='L211'></a><a href='#L211'>211</a>
-<a name='L212'></a><a href='#L212'>212</a>
-<a name='L213'></a><a href='#L213'>213</a>
-<a name='L214'></a><a href='#L214'>214</a>
-<a name='L215'></a><a href='#L215'>215</a>
-<a name='L216'></a><a href='#L216'>216</a>
-<a name='L217'></a><a href='#L217'>217</a>
-<a name='L218'></a><a href='#L218'>218</a>
-<a name='L219'></a><a href='#L219'>219</a>
-<a name='L220'></a><a href='#L220'>220</a>
-<a name='L221'></a><a href='#L221'>221</a>
-<a name='L222'></a><a href='#L222'>222</a>
-<a name='L223'></a><a href='#L223'>223</a>
-<a name='L224'></a><a href='#L224'>224</a>
-<a name='L225'></a><a href='#L225'>225</a>
-<a name='L226'></a><a href='#L226'>226</a>
-<a name='L227'></a><a href='#L227'>227</a>
-<a name='L228'></a><a href='#L228'>228</a>
-<a name='L229'></a><a href='#L229'>229</a>
-<a name='L230'></a><a href='#L230'>230</a>
-<a name='L231'></a><a href='#L231'>231</a>
-<a name='L232'></a><a href='#L232'>232</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L210'></a><a href='#L210'>210</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>
@@ -305,11 +283,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-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">2x</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>
@@ -334,9 +308,9 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">2x</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>
@@ -353,9 +327,9 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">2x</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>
@@ -383,46 +357,28 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
-<span class="cline-any cline-yes">6x</span>
-<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">8x</span>
+<span class="cline-any cline-yes">8x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-yes">8x</span>
+<span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
-<span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">1x</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-yes">2x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-yes">8x</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>
@@ -497,7 +453,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-yes">1x</span>
+<span class="cline-any cline-yes">2x</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>
@@ -525,18 +481,16 @@
 <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, { useState, useRef, useEffect, useContext } from "react";
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 &nbsp;
-import { MapContext } from "@mapcomponents/react-core";
-import { v4 as uuidv4 } from "uuid";
-&nbsp;
 import { ReactComponent as RotateRightIcon } from "./assets/rotate_right.svg";
 import { ReactComponent as RotateLeftIcon } from "./assets/rotate_left.svg";
 import { ReactComponent as NeedleIcon } from "./assets/needle.svg";
 &nbsp;
 import styled from "@emotion/styled";
 import { css } from "@emotion/css";
+import useMap from "../../hooks/useMap";
 &nbsp;
 const NeedleButton = styled.div`
   width: 40%;
@@ -615,43 +569,23 @@ const RotateButton = styled.div`
  * @component
  */
 const MlNavigationCompass = (props) =&gt; {
-  // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-  const mapContext = useContext(MapContext);
-&nbsp;
-  const initializedRef = useRef(false);
-  const mapRef = useRef(undefined);
-  const componentId = useRef((props.idPrefix ? <span class="branch-0 cbranch-no" title="branch not covered" >props.idPrefix </span>: "MlNavigationCompass-") + uuidv4());
-&nbsp;
+  const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
   const [bearing, setBearing] = useState(0);
 &nbsp;
   useEffect(() =&gt; {
-    let _componentId = componentId.current;
+    if (!mapHook.map) return;
 &nbsp;
-    return () =&gt; {
-      // This is the cleanup function, it is called when this react component is removed from react-dom
-&nbsp;
-      if (mapRef.current) {
-        mapRef.current.cleanup(_componentId);
-        mapRef.current = undefined;
-      }
-      initializedRef.current = false;
+    let _updateBearing = () =&gt; {
+      setBearing(Math.round(mapHook.map.getBearing()));
     };
-  }, []);
 &nbsp;
-  useEffect(() =&gt; {
-    if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
-    initializedRef.current = true;
-    mapRef.current = mapContext.getMap(props.mapId);
+    mapHook.map.on("rotate", _updateBearing, mapHook.componentId);
+    _updateBearing();
 &nbsp;
-    mapRef.current.on(
-      "rotate",
-<span class="fstat-no" title="function not covered" >      fu</span>nction () {
-<span class="cstat-no" title="statement not covered" >        setBearing(Math.round(mapRef.current.getBearing()));</span>
-      },
-      componentId.current
-    );
-    setBearing(Math.round(mapRef.current.getBearing()));
-  }, [mapContext.mapIds, mapContext, props.mapId]);
+    return () =&gt; {
+      mapHook.map.off("rotate", _updateBearing);
+    };
+  }, [mapHook.map, props.mapId]);
 &nbsp;
   return (
     &lt;&gt;
@@ -681,7 +615,7 @@ const MlNavigationCompass = (props) =&gt; {
           &lt;RotateButton className={css({ ...props.rotateRightStyle })}&gt;
             &lt;RotateRightIcon
               onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; {
-                let bearing = <span class="cstat-no" title="statement not covered" >Math.round(mapRef.current?.getBearing());</span>
+                let bearing = <span class="cstat-no" title="statement not covered" >Math.round(mapHook.map?.getBearing());</span>
                 let rest = <span class="cstat-no" title="statement not covered" >Math.round(bearing % 90);</span>
 <span class="cstat-no" title="statement not covered" >                if (bearing &gt; 0) {</span>
 <span class="cstat-no" title="statement not covered" >                  rest = 90 - rest;</span>
@@ -689,14 +623,14 @@ const MlNavigationCompass = (props) =&gt; {
 <span class="cstat-no" title="statement not covered" >                if (rest === 0) {</span>
 <span class="cstat-no" title="statement not covered" >                  rest = 90;</span>
                 }
-<span class="cstat-no" title="statement not covered" >                mapRef.current?.setBearing(Math.round(bearing + Math.abs(rest)));</span>
+<span class="cstat-no" title="statement not covered" >                mapHook.map?.setBearing(Math.round(bearing + Math.abs(rest)));</span>
               }}
             &gt;&lt;/RotateRightIcon&gt;
           &lt;/RotateButton&gt;
           &lt;NeedleButton
             className={css({ ...props.needleStyle })}
             onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >              mapRef.current?.setBearing(0);</span>
+<span class="cstat-no" title="statement not covered" >              mapHook.map?.setBearing(0);</span>
             }}
           &gt;
             &lt;NeedleContainer
@@ -710,7 +644,7 @@ const MlNavigationCompass = (props) =&gt; {
           &lt;RotateButton className={css({ ...props.rotateLeftStyle })}&gt;
             &lt;RotateLeftIcon
               onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; {
-                let bearing = <span class="cstat-no" title="statement not covered" >Math.round(mapRef.current?.getBearing());</span>
+                let bearing = <span class="cstat-no" title="statement not covered" >Math.round(mapHook.map?.getBearing());</span>
                 let rest = <span class="cstat-no" title="statement not covered" >Math.round(bearing % 90);</span>
 <span class="cstat-no" title="statement not covered" >                if (bearing &lt; 0) {</span>
 <span class="cstat-no" title="statement not covered" >                  rest = 90 + rest;</span>
@@ -718,7 +652,7 @@ const MlNavigationCompass = (props) =&gt; {
 <span class="cstat-no" title="statement not covered" >                if (rest === 0) {</span>
 <span class="cstat-no" title="statement not covered" >                  rest = 90;</span>
                 }
-<span class="cstat-no" title="statement not covered" >                mapRef.current?.setBearing(Math.round(bearing - Math.abs(rest)));</span>
+<span class="cstat-no" title="statement not covered" >                mapHook.map?.setBearing(Math.round(bearing - Math.abs(rest)));</span>
               }}
             &gt;&lt;/RotateLeftIcon&gt;
           &lt;/RotateButton&gt;
@@ -763,7 +697,7 @@ export default MlNavigationCompass;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Jan 31 2022 16:41:51 GMT+0000 (Coordinated Universal Time)
+                at Sun Feb 20 2022 15:15:59 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>