@mapcomponents/react-maplibre 0.1.12 → 0.1.16

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 (133) hide show
  1. package/.github/workflows/storybook.yml +4 -2
  2. package/CHANGELOG.md +33 -0
  3. package/README.md +22 -6
  4. package/coverage/clover.xml +893 -760
  5. package/coverage/coverage-final.json +22 -17
  6. package/coverage/lcov-report/index.html +183 -123
  7. package/coverage/lcov-report/{components → src/components}/MapLibreMap/MapLibreMap.js.html +10 -10
  8. package/coverage/lcov-report/{components → src/components}/MapLibreMap/index.html +10 -10
  9. package/coverage/lcov-report/{components → src/components}/MlCreatePdfButton/MlCreatePdfButton.js.html +10 -10
  10. package/coverage/lcov-report/{components → src/components}/MlCreatePdfButton/index.html +10 -10
  11. package/coverage/lcov-report/{components → src/components}/MlFeatureEditor/MlFeatureEditor.js.html +10 -10
  12. package/coverage/lcov-report/{components → src/components}/MlFeatureEditor/index.html +10 -10
  13. package/coverage/lcov-report/{components → src/components}/MlFillExtrusionLayer/MlFillExtrusionLayer.js.html +10 -10
  14. package/coverage/lcov-report/{components → src/components}/MlFillExtrusionLayer/index.html +10 -10
  15. package/coverage/lcov-report/{components → src/components}/MlFollowGps/MlFollowGps.js.html +148 -136
  16. package/coverage/lcov-report/{components → src/components}/MlFollowGps/index.html +24 -24
  17. package/coverage/lcov-report/{components → src/components}/MlGPXViewer/MlGPXViewer.js.html +66 -60
  18. package/coverage/lcov-report/{components → src/components}/MlGPXViewer/gpxConverter.js.html +49 -70
  19. package/coverage/lcov-report/{components → src/components}/MlGPXViewer/index.html +25 -25
  20. package/coverage/lcov-report/{components → src/components}/MlGeoJsonLayer/MlGeoJsonLayer.js.html +155 -47
  21. package/coverage/lcov-report/{components → src/components}/MlGeoJsonLayer/index.html +28 -28
  22. package/coverage/lcov-report/{components/MlLayer/MlLayer.js.html → src/components/MlImageMarkerLayer/MlImageMarkerLayer.js.html} +88 -121
  23. package/coverage/lcov-report/{components → src/components}/MlImageMarkerLayer/index.html +28 -28
  24. package/coverage/lcov-report/{components/MlImageMarkerLayer/MlImageMarkerLayer.js.html → src/components/MlLayer/MlLayer.js.html} +116 -125
  25. package/coverage/lcov-report/src/components/MlLayer/index.html +117 -0
  26. package/coverage/lcov-report/{components → src/components}/MlLayerMagnify/MlLayerMagnify.js.html +41 -41
  27. package/coverage/lcov-report/{components → src/components}/MlLayerMagnify/index.html +24 -24
  28. package/coverage/lcov-report/{components → src/components}/MlLayerSwipe/MlLayerSwipe.js.html +38 -41
  29. package/coverage/lcov-report/{components → src/components}/MlLayerSwipe/index.html +24 -24
  30. package/coverage/lcov-report/src/components/MlLayerSwitcher/MlLayerSwitcher.js.html +755 -0
  31. package/coverage/lcov-report/src/components/MlLayerSwitcher/components/LayerBox.js.html +380 -0
  32. package/coverage/lcov-report/src/components/MlLayerSwitcher/components/index.html +117 -0
  33. package/coverage/lcov-report/src/components/MlLayerSwitcher/index.html +117 -0
  34. package/coverage/lcov-report/{components → src/components}/MlMarker/MlMarker.js.html +11 -11
  35. package/coverage/lcov-report/{components → src/components}/MlMarker/index.html +10 -10
  36. package/coverage/lcov-report/{components → src/components}/MlNavigationCompass/MlNavigationCompass.js.html +10 -10
  37. package/coverage/lcov-report/{components → src/components}/MlNavigationCompass/index.html +10 -10
  38. package/coverage/lcov-report/{components → src/components}/MlNavigationTools/MlNavigationTools.js.html +50 -41
  39. package/coverage/lcov-report/{components → src/components}/MlNavigationTools/index.html +18 -18
  40. package/coverage/lcov-report/{components → src/components}/MlOsmLayer/MlOsmLayer.js.html +10 -10
  41. package/coverage/lcov-report/{components → src/components}/MlOsmLayer/index.html +10 -10
  42. package/coverage/lcov-report/{components → src/components}/MlScaleReference/MlScaleReference.js.html +10 -10
  43. package/coverage/lcov-report/{components → src/components}/MlScaleReference/index.html +10 -10
  44. package/coverage/lcov-report/{components → src/components}/MlShareMapState/MlShareMapState.js.html +217 -25
  45. package/coverage/lcov-report/{components → src/components}/MlShareMapState/index.html +18 -18
  46. package/coverage/lcov-report/{components → src/components}/MlSpatialElevationProfile/MlSpatialElevationProfile.js.html +10 -10
  47. package/coverage/lcov-report/{components → src/components}/MlSpatialElevationProfile/index.html +10 -10
  48. package/coverage/lcov-report/{components → src/components}/MlThreeJsLayer/MlThreeJsLayer.js.html +30 -54
  49. package/coverage/lcov-report/{components → src/components}/MlThreeJsLayer/index.html +24 -24
  50. package/coverage/lcov-report/{components → src/components}/MlUseMapDebugger/MlUseMapDebugger.js.html +10 -10
  51. package/coverage/lcov-report/{components → src/components}/MlUseMapDebugger/index.html +10 -10
  52. package/coverage/lcov-report/{components → src/components}/MlVectorTileLayer/MlVectorTileLayer.js.html +10 -10
  53. package/coverage/lcov-report/{components → src/components}/MlVectorTileLayer/index.html +10 -10
  54. package/coverage/lcov-report/{components → src/components}/MlWmsFeatureInfoPopup/MlWmsFeatureInfoPopup.js.html +10 -10
  55. package/coverage/lcov-report/{components → src/components}/MlWmsFeatureInfoPopup/index.html +10 -10
  56. package/coverage/lcov-report/{components → src/components}/MlWmsLayer/MlWmsLayer.js.html +13 -13
  57. package/coverage/lcov-report/{components → src/components}/MlWmsLayer/index.html +14 -14
  58. package/coverage/lcov-report/{components → src/components}/MlWmsLoader/MlWmsLoader.js.html +31 -19
  59. package/coverage/lcov-report/{components → src/components}/MlWmsLoader/index.html +16 -16
  60. package/coverage/lcov-report/src/hooks/index.html +147 -0
  61. package/coverage/lcov-report/src/hooks/useMap.js.html +296 -0
  62. package/coverage/lcov-report/{hooks → src/hooks}/useMapState.js.html +91 -91
  63. package/coverage/lcov-report/{hooks → src/hooks}/useWms.js.html +18 -18
  64. package/coverage/lcov-report/src/i18n.js.html +167 -0
  65. package/coverage/lcov-report/src/index.html +117 -0
  66. package/coverage/lcov-report/src/translations/english.js.html +95 -0
  67. package/coverage/lcov-report/src/translations/german.js.html +95 -0
  68. package/coverage/lcov-report/src/translations/index.html +132 -0
  69. package/coverage/lcov.info +1610 -1314
  70. package/dist/b556faa3bc6829d2.png +0 -0
  71. package/dist/index.esm.js +934 -668
  72. package/dist/index.esm.js.map +1 -1
  73. package/package.json +3 -1
  74. package/public/assets/dop.png +0 -0
  75. package/public/assets/historic.png +0 -0
  76. package/public/assets/osm.png +0 -0
  77. package/public/thumbnails/MlFollowGps.png +0 -0
  78. package/public/thumbnails/MlThreeJsLayer.png +0 -0
  79. package/src/components/MapLibreMap/lib/MapLibreGlWrapper.js +53 -67
  80. package/src/components/MlComponentTemplate/MlComponentTemplate.js +6 -31
  81. package/src/components/MlFeatureEditor/MlFeatureEditor.meta.json +2 -2
  82. package/src/components/MlFollowGps/MlFollowGps.js +92 -88
  83. package/src/components/MlFollowGps/MlFollowGps.meta.json +2 -2
  84. package/src/components/MlFollowGps/MlFollowGps.test.js +3 -5
  85. package/src/components/MlFollowGps/assets/marker.png +0 -0
  86. package/src/components/MlGPXViewer/MlGPXViewer.js +45 -43
  87. package/src/components/MlGPXViewer/gpxConverter.js +22 -29
  88. package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.js +45 -9
  89. package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.js +21 -57
  90. package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.test.js +6 -7
  91. package/src/components/MlLayer/MlLayer.js +28 -6
  92. package/src/components/MlLayer/MlLayer.test.js +12 -10
  93. package/src/components/MlLayerMagnify/MlLayerMagnify.js +3 -3
  94. package/src/components/MlLayerSwipe/MlLayerSwipe.js +4 -5
  95. package/src/components/MlLayerSwitcher/MlLayerSwitcher.css +17 -0
  96. package/src/components/MlLayerSwitcher/MlLayerSwitcher.doc.de.md +3 -0
  97. package/src/components/MlLayerSwitcher/MlLayerSwitcher.js +223 -0
  98. package/src/components/MlLayerSwitcher/MlLayerSwitcher.meta_.json +15 -0
  99. package/src/components/MlLayerSwitcher/MlLayerSwitcher.stories.js +106 -0
  100. package/src/components/MlLayerSwitcher/assets/sample_1.json +26 -0
  101. package/src/components/MlLayerSwitcher/assets/sample_2.json +22 -0
  102. package/src/components/MlLayerSwitcher/components/LayerBox.js +98 -0
  103. package/src/components/MlMarker/MlMarker.js +1 -1
  104. package/src/components/MlNavigationTools/MlNavigationTools.js +29 -26
  105. package/src/components/MlScaleReference/MlScaleReference.meta.json +1 -1
  106. package/src/components/MlScaleReference/MlScaleReference.stories.js +25 -21
  107. package/src/components/MlShareMapState/MlShareMapState.js +73 -9
  108. package/src/components/MlShareMapState/MlShareMapState.stories.js +24 -1
  109. package/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.stories.js +12 -6
  110. package/src/components/MlThreeJsLayer/MlThreeJsLayer.js +8 -15
  111. package/src/components/MlWmsLayer/MlWmsLayer.js +1 -1
  112. package/src/components/MlWmsLoader/MlWmsLoader.js +8 -4
  113. package/src/components/MlWmsLoader/MlWmsLoader.meta.json +1 -1
  114. package/src/components/MlWmsLoader/MlWmsLoader.stories.js +5 -4
  115. package/src/decorators/EmptyMapContextDecorator.js +11 -6
  116. package/src/decorators/MapContext3DDecorator.js +25 -20
  117. package/src/decorators/MapContextDashboardDecorator.js +7 -2
  118. package/src/decorators/MapContextDecorator.js +7 -3
  119. package/src/decorators/MapContextKlokantechBasicDecorator.js +8 -4
  120. package/src/decorators/MultiMapContextDecorator.js +2 -1
  121. package/src/hooks/useMap.js +33 -62
  122. package/src/hooks/useMapState.js +3 -3
  123. package/src/hooks/useWms.js +7 -6
  124. package/src/i18n.js +28 -0
  125. package/src/index.js +3 -0
  126. package/src/translations/english.js +4 -0
  127. package/src/translations/german.js +4 -0
  128. package/src/ui_components/ImageLoader.js +73 -0
  129. package/src/ui_components/Sidebar.js +75 -20
  130. package/src/ui_components/TopToolbar.js +18 -18
  131. package/coverage/lcov-report/components/MlLayer/index.html +0 -117
  132. package/coverage/lcov-report/hooks/index.html +0 -147
  133. package/coverage/lcov-report/hooks/useMap.js.html +0 -383
@@ -3,15 +3,15 @@
3
3
  <html lang="en">
4
4
 
5
5
  <head>
6
- <title>Code coverage report for components/MlGeoJsonLayer/MlGeoJsonLayer.js</title>
6
+ <title>Code coverage report for src/components/MlGeoJsonLayer/MlGeoJsonLayer.js</title>
7
7
  <meta charset="utf-8" />
8
- <link rel="stylesheet" href="../../prettify.css" />
9
- <link rel="stylesheet" href="../../base.css" />
10
- <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
8
+ <link rel="stylesheet" href="../../../prettify.css" />
9
+ <link rel="stylesheet" href="../../../base.css" />
10
+ <link rel="shortcut icon" type="image/x-icon" href="../../../favicon.png" />
11
11
  <meta name="viewport" content="width=device-width, initial-scale=1" />
12
12
  <style type='text/css'>
13
13
  .coverage-summary .sorter {
14
- background-image: url(../../sort-arrow-sprite.png);
14
+ background-image: url(../../../sort-arrow-sprite.png);
15
15
  }
16
16
  </style>
17
17
  </head>
@@ -19,34 +19,34 @@
19
19
  <body>
20
20
  <div class='wrapper'>
21
21
  <div class='pad1'>
22
- <h1><a href="../../index.html">All files</a> / <a href="index.html">components/MlGeoJsonLayer</a> MlGeoJsonLayer.js</h1>
22
+ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/components/MlGeoJsonLayer</a> MlGeoJsonLayer.js</h1>
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">68.85% </span>
26
+ <span class="strong">63.51% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>42/61</span>
28
+ <span class='fraction'>47/74</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
- <span class="strong">56% </span>
33
+ <span class="strong">53.22% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>28/50</span>
35
+ <span class='fraction'>33/62</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
- <span class="strong">85.71% </span>
40
+ <span class="strong">77.77% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>6/7</span>
42
+ <span class='fraction'>7/9</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">67.24% </span>
47
+ <span class="strong">61.42% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>39/58</span>
49
+ <span class='fraction'>43/70</span>
50
50
  </div>
51
51
 
52
52
 
@@ -289,7 +289,44 @@
289
289
  <a name='L224'></a><a href='#L224'>224</a>
290
290
  <a name='L225'></a><a href='#L225'>225</a>
291
291
  <a name='L226'></a><a href='#L226'>226</a>
292
- <a name='L227'></a><a href='#L227'>227</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
292
+ <a name='L227'></a><a href='#L227'>227</a>
293
+ <a name='L228'></a><a href='#L228'>228</a>
294
+ <a name='L229'></a><a href='#L229'>229</a>
295
+ <a name='L230'></a><a href='#L230'>230</a>
296
+ <a name='L231'></a><a href='#L231'>231</a>
297
+ <a name='L232'></a><a href='#L232'>232</a>
298
+ <a name='L233'></a><a href='#L233'>233</a>
299
+ <a name='L234'></a><a href='#L234'>234</a>
300
+ <a name='L235'></a><a href='#L235'>235</a>
301
+ <a name='L236'></a><a href='#L236'>236</a>
302
+ <a name='L237'></a><a href='#L237'>237</a>
303
+ <a name='L238'></a><a href='#L238'>238</a>
304
+ <a name='L239'></a><a href='#L239'>239</a>
305
+ <a name='L240'></a><a href='#L240'>240</a>
306
+ <a name='L241'></a><a href='#L241'>241</a>
307
+ <a name='L242'></a><a href='#L242'>242</a>
308
+ <a name='L243'></a><a href='#L243'>243</a>
309
+ <a name='L244'></a><a href='#L244'>244</a>
310
+ <a name='L245'></a><a href='#L245'>245</a>
311
+ <a name='L246'></a><a href='#L246'>246</a>
312
+ <a name='L247'></a><a href='#L247'>247</a>
313
+ <a name='L248'></a><a href='#L248'>248</a>
314
+ <a name='L249'></a><a href='#L249'>249</a>
315
+ <a name='L250'></a><a href='#L250'>250</a>
316
+ <a name='L251'></a><a href='#L251'>251</a>
317
+ <a name='L252'></a><a href='#L252'>252</a>
318
+ <a name='L253'></a><a href='#L253'>253</a>
319
+ <a name='L254'></a><a href='#L254'>254</a>
320
+ <a name='L255'></a><a href='#L255'>255</a>
321
+ <a name='L256'></a><a href='#L256'>256</a>
322
+ <a name='L257'></a><a href='#L257'>257</a>
323
+ <a name='L258'></a><a href='#L258'>258</a>
324
+ <a name='L259'></a><a href='#L259'>259</a>
325
+ <a name='L260'></a><a href='#L260'>260</a>
326
+ <a name='L261'></a><a href='#L261'>261</a>
327
+ <a name='L262'></a><a href='#L262'>262</a>
328
+ <a name='L263'></a><a href='#L263'>263</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
329
+ <span class="cline-any cline-neutral">&nbsp;</span>
293
330
  <span class="cline-any cline-neutral">&nbsp;</span>
294
331
  <span class="cline-any cline-neutral">&nbsp;</span>
295
332
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -307,21 +344,29 @@
307
344
  <span class="cline-any cline-neutral">&nbsp;</span>
308
345
  <span class="cline-any cline-yes">2x</span>
309
346
  <span class="cline-any cline-neutral">&nbsp;</span>
310
- <span class="cline-any cline-yes">8x</span>
311
- <span class="cline-any cline-yes">8x</span>
312
- <span class="cline-any cline-yes">8x</span>
313
- <span class="cline-any cline-yes">8x</span>
314
- <span class="cline-any cline-yes">8x</span>
315
- <span class="cline-any cline-yes">8x</span>
316
- <span class="cline-any cline-yes">8x</span>
317
- <span class="cline-any cline-yes">8x</span>
318
- <span class="cline-any cline-yes">8x</span>
319
- <span class="cline-any cline-yes">8x</span>
347
+ <span class="cline-any cline-yes">12x</span>
348
+ <span class="cline-any cline-yes">12x</span>
320
349
  <span class="cline-any cline-neutral">&nbsp;</span>
321
350
  <span class="cline-any cline-neutral">&nbsp;</span>
322
- <span class="cline-any cline-yes">8x</span>
323
351
  <span class="cline-any cline-neutral">&nbsp;</span>
324
- <span class="cline-any cline-yes">8x</span>
352
+ <span class="cline-any cline-neutral">&nbsp;</span>
353
+ <span class="cline-any cline-neutral">&nbsp;</span>
354
+ <span class="cline-any cline-neutral">&nbsp;</span>
355
+ <span class="cline-any cline-neutral">&nbsp;</span>
356
+ <span class="cline-any cline-yes">12x</span>
357
+ <span class="cline-any cline-yes">12x</span>
358
+ <span class="cline-any cline-yes">12x</span>
359
+ <span class="cline-any cline-yes">12x</span>
360
+ <span class="cline-any cline-yes">12x</span>
361
+ <span class="cline-any cline-yes">12x</span>
362
+ <span class="cline-any cline-yes">12x</span>
363
+ <span class="cline-any cline-yes">12x</span>
364
+ <span class="cline-any cline-yes">12x</span>
365
+ <span class="cline-any cline-neutral">&nbsp;</span>
366
+ <span class="cline-any cline-neutral">&nbsp;</span>
367
+ <span class="cline-any cline-yes">12x</span>
368
+ <span class="cline-any cline-neutral">&nbsp;</span>
369
+ <span class="cline-any cline-yes">12x</span>
325
370
  <span class="cline-any cline-yes">4x</span>
326
371
  <span class="cline-any cline-yes">4x</span>
327
372
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -329,7 +374,6 @@
329
374
  <span class="cline-any cline-no">&nbsp;</span>
330
375
  <span class="cline-any cline-neutral">&nbsp;</span>
331
376
  <span class="cline-any cline-yes">2x</span>
332
- <span class="cline-any cline-neutral">&nbsp;</span>
333
377
  <span class="cline-any cline-yes">2x</span>
334
378
  <span class="cline-any cline-neutral">&nbsp;</span>
335
379
  <span class="cline-any cline-yes">2x</span>
@@ -337,17 +381,23 @@
337
381
  <span class="cline-any cline-neutral">&nbsp;</span>
338
382
  <span class="cline-any cline-neutral">&nbsp;</span>
339
383
  <span class="cline-any cline-neutral">&nbsp;</span>
340
- <span class="cline-any cline-yes">8x</span>
384
+ <span class="cline-any cline-yes">12x</span>
341
385
  <span class="cline-any cline-yes">8x</span>
342
386
  <span class="cline-any cline-neutral">&nbsp;</span>
387
+ <span class="cline-any cline-no">&nbsp;</span>
388
+ <span class="cline-any cline-no">&nbsp;</span>
389
+ <span class="cline-any cline-neutral">&nbsp;</span>
343
390
  <span class="cline-any cline-neutral">&nbsp;</span>
344
391
  <span class="cline-any cline-neutral">&nbsp;</span>
392
+ <span class="cline-any cline-yes">12x</span>
393
+ <span class="cline-any cline-yes">8x</span>
394
+ <span class="cline-any cline-neutral">&nbsp;</span>
345
395
  <span class="cline-any cline-no">&nbsp;</span>
346
396
  <span class="cline-any cline-no">&nbsp;</span>
347
397
  <span class="cline-any cline-neutral">&nbsp;</span>
348
398
  <span class="cline-any cline-neutral">&nbsp;</span>
349
399
  <span class="cline-any cline-neutral">&nbsp;</span>
350
- <span class="cline-any cline-yes">8x</span>
400
+ <span class="cline-any cline-yes">12x</span>
351
401
  <span class="cline-any cline-neutral">&nbsp;</span>
352
402
  <span class="cline-any cline-no">&nbsp;</span>
353
403
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -366,7 +416,7 @@
366
416
  <span class="cline-any cline-neutral">&nbsp;</span>
367
417
  <span class="cline-any cline-neutral">&nbsp;</span>
368
418
  <span class="cline-any cline-neutral">&nbsp;</span>
369
- <span class="cline-any cline-yes">8x</span>
419
+ <span class="cline-any cline-yes">12x</span>
370
420
  <span class="cline-any cline-yes">8x</span>
371
421
  <span class="cline-any cline-neutral">&nbsp;</span>
372
422
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -394,12 +444,25 @@
394
444
  <span class="cline-any cline-neutral">&nbsp;</span>
395
445
  <span class="cline-any cline-neutral">&nbsp;</span>
396
446
  <span class="cline-any cline-neutral">&nbsp;</span>
397
- <span class="cline-any cline-yes">8x</span>
398
- <span class="cline-any cline-yes">8x</span>
447
+ <span class="cline-any cline-yes">12x</span>
448
+ <span class="cline-any cline-yes">12x</span>
399
449
  <span class="cline-any cline-neutral">&nbsp;</span>
400
450
  <span class="cline-any cline-neutral">&nbsp;</span>
401
451
  <span class="cline-any cline-neutral">&nbsp;</span>
402
452
  <span class="cline-any cline-yes">4x</span>
453
+ <span class="cline-any cline-neutral">&nbsp;</span>
454
+ <span class="cline-any cline-yes">4x</span>
455
+ <span class="cline-any cline-no">&nbsp;</span>
456
+ <span class="cline-any cline-neutral">&nbsp;</span>
457
+ <span class="cline-any cline-no">&nbsp;</span>
458
+ <span class="cline-any cline-no">&nbsp;</span>
459
+ <span class="cline-any cline-no">&nbsp;</span>
460
+ <span class="cline-any cline-neutral">&nbsp;</span>
461
+ <span class="cline-any cline-neutral">&nbsp;</span>
462
+ <span class="cline-any cline-no">&nbsp;</span>
463
+ <span class="cline-any cline-no">&nbsp;</span>
464
+ <span class="cline-any cline-neutral">&nbsp;</span>
465
+ <span class="cline-any cline-neutral">&nbsp;</span>
403
466
  <span class="cline-any cline-yes">4x</span>
404
467
  <span class="cline-any cline-yes">4x</span>
405
468
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -432,6 +495,7 @@
432
495
  <span class="cline-any cline-neutral">&nbsp;</span>
433
496
  <span class="cline-any cline-neutral">&nbsp;</span>
434
497
  <span class="cline-any cline-neutral">&nbsp;</span>
498
+ <span class="cline-any cline-neutral">&nbsp;</span>
435
499
  <span class="cline-any cline-yes">4x</span>
436
500
  <span class="cline-any cline-no">&nbsp;</span>
437
501
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -455,7 +519,7 @@
455
519
  <span class="cline-any cline-neutral">&nbsp;</span>
456
520
  <span class="cline-any cline-neutral">&nbsp;</span>
457
521
  <span class="cline-any cline-neutral">&nbsp;</span>
458
- <span class="cline-any cline-yes">8x</span>
522
+ <span class="cline-any cline-yes">12x</span>
459
523
  <span class="cline-any cline-neutral">&nbsp;</span>
460
524
  <span class="cline-any cline-neutral">&nbsp;</span>
461
525
  <span class="cline-any cline-yes">2x</span>
@@ -515,12 +579,21 @@
515
579
  <span class="cline-any cline-neutral">&nbsp;</span>
516
580
  <span class="cline-any cline-neutral">&nbsp;</span>
517
581
  <span class="cline-any cline-neutral">&nbsp;</span>
582
+ <span class="cline-any cline-neutral">&nbsp;</span>
583
+ <span class="cline-any cline-neutral">&nbsp;</span>
584
+ <span class="cline-any cline-neutral">&nbsp;</span>
585
+ <span class="cline-any cline-neutral">&nbsp;</span>
586
+ <span class="cline-any cline-neutral">&nbsp;</span>
587
+ <span class="cline-any cline-neutral">&nbsp;</span>
588
+ <span class="cline-any cline-neutral">&nbsp;</span>
589
+ <span class="cline-any cline-neutral">&nbsp;</span>
518
590
  <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useRef, useEffect, useContext, useCallback } from "react";
519
591
  import PropTypes from "prop-types";
520
592
  &nbsp;
521
593
  import { v4 as uuidv4 } from "uuid";
522
594
  import * as turf from "@turf/turf";
523
595
  import { MapContext } from "@mapcomponents/react-core";
596
+ import useMapState from "../../hooks/useMapState";
524
597
  &nbsp;
525
598
  import { _transitionToGeojson } from "./util/transitionFunctions";
526
599
  &nbsp;
@@ -534,6 +607,14 @@ const msPerStep = 50;
534
607
  const MlGeoJsonLayer = (props) =&gt; {
535
608
  // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
536
609
  const mapContext = useContext(MapContext);
610
+ const mapState = useMapState({
611
+ mapId: props.mapId,
612
+ watch: {
613
+ viewport: false,
614
+ layers: true,
615
+ sources: false,
616
+ },
617
+ });
537
618
  const oldGeojsonRef = useRef(null);
538
619
  const mapRef = useRef(null);
539
620
  const initializedRef = useRef(false);
@@ -551,11 +632,10 @@ const MlGeoJsonLayer = (props) =&gt; {
551
632
  let _componentId = componentId.current;
552
633
  return () =&gt; {
553
634
  // This is the cleanup function, it is called when this react component is removed from react-dom
554
- <span class="missing-if-branch" title="if path not taken" >I</span>if(transitionTimeoutRef.current){
555
- <span class="cstat-no" title="statement not covered" > clearTimeout(transitionTimeoutRef.current)</span>
635
+ <span class="missing-if-branch" title="if path not taken" >I</span>if (transitionTimeoutRef.current) {
636
+ <span class="cstat-no" title="statement not covered" > clearTimeout(transitionTimeoutRef.current);</span>
556
637
  }
557
638
  if (mapRef.current) {
558
- &nbsp;
559
639
  mapRef.current.cleanup(_componentId);
560
640
  &nbsp;
561
641
  mapRef.current = null;
@@ -565,11 +645,17 @@ const MlGeoJsonLayer = (props) =&gt; {
565
645
  &nbsp;
566
646
  useEffect(() =&gt; {
567
647
  if (!mapRef.current || <span class="branch-1 cbranch-no" title="branch not covered" >!initializedRef.current)</span> return;
568
- // the MapLibre-gl instance (mapContext.map) is accessible here
569
- // initialize the layer and add it to the MapLibre-gl instance or do something else with it
648
+ &nbsp;
649
+ <span class="cstat-no" title="statement not covered" > for (var key in props.layout) {</span>
650
+ <span class="cstat-no" title="statement not covered" > mapContext.getMap(props.mapId).setLayoutProperty(layerId.current, key, props.layout[key]);</span>
651
+ }
652
+ }, [props.layout, mapContext, props.mapId]);
653
+ &nbsp;
654
+ useEffect(() =&gt; {
655
+ if (!mapRef.current || <span class="branch-1 cbranch-no" title="branch not covered" >!initializedRef.current)</span> return;
570
656
  &nbsp;
571
657
  <span class="cstat-no" title="statement not covered" > for (var key in props.paint) {</span>
572
- <span class="cstat-no" title="statement not covered" > mapContext.getMap(props.mapId).setPaintProperty(componentId.current, key, props.paint[key]);</span>
658
+ <span class="cstat-no" title="statement not covered" > mapContext.getMap(props.mapId).setPaintProperty(layerId.current, key, props.paint[key]);</span>
573
659
  }
574
660
  }, [props.paint, mapContext, props.mapId]);
575
661
  &nbsp;
@@ -626,6 +712,19 @@ const MlGeoJsonLayer = (props) =&gt; {
626
712
  // initialize the layer and add it to the MapLibre-gl instance or do something else with it
627
713
  &nbsp;
628
714
  if (props.geojson) {
715
+ //check if insertBeforeLayer exists
716
+ <span class="missing-if-branch" title="if path not taken" >I</span>if (props.insertBeforeLayer) {
717
+ let layerFound = <span class="cstat-no" title="statement not covered" >false;</span>
718
+ &nbsp;
719
+ <span class="cstat-no" title="statement not covered" > mapState?.layers?.forEach(<span class="fstat-no" title="function not covered" >(l</span>ayer) =&gt; {</span>
720
+ <span class="cstat-no" title="statement not covered" > if (layer.id === props.insertBeforeLayer) {</span>
721
+ <span class="cstat-no" title="statement not covered" > layerFound = true;</span>
722
+ }
723
+ });
724
+ <span class="cstat-no" title="statement not covered" > if (!layerFound) {</span>
725
+ <span class="cstat-no" title="statement not covered" > return;</span>
726
+ }
727
+ }
629
728
  initializedRef.current = true;
630
729
  let geojson = props.geojson;
631
730
  &nbsp;
@@ -653,6 +752,7 @@ const MlGeoJsonLayer = (props) =&gt; {
653
752
  "line-color": "rgb(100,200,100)",
654
753
  "line-width": 10,
655
754
  },
755
+ layout: props.layout || {},
656
756
  },
657
757
  props.insertBeforeLayer,
658
758
  componentId.current
@@ -679,7 +779,7 @@ const MlGeoJsonLayer = (props) =&gt; {
679
779
  <span class="cstat-no" title="statement not covered" > oldGeojsonRef.current = props.geojson;</span>
680
780
  }
681
781
  }
682
- }, [mapContext.mapIds, mapContext, props, transitionToGeojson]);
782
+ }, [mapContext.mapIds, mapContext, props, transitionToGeojson, mapState.layers]);
683
783
  &nbsp;
684
784
  return &lt;&gt;&lt;/&gt;;
685
785
  };
@@ -695,8 +795,16 @@ MlGeoJsonLayer.propTypes = {
695
795
  */
696
796
  type: PropTypes.string,
697
797
  /**
698
- * Paint object, that is passed to the addLayer call.
699
- * Possible propsdepend on the layer type.
798
+ * Layout property object, that is passed to the addLayer call.
799
+ * Possible props depend on the layer type.
800
+ * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
801
+ * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
802
+ * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
803
+ */
804
+ layout: PropTypes.object,
805
+ /**
806
+ * Paint property object, that is passed to the addLayer call.
807
+ * Possible props depend on the layer type.
700
808
  * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
701
809
  * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
702
810
  * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
@@ -748,17 +856,17 @@ export default MlGeoJsonLayer;
748
856
  <div class='footer quiet pad2 space-top1 center small'>
749
857
  Code coverage generated by
750
858
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener">istanbul</a>
751
- at Sat Dec 04 2021 10:55:55 GMT+0000 (Coordinated Universal Time)
859
+ at Thu Dec 23 2021 12:19:00 GMT+0000 (Coordinated Universal Time)
752
860
  </div>
753
861
  </div>
754
- <script src="../../prettify.js"></script>
862
+ <script src="../../../prettify.js"></script>
755
863
  <script>
756
864
  window.onload = function () {
757
865
  prettyPrint();
758
866
  };
759
867
  </script>
760
- <script src="../../sorter.js"></script>
761
- <script src="../../block-navigation.js"></script>
868
+ <script src="../../../sorter.js"></script>
869
+ <script src="../../../block-navigation.js"></script>
762
870
  </body>
763
871
  </html>
764
872
 
@@ -3,15 +3,15 @@
3
3
  <html lang="en">
4
4
 
5
5
  <head>
6
- <title>Code coverage report for components/MlGeoJsonLayer</title>
6
+ <title>Code coverage report for src/components/MlGeoJsonLayer</title>
7
7
  <meta charset="utf-8" />
8
- <link rel="stylesheet" href="../../prettify.css" />
9
- <link rel="stylesheet" href="../../base.css" />
10
- <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
8
+ <link rel="stylesheet" href="../../../prettify.css" />
9
+ <link rel="stylesheet" href="../../../base.css" />
10
+ <link rel="shortcut icon" type="image/x-icon" href="../../../favicon.png" />
11
11
  <meta name="viewport" content="width=device-width, initial-scale=1" />
12
12
  <style type='text/css'>
13
13
  .coverage-summary .sorter {
14
- background-image: url(../../sort-arrow-sprite.png);
14
+ background-image: url(../../../sort-arrow-sprite.png);
15
15
  }
16
16
  </style>
17
17
  </head>
@@ -19,34 +19,34 @@
19
19
  <body>
20
20
  <div class='wrapper'>
21
21
  <div class='pad1'>
22
- <h1><a href="../../index.html">All files</a> components/MlGeoJsonLayer</h1>
22
+ <h1><a href="../../../index.html">All files</a> src/components/MlGeoJsonLayer</h1>
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">68.85% </span>
26
+ <span class="strong">63.51% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>42/61</span>
28
+ <span class='fraction'>47/74</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
- <span class="strong">56% </span>
33
+ <span class="strong">53.22% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>28/50</span>
35
+ <span class='fraction'>33/62</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
- <span class="strong">85.71% </span>
40
+ <span class="strong">77.77% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>6/7</span>
42
+ <span class='fraction'>7/9</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">67.24% </span>
47
+ <span class="strong">61.42% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>39/58</span>
49
+ <span class='fraction'>43/70</span>
50
50
  </div>
51
51
 
52
52
 
@@ -80,17 +80,17 @@
80
80
  </thead>
81
81
  <tbody><tr>
82
82
  <td class="file medium" data-value="MlGeoJsonLayer.js"><a href="MlGeoJsonLayer.js.html">MlGeoJsonLayer.js</a></td>
83
- <td data-value="68.85" class="pic medium">
84
- <div class="chart"><div class="cover-fill" style="width: 68%"></div><div class="cover-empty" style="width: 32%"></div></div>
83
+ <td data-value="63.51" class="pic medium">
84
+ <div class="chart"><div class="cover-fill" style="width: 63%"></div><div class="cover-empty" style="width: 37%"></div></div>
85
85
  </td>
86
- <td data-value="68.85" class="pct medium">68.85%</td>
87
- <td data-value="61" class="abs medium">42/61</td>
88
- <td data-value="56" class="pct medium">56%</td>
89
- <td data-value="50" class="abs medium">28/50</td>
90
- <td data-value="85.71" class="pct high">85.71%</td>
91
- <td data-value="7" class="abs high">6/7</td>
92
- <td data-value="67.24" class="pct medium">67.24%</td>
93
- <td data-value="58" class="abs medium">39/58</td>
86
+ <td data-value="63.51" class="pct medium">63.51%</td>
87
+ <td data-value="74" class="abs medium">47/74</td>
88
+ <td data-value="53.22" class="pct medium">53.22%</td>
89
+ <td data-value="62" class="abs medium">33/62</td>
90
+ <td data-value="77.77" class="pct medium">77.77%</td>
91
+ <td data-value="9" class="abs medium">7/9</td>
92
+ <td data-value="61.42" class="pct medium">61.42%</td>
93
+ <td data-value="70" class="abs medium">43/70</td>
94
94
  </tr>
95
95
 
96
96
  </tbody>
@@ -101,17 +101,17 @@
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">istanbul</a>
104
- at Sat Dec 04 2021 10:55:55 GMT+0000 (Coordinated Universal Time)
104
+ at Thu Dec 23 2021 12:19:00 GMT+0000 (Coordinated Universal Time)
105
105
  </div>
106
106
  </div>
107
- <script src="../../prettify.js"></script>
107
+ <script src="../../../prettify.js"></script>
108
108
  <script>
109
109
  window.onload = function () {
110
110
  prettyPrint();
111
111
  };
112
112
  </script>
113
- <script src="../../sorter.js"></script>
114
- <script src="../../block-navigation.js"></script>
113
+ <script src="../../../sorter.js"></script>
114
+ <script src="../../../block-navigation.js"></script>
115
115
  </body>
116
116
  </html>
117
117