@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/MlFollowGps/MlFollowGps.js</title>
6
+ <title>Code coverage report for src/components/MlFollowGps/MlFollowGps.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,20 +19,20 @@
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/MlFollowGps</a> MlFollowGps.js</h1>
22
+ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/components/MlFollowGps</a> MlFollowGps.js</h1>
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">66.66% </span>
26
+ <span class="strong">65.62% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>28/42</span>
28
+ <span class='fraction'>21/32</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
- <span class="strong">59.09% </span>
33
+ <span class="strong">55.55% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>13/22</span>
35
+ <span class='fraction'>10/18</span>
36
36
  </div>
37
37
 
38
38
 
@@ -44,9 +44,9 @@
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">67.5% </span>
47
+ <span class="strong">66.66% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>27/40</span>
49
+ <span class='fraction'>20/30</span>
50
50
  </div>
51
51
 
52
52
 
@@ -232,7 +232,11 @@
232
232
  <a name='L167'></a><a href='#L167'>167</a>
233
233
  <a name='L168'></a><a href='#L168'>168</a>
234
234
  <a name='L169'></a><a href='#L169'>169</a>
235
- <a name='L170'></a><a href='#L170'>170</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
235
+ <a name='L170'></a><a href='#L170'>170</a>
236
+ <a name='L171'></a><a href='#L171'>171</a>
237
+ <a name='L172'></a><a href='#L172'>172</a>
238
+ <a name='L173'></a><a href='#L173'>173</a>
239
+ <a name='L174'></a><a href='#L174'>174</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
236
240
  <span class="cline-any cline-neutral">&nbsp;</span>
237
241
  <span class="cline-any cline-neutral">&nbsp;</span>
238
242
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -252,32 +256,28 @@
252
256
  <span class="cline-any cline-neutral">&nbsp;</span>
253
257
  <span class="cline-any cline-neutral">&nbsp;</span>
254
258
  <span class="cline-any cline-neutral">&nbsp;</span>
255
- <span class="cline-any cline-yes">1x</span>
256
259
  <span class="cline-any cline-neutral">&nbsp;</span>
257
- <span class="cline-any cline-yes">7x</span>
258
- <span class="cline-any cline-yes">7x</span>
259
- <span class="cline-any cline-yes">7x</span>
260
- <span class="cline-any cline-yes">7x</span>
261
- <span class="cline-any cline-yes">7x</span>
262
- <span class="cline-any cline-neutral">&nbsp;</span>
263
- <span class="cline-any cline-yes">7x</span>
264
- <span class="cline-any cline-yes">7x</span>
265
- <span class="cline-any cline-yes">7x</span>
266
- <span class="cline-any cline-yes">7x</span>
260
+ <span class="cline-any cline-yes">1x</span>
261
+ <span class="cline-any cline-yes">9x</span>
267
262
  <span class="cline-any cline-neutral">&nbsp;</span>
268
- <span class="cline-any cline-yes">7x</span>
269
- <span class="cline-any cline-yes">2x</span>
263
+ <span class="cline-any cline-yes">9x</span>
264
+ <span class="cline-any cline-yes">9x</span>
265
+ <span class="cline-any cline-yes">9x</span>
266
+ <span class="cline-any cline-yes">9x</span>
270
267
  <span class="cline-any cline-neutral">&nbsp;</span>
268
+ <span class="cline-any cline-yes">9x</span>
271
269
  <span class="cline-any cline-neutral">&nbsp;</span>
270
+ <span class="cline-any cline-yes">9x</span>
272
271
  <span class="cline-any cline-yes">2x</span>
272
+ <span class="cline-any cline-no">&nbsp;</span>
273
+ <span class="cline-any cline-no">&nbsp;</span>
274
+ <span class="cline-any cline-no">&nbsp;</span>
273
275
  <span class="cline-any cline-neutral">&nbsp;</span>
274
276
  <span class="cline-any cline-neutral">&nbsp;</span>
275
277
  <span class="cline-any cline-neutral">&nbsp;</span>
276
278
  <span class="cline-any cline-neutral">&nbsp;</span>
279
+ <span class="cline-any cline-yes">9x</span>
277
280
  <span class="cline-any cline-neutral">&nbsp;</span>
278
- <span class="cline-any cline-neutral">&nbsp;</span>
279
- <span class="cline-any cline-no">&nbsp;</span>
280
- <span class="cline-any cline-no">&nbsp;</span>
281
281
  <span class="cline-any cline-no">&nbsp;</span>
282
282
  <span class="cline-any cline-neutral">&nbsp;</span>
283
283
  <span class="cline-any cline-no">&nbsp;</span>
@@ -288,29 +288,25 @@
288
288
  <span class="cline-any cline-neutral">&nbsp;</span>
289
289
  <span class="cline-any cline-neutral">&nbsp;</span>
290
290
  <span class="cline-any cline-neutral">&nbsp;</span>
291
- <span class="cline-any cline-yes">7x</span>
292
- <span class="cline-any cline-yes">4x</span>
291
+ <span class="cline-any cline-yes">9x</span>
292
+ <span class="cline-any cline-no">&nbsp;</span>
293
+ <span class="cline-any cline-no">&nbsp;</span>
293
294
  <span class="cline-any cline-neutral">&nbsp;</span>
294
295
  <span class="cline-any cline-neutral">&nbsp;</span>
295
- <span class="cline-any cline-yes">2x</span>
296
- <span class="cline-any cline-yes">2x</span>
296
+ <span class="cline-any cline-yes">9x</span>
297
+ <span class="cline-any cline-yes">7x</span>
298
+ <span class="cline-any cline-neutral">&nbsp;</span>
299
+ <span class="cline-any cline-yes">5x</span>
297
300
  <span class="cline-any cline-yes">2x</span>
298
301
  <span class="cline-any cline-neutral">&nbsp;</span>
299
302
  <span class="cline-any cline-neutral">&nbsp;</span>
300
303
  <span class="cline-any cline-neutral">&nbsp;</span>
301
- <span class="cline-any cline-yes">7x</span>
302
- <span class="cline-any cline-no">&nbsp;</span>
303
- <span class="cline-any cline-no">&nbsp;</span>
304
- <span class="cline-any cline-no">&nbsp;</span>
305
- <span class="cline-any cline-no">&nbsp;</span>
306
304
  <span class="cline-any cline-neutral">&nbsp;</span>
305
+ <span class="cline-any cline-yes">3x</span>
307
306
  <span class="cline-any cline-neutral">&nbsp;</span>
308
- <span class="cline-any cline-yes">7x</span>
309
- <span class="cline-any cline-no">&nbsp;</span>
310
- <span class="cline-any cline-no">&nbsp;</span>
311
307
  <span class="cline-any cline-neutral">&nbsp;</span>
312
308
  <span class="cline-any cline-neutral">&nbsp;</span>
313
- <span class="cline-any cline-yes">7x</span>
309
+ <span class="cline-any cline-yes">9x</span>
314
310
  <span class="cline-any cline-neutral">&nbsp;</span>
315
311
  <span class="cline-any cline-neutral">&nbsp;</span>
316
312
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -348,6 +344,9 @@
348
344
  <span class="cline-any cline-neutral">&nbsp;</span>
349
345
  <span class="cline-any cline-neutral">&nbsp;</span>
350
346
  <span class="cline-any cline-neutral">&nbsp;</span>
347
+ <span class="cline-any cline-yes">3x</span>
348
+ <span class="cline-any cline-neutral">&nbsp;</span>
349
+ <span class="cline-any cline-neutral">&nbsp;</span>
351
350
  <span class="cline-any cline-neutral">&nbsp;</span>
352
351
  <span class="cline-any cline-neutral">&nbsp;</span>
353
352
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -355,15 +354,17 @@
355
354
  <span class="cline-any cline-neutral">&nbsp;</span>
356
355
  <span class="cline-any cline-neutral">&nbsp;</span>
357
356
  <span class="cline-any cline-neutral">&nbsp;</span>
358
- <span class="cline-any cline-yes">3x</span>
359
357
  <span class="cline-any cline-yes">1x</span>
360
358
  <span class="cline-any cline-neutral">&nbsp;</span>
361
- <span class="cline-any cline-yes">2x</span>
362
359
  <span class="cline-any cline-neutral">&nbsp;</span>
363
360
  <span class="cline-any cline-neutral">&nbsp;</span>
364
361
  <span class="cline-any cline-neutral">&nbsp;</span>
365
362
  <span class="cline-any cline-neutral">&nbsp;</span>
366
- <span class="cline-any cline-yes">3x</span>
363
+ <span class="cline-any cline-neutral">&nbsp;</span>
364
+ <span class="cline-any cline-neutral">&nbsp;</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-neutral">&nbsp;</span>
367
368
  <span class="cline-any cline-neutral">&nbsp;</span>
368
369
  <span class="cline-any cline-neutral">&nbsp;</span>
369
370
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -390,7 +391,6 @@
390
391
  <span class="cline-any cline-neutral">&nbsp;</span>
391
392
  <span class="cline-any cline-neutral">&nbsp;</span>
392
393
  <span class="cline-any cline-neutral">&nbsp;</span>
393
- <span class="cline-any cline-yes">1x</span>
394
394
  <span class="cline-any cline-neutral">&nbsp;</span>
395
395
  <span class="cline-any cline-neutral">&nbsp;</span>
396
396
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -401,17 +401,26 @@
401
401
  <span class="cline-any cline-neutral">&nbsp;</span>
402
402
  <span class="cline-any cline-neutral">&nbsp;</span>
403
403
  <span class="cline-any cline-neutral">&nbsp;</span>
404
- <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, {useRef, useEffect, useContext, useState} from "react";
404
+ <span class="cline-any cline-neutral">&nbsp;</span>
405
+ <span class="cline-any cline-neutral">&nbsp;</span>
406
+ <span class="cline-any cline-neutral">&nbsp;</span>
407
+ <span class="cline-any cline-neutral">&nbsp;</span>
408
+ <span class="cline-any cline-neutral">&nbsp;</span>
409
+ <span class="cline-any cline-neutral">&nbsp;</span>
410
+ <span class="cline-any cline-neutral">&nbsp;</span>
411
+ <span class="cline-any cline-neutral">&nbsp;</span>
412
+ <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useRef, useEffect, useState, useCallback } from "react";
405
413
  import PropTypes from "prop-types";
414
+ import useMap from "../../hooks/useMap";
406
415
  &nbsp;
407
- import {MapContext} from "@mapcomponents/react-core";
408
- import {v4 as uuidv4} from "uuid";
409
416
  import Button from "@mui/material/Button";
410
417
  import RoomIcon from "@mui/icons-material/Room";
411
- import {point} from "@turf/turf"
418
+ import { point, circle } from "@turf/turf";
412
419
  import MlGeoJsonLayer from "../MlGeoJsonLayer/MlGeoJsonLayer";
413
420
  import MlImageMarkerLayer from "../MlImageMarkerLayer/MlImageMarkerLayer";
414
421
  &nbsp;
422
+ import marker from "./assets/marker.png";
423
+ &nbsp;
415
424
  /**
416
425
  * Adds a button that makes the map follow the users GPS position using
417
426
  * navigator.geolocation.watchPosition if activated
@@ -422,121 +431,97 @@ import MlImageMarkerLayer from "../MlImageMarkerLayer/MlImageMarkerLayer";
422
431
  * @component
423
432
  */
424
433
  const MlFollowGps = (props) =&gt; {
425
- // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
426
- const mapContext = useContext(MapContext);
434
+ const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
435
+ &nbsp;
427
436
  const [isFollowed, setIsFollowed] = useState(false);
428
437
  const [geoJson, setGeoJson] = useState(undefined);
429
438
  const watchIdRef = useRef(undefined);
430
439
  const [locationAccessDenied, setLocationAccessDenied] = useState(false);
431
440
  &nbsp;
432
- const initializedRef = useRef(false);
433
- const mapRef = useRef(undefined);
434
- const componentId = useRef((props.idPrefix ? <span class="branch-0 cbranch-no" title="branch not covered" >props.idPrefix </span>: "MlFollowGps-") + uuidv4());
435
- const [accuracyRadius, setAccuracyRadius] = useState(30);
441
+ const [accuracyGeoJson, setAccuracyGeoJson] = useState();
436
442
  &nbsp;
437
443
  useEffect(() =&gt; {
438
- let _componentId = componentId.current;
439
- &nbsp;
440
- &nbsp;
441
444
  return <span class="fstat-no" title="function not covered" >()</span> =&gt; {
442
- // This is the cleanup function, it is called when this react component is removed from react-dom
443
- // try to remove anything this component has added to the MapLibre-gl instance
444
- // e.g.: remove the layer
445
- // mapContext.getMap(props.mapId).removeLayer(layerRef.current);
446
- // check for the existence of map.style before calling getLayer or getSource
447
- &nbsp;
448
- <span class="cstat-no" title="statement not covered" > if (mapRef.current) {</span>
449
- <span class="cstat-no" title="statement not covered" > mapRef.current.cleanup(_componentId);</span>
450
- <span class="cstat-no" title="statement not covered" > mapRef.current = undefined;</span>
451
- }
452
445
  <span class="cstat-no" title="statement not covered" > if (watchIdRef.current) {</span>
453
- <span class="cstat-no" title="statement not covered" > initializedRef.current = false;</span>
454
446
  <span class="cstat-no" title="statement not covered" > navigator.geolocation.clearWatch(watchIdRef.current);</span>
455
447
  <span class="cstat-no" title="statement not covered" > watchIdRef.current = undefined;</span>
456
448
  }
457
449
  };
458
450
  }, []);
459
451
  &nbsp;
460
- useEffect(() =&gt; {
461
- if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
462
- // the MapLibre-gl instance (mapContext.getMap(props.mapId)) is accessible here
463
- // initialize the layer and add it to the MapLibre-gl instance or do something else with it
464
- initializedRef.current = true;
465
- mapRef.current = mapContext.getMap(props.mapId);
466
- mapRef.current.setCenter([7.132122000552613, 50.716405378037706]);
452
+ const getLocationSuccess = useCallback(
453
+ <span class="fstat-no" title="function not covered" > (p</span>os) =&gt; {
454
+ <span class="cstat-no" title="statement not covered" > if (!mapHook.map) <span class="cstat-no" title="statement not covered" >return;</span></span>
467
455
  &nbsp;
468
- }, [mapContext.mapIds, mapContext, props.mapId]);
469
- &nbsp;
470
- const getLocationSuccess = <span class="fstat-no" title="function not covered" >(p</span>os) =&gt; {
471
- <span class="cstat-no" title="statement not covered" > if (!mapRef.current) <span class="cstat-no" title="statement not covered" >return;</span></span>
472
- <span class="cstat-no" title="statement not covered" > mapRef.current.setCenter([pos.coords.longitude, pos.coords.latitude]);</span>
473
- <span class="cstat-no" title="statement not covered" > setAccuracyRadius(pos.coords.accuracy)</span>
474
- <span class="cstat-no" title="statement not covered" > setGeoJson(point([pos.coords.longitude, pos.coords.latitude]));</span>
475
- };
456
+ <span class="cstat-no" title="statement not covered" > mapHook.map.setCenter([pos.coords.longitude, pos.coords.latitude]);</span>
457
+ const geoJsonPoint = <span class="cstat-no" title="statement not covered" >point([pos.coords.longitude, pos.coords.latitude]);</span>
458
+ <span class="cstat-no" title="statement not covered" > setGeoJson(geoJsonPoint);</span>
459
+ <span class="cstat-no" title="statement not covered" > setAccuracyGeoJson(circle(geoJsonPoint, pos.coords.accuracy / 1000));</span>
460
+ },
461
+ [mapHook.map]
462
+ );
476
463
  &nbsp;
477
464
  const getLocationError = <span class="fstat-no" title="function not covered" >(e</span>rr) =&gt; {
478
465
  <span class="cstat-no" title="statement not covered" > console.log("Access of user location denied");</span>
479
466
  <span class="cstat-no" title="statement not covered" > setLocationAccessDenied(true);</span>
480
467
  };
468
+ &nbsp;
469
+ useEffect(() =&gt; {
470
+ if (!mapHook.map) return;
471
+ &nbsp;
472
+ if (isFollowed) {
473
+ watchIdRef.current = navigator.geolocation.watchPosition(
474
+ getLocationSuccess,
475
+ getLocationError
476
+ );
477
+ } else {
478
+ navigator.geolocation.clearWatch(watchIdRef.current);
479
+ }
480
+ }, [isFollowed, getLocationSuccess]);
481
481
  &nbsp;
482
482
  return (
483
483
  &lt;&gt;
484
- {isFollowed &amp;&amp; geoJson &amp;&amp;
485
- <span class="branch-2 cbranch-no" title="branch not covered" > &lt;MlGeoJsonLayer geojson={geoJson} type={"circle"}</span>
486
- paint={{
487
- "circle-radius": {
488
- stops: [
489
- [0, 0],
490
- [
491
- 20,
492
- (accuracyRadius) /
493
- 0.075 /
494
- Math.cos((geoJson.geometry.coordinates[1] * Math.PI) / 180),
495
- ],
496
- ],
497
- base: 2,
498
- },
499
- "circle-color": "#ee7700",
500
- "circle-opacity": 0.5,
501
- }}
502
- /&gt;
503
- }
484
+ {isFollowed &amp;&amp; geoJson &amp;&amp; (
485
+ <span class="branch-2 cbranch-no" title="branch not covered" > &lt;MlGeoJsonLayer</span>
486
+ geojson={accuracyGeoJson}
487
+ type={"fill"}
488
+ paint={{
489
+ "fill-color": "#ee7700",
490
+ "fill-opacity": 0.5,
491
+ ...props.accuracyPaint,
492
+ }}
493
+ insertBeforeLayer={"MlFollowGpsMarker"}
494
+ /&gt;
495
+ )}
504
496
  &nbsp;
505
- {isFollowed &amp;&amp; geoJson &amp;&amp;
506
- <span class="branch-2 cbranch-no" title="branch not covered" > &lt;MlImageMarkerLayer</span>
507
- options={{
508
- type: "symbol",
509
- source: {
510
- type: "geojson",
511
- data: geoJson
512
- },
513
- layout: {
514
- "icon-size": 0.1,
515
- "icon-offset": [0, -340]
516
- },
517
- }
518
- }
519
- imgSrc={"/assets/marker.png"}
520
- /&gt;
521
- }
497
+ {isFollowed &amp;&amp; geoJson &amp;&amp; (
498
+ <span class="branch-2 cbranch-no" title="branch not covered" > &lt;MlImageMarkerLayer</span>
499
+ layerId={"MlFollowGpsMarker"}
500
+ options={{
501
+ type: "symbol",
502
+ source: {
503
+ type: "geojson",
504
+ data: geoJson,
505
+ },
506
+ layout: {
507
+ "icon-size": 0.1,
508
+ "icon-offset": [0, -340],
509
+ ...props.markerLayout,
510
+ },
511
+ }}
512
+ imgSrc={props.markerImage || marker}
513
+ /&gt;
514
+ )}
522
515
  &nbsp;
523
516
  &lt;Button
524
- sx={{zIndex: 1002, color: isFollowed ? "#bbb" : "#666", ...props.style}}
517
+ sx={{ zIndex: 1002, color: isFollowed ? props.onColor : props.offColor, ...props.style }}
525
518
  disabled={locationAccessDenied}
526
519
  onClick={() =&gt; {
527
- if (isFollowed) {
528
- navigator.geolocation.clearWatch(watchIdRef.current);
529
- } else {
530
- watchIdRef.current = navigator.geolocation.watchPosition(
531
- getLocationSuccess,
532
- getLocationError
533
- );
534
- }
535
520
  setIsFollowed(!isFollowed);
536
521
  }}
537
522
  &gt;
538
523
  {" "}
539
- &lt;RoomIcon sx={{}}/&gt;{" "}
524
+ &lt;RoomIcon sx={{ fontSize: props.style.fontSize }} /&gt;{" "}
540
525
  &lt;/Button&gt;
541
526
  &lt;/&gt;
542
527
  );
@@ -552,11 +537,14 @@ MlFollowGps.defaultProps = {
552
537
  backgroundColor: "#414141",
553
538
  borderRadius: "23%",
554
539
  margin: 0.15,
540
+ fontSize: "1.3em",
555
541
  ":hover": {
556
542
  backgroundColor: "#515151",
557
543
  color: "#ececec",
558
544
  },
559
545
  },
546
+ onColor: "#ececec",
547
+ offColor: "#666",
560
548
  };
561
549
  &nbsp;
562
550
  MlFollowGps.propTypes = {
@@ -568,6 +556,30 @@ MlFollowGps.propTypes = {
568
556
  * CSS style object that is applied to the button component
569
557
  */
570
558
  style: PropTypes.object,
559
+ /**
560
+ * Active button font color
561
+ */
562
+ onColor: PropTypes.string,
563
+ /**
564
+ * Inactive button font color
565
+ */
566
+ offColor: PropTypes.string,
567
+ /**
568
+ * Accuracy paint property object, that is passed to the MlGeoJsonLayer responsible for drawing the accuracy circle.
569
+ * Use any available paint prop from layer type "fill".
570
+ * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
571
+ */
572
+ accuracyPaint: PropTypes.object,
573
+ /**
574
+ * Marker layout property object, that is passed to the MlImageMarkerLayer responsible for drawing the position marker.
575
+ * Use any available layout property from layer type "symbol".
576
+ * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#symbol
577
+ */
578
+ markerLayout: PropTypes.object,
579
+ /**
580
+ * Replace the default marker image with a custom one.
581
+ */
582
+ markerImage: PropTypes.string,
571
583
  };
572
584
  export default MlFollowGps;
573
585
  &nbsp;</pre></td></tr></table></pre>
@@ -577,17 +589,17 @@ export default MlFollowGps;
577
589
  <div class='footer quiet pad2 space-top1 center small'>
578
590
  Code coverage generated by
579
591
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener">istanbul</a>
580
- at Sat Dec 04 2021 10:55:55 GMT+0000 (Coordinated Universal Time)
592
+ at Thu Dec 23 2021 12:19:00 GMT+0000 (Coordinated Universal Time)
581
593
  </div>
582
594
  </div>
583
- <script src="../../prettify.js"></script>
595
+ <script src="../../../prettify.js"></script>
584
596
  <script>
585
597
  window.onload = function () {
586
598
  prettyPrint();
587
599
  };
588
600
  </script>
589
- <script src="../../sorter.js"></script>
590
- <script src="../../block-navigation.js"></script>
601
+ <script src="../../../sorter.js"></script>
602
+ <script src="../../../block-navigation.js"></script>
591
603
  </body>
592
604
  </html>
593
605
 
@@ -3,15 +3,15 @@
3
3
  <html lang="en">
4
4
 
5
5
  <head>
6
- <title>Code coverage report for components/MlFollowGps</title>
6
+ <title>Code coverage report for src/components/MlFollowGps</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,20 +19,20 @@
19
19
  <body>
20
20
  <div class='wrapper'>
21
21
  <div class='pad1'>
22
- <h1><a href="../../index.html">All files</a> components/MlFollowGps</h1>
22
+ <h1><a href="../../../index.html">All files</a> src/components/MlFollowGps</h1>
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">66.66% </span>
26
+ <span class="strong">65.62% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>28/42</span>
28
+ <span class='fraction'>21/32</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
- <span class="strong">59.09% </span>
33
+ <span class="strong">55.55% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>13/22</span>
35
+ <span class='fraction'>10/18</span>
36
36
  </div>
37
37
 
38
38
 
@@ -44,9 +44,9 @@
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">67.5% </span>
47
+ <span class="strong">66.66% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>27/40</span>
49
+ <span class='fraction'>20/30</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="MlFollowGps.js"><a href="MlFollowGps.js.html">MlFollowGps.js</a></td>
83
- <td data-value="66.66" class="pic medium">
84
- <div class="chart"><div class="cover-fill" style="width: 66%"></div><div class="cover-empty" style="width: 34%"></div></div>
83
+ <td data-value="65.62" class="pic medium">
84
+ <div class="chart"><div class="cover-fill" style="width: 65%"></div><div class="cover-empty" style="width: 35%"></div></div>
85
85
  </td>
86
- <td data-value="66.66" class="pct medium">66.66%</td>
87
- <td data-value="42" class="abs medium">28/42</td>
88
- <td data-value="59.09" class="pct medium">59.09%</td>
89
- <td data-value="22" class="abs medium">13/22</td>
86
+ <td data-value="65.62" class="pct medium">65.62%</td>
87
+ <td data-value="32" class="abs medium">21/32</td>
88
+ <td data-value="55.55" class="pct medium">55.55%</td>
89
+ <td data-value="18" class="abs medium">10/18</td>
90
90
  <td data-value="57.14" class="pct medium">57.14%</td>
91
91
  <td data-value="7" class="abs medium">4/7</td>
92
- <td data-value="67.5" class="pct medium">67.5%</td>
93
- <td data-value="40" class="abs medium">27/40</td>
92
+ <td data-value="66.66" class="pct medium">66.66%</td>
93
+ <td data-value="30" class="abs medium">20/30</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