@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/MlImageMarkerLayer/MlImageMarkerLayer.js</title>
6
+ <title>Code coverage report for src/components/MlLayer/MlLayer.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/MlImageMarkerLayer</a> MlImageMarkerLayer.js</h1>
22
+ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/components/MlLayer</a> MlLayer.js</h1>
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">79.06% </span>
26
+ <span class="strong">66.66% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>34/43</span>
28
+ <span class='fraction'>30/45</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
- <span class="strong">62.85% </span>
33
+ <span class="strong">44.11% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>22/35</span>
35
+ <span class='fraction'>15/34</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
- <span class="strong">87.5% </span>
40
+ <span class="strong">83.33% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>7/8</span>
42
+ <span class='fraction'>5/6</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">80.95% </span>
47
+ <span class="strong">65.9% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>34/42</span>
49
+ <span class='fraction'>29/44</span>
50
50
  </div>
51
51
 
52
52
 
@@ -171,45 +171,51 @@
171
171
  <a name='L106'></a><a href='#L106'>106</a>
172
172
  <a name='L107'></a><a href='#L107'>107</a>
173
173
  <a name='L108'></a><a href='#L108'>108</a>
174
- <a name='L109'></a><a href='#L109'>109</a>
175
- <a name='L110'></a><a href='#L110'>110</a>
176
- <a name='L111'></a><a href='#L111'>111</a>
177
- <a name='L112'></a><a href='#L112'>112</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
174
+ <a name='L109'></a><a href='#L109'>109</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
178
175
  <span class="cline-any cline-neutral">&nbsp;</span>
179
176
  <span class="cline-any cline-neutral">&nbsp;</span>
180
177
  <span class="cline-any cline-neutral">&nbsp;</span>
181
178
  <span class="cline-any cline-neutral">&nbsp;</span>
182
- <span class="cline-any cline-yes">2x</span>
183
179
  <span class="cline-any cline-neutral">&nbsp;</span>
184
- <span class="cline-any cline-yes">8x</span>
185
- <span class="cline-any cline-yes">8x</span>
180
+ <span class="cline-any cline-yes">1x</span>
186
181
  <span class="cline-any cline-neutral">&nbsp;</span>
182
+ <span class="cline-any cline-yes">16x</span>
187
183
  <span class="cline-any cline-neutral">&nbsp;</span>
188
- <span class="cline-any cline-yes">8x</span>
189
- <span class="cline-any cline-yes">8x</span>
190
- <span class="cline-any cline-yes">8x</span>
191
- <span class="cline-any cline-yes">8x</span>
192
- <span class="cline-any cline-yes">8x</span>
184
+ <span class="cline-any cline-yes">16x</span>
193
185
  <span class="cline-any cline-neutral">&nbsp;</span>
194
- <span class="cline-any cline-yes">8x</span>
195
- <span class="cline-any cline-yes">4x</span>
186
+ <span class="cline-any cline-neutral">&nbsp;</span>
187
+ <span class="cline-any cline-neutral">&nbsp;</span>
188
+ <span class="cline-any cline-neutral">&nbsp;</span>
189
+ <span class="cline-any cline-neutral">&nbsp;</span>
190
+ <span class="cline-any cline-neutral">&nbsp;</span>
191
+ <span class="cline-any cline-neutral">&nbsp;</span>
192
+ <span class="cline-any cline-yes">16x</span>
193
+ <span class="cline-any cline-yes">16x</span>
194
+ <span class="cline-any cline-yes">16x</span>
195
+ <span class="cline-any cline-yes">16x</span>
196
+ <span class="cline-any cline-yes">16x</span>
197
+ <span class="cline-any cline-yes">16x</span>
198
+ <span class="cline-any cline-yes">16x</span>
199
+ <span class="cline-any cline-neutral">&nbsp;</span>
200
+ <span class="cline-any cline-yes">16x</span>
196
201
  <span class="cline-any cline-yes">4x</span>
197
202
  <span class="cline-any cline-neutral">&nbsp;</span>
203
+ <span class="cline-any cline-yes">4x</span>
198
204
  <span class="cline-any cline-yes">2x</span>
199
205
  <span class="cline-any cline-yes">2x</span>
200
- <span class="cline-any cline-neutral">&nbsp;</span>
201
206
  <span class="cline-any cline-yes">2x</span>
202
207
  <span class="cline-any cline-neutral">&nbsp;</span>
203
208
  <span class="cline-any cline-neutral">&nbsp;</span>
204
209
  <span class="cline-any cline-neutral">&nbsp;</span>
205
210
  <span class="cline-any cline-neutral">&nbsp;</span>
206
- <span class="cline-any cline-yes">8x</span>
207
- <span class="cline-any cline-yes">8x</span>
211
+ <span class="cline-any cline-yes">16x</span>
212
+ <span class="cline-any cline-yes">12x</span>
208
213
  <span class="cline-any cline-neutral">&nbsp;</span>
209
214
  <span class="cline-any cline-neutral">&nbsp;</span>
210
215
  <span class="cline-any cline-neutral">&nbsp;</span>
211
216
  <span class="cline-any cline-neutral">&nbsp;</span>
212
- <span class="cline-any cline-yes">8x</span>
217
+ <span class="cline-any cline-neutral">&nbsp;</span>
218
+ <span class="cline-any cline-yes">12x</span>
213
219
  <span class="cline-any cline-neutral">&nbsp;</span>
214
220
  <span class="cline-any cline-neutral">&nbsp;</span>
215
221
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -217,98 +223,94 @@
217
223
  <span class="cline-any cline-no">&nbsp;</span>
218
224
  <span class="cline-any cline-no">&nbsp;</span>
219
225
  <span class="cline-any cline-no">&nbsp;</span>
226
+ <span class="cline-any cline-no">&nbsp;</span>
220
227
  <span class="cline-any cline-neutral">&nbsp;</span>
221
- <span class="cline-any cline-neutral">&nbsp;</span>
228
+ <span class="cline-any cline-no">&nbsp;</span>
222
229
  <span class="cline-any cline-neutral">&nbsp;</span>
223
230
  <span class="cline-any cline-neutral">&nbsp;</span>
224
231
  <span class="cline-any cline-no">&nbsp;</span>
225
232
  <span class="cline-any cline-no">&nbsp;</span>
226
233
  <span class="cline-any cline-no">&nbsp;</span>
234
+ <span class="cline-any cline-no">&nbsp;</span>
227
235
  <span class="cline-any cline-neutral">&nbsp;</span>
228
236
  <span class="cline-any cline-neutral">&nbsp;</span>
229
237
  <span class="cline-any cline-neutral">&nbsp;</span>
230
238
  <span class="cline-any cline-neutral">&nbsp;</span>
231
- <span class="cline-any cline-neutral">&nbsp;</span>
232
- <span class="cline-any cline-neutral">&nbsp;</span>
233
- <span class="cline-any cline-yes">8x</span>
234
- <span class="cline-any cline-yes">4x</span>
239
+ <span class="cline-any cline-yes">16x</span>
240
+ <span class="cline-any cline-yes">16x</span>
235
241
  <span class="cline-any cline-neutral">&nbsp;</span>
236
242
  <span class="cline-any cline-neutral">&nbsp;</span>
237
243
  <span class="cline-any cline-neutral">&nbsp;</span>
238
244
  <span class="cline-any cline-neutral">&nbsp;</span>
239
245
  <span class="cline-any cline-yes">4x</span>
240
- <span class="cline-any cline-yes">4x</span>
241
- <span class="cline-any cline-neutral">&nbsp;</span>
242
- <span class="cline-any cline-neutral">&nbsp;</span>
243
- <span class="cline-any cline-neutral">&nbsp;</span>
244
- <span class="cline-any cline-neutral">&nbsp;</span>
246
+ <span class="cline-any cline-no">&nbsp;</span>
245
247
  <span class="cline-any cline-neutral">&nbsp;</span>
248
+ <span class="cline-any cline-no">&nbsp;</span>
249
+ <span class="cline-any cline-no">&nbsp;</span>
250
+ <span class="cline-any cline-no">&nbsp;</span>
246
251
  <span class="cline-any cline-neutral">&nbsp;</span>
247
- <span class="cline-any cline-yes">8x</span>
248
- <span class="cline-any cline-yes">8x</span>
249
252
  <span class="cline-any cline-neutral">&nbsp;</span>
253
+ <span class="cline-any cline-no">&nbsp;</span>
254
+ <span class="cline-any cline-no">&nbsp;</span>
250
255
  <span class="cline-any cline-neutral">&nbsp;</span>
251
256
  <span class="cline-any cline-neutral">&nbsp;</span>
252
257
  <span class="cline-any cline-neutral">&nbsp;</span>
253
258
  <span class="cline-any cline-yes">4x</span>
254
- <span class="cline-any cline-neutral">&nbsp;</span>
255
- <span class="cline-any cline-neutral">&nbsp;</span>
256
- <span class="cline-any cline-neutral">&nbsp;</span>
257
259
  <span class="cline-any cline-yes">4x</span>
258
- <span class="cline-any cline-neutral">&nbsp;</span>
259
- <span class="cline-any cline-yes">4x</span>
260
- <span class="cline-any cline-neutral">&nbsp;</span>
261
260
  <span class="cline-any cline-yes">4x</span>
262
261
  <span class="cline-any cline-yes">4x</span>
263
- <span class="cline-any cline-no">&nbsp;</span>
264
- <span class="cline-any cline-no">&nbsp;</span>
265
262
  <span class="cline-any cline-neutral">&nbsp;</span>
266
263
  <span class="cline-any cline-neutral">&nbsp;</span>
267
- <span class="cline-any cline-yes">4x</span>
268
264
  <span class="cline-any cline-neutral">&nbsp;</span>
269
265
  <span class="cline-any cline-neutral">&nbsp;</span>
270
- <span class="cline-any cline-yes">8x</span>
271
- <span class="cline-any cline-yes">8x</span>
272
266
  <span class="cline-any cline-neutral">&nbsp;</span>
273
267
  <span class="cline-any cline-neutral">&nbsp;</span>
274
268
  <span class="cline-any cline-neutral">&nbsp;</span>
275
269
  <span class="cline-any cline-neutral">&nbsp;</span>
276
- <span class="cline-any cline-yes">4x</span>
277
- <span class="cline-any cline-neutral">&nbsp;</span>
278
270
  <span class="cline-any cline-neutral">&nbsp;</span>
279
271
  <span class="cline-any cline-neutral">&nbsp;</span>
280
272
  <span class="cline-any cline-neutral">&nbsp;</span>
281
273
  <span class="cline-any cline-yes">4x</span>
274
+ <span class="cline-any cline-yes">4x</span>
275
+ <span class="cline-any cline-neutral">&nbsp;</span>
282
276
  <span class="cline-any cline-neutral">&nbsp;</span>
283
277
  <span class="cline-any cline-neutral">&nbsp;</span>
284
- <span class="cline-any cline-yes">8x</span>
278
+ <span class="cline-any cline-yes">16x</span>
285
279
  <span class="cline-any cline-neutral">&nbsp;</span>
286
280
  <span class="cline-any cline-neutral">&nbsp;</span>
287
281
  <span class="cline-any cline-neutral">&nbsp;</span>
288
- <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useRef, useCallback, useEffect, useContext } from "react";
282
+ <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useRef, useEffect, useContext } from "react";
289
283
  &nbsp;
290
284
  import { v4 as uuidv4 } from "uuid";
291
285
  import { MapContext } from "@mapcomponents/react-core";
286
+ import useMapState from "../../hooks/useMapState";
292
287
  &nbsp;
293
- const MlImageMarkerLayer = (props) =&gt; {
288
+ const MlLayer = (props) =&gt; {
294
289
  // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
295
- const mapRef = useRef(null);
296
- const componentId = useRef(
297
- (props.idPrefix ? <span class="branch-0 cbranch-no" title="branch not covered" >props.idPrefix </span>: "MlOsmLayer-") + uuidv4()
298
- );
299
290
  const mapContext = useContext(MapContext);
291
+ &nbsp;
292
+ const mapState = useMapState({
293
+ mapId: props.mapId,
294
+ watch: {
295
+ viewport: false,
296
+ layers: true,
297
+ sources: false,
298
+ },
299
+ });
300
300
  const layerInitializedRef = useRef(false);
301
+ const mapRef = useRef(null);
302
+ const componentId = useRef((props.layerId ? <span class="branch-0 cbranch-no" title="branch not covered" >props.layerId </span>: "MlLayer-") + uuidv4());
301
303
  const idSuffixRef = useRef(props.idSuffix || new Date().getTime());
302
- const imageIdRef = useRef(props.imageId || "img_" + new Date().getTime());
303
- const layerId = useRef((props.layerId || "MlImageMarkerLayer-") + idSuffixRef.current);
304
+ const layerId = useRef(props.layerId || componentId.current);
305
+ const layerPaintConfRef = useRef(undefined);
306
+ const layerLayoutConfRef = useRef(undefined);
304
307
  &nbsp;
305
308
  useEffect(() =&gt; {
306
309
  let _componentId = componentId.current;
310
+ &nbsp;
307
311
  return () =&gt; {
308
- // This is the cleanup function, it is called when this react component is removed from react-dom
309
312
  if (mapRef.current) {
310
313
  mapRef.current.cleanup(_componentId);
311
- &nbsp;
312
314
  mapRef.current = null;
313
315
  }
314
316
  };
@@ -316,8 +318,9 @@ const MlImageMarkerLayer = (props) =&gt; {
316
318
  &nbsp;
317
319
  useEffect(() =&gt; {
318
320
  if (
319
- !mapRef.current ||
320
- (<span class="branch-1 cbranch-no" title="branch not covered" >mapRef.current </span>&amp;&amp; <span class="branch-2 cbranch-no" title="branch not covered" >!mapContext.getMap(props.mapId).getLayer(layerId.current))</span> ||
321
+ !mapContext.mapExists(props.mapId) ||
322
+ !mapContext.getMap(props.mapId)?.getLayer?.(layerId) ||
323
+ <span class="branch-2 cbranch-no" title="branch not covered" > !layerInitializedRef.current </span>||
321
324
  <span class="branch-3 cbranch-no" title="branch not covered" > !props.options</span>
322
325
  )
323
326
  return;
@@ -325,77 +328,65 @@ const MlImageMarkerLayer = (props) =&gt; {
325
328
  // initialize the layer and add it to the MapLibre-gl instance or do something else with it
326
329
  var key;
327
330
  &nbsp;
328
- <span class="cstat-no" title="statement not covered" > if (props.options.layout) {</span>
331
+ let layoutString = <span class="cstat-no" title="statement not covered" >JSON.stringify(props.options.layout);</span>
332
+ <span class="cstat-no" title="statement not covered" > if (props.options.layout &amp;&amp; layoutString !== layerLayoutConfRef.current) {</span>
329
333
  <span class="cstat-no" title="statement not covered" > for (key in props.options.layout) {</span>
330
- <span class="cstat-no" title="statement not covered" > mapContext</span>
331
- .getMap(props.mapId)
332
- .setLayoutProperty(layerId.current, key, props.options.layout[key]);
334
+ <span class="cstat-no" title="statement not covered" > mapRef.current.setLayoutProperty(layerId, key, props.options.layout[key]);</span>
333
335
  }
336
+ <span class="cstat-no" title="statement not covered" > layerLayoutConfRef.current = layoutString;</span>
334
337
  }
335
- <span class="cstat-no" title="statement not covered" > if (props.options.paint) {</span>
338
+ &nbsp;
339
+ let paintString = <span class="cstat-no" title="statement not covered" >JSON.stringify(props.options.paint);</span>
340
+ <span class="cstat-no" title="statement not covered" > if (props.options.paint &amp;&amp; paintString === layerPaintConfRef.current) {</span>
336
341
  <span class="cstat-no" title="statement not covered" > for (key in props.options.paint) {</span>
337
- <span class="cstat-no" title="statement not covered" > mapContext</span>
338
- .getMap(props.mapId)
339
- .setPaintProperty(layerId.current, key, props.options.paint[key]);
342
+ <span class="cstat-no" title="statement not covered" > mapRef.current.setPaintProperty(layerId, key, props.options.paint[key]);</span>
340
343
  }
341
344
  }
342
- }, [props.options, layerId.current, mapContext, props.mapId]);
343
- &nbsp;
344
- const addLayer = useCallback(() =&gt; {
345
- let tmpOptions = {
346
- id: layerId.current,
347
- layout: {},
348
- ...props.options,
349
- };
350
- tmpOptions.layout["icon-image"] = imageIdRef.current;
351
- mapRef.current.addLayer(
352
- tmpOptions,
353
- props.insertBeforeLayer,
354
- componentId.current
355
- );
356
- }, [props]);
345
+ }, [props.options, layerId, mapContext, props]);
357
346
  &nbsp;
358
347
  useEffect(() =&gt; {
359
- if (
360
- !props.options ||
361
- !mapContext.mapExists(props.mapId) ||
362
- layerInitializedRef.current
363
- )
364
- return;
365
- &nbsp;
348
+ if (!mapContext.mapExists(props.mapId) || layerInitializedRef.current) return;
366
349
  // the MapLibre-gl instance (mapContext.map) is accessible here
367
350
  // initialize the layer and add it to the MapLibre-gl instance or do something else with it
368
- mapRef.current = mapContext.getMap(props.mapId);
369
351
  &nbsp;
370
- layerInitializedRef.current = true;
352
+ //check if insertBeforeLayer exists
353
+ <span class="missing-if-branch" title="if path not taken" >I</span>if (props.insertBeforeLayer) {
354
+ let layerFound = <span class="cstat-no" title="statement not covered" >false;</span>
371
355
  &nbsp;
372
- if (props.imgSrc) {
373
- mapRef.current.loadImage(props.imgSrc, <span class="fstat-no" title="function not covered" >fu</span>nction (error, image) {
374
- <span class="cstat-no" title="statement not covered" > if (error) <span class="cstat-no" title="statement not covered" >throw error;</span></span>
375
- <span class="cstat-no" title="statement not covered" > mapRef.current.addImage(imageIdRef.current, image, componentId.current);</span>
356
+ <span class="cstat-no" title="statement not covered" > mapState?.layers?.forEach(<span class="fstat-no" title="function not covered" >(l</span>ayer) =&gt; {</span>
357
+ <span class="cstat-no" title="statement not covered" > if (layer.id === props.insertBeforeLayer) {</span>
358
+ <span class="cstat-no" title="statement not covered" > layerFound = true;</span>
359
+ }
376
360
  });
361
+ <span class="cstat-no" title="statement not covered" > if (!layerFound) {</span>
362
+ <span class="cstat-no" title="statement not covered" > return;</span>
363
+ }
377
364
  }
378
- addLayer();
379
- }, [mapContext.mapIds, mapContext, props, addLayer]);
380
365
  &nbsp;
381
- useEffect(() =&gt; {
382
- if (
383
- !mapRef.current ||
384
- (mapRef.current &amp;&amp; !mapContext.getMap(props.mapId).getLayer(layerId.current)) ||
385
- !props.options
386
- ) {
387
- return;
366
+ mapRef.current = mapContext.getMap(props.mapId);
367
+ if (mapRef.current) {
368
+ layerInitializedRef.current = true;
369
+ mapRef.current.addLayer(
370
+ {
371
+ id: layerId.current,
372
+ type: "background",
373
+ paint: {
374
+ "background-color": "rgba(0,0,0,0)",
375
+ },
376
+ ...props.options,
377
+ },
378
+ props.insertBeforeLayer,
379
+ componentId.current
380
+ );
381
+ layerPaintConfRef.current = JSON.stringify(props.options?.paint);
382
+ layerLayoutConfRef.current = JSON.stringify(props.options?.layout);
388
383
  }
389
- // the MapLibre-gl instance (mapContext.map) is accessible here
390
- // initialize the layer and add it to the MapLibre-gl instance or do something else with it
391
- &nbsp;
392
- mapRef.current.getSource(layerId.current).setData(props.options.source.data);
393
- }, [props.options.source.data, mapContext, props]);
384
+ }, [mapContext.mapIds, mapContext, props, mapState.layers]);
394
385
  &nbsp;
395
386
  return &lt;&gt;&lt;/&gt;;
396
387
  };
397
388
  &nbsp;
398
- export default MlImageMarkerLayer;
389
+ export default MlLayer;
399
390
  &nbsp;</pre></td></tr></table></pre>
400
391
 
401
392
  <div class='push'></div><!-- for sticky footer -->
@@ -403,17 +394,17 @@ export default MlImageMarkerLayer;
403
394
  <div class='footer quiet pad2 space-top1 center small'>
404
395
  Code coverage generated by
405
396
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener">istanbul</a>
406
- at Sat Dec 04 2021 10:55:55 GMT+0000 (Coordinated Universal Time)
397
+ at Thu Dec 23 2021 12:19:00 GMT+0000 (Coordinated Universal Time)
407
398
  </div>
408
399
  </div>
409
- <script src="../../prettify.js"></script>
400
+ <script src="../../../prettify.js"></script>
410
401
  <script>
411
402
  window.onload = function () {
412
403
  prettyPrint();
413
404
  };
414
405
  </script>
415
- <script src="../../sorter.js"></script>
416
- <script src="../../block-navigation.js"></script>
406
+ <script src="../../../sorter.js"></script>
407
+ <script src="../../../block-navigation.js"></script>
417
408
  </body>
418
409
  </html>
419
410
 
@@ -0,0 +1,117 @@
1
+
2
+ <!doctype html>
3
+ <html lang="en">
4
+
5
+ <head>
6
+ <title>Code coverage report for src/components/MlLayer</title>
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" />
11
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
12
+ <style type='text/css'>
13
+ .coverage-summary .sorter {
14
+ background-image: url(../../../sort-arrow-sprite.png);
15
+ }
16
+ </style>
17
+ </head>
18
+
19
+ <body>
20
+ <div class='wrapper'>
21
+ <div class='pad1'>
22
+ <h1><a href="../../../index.html">All files</a> src/components/MlLayer</h1>
23
+ <div class='clearfix'>
24
+
25
+ <div class='fl pad1y space-right2'>
26
+ <span class="strong">66.66% </span>
27
+ <span class="quiet">Statements</span>
28
+ <span class='fraction'>30/45</span>
29
+ </div>
30
+
31
+
32
+ <div class='fl pad1y space-right2'>
33
+ <span class="strong">44.11% </span>
34
+ <span class="quiet">Branches</span>
35
+ <span class='fraction'>15/34</span>
36
+ </div>
37
+
38
+
39
+ <div class='fl pad1y space-right2'>
40
+ <span class="strong">83.33% </span>
41
+ <span class="quiet">Functions</span>
42
+ <span class='fraction'>5/6</span>
43
+ </div>
44
+
45
+
46
+ <div class='fl pad1y space-right2'>
47
+ <span class="strong">65.9% </span>
48
+ <span class="quiet">Lines</span>
49
+ <span class='fraction'>29/44</span>
50
+ </div>
51
+
52
+
53
+ </div>
54
+ <p class="quiet">
55
+ Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
56
+ </p>
57
+ <template id="filterTemplate">
58
+ <div class="quiet">
59
+ Filter:
60
+ <input oninput="onInput()" type="search" id="fileSearch">
61
+ </div>
62
+ </template>
63
+ </div>
64
+ <div class='status-line medium'></div>
65
+ <div class="pad1">
66
+ <table class="coverage-summary">
67
+ <thead>
68
+ <tr>
69
+ <th data-col="file" data-fmt="html" data-html="true" class="file">File</th>
70
+ <th data-col="pic" data-type="number" data-fmt="html" data-html="true" class="pic"></th>
71
+ <th data-col="statements" data-type="number" data-fmt="pct" class="pct">Statements</th>
72
+ <th data-col="statements_raw" data-type="number" data-fmt="html" class="abs"></th>
73
+ <th data-col="branches" data-type="number" data-fmt="pct" class="pct">Branches</th>
74
+ <th data-col="branches_raw" data-type="number" data-fmt="html" class="abs"></th>
75
+ <th data-col="functions" data-type="number" data-fmt="pct" class="pct">Functions</th>
76
+ <th data-col="functions_raw" data-type="number" data-fmt="html" class="abs"></th>
77
+ <th data-col="lines" data-type="number" data-fmt="pct" class="pct">Lines</th>
78
+ <th data-col="lines_raw" data-type="number" data-fmt="html" class="abs"></th>
79
+ </tr>
80
+ </thead>
81
+ <tbody><tr>
82
+ <td class="file medium" data-value="MlLayer.js"><a href="MlLayer.js.html">MlLayer.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>
85
+ </td>
86
+ <td data-value="66.66" class="pct medium">66.66%</td>
87
+ <td data-value="45" class="abs medium">30/45</td>
88
+ <td data-value="44.11" class="pct low">44.11%</td>
89
+ <td data-value="34" class="abs low">15/34</td>
90
+ <td data-value="83.33" class="pct high">83.33%</td>
91
+ <td data-value="6" class="abs high">5/6</td>
92
+ <td data-value="65.9" class="pct medium">65.9%</td>
93
+ <td data-value="44" class="abs medium">29/44</td>
94
+ </tr>
95
+
96
+ </tbody>
97
+ </table>
98
+ </div>
99
+ <div class='push'></div><!-- for sticky footer -->
100
+ </div><!-- /wrapper -->
101
+ <div class='footer quiet pad2 space-top1 center small'>
102
+ Code coverage generated by
103
+ <a href="https://istanbul.js.org/" target="_blank" rel="noopener">istanbul</a>
104
+ at Thu Dec 23 2021 12:19:00 GMT+0000 (Coordinated Universal Time)
105
+ </div>
106
+ </div>
107
+ <script src="../../../prettify.js"></script>
108
+ <script>
109
+ window.onload = function () {
110
+ prettyPrint();
111
+ };
112
+ </script>
113
+ <script src="../../../sorter.js"></script>
114
+ <script src="../../../block-navigation.js"></script>
115
+ </body>
116
+ </html>
117
+