@mapcomponents/react-maplibre 0.1.11 → 0.1.15

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 (135) hide show
  1. package/.github/workflows/storybook.yml +10 -5
  2. package/coverage/clover.xml +894 -747
  3. package/coverage/coverage-final.json +22 -17
  4. package/coverage/lcov-report/block-navigation.js +8 -0
  5. package/coverage/lcov-report/index.html +188 -122
  6. package/coverage/lcov-report/sorter.js +26 -0
  7. package/coverage/lcov-report/{components → src/components}/MapLibreMap/MapLibreMap.js.html +17 -11
  8. package/coverage/lcov-report/{components → src/components}/MapLibreMap/index.html +17 -11
  9. package/coverage/lcov-report/{components → src/components}/MlCreatePdfButton/MlCreatePdfButton.js.html +17 -11
  10. package/coverage/lcov-report/{components → src/components}/MlCreatePdfButton/index.html +17 -11
  11. package/coverage/lcov-report/{components → src/components}/MlFeatureEditor/MlFeatureEditor.js.html +17 -11
  12. package/coverage/lcov-report/{components → src/components}/MlFeatureEditor/index.html +17 -11
  13. package/coverage/lcov-report/{components → src/components}/MlFillExtrusionLayer/MlFillExtrusionLayer.js.html +17 -11
  14. package/coverage/lcov-report/{components → src/components}/MlFillExtrusionLayer/index.html +17 -11
  15. package/coverage/lcov-report/{components → src/components}/MlFollowGps/MlFollowGps.js.html +84 -69
  16. package/coverage/lcov-report/{components → src/components}/MlFollowGps/index.html +27 -21
  17. package/coverage/lcov-report/{components → src/components}/MlGPXViewer/MlGPXViewer.js.html +73 -61
  18. package/coverage/lcov-report/{components → src/components}/MlGPXViewer/gpxConverter.js.html +56 -71
  19. package/coverage/lcov-report/{components → src/components}/MlGPXViewer/index.html +32 -26
  20. package/coverage/lcov-report/{components → src/components}/MlGeoJsonLayer/MlGeoJsonLayer.js.html +162 -48
  21. package/coverage/lcov-report/{components → src/components}/MlGeoJsonLayer/index.html +35 -29
  22. package/coverage/lcov-report/src/components/MlImageMarkerLayer/MlImageMarkerLayer.js.html +311 -0
  23. package/coverage/lcov-report/{components → src/components}/MlImageMarkerLayer/index.html +35 -29
  24. package/coverage/lcov-report/{components/MlImageMarkerLayer/MlImageMarkerLayer.js.html → src/components/MlLayer/MlLayer.js.html} +123 -126
  25. package/coverage/lcov-report/src/components/MlLayer/index.html +117 -0
  26. package/coverage/lcov-report/{components → src/components}/MlLayerMagnify/MlLayerMagnify.js.html +48 -42
  27. package/coverage/lcov-report/{components → src/components}/MlLayerMagnify/index.html +31 -25
  28. package/coverage/lcov-report/{components → src/components}/MlLayerSwipe/MlLayerSwipe.js.html +45 -42
  29. package/coverage/lcov-report/{components → src/components}/MlLayerSwipe/index.html +31 -25
  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 +18 -12
  35. package/coverage/lcov-report/{components → src/components}/MlMarker/index.html +17 -11
  36. package/coverage/lcov-report/{components → src/components}/MlNavigationCompass/MlNavigationCompass.js.html +17 -11
  37. package/coverage/lcov-report/{components → src/components}/MlNavigationCompass/index.html +17 -11
  38. package/coverage/lcov-report/{components → src/components}/MlNavigationTools/MlNavigationTools.js.html +57 -42
  39. package/coverage/lcov-report/{components → src/components}/MlNavigationTools/index.html +25 -19
  40. package/coverage/lcov-report/{components → src/components}/MlOsmLayer/MlOsmLayer.js.html +17 -11
  41. package/coverage/lcov-report/{components → src/components}/MlOsmLayer/index.html +17 -11
  42. package/coverage/lcov-report/{components → src/components}/MlScaleReference/MlScaleReference.js.html +17 -11
  43. package/coverage/lcov-report/{components → src/components}/MlScaleReference/index.html +17 -11
  44. package/coverage/lcov-report/{components → src/components}/MlShareMapState/MlShareMapState.js.html +224 -26
  45. package/coverage/lcov-report/{components → src/components}/MlShareMapState/index.html +25 -19
  46. package/coverage/lcov-report/{components → src/components}/MlSpatialElevationProfile/MlSpatialElevationProfile.js.html +17 -11
  47. package/coverage/lcov-report/{components → src/components}/MlSpatialElevationProfile/index.html +17 -11
  48. package/coverage/lcov-report/{components → src/components}/MlThreeJsLayer/MlThreeJsLayer.js.html +37 -55
  49. package/coverage/lcov-report/{components → src/components}/MlThreeJsLayer/index.html +31 -25
  50. package/coverage/lcov-report/{components → src/components}/MlUseMapDebugger/MlUseMapDebugger.js.html +17 -11
  51. package/coverage/lcov-report/{components → src/components}/MlUseMapDebugger/index.html +17 -11
  52. package/coverage/lcov-report/{components → src/components}/MlVectorTileLayer/MlVectorTileLayer.js.html +17 -11
  53. package/coverage/lcov-report/{components → src/components}/MlVectorTileLayer/index.html +17 -11
  54. package/coverage/lcov-report/{components → src/components}/MlWmsFeatureInfoPopup/MlWmsFeatureInfoPopup.js.html +17 -11
  55. package/coverage/lcov-report/{components → src/components}/MlWmsFeatureInfoPopup/index.html +17 -11
  56. package/coverage/lcov-report/{components → src/components}/MlWmsLayer/MlWmsLayer.js.html +20 -14
  57. package/coverage/lcov-report/{components → src/components}/MlWmsLayer/index.html +21 -15
  58. package/coverage/lcov-report/{components → src/components}/MlWmsLoader/MlWmsLoader.js.html +38 -20
  59. package/coverage/lcov-report/{components → src/components}/MlWmsLoader/index.html +23 -17
  60. package/coverage/lcov-report/src/hooks/index.html +147 -0
  61. package/coverage/lcov-report/{components/MlLayer/MlLayer.js.html → src/hooks/useMap.js.html} +86 -119
  62. package/coverage/lcov-report/{hooks → src/hooks}/useMapState.js.html +98 -92
  63. package/coverage/lcov-report/{hooks → src/hooks}/useWms.js.html +25 -19
  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 +1620 -1306
  70. package/dist/b556faa3bc6829d2.png +0 -0
  71. package/dist/index.esm.js +976 -688
  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/rollup.config.js +7 -1
  80. package/src/components/MapLibreMap/lib/MapLibreGlWrapper.js +53 -67
  81. package/src/components/MlCreatePdfButton/MlCreatePdfButton.meta.json +1 -1
  82. package/src/components/MlFeatureEditor/MlFeatureEditor.meta.json +2 -2
  83. package/src/components/MlFollowGps/MlFollowGps.js +49 -46
  84. package/src/components/MlFollowGps/MlFollowGps.meta.json +2 -2
  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/MlGeoJsonLayer/MlGeoJsonLayer.meta.json +1 -1
  90. package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.js +21 -57
  91. package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.test.js +6 -7
  92. package/src/components/MlLayer/MlLayer.js +28 -6
  93. package/src/components/MlLayer/MlLayer.test.js +12 -10
  94. package/src/components/MlLayerMagnify/MlLayerMagnify.js +3 -3
  95. package/src/components/MlLayerSwipe/MlLayerSwipe.js +4 -5
  96. package/src/components/MlLayerSwitcher/MlLayerSwitcher.css +17 -0
  97. package/src/components/MlLayerSwitcher/MlLayerSwitcher.doc.de.md +3 -0
  98. package/src/components/MlLayerSwitcher/MlLayerSwitcher.js +223 -0
  99. package/src/components/MlLayerSwitcher/MlLayerSwitcher.meta_.json +15 -0
  100. package/src/components/MlLayerSwitcher/MlLayerSwitcher.stories.js +106 -0
  101. package/src/components/MlLayerSwitcher/assets/sample_1.json +26 -0
  102. package/src/components/MlLayerSwitcher/assets/sample_2.json +22 -0
  103. package/src/components/MlLayerSwitcher/components/LayerBox.js +98 -0
  104. package/src/components/MlMarker/MlMarker.js +1 -1
  105. package/src/components/MlNavigationTools/MlNavigationTools.js +29 -26
  106. package/src/components/MlScaleReference/MlScaleReference.meta.json +1 -1
  107. package/src/components/MlScaleReference/MlScaleReference.stories.js +25 -21
  108. package/src/components/MlShareMapState/MlShareMapState.js +73 -9
  109. package/src/components/MlShareMapState/MlShareMapState.stories.js +24 -1
  110. package/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.stories.js +12 -6
  111. package/src/components/MlThreeJsLayer/MlThreeJsLayer.js +8 -15
  112. package/src/components/MlVectorTileLayer/MlVectorTileLayer.meta.json +3 -3
  113. package/src/components/MlWmsLayer/MlWmsLayer.js +1 -1
  114. package/src/components/MlWmsLoader/MlWmsLoader.js +8 -4
  115. package/src/components/MlWmsLoader/MlWmsLoader.meta.json +1 -1
  116. package/src/components/MlWmsLoader/MlWmsLoader.stories.js +5 -4
  117. package/src/decorators/EmptyMapContextDecorator.js +11 -6
  118. package/src/decorators/MapContext3DDecorator.js +25 -20
  119. package/src/decorators/MapContextDashboardDecorator.js +7 -2
  120. package/src/decorators/MapContextDecorator.js +7 -3
  121. package/src/decorators/MapContextKlokantechBasicDecorator.js +8 -4
  122. package/src/decorators/MultiMapContextDecorator.js +2 -1
  123. package/src/hooks/useMap.js +36 -62
  124. package/src/hooks/useMapState.js +3 -3
  125. package/src/hooks/useWms.js +7 -6
  126. package/src/i18n.js +28 -0
  127. package/src/index.js +3 -0
  128. package/src/translations/english.js +4 -0
  129. package/src/translations/german.js +4 -0
  130. package/src/ui_components/ImageLoader.js +73 -0
  131. package/src/ui_components/Sidebar.js +76 -22
  132. package/src/ui_components/TopToolbar.js +18 -18
  133. package/coverage/lcov-report/components/MlLayer/index.html +0 -111
  134. package/coverage/lcov-report/hooks/index.html +0 -141
  135. package/coverage/lcov-report/hooks/useMap.js.html +0 -377
@@ -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
 
@@ -54,6 +54,12 @@
54
54
  <p class="quiet">
55
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
56
  </p>
57
+ <template id="filterTemplate">
58
+ <div class="quiet">
59
+ Filter:
60
+ <input oninput="onInput()" type="search" id="fileSearch">
61
+ </div>
62
+ </template>
57
63
  </div>
58
64
  <div class='status-line medium'></div>
59
65
  <pre><table class="coverage">
@@ -165,45 +171,51 @@
165
171
  <a name='L106'></a><a href='#L106'>106</a>
166
172
  <a name='L107'></a><a href='#L107'>107</a>
167
173
  <a name='L108'></a><a href='#L108'>108</a>
168
- <a name='L109'></a><a href='#L109'>109</a>
169
- <a name='L110'></a><a href='#L110'>110</a>
170
- <a name='L111'></a><a href='#L111'>111</a>
171
- <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>
172
175
  <span class="cline-any cline-neutral">&nbsp;</span>
173
176
  <span class="cline-any cline-neutral">&nbsp;</span>
174
177
  <span class="cline-any cline-neutral">&nbsp;</span>
175
178
  <span class="cline-any cline-neutral">&nbsp;</span>
176
- <span class="cline-any cline-yes">2x</span>
177
179
  <span class="cline-any cline-neutral">&nbsp;</span>
178
- <span class="cline-any cline-yes">8x</span>
179
- <span class="cline-any cline-yes">8x</span>
180
+ <span class="cline-any cline-yes">1x</span>
180
181
  <span class="cline-any cline-neutral">&nbsp;</span>
182
+ <span class="cline-any cline-yes">16x</span>
181
183
  <span class="cline-any cline-neutral">&nbsp;</span>
182
- <span class="cline-any cline-yes">8x</span>
183
- <span class="cline-any cline-yes">8x</span>
184
- <span class="cline-any cline-yes">8x</span>
185
- <span class="cline-any cline-yes">8x</span>
186
- <span class="cline-any cline-yes">8x</span>
184
+ <span class="cline-any cline-yes">16x</span>
187
185
  <span class="cline-any cline-neutral">&nbsp;</span>
188
- <span class="cline-any cline-yes">8x</span>
189
- <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>
190
201
  <span class="cline-any cline-yes">4x</span>
191
202
  <span class="cline-any cline-neutral">&nbsp;</span>
203
+ <span class="cline-any cline-yes">4x</span>
192
204
  <span class="cline-any cline-yes">2x</span>
193
205
  <span class="cline-any cline-yes">2x</span>
194
- <span class="cline-any cline-neutral">&nbsp;</span>
195
206
  <span class="cline-any cline-yes">2x</span>
196
207
  <span class="cline-any cline-neutral">&nbsp;</span>
197
208
  <span class="cline-any cline-neutral">&nbsp;</span>
198
209
  <span class="cline-any cline-neutral">&nbsp;</span>
199
210
  <span class="cline-any cline-neutral">&nbsp;</span>
200
- <span class="cline-any cline-yes">8x</span>
201
- <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>
213
+ <span class="cline-any cline-neutral">&nbsp;</span>
202
214
  <span class="cline-any cline-neutral">&nbsp;</span>
203
215
  <span class="cline-any cline-neutral">&nbsp;</span>
204
216
  <span class="cline-any cline-neutral">&nbsp;</span>
205
217
  <span class="cline-any cline-neutral">&nbsp;</span>
206
- <span class="cline-any cline-yes">8x</span>
218
+ <span class="cline-any cline-yes">12x</span>
207
219
  <span class="cline-any cline-neutral">&nbsp;</span>
208
220
  <span class="cline-any cline-neutral">&nbsp;</span>
209
221
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -211,98 +223,94 @@
211
223
  <span class="cline-any cline-no">&nbsp;</span>
212
224
  <span class="cline-any cline-no">&nbsp;</span>
213
225
  <span class="cline-any cline-no">&nbsp;</span>
226
+ <span class="cline-any cline-no">&nbsp;</span>
214
227
  <span class="cline-any cline-neutral">&nbsp;</span>
215
- <span class="cline-any cline-neutral">&nbsp;</span>
228
+ <span class="cline-any cline-no">&nbsp;</span>
216
229
  <span class="cline-any cline-neutral">&nbsp;</span>
217
230
  <span class="cline-any cline-neutral">&nbsp;</span>
218
231
  <span class="cline-any cline-no">&nbsp;</span>
219
232
  <span class="cline-any cline-no">&nbsp;</span>
220
233
  <span class="cline-any cline-no">&nbsp;</span>
234
+ <span class="cline-any cline-no">&nbsp;</span>
221
235
  <span class="cline-any cline-neutral">&nbsp;</span>
222
236
  <span class="cline-any cline-neutral">&nbsp;</span>
223
237
  <span class="cline-any cline-neutral">&nbsp;</span>
224
238
  <span class="cline-any cline-neutral">&nbsp;</span>
225
- <span class="cline-any cline-neutral">&nbsp;</span>
226
- <span class="cline-any cline-neutral">&nbsp;</span>
227
- <span class="cline-any cline-yes">8x</span>
228
- <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>
229
241
  <span class="cline-any cline-neutral">&nbsp;</span>
230
242
  <span class="cline-any cline-neutral">&nbsp;</span>
231
243
  <span class="cline-any cline-neutral">&nbsp;</span>
232
244
  <span class="cline-any cline-neutral">&nbsp;</span>
233
245
  <span class="cline-any cline-yes">4x</span>
234
- <span class="cline-any cline-yes">4x</span>
235
- <span class="cline-any cline-neutral">&nbsp;</span>
236
- <span class="cline-any cline-neutral">&nbsp;</span>
237
- <span class="cline-any cline-neutral">&nbsp;</span>
238
- <span class="cline-any cline-neutral">&nbsp;</span>
239
- <span class="cline-any cline-neutral">&nbsp;</span>
240
- <span class="cline-any cline-neutral">&nbsp;</span>
241
- <span class="cline-any cline-yes">8x</span>
242
- <span class="cline-any cline-yes">8x</span>
243
- <span class="cline-any cline-neutral">&nbsp;</span>
246
+ <span class="cline-any cline-no">&nbsp;</span>
244
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>
245
251
  <span class="cline-any cline-neutral">&nbsp;</span>
246
252
  <span class="cline-any cline-neutral">&nbsp;</span>
247
- <span class="cline-any cline-yes">4x</span>
253
+ <span class="cline-any cline-no">&nbsp;</span>
254
+ <span class="cline-any cline-no">&nbsp;</span>
248
255
  <span class="cline-any cline-neutral">&nbsp;</span>
249
256
  <span class="cline-any cline-neutral">&nbsp;</span>
250
257
  <span class="cline-any cline-neutral">&nbsp;</span>
251
258
  <span class="cline-any cline-yes">4x</span>
252
- <span class="cline-any cline-neutral">&nbsp;</span>
253
259
  <span class="cline-any cline-yes">4x</span>
254
- <span class="cline-any cline-neutral">&nbsp;</span>
255
260
  <span class="cline-any cline-yes">4x</span>
256
261
  <span class="cline-any cline-yes">4x</span>
257
- <span class="cline-any cline-no">&nbsp;</span>
258
- <span class="cline-any cline-no">&nbsp;</span>
259
262
  <span class="cline-any cline-neutral">&nbsp;</span>
260
263
  <span class="cline-any cline-neutral">&nbsp;</span>
261
- <span class="cline-any cline-yes">4x</span>
262
- <span class="cline-any cline-neutral">&nbsp;</span>
263
264
  <span class="cline-any cline-neutral">&nbsp;</span>
264
- <span class="cline-any cline-yes">8x</span>
265
- <span class="cline-any cline-yes">8x</span>
266
265
  <span class="cline-any cline-neutral">&nbsp;</span>
267
266
  <span class="cline-any cline-neutral">&nbsp;</span>
268
267
  <span class="cline-any cline-neutral">&nbsp;</span>
269
268
  <span class="cline-any cline-neutral">&nbsp;</span>
270
- <span class="cline-any cline-yes">4x</span>
271
269
  <span class="cline-any cline-neutral">&nbsp;</span>
272
270
  <span class="cline-any cline-neutral">&nbsp;</span>
273
271
  <span class="cline-any cline-neutral">&nbsp;</span>
274
272
  <span class="cline-any cline-neutral">&nbsp;</span>
275
273
  <span class="cline-any cline-yes">4x</span>
274
+ <span class="cline-any cline-yes">4x</span>
276
275
  <span class="cline-any cline-neutral">&nbsp;</span>
277
276
  <span class="cline-any cline-neutral">&nbsp;</span>
278
- <span class="cline-any cline-yes">8x</span>
279
277
  <span class="cline-any cline-neutral">&nbsp;</span>
278
+ <span class="cline-any cline-yes">16x</span>
280
279
  <span class="cline-any cline-neutral">&nbsp;</span>
281
280
  <span class="cline-any cline-neutral">&nbsp;</span>
282
- <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";
281
+ <span class="cline-any cline-neutral">&nbsp;</span>
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";
283
283
  &nbsp;
284
284
  import { v4 as uuidv4 } from "uuid";
285
285
  import { MapContext } from "@mapcomponents/react-core";
286
+ import useMapState from "../../hooks/useMapState";
286
287
  &nbsp;
287
- const MlImageMarkerLayer = (props) =&gt; {
288
+ const MlLayer = (props) =&gt; {
288
289
  // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
289
- const mapRef = useRef(null);
290
- const componentId = useRef(
291
- (props.idPrefix ? <span class="branch-0 cbranch-no" title="branch not covered" >props.idPrefix </span>: "MlOsmLayer-") + uuidv4()
292
- );
293
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
+ });
294
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());
295
303
  const idSuffixRef = useRef(props.idSuffix || new Date().getTime());
296
- const imageIdRef = useRef(props.imageId || "img_" + new Date().getTime());
297
- 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);
298
307
  &nbsp;
299
308
  useEffect(() =&gt; {
300
309
  let _componentId = componentId.current;
310
+ &nbsp;
301
311
  return () =&gt; {
302
- // This is the cleanup function, it is called when this react component is removed from react-dom
303
312
  if (mapRef.current) {
304
313
  mapRef.current.cleanup(_componentId);
305
- &nbsp;
306
314
  mapRef.current = null;
307
315
  }
308
316
  };
@@ -310,8 +318,9 @@ const MlImageMarkerLayer = (props) =&gt; {
310
318
  &nbsp;
311
319
  useEffect(() =&gt; {
312
320
  if (
313
- !mapRef.current ||
314
- (<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>||
315
324
  <span class="branch-3 cbranch-no" title="branch not covered" > !props.options</span>
316
325
  )
317
326
  return;
@@ -319,95 +328,83 @@ const MlImageMarkerLayer = (props) =&gt; {
319
328
  // initialize the layer and add it to the MapLibre-gl instance or do something else with it
320
329
  var key;
321
330
  &nbsp;
322
- <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>
323
333
  <span class="cstat-no" title="statement not covered" > for (key in props.options.layout) {</span>
324
- <span class="cstat-no" title="statement not covered" > mapContext</span>
325
- .getMap(props.mapId)
326
- .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>
327
335
  }
336
+ <span class="cstat-no" title="statement not covered" > layerLayoutConfRef.current = layoutString;</span>
328
337
  }
329
- <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>
330
341
  <span class="cstat-no" title="statement not covered" > for (key in props.options.paint) {</span>
331
- <span class="cstat-no" title="statement not covered" > mapContext</span>
332
- .getMap(props.mapId)
333
- .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>
334
343
  }
335
344
  }
336
- }, [props.options, layerId.current, mapContext, props.mapId]);
337
- &nbsp;
338
- const addLayer = useCallback(() =&gt; {
339
- let tmpOptions = {
340
- id: layerId.current,
341
- layout: {},
342
- ...props.options,
343
- };
344
- tmpOptions.layout["icon-image"] = imageIdRef.current;
345
- mapRef.current.addLayer(
346
- tmpOptions,
347
- props.insertBeforeLayer,
348
- componentId.current
349
- );
350
- }, [props]);
345
+ }, [props.options, layerId, mapContext, props]);
351
346
  &nbsp;
352
347
  useEffect(() =&gt; {
353
- if (
354
- !props.options ||
355
- !mapContext.mapExists(props.mapId) ||
356
- layerInitializedRef.current
357
- )
358
- return;
359
- &nbsp;
348
+ if (!mapContext.mapExists(props.mapId) || layerInitializedRef.current) return;
360
349
  // the MapLibre-gl instance (mapContext.map) is accessible here
361
350
  // initialize the layer and add it to the MapLibre-gl instance or do something else with it
362
- mapRef.current = mapContext.getMap(props.mapId);
363
351
  &nbsp;
364
- 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>
365
355
  &nbsp;
366
- if (props.imgSrc) {
367
- mapRef.current.loadImage(props.imgSrc, <span class="fstat-no" title="function not covered" >fu</span>nction (error, image) {
368
- <span class="cstat-no" title="statement not covered" > if (error) <span class="cstat-no" title="statement not covered" >throw error;</span></span>
369
- <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
+ }
370
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
+ }
371
364
  }
372
- addLayer();
373
- }, [mapContext.mapIds, mapContext, props, addLayer]);
374
365
  &nbsp;
375
- useEffect(() =&gt; {
376
- if (
377
- !mapRef.current ||
378
- (mapRef.current &amp;&amp; !mapContext.getMap(props.mapId).getLayer(layerId.current)) ||
379
- !props.options
380
- ) {
381
- 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);
382
383
  }
383
- // the MapLibre-gl instance (mapContext.map) is accessible here
384
- // initialize the layer and add it to the MapLibre-gl instance or do something else with it
385
- &nbsp;
386
- mapRef.current.getSource(layerId.current).setData(props.options.source.data);
387
- }, [props.options.source.data, mapContext, props]);
384
+ }, [mapContext.mapIds, mapContext, props, mapState.layers]);
388
385
  &nbsp;
389
386
  return &lt;&gt;&lt;/&gt;;
390
387
  };
391
388
  &nbsp;
392
- export default MlImageMarkerLayer;
389
+ export default MlLayer;
393
390
  &nbsp;</pre></td></tr></table></pre>
394
391
 
395
392
  <div class='push'></div><!-- for sticky footer -->
396
393
  </div><!-- /wrapper -->
397
394
  <div class='footer quiet pad2 space-top1 center small'>
398
395
  Code coverage generated by
399
- <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
400
- at Wed Dec 01 2021 11:10:48 GMT+0000 (Coordinated Universal Time)
396
+ <a href="https://istanbul.js.org/" target="_blank" rel="noopener">istanbul</a>
397
+ at Tue Dec 21 2021 11:51:22 GMT+0000 (Coordinated Universal Time)
401
398
  </div>
402
399
  </div>
403
- <script src="../../prettify.js"></script>
400
+ <script src="../../../prettify.js"></script>
404
401
  <script>
405
402
  window.onload = function () {
406
403
  prettyPrint();
407
404
  };
408
405
  </script>
409
- <script src="../../sorter.js"></script>
410
- <script src="../../block-navigation.js"></script>
406
+ <script src="../../../sorter.js"></script>
407
+ <script src="../../../block-navigation.js"></script>
411
408
  </body>
412
409
  </html>
413
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 Tue Dec 21 2021 11:51:22 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
+