@mapcomponents/react-maplibre 0.1.19 → 0.1.23

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 (84) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/coverage/clover.xml +195 -197
  3. package/coverage/coverage-final.json +6 -6
  4. package/coverage/lcov-report/index.html +31 -31
  5. package/coverage/lcov-report/src/components/MapLibreMap/MapLibreMap.js.html +1 -1
  6. package/coverage/lcov-report/src/components/MapLibreMap/index.html +1 -1
  7. package/coverage/lcov-report/src/components/MlCreatePdfButton/MlCreatePdfButton.js.html +1 -1
  8. package/coverage/lcov-report/src/components/MlCreatePdfButton/index.html +1 -1
  9. package/coverage/lcov-report/src/components/MlFeatureEditor/MlFeatureEditor.js.html +1 -1
  10. package/coverage/lcov-report/src/components/MlFeatureEditor/index.html +1 -1
  11. package/coverage/lcov-report/src/components/MlFillExtrusionLayer/MlFillExtrusionLayer.js.html +1 -1
  12. package/coverage/lcov-report/src/components/MlFillExtrusionLayer/index.html +1 -1
  13. package/coverage/lcov-report/src/components/MlFollowGps/MlFollowGps.js.html +1 -1
  14. package/coverage/lcov-report/src/components/MlFollowGps/index.html +1 -1
  15. package/coverage/lcov-report/src/components/MlGPXViewer/MlGPXViewer.js.html +1 -1
  16. package/coverage/lcov-report/src/components/MlGPXViewer/gpxConverter.js.html +1 -1
  17. package/coverage/lcov-report/src/components/MlGPXViewer/index.html +1 -1
  18. package/coverage/lcov-report/src/components/MlGeoJsonLayer/MlGeoJsonLayer.js.html +4 -4
  19. package/coverage/lcov-report/src/components/MlGeoJsonLayer/index.html +1 -1
  20. package/coverage/lcov-report/src/components/MlImageMarkerLayer/MlImageMarkerLayer.js.html +1 -1
  21. package/coverage/lcov-report/src/components/MlImageMarkerLayer/index.html +1 -1
  22. package/coverage/lcov-report/src/components/MlLayer/MlLayer.js.html +1 -1
  23. package/coverage/lcov-report/src/components/MlLayer/index.html +1 -1
  24. package/coverage/lcov-report/src/components/MlLayerMagnify/MlLayerMagnify.js.html +1 -1
  25. package/coverage/lcov-report/src/components/MlLayerMagnify/index.html +1 -1
  26. package/coverage/lcov-report/src/components/MlLayerSwipe/MlLayerSwipe.js.html +1 -1
  27. package/coverage/lcov-report/src/components/MlLayerSwipe/index.html +1 -1
  28. package/coverage/lcov-report/src/components/MlLayerSwitcher/MlLayerSwitcher.js.html +1 -1
  29. package/coverage/lcov-report/src/components/MlLayerSwitcher/components/LayerBox.js.html +1 -1
  30. package/coverage/lcov-report/src/components/MlLayerSwitcher/components/index.html +1 -1
  31. package/coverage/lcov-report/src/components/MlLayerSwitcher/index.html +1 -1
  32. package/coverage/lcov-report/src/components/MlMarker/MlMarker.js.html +1 -1
  33. package/coverage/lcov-report/src/components/MlMarker/index.html +1 -1
  34. package/coverage/lcov-report/src/components/MlNavigationCompass/MlNavigationCompass.js.html +1 -1
  35. package/coverage/lcov-report/src/components/MlNavigationCompass/index.html +1 -1
  36. package/coverage/lcov-report/src/components/MlNavigationTools/MlNavigationTools.js.html +1 -1
  37. package/coverage/lcov-report/src/components/MlNavigationTools/index.html +1 -1
  38. package/coverage/lcov-report/src/components/MlOsmLayer/MlOsmLayer.js.html +1 -1
  39. package/coverage/lcov-report/src/components/MlOsmLayer/index.html +1 -1
  40. package/coverage/lcov-report/src/components/MlScaleReference/MlScaleReference.js.html +1 -1
  41. package/coverage/lcov-report/src/components/MlScaleReference/index.html +1 -1
  42. package/coverage/lcov-report/src/components/MlShareMapState/MlShareMapState.js.html +261 -111
  43. package/coverage/lcov-report/src/components/MlShareMapState/index.html +9 -9
  44. package/coverage/lcov-report/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.js.html +1 -1
  45. package/coverage/lcov-report/src/components/MlSpatialElevationProfile/index.html +1 -1
  46. package/coverage/lcov-report/src/components/MlThreeJsLayer/MlThreeJsLayer.js.html +1 -1
  47. package/coverage/lcov-report/src/components/MlThreeJsLayer/index.html +1 -1
  48. package/coverage/lcov-report/src/components/MlUseMapDebugger/MlUseMapDebugger.js.html +1 -1
  49. package/coverage/lcov-report/src/components/MlUseMapDebugger/index.html +1 -1
  50. package/coverage/lcov-report/src/components/MlVectorTileLayer/MlVectorTileLayer.js.html +96 -123
  51. package/coverage/lcov-report/src/components/MlVectorTileLayer/index.html +17 -17
  52. package/coverage/lcov-report/src/components/MlWmsFeatureInfoPopup/MlWmsFeatureInfoPopup.js.html +1 -1
  53. package/coverage/lcov-report/src/components/MlWmsFeatureInfoPopup/index.html +1 -1
  54. package/coverage/lcov-report/src/components/MlWmsLayer/MlWmsLayer.js.html +35 -89
  55. package/coverage/lcov-report/src/components/MlWmsLayer/index.html +17 -17
  56. package/coverage/lcov-report/src/components/MlWmsLoader/MlWmsLoader.js.html +1 -1
  57. package/coverage/lcov-report/src/components/MlWmsLoader/index.html +1 -1
  58. package/coverage/lcov-report/src/hooks/index.html +1 -1
  59. package/coverage/lcov-report/src/hooks/useMap.js.html +23 -23
  60. package/coverage/lcov-report/src/hooks/useMapState.js.html +34 -34
  61. package/coverage/lcov-report/src/hooks/useWms.js.html +1 -1
  62. package/coverage/lcov-report/src/i18n.js.html +1 -1
  63. package/coverage/lcov-report/src/index.html +1 -1
  64. package/coverage/lcov-report/src/translations/english.js.html +1 -1
  65. package/coverage/lcov-report/src/translations/german.js.html +1 -1
  66. package/coverage/lcov-report/src/translations/index.html +1 -1
  67. package/coverage/lcov.info +334 -328
  68. package/dist/index.esm.js +88 -108
  69. package/dist/index.esm.js.map +1 -1
  70. package/package.json +1 -1
  71. package/scripts/build-catalogue-markdown-docs.js +5 -3
  72. package/src/components/MapLibreMap/lib/MapLibreGlWrapper.js +26 -21
  73. package/src/components/MapLibreMap/lib/MapLibreGlWrapper.test.js +3 -3
  74. package/src/components/MlCreatePdfButton/MlCreatePdfButton.doc.de.md +2 -2
  75. package/src/components/MlCreatePdfButton/MlCreatePdfButton.doc.en.md +3 -0
  76. package/src/components/MlFeatureEditor/MlFeatureEditor.test.js +2 -2
  77. package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.js +3 -3
  78. package/src/components/MlNavigationCompass/MlNavigationCompass.test.js +2 -2
  79. package/src/components/MlShareMapState/MlShareMapState.js +138 -88
  80. package/src/components/MlShareMapState/MlShareMapState.stories.js +79 -29
  81. package/src/components/MlVectorTileLayer/MlVectorTileLayer.js +66 -75
  82. package/src/components/MlVectorTileLayer/MlVectorTileLayer.test.js +6 -6
  83. package/src/components/MlWmsLayer/MlWmsLayer.js +16 -34
  84. package/src/hooks/useMap.js +1 -1
package/coverage/lcov-report/src/components/MlShareMapState/index.html CHANGED
@@ -25,28 +25,28 @@
25
25
  <div class='fl pad1y space-right2'>
26
26
  <span class="strong">0% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>0/87</span>
28
+ <span class='fraction'>0/108</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
33
  <span class="strong">0% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>0/42</span>
35
+ <span class='fraction'>0/54</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
40
  <span class="strong">0% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>0/10</span>
42
+ <span class='fraction'>0/19</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
47
  <span class="strong">0% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>0/81</span>
49
+ <span class='fraction'>0/100</span>
50
50
  </div>
51
51
 
52
52
 
@@ -84,13 +84,13 @@
84
84
  <div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
85
85
  </td>
86
86
  <td data-value="0" class="pct low">0%</td>
87
- <td data-value="87" class="abs low">0/87</td>
87
+ <td data-value="108" class="abs low">0/108</td>
88
88
  <td data-value="0" class="pct low">0%</td>
89
- <td data-value="42" class="abs low">0/42</td>
89
+ <td data-value="54" class="abs low">0/54</td>
90
90
  <td data-value="0" class="pct low">0%</td>
91
- <td data-value="10" class="abs low">0/10</td>
91
+ <td data-value="19" class="abs low">0/19</td>
92
92
  <td data-value="0" class="pct low">0%</td>
93
- <td data-value="81" class="abs low">0/81</td>
93
+ <td data-value="100" class="abs low">0/100</td>
94
94
  </tr>
95
95
 
96
96
  </tbody>
@@ -101,7 +101,7 @@
101
101
  <div class='footer quiet pad2 space-top1 center small'>
102
102
  Code coverage generated by
103
103
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
104
- at Thu Jan 13 2022 13:08:17 GMT+0000 (Coordinated Universal Time)
104
+ at Sun Jan 23 2022 14:13:38 GMT+0000 (Coordinated Universal Time)
105
105
  </div>
106
106
  <script src="../../../prettify.js"></script>
107
107
  <script>
package/coverage/lcov-report/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.js.html CHANGED
@@ -769,7 +769,7 @@ export default MlSpatialElevationProfile;
769
769
  <div class='footer quiet pad2 space-top1 center small'>
770
770
  Code coverage generated by
771
771
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
772
- at Thu Jan 13 2022 13:08:17 GMT+0000 (Coordinated Universal Time)
772
+ at Sun Jan 23 2022 14:13:38 GMT+0000 (Coordinated Universal Time)
773
773
  </div>
774
774
  <script src="../../../prettify.js"></script>
775
775
  <script>
package/coverage/lcov-report/src/components/MlSpatialElevationProfile/index.html CHANGED
@@ -101,7 +101,7 @@
101
101
  <div class='footer quiet pad2 space-top1 center small'>
102
102
  Code coverage generated by
103
103
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
104
- at Thu Jan 13 2022 13:08:17 GMT+0000 (Coordinated Universal Time)
104
+ at Sun Jan 23 2022 14:13:38 GMT+0000 (Coordinated Universal Time)
105
105
  </div>
106
106
  <script src="../../../prettify.js"></script>
107
107
  <script>
package/coverage/lcov-report/src/components/MlThreeJsLayer/MlThreeJsLayer.js.html CHANGED
@@ -688,7 +688,7 @@ export default MlThreeJsLayer;</pre></td></tr></table></pre>
688
688
  <div class='footer quiet pad2 space-top1 center small'>
689
689
  Code coverage generated by
690
690
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
691
- at Thu Jan 13 2022 13:08:17 GMT+0000 (Coordinated Universal Time)
691
+ at Sun Jan 23 2022 14:13:38 GMT+0000 (Coordinated Universal Time)
692
692
  </div>
693
693
  <script src="../../../prettify.js"></script>
694
694
  <script>
package/coverage/lcov-report/src/components/MlThreeJsLayer/index.html CHANGED
@@ -101,7 +101,7 @@
101
101
  <div class='footer quiet pad2 space-top1 center small'>
102
102
  Code coverage generated by
103
103
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
104
- at Thu Jan 13 2022 13:08:17 GMT+0000 (Coordinated Universal Time)
104
+ at Sun Jan 23 2022 14:13:38 GMT+0000 (Coordinated Universal Time)
105
105
  </div>
106
106
  <script src="../../../prettify.js"></script>
107
107
  <script>
package/coverage/lcov-report/src/components/MlUseMapDebugger/MlUseMapDebugger.js.html CHANGED
@@ -295,7 +295,7 @@ export default MlUseMapDebugger;
295
295
  <div class='footer quiet pad2 space-top1 center small'>
296
296
  Code coverage generated by
297
297
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
298
- at Thu Jan 13 2022 13:08:17 GMT+0000 (Coordinated Universal Time)
298
+ at Sun Jan 23 2022 14:13:38 GMT+0000 (Coordinated Universal Time)
299
299
  </div>
300
300
  <script src="../../../prettify.js"></script>
301
301
  <script>
package/coverage/lcov-report/src/components/MlUseMapDebugger/index.html CHANGED
@@ -101,7 +101,7 @@
101
101
  <div class='footer quiet pad2 space-top1 center small'>
102
102
  Code coverage generated by
103
103
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
104
- at Thu Jan 13 2022 13:08:17 GMT+0000 (Coordinated Universal Time)
104
+ at Sun Jan 23 2022 14:13:38 GMT+0000 (Coordinated Universal Time)
105
105
  </div>
106
106
  <script src="../../../prettify.js"></script>
107
107
  <script>
package/coverage/lcov-report/src/components/MlVectorTileLayer/MlVectorTileLayer.js.html CHANGED
@@ -23,30 +23,30 @@
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">89.36% </span>
26
+ <span class="strong">88.88% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>42/47</span>
28
+ <span class='fraction'>32/36</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
- <span class="strong">63.63% </span>
33
+ <span class="strong">81.25% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>14/22</span>
35
+ <span class='fraction'>13/16</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
40
  <span class="strong">100% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>6/6</span>
42
+ <span class='fraction'>3/3</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">88.63% </span>
47
+ <span class="strong">88.23% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>39/44</span>
49
+ <span class='fraction'>30/34</span>
50
50
  </div>
51
51
 
52
52
 
@@ -187,16 +187,7 @@
187
187
  <a name='L122'></a><a href='#L122'>122</a>
188
188
  <a name='L123'></a><a href='#L123'>123</a>
189
189
  <a name='L124'></a><a href='#L124'>124</a>
190
- <a name='L125'></a><a href='#L125'>125</a>
191
- <a name='L126'></a><a href='#L126'>126</a>
192
- <a name='L127'></a><a href='#L127'>127</a>
193
- <a name='L128'></a><a href='#L128'>128</a>
194
- <a name='L129'></a><a href='#L129'>129</a>
195
- <a name='L130'></a><a href='#L130'>130</a>
196
- <a name='L131'></a><a href='#L131'>131</a>
197
- <a name='L132'></a><a href='#L132'>132</a>
198
- <a name='L133'></a><a href='#L133'>133</a>
199
- <a name='L134'></a><a href='#L134'>134</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
190
+ <a name='L125'></a><a href='#L125'>125</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
200
191
  <span class="cline-any cline-neutral">&nbsp;</span>
201
192
  <span class="cline-any cline-neutral">&nbsp;</span>
202
193
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -207,42 +198,26 @@
207
198
  <span class="cline-any cline-neutral">&nbsp;</span>
208
199
  <span class="cline-any cline-neutral">&nbsp;</span>
209
200
  <span class="cline-any cline-yes">1x</span>
210
- <span class="cline-any cline-yes">8x</span>
201
+ <span class="cline-any cline-yes">12x</span>
211
202
  <span class="cline-any cline-neutral">&nbsp;</span>
212
- <span class="cline-any cline-yes">8x</span>
213
- <span class="cline-any cline-yes">8x</span>
214
- <span class="cline-any cline-yes">8x</span>
215
- <span class="cline-any cline-yes">8x</span>
216
- <span class="cline-any cline-yes">8x</span>
217
- <span class="cline-any cline-yes">8x</span>
218
- <span class="cline-any cline-yes">8x</span>
203
+ <span class="cline-any cline-yes">12x</span>
204
+ <span class="cline-any cline-yes">12x</span>
205
+ <span class="cline-any cline-yes">12x</span>
206
+ <span class="cline-any cline-yes">12x</span>
207
+ <span class="cline-any cline-yes">12x</span>
219
208
  <span class="cline-any cline-neutral">&nbsp;</span>
209
+ <span class="cline-any cline-yes">12x</span>
220
210
  <span class="cline-any cline-yes">8x</span>
221
- <span class="cline-any cline-yes">2x</span>
222
- <span class="cline-any cline-yes">2x</span>
223
- <span class="cline-any cline-yes">2x</span>
224
- <span class="cline-any cline-yes">2x</span>
225
- <span class="cline-any cline-neutral">&nbsp;</span>
226
- <span class="cline-any cline-neutral">&nbsp;</span>
227
- <span class="cline-any cline-yes">2x</span>
228
- <span class="cline-any cline-yes">2x</span>
229
- <span class="cline-any cline-neutral">&nbsp;</span>
230
211
  <span class="cline-any cline-neutral">&nbsp;</span>
212
+ <span class="cline-any cline-yes">4x</span>
231
213
  <span class="cline-any cline-neutral">&nbsp;</span>
232
214
  <span class="cline-any cline-neutral">&nbsp;</span>
233
- <span class="cline-any cline-yes">8x</span>
234
215
  <span class="cline-any cline-yes">4x</span>
235
216
  <span class="cline-any cline-neutral">&nbsp;</span>
236
217
  <span class="cline-any cline-neutral">&nbsp;</span>
237
- <span class="cline-any cline-yes">8x</span>
238
- <span class="cline-any cline-yes">8x</span>
239
218
  <span class="cline-any cline-neutral">&nbsp;</span>
240
- <span class="cline-any cline-yes">4x</span>
241
- <span class="cline-any cline-yes">4x</span>
242
219
  <span class="cline-any cline-neutral">&nbsp;</span>
243
220
  <span class="cline-any cline-neutral">&nbsp;</span>
244
- <span class="cline-any cline-yes">4x</span>
245
- <span class="cline-any cline-neutral">&nbsp;</span>
246
221
  <span class="cline-any cline-neutral">&nbsp;</span>
247
222
  <span class="cline-any cline-neutral">&nbsp;</span>
248
223
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -254,6 +229,11 @@
254
229
  <span class="cline-any cline-yes">4x</span>
255
230
  <span class="cline-any cline-neutral">&nbsp;</span>
256
231
  <span class="cline-any cline-yes">4x</span>
232
+ <span class="cline-any cline-yes">4x</span>
233
+ <span class="cline-any cline-neutral">&nbsp;</span>
234
+ <span class="cline-any cline-neutral">&nbsp;</span>
235
+ <span class="cline-any cline-neutral">&nbsp;</span>
236
+ <span class="cline-any cline-neutral">&nbsp;</span>
257
237
  <span class="cline-any cline-neutral">&nbsp;</span>
258
238
  <span class="cline-any cline-neutral">&nbsp;</span>
259
239
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -268,15 +248,16 @@
268
248
  <span class="cline-any cline-neutral">&nbsp;</span>
269
249
  <span class="cline-any cline-neutral">&nbsp;</span>
270
250
  <span class="cline-any cline-yes">4x</span>
251
+ <span class="cline-any cline-yes">4x</span>
271
252
  <span class="cline-any cline-neutral">&nbsp;</span>
272
253
  <span class="cline-any cline-neutral">&nbsp;</span>
273
254
  <span class="cline-any cline-neutral">&nbsp;</span>
255
+ <span class="cline-any cline-yes">12x</span>
274
256
  <span class="cline-any cline-yes">8x</span>
275
- <span class="cline-any cline-yes">8x</span>
276
- <span class="cline-any cline-neutral">&nbsp;</span>
277
257
  <span class="cline-any cline-neutral">&nbsp;</span>
278
258
  <span class="cline-any cline-yes">4x</span>
279
259
  <span class="cline-any cline-yes">4x</span>
260
+ <span class="cline-any cline-neutral">&nbsp;</span>
280
261
  <span class="cline-any cline-yes">4x</span>
281
262
  <span class="cline-any cline-neutral">&nbsp;</span>
282
263
  <span class="cline-any cline-yes">4x</span>
@@ -288,25 +269,26 @@
288
269
  <span class="cline-any cline-neutral">&nbsp;</span>
289
270
  <span class="cline-any cline-neutral">&nbsp;</span>
290
271
  <span class="cline-any cline-neutral">&nbsp;</span>
272
+ <span class="cline-any cline-yes">4x</span>
291
273
  <span class="cline-any cline-neutral">&nbsp;</span>
292
274
  <span class="cline-any cline-neutral">&nbsp;</span>
293
275
  <span class="cline-any cline-yes">4x</span>
294
276
  <span class="cline-any cline-neutral">&nbsp;</span>
277
+ <span class="cline-any cline-yes">4x</span>
278
+ <span class="cline-any cline-no">&nbsp;</span>
279
+ <span class="cline-any cline-no">&nbsp;</span>
295
280
  <span class="cline-any cline-neutral">&nbsp;</span>
296
281
  <span class="cline-any cline-neutral">&nbsp;</span>
297
282
  <span class="cline-any cline-neutral">&nbsp;</span>
298
- <span class="cline-any cline-yes">8x</span>
299
- <span class="cline-any cline-yes">4x</span>
300
283
  <span class="cline-any cline-neutral">&nbsp;</span>
301
284
  <span class="cline-any cline-neutral">&nbsp;</span>
302
- <span class="cline-any cline-no">&nbsp;</span>
303
- <span class="cline-any cline-no">&nbsp;</span>
304
285
  <span class="cline-any cline-neutral">&nbsp;</span>
305
- <span class="cline-any cline-no">&nbsp;</span>
286
+ <span class="cline-any cline-yes">4x</span>
306
287
  <span class="cline-any cline-neutral">&nbsp;</span>
307
288
  <span class="cline-any cline-neutral">&nbsp;</span>
308
289
  <span class="cline-any cline-neutral">&nbsp;</span>
309
- <span class="cline-any cline-yes">8x</span>
290
+ <span class="cline-any cline-neutral">&nbsp;</span>
291
+ <span class="cline-any cline-yes">12x</span>
310
292
  <span class="cline-any cline-neutral">&nbsp;</span>
311
293
  <span class="cline-any cline-neutral">&nbsp;</span>
312
294
  <span class="cline-any cline-yes">1x</span>
@@ -329,8 +311,8 @@
329
311
  <span class="cline-any cline-neutral">&nbsp;</span>
330
312
  <span class="cline-any cline-neutral">&nbsp;</span>
331
313
  <span class="cline-any cline-neutral">&nbsp;</span>
332
- <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useContext, useRef, useEffect } from "react";
333
- import { MapContext } from "@mapcomponents/react-core";
314
+ <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useRef, useEffect } from "react";
315
+ import useMap from "../../hooks/useMap";
334
316
  import PropTypes from "prop-types";
335
317
  &nbsp;
336
318
  /**
@@ -340,104 +322,95 @@ import PropTypes from "prop-types";
340
322
  * @component
341
323
  */
342
324
  const MlVectorTileLayer = (props) =&gt; {
343
- const mapContext = useContext(MapContext);
325
+ const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
344
326
  &nbsp;
345
- const layerName = "vector-tile-layer-";
346
- const sourceName = "vector-tile-source-";
347
- const idSuffixRef = useRef(new Date().getTime());
348
327
  const layerIdsRef = useRef({});
328
+ const layerId = useRef(props.layerId || "MlVectorTileLayer-" + mapHook.componentId);
349
329
  const layerPaintConfsRef = useRef({});
330
+ const layerLayoutConfsRef = useRef({});
350
331
  const initializedRef = useRef(false);
351
- const mapRef = useRef(null);
352
- &nbsp;
353
- const cleanup = () =&gt; {
354
- if (mapRef.current &amp;&amp; mapRef.current.style) {
355
- for (let key in layerIdsRef.current) {
356
- if (mapRef.current.getLayer(layerIdsRef.current[key])) {
357
- mapRef.current.removeLayer(layerIdsRef.current[key]);
358
- }
359
- }
360
- if (mapRef.current.getSource(sourceName + idSuffixRef.current)) {
361
- mapRef.current.removeSource(sourceName + idSuffixRef.current);
362
- }
363
- }
364
- };
365
- &nbsp;
366
- useEffect(() =&gt; {
367
- return cleanup;
368
- }, []);
369
332
  &nbsp;
370
333
  useEffect(() =&gt; {
371
- if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
334
+ if (!mapHook.map || initializedRef.current) return;
372
335
  &nbsp;
373
336
  initializedRef.current = true;
374
- mapRef.current = mapContext.getMap(props.mapId);
375
337
  &nbsp;
376
338
  // Add the new layer to the openlayers instance once it is available
377
- mapRef.current.addSource(sourceName + idSuffixRef.current, {
378
- type: "vector",
379
- tiles: [props.url],
380
- tileSize: 512,
381
- attribution: "",
382
- //...props.sourceOptions,
383
- });
339
+ mapHook.map.addSource(
340
+ layerId,
341
+ {
342
+ type: "vector",
343
+ tiles: [props.url],
344
+ tileSize: 512,
345
+ attribution: "",
346
+ ...props.sourceOptions,
347
+ },
348
+ mapHook.componentId
349
+ );
384
350
  &nbsp;
385
351
  for (let key in props.layers) {
386
- let layerId = layerName + "_" + key + "_" + idSuffixRef.current;
387
- layerIdsRef.current[key] = layerId;
352
+ let _layerId = layerId.current + "_" + key;
353
+ layerIdsRef.current[key] = _layerId;
388
354
  &nbsp;
389
- mapRef.current.addLayer({
390
- id: layerId,
391
- source: sourceName + idSuffixRef.current,
392
- type: "line",
393
- minzoom: 0,
394
- maxzoom: 22,
395
- layout: {},
396
- paint: {
397
- "line-opacity": 0.5,
398
- "line-color": "rgb(80, 80, 80)",
399
- "line-width": 2,
355
+ console.log(_layerId);
356
+ mapHook.map.addLayer(
357
+ {
358
+ id: _layerId,
359
+ source: layerId.current,
360
+ type: "line",
361
+ minzoom: 0,
362
+ maxzoom: 22,
363
+ layout: {},
364
+ paint: {
365
+ "line-opacity": 0.5,
366
+ "line-color": "rgb(80, 80, 80)",
367
+ "line-width": 2,
368
+ },
369
+ ...props.layers[key],
400
370
  },
401
- ...props.layers[key],
402
- });
371
+ props.insertBeforeLayer,
372
+ mapHook.componentId
373
+ );
403
374
  layerPaintConfsRef.current[key] = JSON.stringify(props.layers[key].paint);
375
+ layerLayoutConfsRef.current[key] = JSON.stringify(props.layers[key].layout);
404
376
  }
405
- }, [mapContext.mapIds, props, mapContext]);
377
+ }, [mapHook.map, props]);
406
378
  &nbsp;
407
379
  useEffect(() =&gt; {
408
- if (!mapRef.current) return;
409
- // the MapLibre-gl instance (mapContext.map) is accessible here
380
+ if (!mapHook.map || !initializedRef.current) return;
410
381
  // initialize the layer and add it to the MapLibre-gl instance or do something else with it
411
382
  for (var key in props.layers) {
412
- if (mapRef.current.getLayer(layerIdsRef.current[key])) {
413
- let layerConfString = JSON.stringify(props.layers[key].paint);
383
+ if (mapHook.map.getLayer(layerIdsRef.current[key])) {
384
+ // update changed paint property
385
+ let layerPaintConfString = JSON.stringify(props.layers[key].paint);
414
386
  &nbsp;
415
- <span class="missing-if-branch" title="if path not taken" >I</span>if (layerConfString !== layerPaintConfsRef.current[key]) {
387
+ <span class="missing-if-branch" title="if path not taken" >I</span>if (layerPaintConfString !== layerPaintConfsRef.current[key]) {
416
388
  <span class="cstat-no" title="statement not covered" > for (let paintKey in props.layers[key].paint) {</span>
417
- <span class="cstat-no" title="statement not covered" > mapContext</span>
418
- .getMap(props.mapId)
419
- .setPaintProperty(
420
- layerIdsRef.current[key],
421
- paintKey,
422
- props.layers[key].paint[paintKey]
423
- );
389
+ <span class="cstat-no" title="statement not covered" > mapHook.map.setPaintProperty(</span>
390
+ layerIdsRef.current[key],
391
+ paintKey,
392
+ props.layers[key].paint[paintKey]
393
+ );
424
394
  }
425
395
  }
426
- layerPaintConfsRef.current[key] = layerConfString;
427
- }
428
- }
429
- }, [props.layers, props, mapContext]);
396
+ layerPaintConfsRef.current[key] = layerPaintConfString;
430
397
  &nbsp;
431
- useEffect(() =&gt; {
432
- if (!mapRef.current) return;
398
+ // update changed layout property
399
+ let layerLayoutConfString = JSON.stringify(props.layers[key].layout);
433
400
  &nbsp;
434
- // toggle layer visibility by changing the layout object's visibility property
435
- <span class="cstat-no" title="statement not covered" > if (props.visible) {</span>
436
- <span class="cstat-no" title="statement not covered" > mapRef.current.setLayoutProperty(layerName + idSuffixRef.current, "visibility", "visible");</span>
437
- } else {
438
- <span class="cstat-no" title="statement not covered" > mapRef.current.setLayoutProperty(layerName + idSuffixRef.current, "visibility", "none");</span>
401
+ <span class="missing-if-branch" title="if path not taken" >I</span>if (layerLayoutConfString !== layerLayoutConfsRef.current[key]) {
402
+ <span class="cstat-no" title="statement not covered" > for (let layoutKey in props.layers[key].layout) {</span>
403
+ <span class="cstat-no" title="statement not covered" > mapHook.map.setLayoutProperty(</span>
404
+ layerIdsRef.current[key],
405
+ layoutKey,
406
+ props.layers[key].layout[layoutKey]
407
+ );
408
+ }
409
+ }
410
+ layerLayoutConfsRef.current[key] = layerLayoutConfString;
411
+ }
439
412
  }
440
- }, [props.visible]);
413
+ }, [props.layers, mapHook.map]);
441
414
  &nbsp;
442
415
  return &lt;&gt;&lt;/&gt;;
443
416
  };
@@ -469,7 +442,7 @@ export default MlVectorTileLayer;
469
442
  <div class='footer quiet pad2 space-top1 center small'>
470
443
  Code coverage generated by
471
444
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
472
- at Thu Jan 13 2022 13:08:17 GMT+0000 (Coordinated Universal Time)
445
+ at Sun Jan 23 2022 14:13:38 GMT+0000 (Coordinated Universal Time)
473
446
  </div>
474
447
  <script src="../../../prettify.js"></script>
475
448
  <script>
package/coverage/lcov-report/src/components/MlVectorTileLayer/index.html CHANGED
@@ -23,30 +23,30 @@
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">89.36% </span>
26
+ <span class="strong">88.88% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>42/47</span>
28
+ <span class='fraction'>32/36</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
- <span class="strong">63.63% </span>
33
+ <span class="strong">81.25% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>14/22</span>
35
+ <span class='fraction'>13/16</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
40
  <span class="strong">100% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>6/6</span>
42
+ <span class='fraction'>3/3</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">88.63% </span>
47
+ <span class="strong">88.23% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>39/44</span>
49
+ <span class='fraction'>30/34</span>
50
50
  </div>
51
51
 
52
52
 
@@ -80,17 +80,17 @@
80
80
  </thead>
81
81
  <tbody><tr>
82
82
  <td class="file high" data-value="MlVectorTileLayer.js"><a href="MlVectorTileLayer.js.html">MlVectorTileLayer.js</a></td>
83
- <td data-value="89.36" class="pic high">
84
- <div class="chart"><div class="cover-fill" style="width: 89%"></div><div class="cover-empty" style="width: 11%"></div></div>
83
+ <td data-value="88.88" class="pic high">
84
+ <div class="chart"><div class="cover-fill" style="width: 88%"></div><div class="cover-empty" style="width: 12%"></div></div>
85
85
  </td>
86
- <td data-value="89.36" class="pct high">89.36%</td>
87
- <td data-value="47" class="abs high">42/47</td>
88
- <td data-value="63.63" class="pct medium">63.63%</td>
89
- <td data-value="22" class="abs medium">14/22</td>
86
+ <td data-value="88.88" class="pct high">88.88%</td>
87
+ <td data-value="36" class="abs high">32/36</td>
88
+ <td data-value="81.25" class="pct high">81.25%</td>
89
+ <td data-value="16" class="abs high">13/16</td>
90
90
  <td data-value="100" class="pct high">100%</td>
91
- <td data-value="6" class="abs high">6/6</td>
92
- <td data-value="88.63" class="pct high">88.63%</td>
93
- <td data-value="44" class="abs high">39/44</td>
91
+ <td data-value="3" class="abs high">3/3</td>
92
+ <td data-value="88.23" class="pct high">88.23%</td>
93
+ <td data-value="34" class="abs high">30/34</td>
94
94
  </tr>
95
95
 
96
96
  </tbody>
@@ -101,7 +101,7 @@
101
101
  <div class='footer quiet pad2 space-top1 center small'>
102
102
  Code coverage generated by
103
103
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
104
- at Thu Jan 13 2022 13:08:17 GMT+0000 (Coordinated Universal Time)
104
+ at Sun Jan 23 2022 14:13:38 GMT+0000 (Coordinated Universal Time)
105
105
  </div>
106
106
  <script src="../../../prettify.js"></script>
107
107
  <script>
package/coverage/lcov-report/src/components/MlWmsFeatureInfoPopup/MlWmsFeatureInfoPopup.js.html CHANGED
@@ -262,7 +262,7 @@ export default MlWmsFeatureInfoPopup;
262
262
  <div class='footer quiet pad2 space-top1 center small'>
263
263
  Code coverage generated by
264
264
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
265
- at Thu Jan 13 2022 13:08:17 GMT+0000 (Coordinated Universal Time)
265
+ at Sun Jan 23 2022 14:13:38 GMT+0000 (Coordinated Universal Time)
266
266
  </div>
267
267
  <script src="../../../prettify.js"></script>
268
268
  <script>
package/coverage/lcov-report/src/components/MlWmsFeatureInfoPopup/index.html CHANGED
@@ -101,7 +101,7 @@
101
101
  <div class='footer quiet pad2 space-top1 center small'>
102
102
  Code coverage generated by
103
103
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
104
- at Thu Jan 13 2022 13:08:17 GMT+0000 (Coordinated Universal Time)
104
+ at Sun Jan 23 2022 14:13:38 GMT+0000 (Coordinated Universal Time)
105
105
  </div>
106
106
  <script src="../../../prettify.js"></script>
107
107
  <script>