@mapcomponents/react-maplibre 0.1.20 → 0.1.24

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 -198
  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 +94 -124
  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 -329
  68. package/dist/index.esm.js +86 -106
  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 +65 -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
@@ -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 Mon Jan 17 2022 10:02:27 GMT+0000 (Coordinated Universal Time)
104
+ at Sun Jan 23 2022 14:26:32 GMT+0000 (Coordinated Universal Time)
105
105
  </div>
106
106
  <script src="../../../prettify.js"></script>
107
107
  <script>
@@ -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 Mon Jan 17 2022 10:02:27 GMT+0000 (Coordinated Universal Time)
772
+ at Sun Jan 23 2022 14:26:32 GMT+0000 (Coordinated Universal Time)
773
773
  </div>
774
774
  <script src="../../../prettify.js"></script>
775
775
  <script>
@@ -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 Mon Jan 17 2022 10:02:27 GMT+0000 (Coordinated Universal Time)
104
+ at Sun Jan 23 2022 14:26:32 GMT+0000 (Coordinated Universal Time)
105
105
  </div>
106
106
  <script src="../../../prettify.js"></script>
107
107
  <script>
@@ -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 Mon Jan 17 2022 10:02:27 GMT+0000 (Coordinated Universal Time)
691
+ at Sun Jan 23 2022 14:26:32 GMT+0000 (Coordinated Universal Time)
692
692
  </div>
693
693
  <script src="../../../prettify.js"></script>
694
694
  <script>
@@ -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 Mon Jan 17 2022 10:02:27 GMT+0000 (Coordinated Universal Time)
104
+ at Sun Jan 23 2022 14:26:32 GMT+0000 (Coordinated Universal Time)
105
105
  </div>
106
106
  <script src="../../../prettify.js"></script>
107
107
  <script>
@@ -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 Mon Jan 17 2022 10:02:27 GMT+0000 (Coordinated Universal Time)
298
+ at Sun Jan 23 2022 14:26:32 GMT+0000 (Coordinated Universal Time)
299
299
  </div>
300
300
  <script src="../../../prettify.js"></script>
301
301
  <script>
@@ -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 Mon Jan 17 2022 10:02:27 GMT+0000 (Coordinated Universal Time)
104
+ at Sun Jan 23 2022 14:26:32 GMT+0000 (Coordinated Universal Time)
105
105
  </div>
106
106
  <script src="../../../prettify.js"></script>
107
107
  <script>
@@ -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.57% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>42/47</span>
28
+ <span class='fraction'>31/35</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">87.87% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>39/44</span>
49
+ <span class='fraction'>29/33</span>
50
50
  </div>
51
51
 
52
52
 
@@ -186,17 +186,7 @@
186
186
  <a name='L121'></a><a href='#L121'>121</a>
187
187
  <a name='L122'></a><a href='#L122'>122</a>
188
188
  <a name='L123'></a><a href='#L123'>123</a>
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>
189
+ <a name='L124'></a><a href='#L124'>124</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
200
190
  <span class="cline-any cline-neutral">&nbsp;</span>
201
191
  <span class="cline-any cline-neutral">&nbsp;</span>
202
192
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -207,42 +197,26 @@
207
197
  <span class="cline-any cline-neutral">&nbsp;</span>
208
198
  <span class="cline-any cline-neutral">&nbsp;</span>
209
199
  <span class="cline-any cline-yes">1x</span>
210
- <span class="cline-any cline-yes">8x</span>
200
+ <span class="cline-any cline-yes">12x</span>
211
201
  <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>
202
+ <span class="cline-any cline-yes">12x</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>
219
207
  <span class="cline-any cline-neutral">&nbsp;</span>
208
+ <span class="cline-any cline-yes">12x</span>
220
209
  <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
210
  <span class="cline-any cline-neutral">&nbsp;</span>
211
+ <span class="cline-any cline-yes">4x</span>
231
212
  <span class="cline-any cline-neutral">&nbsp;</span>
232
213
  <span class="cline-any cline-neutral">&nbsp;</span>
233
- <span class="cline-any cline-yes">8x</span>
234
214
  <span class="cline-any cline-yes">4x</span>
235
215
  <span class="cline-any cline-neutral">&nbsp;</span>
236
216
  <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
217
  <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
218
  <span class="cline-any cline-neutral">&nbsp;</span>
243
219
  <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
220
  <span class="cline-any cline-neutral">&nbsp;</span>
247
221
  <span class="cline-any cline-neutral">&nbsp;</span>
248
222
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -267,16 +241,21 @@
267
241
  <span class="cline-any cline-neutral">&nbsp;</span>
268
242
  <span class="cline-any cline-neutral">&nbsp;</span>
269
243
  <span class="cline-any cline-neutral">&nbsp;</span>
244
+ <span class="cline-any cline-neutral">&nbsp;</span>
245
+ <span class="cline-any cline-neutral">&nbsp;</span>
246
+ <span class="cline-any cline-neutral">&nbsp;</span>
247
+ <span class="cline-any cline-neutral">&nbsp;</span>
248
+ <span class="cline-any cline-yes">4x</span>
270
249
  <span class="cline-any cline-yes">4x</span>
271
250
  <span class="cline-any cline-neutral">&nbsp;</span>
272
251
  <span class="cline-any cline-neutral">&nbsp;</span>
273
252
  <span class="cline-any cline-neutral">&nbsp;</span>
253
+ <span class="cline-any cline-yes">12x</span>
274
254
  <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
255
  <span class="cline-any cline-neutral">&nbsp;</span>
278
256
  <span class="cline-any cline-yes">4x</span>
279
257
  <span class="cline-any cline-yes">4x</span>
258
+ <span class="cline-any cline-neutral">&nbsp;</span>
280
259
  <span class="cline-any cline-yes">4x</span>
281
260
  <span class="cline-any cline-neutral">&nbsp;</span>
282
261
  <span class="cline-any cline-yes">4x</span>
@@ -288,25 +267,26 @@
288
267
  <span class="cline-any cline-neutral">&nbsp;</span>
289
268
  <span class="cline-any cline-neutral">&nbsp;</span>
290
269
  <span class="cline-any cline-neutral">&nbsp;</span>
270
+ <span class="cline-any cline-yes">4x</span>
291
271
  <span class="cline-any cline-neutral">&nbsp;</span>
292
272
  <span class="cline-any cline-neutral">&nbsp;</span>
293
273
  <span class="cline-any cline-yes">4x</span>
294
274
  <span class="cline-any cline-neutral">&nbsp;</span>
275
+ <span class="cline-any cline-yes">4x</span>
276
+ <span class="cline-any cline-no">&nbsp;</span>
277
+ <span class="cline-any cline-no">&nbsp;</span>
295
278
  <span class="cline-any cline-neutral">&nbsp;</span>
296
279
  <span class="cline-any cline-neutral">&nbsp;</span>
297
280
  <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
281
  <span class="cline-any cline-neutral">&nbsp;</span>
301
282
  <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
283
  <span class="cline-any cline-neutral">&nbsp;</span>
305
- <span class="cline-any cline-no">&nbsp;</span>
284
+ <span class="cline-any cline-yes">4x</span>
306
285
  <span class="cline-any cline-neutral">&nbsp;</span>
307
286
  <span class="cline-any cline-neutral">&nbsp;</span>
308
287
  <span class="cline-any cline-neutral">&nbsp;</span>
309
- <span class="cline-any cline-yes">8x</span>
288
+ <span class="cline-any cline-neutral">&nbsp;</span>
289
+ <span class="cline-any cline-yes">12x</span>
310
290
  <span class="cline-any cline-neutral">&nbsp;</span>
311
291
  <span class="cline-any cline-neutral">&nbsp;</span>
312
292
  <span class="cline-any cline-yes">1x</span>
@@ -329,8 +309,8 @@
329
309
  <span class="cline-any cline-neutral">&nbsp;</span>
330
310
  <span class="cline-any cline-neutral">&nbsp;</span>
331
311
  <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";
312
+ <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useRef, useEffect } from "react";
313
+ import useMap from "../../hooks/useMap";
334
314
  import PropTypes from "prop-types";
335
315
  &nbsp;
336
316
  /**
@@ -340,104 +320,94 @@ import PropTypes from "prop-types";
340
320
  * @component
341
321
  */
342
322
  const MlVectorTileLayer = (props) =&gt; {
343
- const mapContext = useContext(MapContext);
323
+ const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
344
324
  &nbsp;
345
- const layerName = "vector-tile-layer-";
346
- const sourceName = "vector-tile-source-";
347
- const idSuffixRef = useRef(new Date().getTime());
348
325
  const layerIdsRef = useRef({});
326
+ const layerId = useRef(props.layerId || "MlVectorTileLayer-" + mapHook.componentId);
349
327
  const layerPaintConfsRef = useRef({});
328
+ const layerLayoutConfsRef = useRef({});
350
329
  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
330
  &nbsp;
370
331
  useEffect(() =&gt; {
371
- if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
332
+ if (!mapHook.map || initializedRef.current) return;
372
333
  &nbsp;
373
334
  initializedRef.current = true;
374
- mapRef.current = mapContext.getMap(props.mapId);
375
335
  &nbsp;
376
336
  // 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
- });
337
+ mapHook.map.addSource(
338
+ layerId.current,
339
+ {
340
+ type: "vector",
341
+ tiles: [props.url],
342
+ tileSize: 512,
343
+ attribution: "",
344
+ ...props.sourceOptions,
345
+ },
346
+ mapHook.componentId
347
+ );
384
348
  &nbsp;
385
349
  for (let key in props.layers) {
386
- let layerId = layerName + "_" + key + "_" + idSuffixRef.current;
387
- layerIdsRef.current[key] = layerId;
350
+ let _layerId = layerId.current + "_" + key;
351
+ layerIdsRef.current[key] = _layerId;
388
352
  &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,
353
+ mapHook.map.addLayer(
354
+ {
355
+ id: _layerId,
356
+ source: layerId.current,
357
+ type: "line",
358
+ minzoom: 0,
359
+ maxzoom: 22,
360
+ layout: {},
361
+ paint: {
362
+ "line-opacity": 0.5,
363
+ "line-color": "rgb(80, 80, 80)",
364
+ "line-width": 2,
365
+ },
366
+ ...props.layers[key],
400
367
  },
401
- ...props.layers[key],
402
- });
368
+ props.insertBeforeLayer,
369
+ mapHook.componentId
370
+ );
403
371
  layerPaintConfsRef.current[key] = JSON.stringify(props.layers[key].paint);
372
+ layerLayoutConfsRef.current[key] = JSON.stringify(props.layers[key].layout);
404
373
  }
405
- }, [mapContext.mapIds, props, mapContext]);
374
+ }, [mapHook.map, props]);
406
375
  &nbsp;
407
376
  useEffect(() =&gt; {
408
- if (!mapRef.current) return;
409
- // the MapLibre-gl instance (mapContext.map) is accessible here
377
+ if (!mapHook.map || !initializedRef.current) return;
410
378
  // initialize the layer and add it to the MapLibre-gl instance or do something else with it
411
379
  for (var key in props.layers) {
412
- if (mapRef.current.getLayer(layerIdsRef.current[key])) {
413
- let layerConfString = JSON.stringify(props.layers[key].paint);
380
+ if (mapHook.map.getLayer(layerIdsRef.current[key])) {
381
+ // update changed paint property
382
+ let layerPaintConfString = JSON.stringify(props.layers[key].paint);
414
383
  &nbsp;
415
- <span class="missing-if-branch" title="if path not taken" >I</span>if (layerConfString !== layerPaintConfsRef.current[key]) {
384
+ <span class="missing-if-branch" title="if path not taken" >I</span>if (layerPaintConfString !== layerPaintConfsRef.current[key]) {
416
385
  <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
- );
386
+ <span class="cstat-no" title="statement not covered" > mapHook.map.setPaintProperty(</span>
387
+ layerIdsRef.current[key],
388
+ paintKey,
389
+ props.layers[key].paint[paintKey]
390
+ );
424
391
  }
425
392
  }
426
- layerPaintConfsRef.current[key] = layerConfString;
427
- }
428
- }
429
- }, [props.layers, props, mapContext]);
393
+ layerPaintConfsRef.current[key] = layerPaintConfString;
430
394
  &nbsp;
431
- useEffect(() =&gt; {
432
- if (!mapRef.current) return;
395
+ // update changed layout property
396
+ let layerLayoutConfString = JSON.stringify(props.layers[key].layout);
433
397
  &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>
398
+ <span class="missing-if-branch" title="if path not taken" >I</span>if (layerLayoutConfString !== layerLayoutConfsRef.current[key]) {
399
+ <span class="cstat-no" title="statement not covered" > for (let layoutKey in props.layers[key].layout) {</span>
400
+ <span class="cstat-no" title="statement not covered" > mapHook.map.setLayoutProperty(</span>
401
+ layerIdsRef.current[key],
402
+ layoutKey,
403
+ props.layers[key].layout[layoutKey]
404
+ );
405
+ }
406
+ }
407
+ layerLayoutConfsRef.current[key] = layerLayoutConfString;
408
+ }
439
409
  }
440
- }, [props.visible]);
410
+ }, [props.layers, mapHook.map]);
441
411
  &nbsp;
442
412
  return &lt;&gt;&lt;/&gt;;
443
413
  };
@@ -469,7 +439,7 @@ export default MlVectorTileLayer;
469
439
  <div class='footer quiet pad2 space-top1 center small'>
470
440
  Code coverage generated by
471
441
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
472
- at Mon Jan 17 2022 10:02:27 GMT+0000 (Coordinated Universal Time)
442
+ at Sun Jan 23 2022 14:26:32 GMT+0000 (Coordinated Universal Time)
473
443
  </div>
474
444
  <script src="../../../prettify.js"></script>
475
445
  <script>
@@ -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.57% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>42/47</span>
28
+ <span class='fraction'>31/35</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">87.87% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>39/44</span>
49
+ <span class='fraction'>29/33</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.57" 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.57" class="pct high">88.57%</td>
87
+ <td data-value="35" class="abs high">31/35</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="87.87" class="pct high">87.87%</td>
93
+ <td data-value="33" class="abs high">29/33</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 Mon Jan 17 2022 10:02:27 GMT+0000 (Coordinated Universal Time)
104
+ at Sun Jan 23 2022 14:26:32 GMT+0000 (Coordinated Universal Time)
105
105
  </div>
106
106
  <script src="../../../prettify.js"></script>
107
107
  <script>
@@ -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 Mon Jan 17 2022 10:02:27 GMT+0000 (Coordinated Universal Time)
265
+ at Sun Jan 23 2022 14:26:32 GMT+0000 (Coordinated Universal Time)
266
266
  </div>
267
267
  <script src="../../../prettify.js"></script>
268
268
  <script>
@@ -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 Mon Jan 17 2022 10:02:27 GMT+0000 (Coordinated Universal Time)
104
+ at Sun Jan 23 2022 14:26:32 GMT+0000 (Coordinated Universal Time)
105
105
  </div>
106
106
  <script src="../../../prettify.js"></script>
107
107
  <script>