@mapcomponents/react-maplibre 0.1.14 → 0.1.18

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 (100) hide show
  1. package/.github/workflows/storybook.yml +4 -2
  2. package/CHANGELOG.md +42 -0
  3. package/README.md +22 -6
  4. package/coverage/clover.xml +448 -460
  5. package/coverage/coverage-final.json +14 -14
  6. package/coverage/lcov-report/index.html +77 -78
  7. package/coverage/lcov-report/src/components/MapLibreMap/MapLibreMap.js.html +2 -3
  8. package/coverage/lcov-report/src/components/MapLibreMap/index.html +2 -3
  9. package/coverage/lcov-report/src/components/MlCreatePdfButton/MlCreatePdfButton.js.html +2 -3
  10. package/coverage/lcov-report/src/components/MlCreatePdfButton/index.html +2 -3
  11. package/coverage/lcov-report/src/components/MlFeatureEditor/MlFeatureEditor.js.html +2 -3
  12. package/coverage/lcov-report/src/components/MlFeatureEditor/index.html +2 -3
  13. package/coverage/lcov-report/src/components/MlFillExtrusionLayer/MlFillExtrusionLayer.js.html +2 -3
  14. package/coverage/lcov-report/src/components/MlFillExtrusionLayer/index.html +2 -3
  15. package/coverage/lcov-report/src/components/MlFollowGps/MlFollowGps.js.html +112 -107
  16. package/coverage/lcov-report/src/components/MlFollowGps/index.html +16 -17
  17. package/coverage/lcov-report/src/components/MlGPXViewer/MlGPXViewer.js.html +2 -3
  18. package/coverage/lcov-report/src/components/MlGPXViewer/gpxConverter.js.html +2 -3
  19. package/coverage/lcov-report/src/components/MlGPXViewer/index.html +2 -3
  20. package/coverage/lcov-report/src/components/MlGeoJsonLayer/MlGeoJsonLayer.js.html +168 -133
  21. package/coverage/lcov-report/src/components/MlGeoJsonLayer/index.html +20 -21
  22. package/coverage/lcov-report/src/components/MlImageMarkerLayer/MlImageMarkerLayer.js.html +46 -152
  23. package/coverage/lcov-report/src/components/MlImageMarkerLayer/index.html +20 -21
  24. package/coverage/lcov-report/src/components/MlLayer/MlLayer.js.html +92 -30
  25. package/coverage/lcov-report/src/components/MlLayer/index.html +20 -21
  26. package/coverage/lcov-report/src/components/MlLayerMagnify/MlLayerMagnify.js.html +2 -3
  27. package/coverage/lcov-report/src/components/MlLayerMagnify/index.html +2 -3
  28. package/coverage/lcov-report/src/components/MlLayerSwipe/MlLayerSwipe.js.html +2 -3
  29. package/coverage/lcov-report/src/components/MlLayerSwipe/index.html +2 -3
  30. package/coverage/lcov-report/src/components/MlLayerSwitcher/MlLayerSwitcher.js.html +3 -10
  31. package/coverage/lcov-report/src/components/MlLayerSwitcher/components/LayerBox.js.html +9 -82
  32. package/coverage/lcov-report/src/components/MlLayerSwitcher/components/index.html +10 -11
  33. package/coverage/lcov-report/src/components/MlLayerSwitcher/index.html +2 -3
  34. package/coverage/lcov-report/src/components/MlMarker/MlMarker.js.html +6 -7
  35. package/coverage/lcov-report/src/components/MlMarker/index.html +6 -7
  36. package/coverage/lcov-report/src/components/MlNavigationCompass/MlNavigationCompass.js.html +2 -3
  37. package/coverage/lcov-report/src/components/MlNavigationCompass/index.html +2 -3
  38. package/coverage/lcov-report/src/components/MlNavigationTools/MlNavigationTools.js.html +11 -15
  39. package/coverage/lcov-report/src/components/MlNavigationTools/index.html +8 -9
  40. package/coverage/lcov-report/src/components/MlOsmLayer/MlOsmLayer.js.html +2 -3
  41. package/coverage/lcov-report/src/components/MlOsmLayer/index.html +2 -3
  42. package/coverage/lcov-report/src/components/MlScaleReference/MlScaleReference.js.html +2 -3
  43. package/coverage/lcov-report/src/components/MlScaleReference/index.html +2 -3
  44. package/coverage/lcov-report/src/components/MlShareMapState/MlShareMapState.js.html +209 -18
  45. package/coverage/lcov-report/src/components/MlShareMapState/index.html +10 -11
  46. package/coverage/lcov-report/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.js.html +2 -3
  47. package/coverage/lcov-report/src/components/MlSpatialElevationProfile/index.html +2 -3
  48. package/coverage/lcov-report/src/components/MlThreeJsLayer/MlThreeJsLayer.js.html +2 -3
  49. package/coverage/lcov-report/src/components/MlThreeJsLayer/index.html +2 -3
  50. package/coverage/lcov-report/src/components/MlUseMapDebugger/MlUseMapDebugger.js.html +6 -25
  51. package/coverage/lcov-report/src/components/MlUseMapDebugger/index.html +6 -7
  52. package/coverage/lcov-report/src/components/MlVectorTileLayer/MlVectorTileLayer.js.html +2 -3
  53. package/coverage/lcov-report/src/components/MlVectorTileLayer/index.html +2 -3
  54. package/coverage/lcov-report/src/components/MlWmsFeatureInfoPopup/MlWmsFeatureInfoPopup.js.html +2 -3
  55. package/coverage/lcov-report/src/components/MlWmsFeatureInfoPopup/index.html +2 -3
  56. package/coverage/lcov-report/src/components/MlWmsLayer/MlWmsLayer.js.html +2 -3
  57. package/coverage/lcov-report/src/components/MlWmsLayer/index.html +2 -3
  58. package/coverage/lcov-report/src/components/MlWmsLoader/MlWmsLoader.js.html +6 -19
  59. package/coverage/lcov-report/src/components/MlWmsLoader/index.html +8 -9
  60. package/coverage/lcov-report/src/hooks/index.html +35 -36
  61. package/coverage/lcov-report/src/hooks/useMap.js.html +81 -169
  62. package/coverage/lcov-report/src/hooks/useMapState.js.html +82 -125
  63. package/coverage/lcov-report/src/hooks/useWms.js.html +9 -22
  64. package/coverage/lcov-report/src/i18n.js.html +2 -3
  65. package/coverage/lcov-report/src/index.html +2 -3
  66. package/coverage/lcov-report/src/translations/english.js.html +2 -3
  67. package/coverage/lcov-report/src/translations/german.js.html +2 -3
  68. package/coverage/lcov-report/src/translations/index.html +2 -3
  69. package/coverage/lcov.info +898 -900
  70. package/dist/index.esm.js +866 -758
  71. package/dist/index.esm.js.map +1 -1
  72. package/package.json +2 -2
  73. package/src/components/MapLibreMap/lib/MapLibreGlWrapper.js +16 -14
  74. package/src/components/MlComponentTemplate/MlComponentTemplate.js +7 -32
  75. package/src/components/MlFollowGps/MlFollowGps.js +67 -65
  76. package/src/components/MlFollowGps/MlFollowGps.test.js +3 -5
  77. package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.js +101 -89
  78. package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.stories.js +35 -6
  79. package/src/components/MlGeoJsonLayer/assets/sample_polygon_1.json +33 -0
  80. package/src/components/MlGeoJsonLayer/util/getDefaultLayerTypeByGeometry.js +25 -0
  81. package/src/components/MlGeoJsonLayer/util/getDefaultPaintPropsByType.js +31 -0
  82. package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.js +21 -56
  83. package/src/components/MlLayer/MlLayer.js +26 -5
  84. package/src/components/MlLayerSwitcher/MlLayerSwitcher.js +0 -2
  85. package/src/components/MlLayerSwitcher/MlLayerSwitcher.stories.js +3 -6
  86. package/src/components/MlLayerSwitcher/components/LayerBox.js +2 -26
  87. package/src/components/MlMarker/MlMarker.js +1 -1
  88. package/src/components/MlNavigationTools/MlNavigationTools.js +4 -5
  89. package/src/components/MlShareMapState/MlShareMapState.js +73 -9
  90. package/src/components/MlShareMapState/MlShareMapState.stories.js +22 -2
  91. package/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.stories.js +1 -3
  92. package/src/components/MlUseMapDebugger/MlUseMapDebugger.js +1 -7
  93. package/src/components/MlWmsLoader/MlWmsLoader.js +0 -4
  94. package/src/hooks/useMap.js +33 -62
  95. package/src/hooks/useMapState.js +3 -17
  96. package/src/hooks/useWms.js +2 -7
  97. package/src/index.js +2 -0
  98. package/src/ui_components/ImageLoader.js +8 -3
  99. package/src/ui_components/Sidebar.js +1 -1
  100. package/src/ui_components/TopToolbar.js +0 -2
package/coverage/lcov-report/src/components/MlImageMarkerLayer/MlImageMarkerLayer.js.html CHANGED
@@ -23,30 +23,30 @@
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">79.54% </span>
26
+ <span class="strong">69.69% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>35/44</span>
28
+ <span class='fraction'>23/33</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">48.27% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>22/35</span>
35
+ <span class='fraction'>14/29</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">81.39% </span>
47
+ <span class="strong">70.96% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>35/43</span>
49
+ <span class='fraction'>22/31</span>
50
50
  </div>
51
51
 
52
52
 
@@ -138,75 +138,24 @@
138
138
  <a name='L73'></a><a href='#L73'>73</a>
139
139
  <a name='L74'></a><a href='#L74'>74</a>
140
140
  <a name='L75'></a><a href='#L75'>75</a>
141
- <a name='L76'></a><a href='#L76'>76</a>
142
- <a name='L77'></a><a href='#L77'>77</a>
143
- <a name='L78'></a><a href='#L78'>78</a>
144
- <a name='L79'></a><a href='#L79'>79</a>
145
- <a name='L80'></a><a href='#L80'>80</a>
146
- <a name='L81'></a><a href='#L81'>81</a>
147
- <a name='L82'></a><a href='#L82'>82</a>
148
- <a name='L83'></a><a href='#L83'>83</a>
149
- <a name='L84'></a><a href='#L84'>84</a>
150
- <a name='L85'></a><a href='#L85'>85</a>
151
- <a name='L86'></a><a href='#L86'>86</a>
152
- <a name='L87'></a><a href='#L87'>87</a>
153
- <a name='L88'></a><a href='#L88'>88</a>
154
- <a name='L89'></a><a href='#L89'>89</a>
155
- <a name='L90'></a><a href='#L90'>90</a>
156
- <a name='L91'></a><a href='#L91'>91</a>
157
- <a name='L92'></a><a href='#L92'>92</a>
158
- <a name='L93'></a><a href='#L93'>93</a>
159
- <a name='L94'></a><a href='#L94'>94</a>
160
- <a name='L95'></a><a href='#L95'>95</a>
161
- <a name='L96'></a><a href='#L96'>96</a>
162
- <a name='L97'></a><a href='#L97'>97</a>
163
- <a name='L98'></a><a href='#L98'>98</a>
164
- <a name='L99'></a><a href='#L99'>99</a>
165
- <a name='L100'></a><a href='#L100'>100</a>
166
- <a name='L101'></a><a href='#L101'>101</a>
167
- <a name='L102'></a><a href='#L102'>102</a>
168
- <a name='L103'></a><a href='#L103'>103</a>
169
- <a name='L104'></a><a href='#L104'>104</a>
170
- <a name='L105'></a><a href='#L105'>105</a>
171
- <a name='L106'></a><a href='#L106'>106</a>
172
- <a name='L107'></a><a href='#L107'>107</a>
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></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
177
- <span class="cline-any cline-neutral">&nbsp;</span>
141
+ <a name='L76'></a><a href='#L76'>76</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
178
142
  <span class="cline-any cline-neutral">&nbsp;</span>
179
143
  <span class="cline-any cline-neutral">&nbsp;</span>
180
144
  <span class="cline-any cline-neutral">&nbsp;</span>
181
145
  <span class="cline-any cline-yes">2x</span>
146
+ <span class="cline-any cline-yes">12x</span>
182
147
  <span class="cline-any cline-neutral">&nbsp;</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>
187
- <span class="cline-any cline-yes">8x</span>
188
- <span class="cline-any cline-yes">8x</span>
189
- <span class="cline-any cline-yes">8x</span>
148
+ <span class="cline-any cline-yes">12x</span>
149
+ <span class="cline-any cline-yes">12x</span>
150
+ <span class="cline-any cline-yes">12x</span>
190
151
  <span class="cline-any cline-neutral">&nbsp;</span>
191
- <span class="cline-any cline-yes">8x</span>
192
- <span class="cline-any cline-yes">4x</span>
152
+ <span class="cline-any cline-yes">12x</span>
193
153
  <span class="cline-any cline-yes">4x</span>
194
154
  <span class="cline-any cline-neutral">&nbsp;</span>
195
- <span class="cline-any cline-yes">2x</span>
196
- <span class="cline-any cline-yes">2x</span>
197
- <span class="cline-any cline-neutral">&nbsp;</span>
198
- <span class="cline-any cline-yes">2x</span>
199
155
  <span class="cline-any cline-neutral">&nbsp;</span>
200
156
  <span class="cline-any cline-neutral">&nbsp;</span>
201
157
  <span class="cline-any cline-neutral">&nbsp;</span>
202
- <span class="cline-any cline-neutral">&nbsp;</span>
203
- <span class="cline-any cline-yes">8x</span>
204
- <span class="cline-any cline-yes">8x</span>
205
- <span class="cline-any cline-neutral">&nbsp;</span>
206
- <span class="cline-any cline-neutral">&nbsp;</span>
207
- <span class="cline-any cline-neutral">&nbsp;</span>
208
- <span class="cline-any cline-neutral">&nbsp;</span>
209
- <span class="cline-any cline-yes">8x</span>
158
+ <span class="cline-any cline-yes">4x</span>
210
159
  <span class="cline-any cline-neutral">&nbsp;</span>
211
160
  <span class="cline-any cline-neutral">&nbsp;</span>
212
161
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -216,8 +165,6 @@
216
165
  <span class="cline-any cline-no">&nbsp;</span>
217
166
  <span class="cline-any cline-neutral">&nbsp;</span>
218
167
  <span class="cline-any cline-neutral">&nbsp;</span>
219
- <span class="cline-any cline-neutral">&nbsp;</span>
220
- <span class="cline-any cline-neutral">&nbsp;</span>
221
168
  <span class="cline-any cline-no">&nbsp;</span>
222
169
  <span class="cline-any cline-no">&nbsp;</span>
223
170
  <span class="cline-any cline-no">&nbsp;</span>
@@ -225,9 +172,7 @@
225
172
  <span class="cline-any cline-neutral">&nbsp;</span>
226
173
  <span class="cline-any cline-neutral">&nbsp;</span>
227
174
  <span class="cline-any cline-neutral">&nbsp;</span>
228
- <span class="cline-any cline-neutral">&nbsp;</span>
229
- <span class="cline-any cline-neutral">&nbsp;</span>
230
- <span class="cline-any cline-yes">8x</span>
175
+ <span class="cline-any cline-yes">12x</span>
231
176
  <span class="cline-any cline-yes">4x</span>
232
177
  <span class="cline-any cline-neutral">&nbsp;</span>
233
178
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -237,36 +182,23 @@
237
182
  <span class="cline-any cline-yes">4x</span>
238
183
  <span class="cline-any cline-neutral">&nbsp;</span>
239
184
  <span class="cline-any cline-neutral">&nbsp;</span>
240
- <span class="cline-any cline-neutral">&nbsp;</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-yes">8x</span>
185
+ <span class="cline-any cline-yes">12x</span>
245
186
  <span class="cline-any cline-yes">8x</span>
246
187
  <span class="cline-any cline-neutral">&nbsp;</span>
247
- <span class="cline-any cline-neutral">&nbsp;</span>
248
- <span class="cline-any cline-neutral">&nbsp;</span>
249
- <span class="cline-any cline-neutral">&nbsp;</span>
250
188
  <span class="cline-any cline-yes">4x</span>
251
189
  <span class="cline-any cline-neutral">&nbsp;</span>
252
- <span class="cline-any cline-neutral">&nbsp;</span>
253
- <span class="cline-any cline-neutral">&nbsp;</span>
254
- <span class="cline-any cline-yes">4x</span>
255
- <span class="cline-any cline-neutral">&nbsp;</span>
256
- <span class="cline-any cline-yes">4x</span>
257
- <span class="cline-any cline-neutral">&nbsp;</span>
258
- <span class="cline-any cline-yes">4x</span>
259
190
  <span class="cline-any cline-yes">4x</span>
260
191
  <span class="cline-any cline-yes">4x</span>
261
192
  <span class="cline-any cline-no">&nbsp;</span>
262
193
  <span class="cline-any cline-no">&nbsp;</span>
263
194
  <span class="cline-any cline-neutral">&nbsp;</span>
264
195
  <span class="cline-any cline-neutral">&nbsp;</span>
196
+ <span class="cline-any cline-neutral">&nbsp;</span>
265
197
  <span class="cline-any cline-yes">4x</span>
266
198
  <span class="cline-any cline-neutral">&nbsp;</span>
267
199
  <span class="cline-any cline-neutral">&nbsp;</span>
268
- <span class="cline-any cline-yes">8x</span>
269
- <span class="cline-any cline-yes">8x</span>
200
+ <span class="cline-any cline-yes">12x</span>
201
+ <span class="cline-any cline-yes">4x</span>
270
202
  <span class="cline-any cline-neutral">&nbsp;</span>
271
203
  <span class="cline-any cline-neutral">&nbsp;</span>
272
204
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -274,46 +206,28 @@
274
206
  <span class="cline-any cline-yes">4x</span>
275
207
  <span class="cline-any cline-neutral">&nbsp;</span>
276
208
  <span class="cline-any cline-neutral">&nbsp;</span>
209
+ <span class="cline-any cline-no">&nbsp;</span>
277
210
  <span class="cline-any cline-neutral">&nbsp;</span>
278
211
  <span class="cline-any cline-neutral">&nbsp;</span>
279
- <span class="cline-any cline-yes">4x</span>
280
- <span class="cline-any cline-neutral">&nbsp;</span>
281
- <span class="cline-any cline-neutral">&nbsp;</span>
282
- <span class="cline-any cline-yes">8x</span>
212
+ <span class="cline-any cline-yes">12x</span>
283
213
  <span class="cline-any cline-neutral">&nbsp;</span>
284
214
  <span class="cline-any cline-neutral">&nbsp;</span>
285
215
  <span class="cline-any cline-neutral">&nbsp;</span>
286
- <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";
216
+ <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useRef, useCallback, useEffect } from "react";
287
217
  &nbsp;
288
- import { v4 as uuidv4 } from "uuid";
289
- import { MapContext } from "@mapcomponents/react-core";
218
+ import useMap from "../../hooks/useMap";
290
219
  &nbsp;
291
220
  const MlImageMarkerLayer = (props) =&gt; {
292
- // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
293
- const mapRef = useRef(null);
294
- const componentId = useRef((props.idPrefix ? <span class="branch-0 cbranch-no" title="branch not covered" >props.idPrefix </span>: "MlImageMarkerLayer-") + uuidv4());
295
- const mapContext = useContext(MapContext);
221
+ const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
222
+ &nbsp;
296
223
  const layerInitializedRef = useRef(false);
297
- const idSuffixRef = useRef(props.idSuffix || new Date().getTime());
298
224
  const imageIdRef = useRef(props.imageId || "img_" + new Date().getTime());
299
- const layerId = useRef(props.layerId || componentId.current);
300
- &nbsp;
301
- useEffect(() =&gt; {
302
- let _componentId = componentId.current;
303
- return () =&gt; {
304
- // This is the cleanup function, it is called when this react component is removed from react-dom
305
- if (mapRef.current) {
306
- mapRef.current.cleanup(_componentId);
307
- &nbsp;
308
- mapRef.current = null;
309
- }
310
- };
311
- }, []);
225
+ const layerId = useRef(props.layerId || "MlImageMarkerLayer-" + mapHook.componentId);
312
226
  &nbsp;
313
227
  useEffect(() =&gt; {
314
228
  if (
315
- !mapRef.current ||
316
- (<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> ||
229
+ !mapHook.mapIsReady ||
230
+ (<span class="branch-1 cbranch-no" title="branch not covered" >mapHook.map </span>&amp;&amp; <span class="branch-2 cbranch-no" title="branch not covered" >!mapHook.map.getLayer(layerId.current))</span> ||
317
231
  <span class="branch-3 cbranch-no" title="branch not covered" > !props.options</span>
318
232
  )
319
233
  return;
@@ -323,19 +237,15 @@ const MlImageMarkerLayer = (props) =&gt; {
323
237
  &nbsp;
324
238
  <span class="cstat-no" title="statement not covered" > if (props.options.layout) {</span>
325
239
  <span class="cstat-no" title="statement not covered" > for (key in props.options.layout) {</span>
326
- <span class="cstat-no" title="statement not covered" > mapContext</span>
327
- .getMap(props.mapId)
328
- .setLayoutProperty(layerId.current, key, props.options.layout[key]);
240
+ <span class="cstat-no" title="statement not covered" > mapHook.map.setLayoutProperty(layerId.current, key, props.options.layout[key]);</span>
329
241
  }
330
242
  }
331
243
  <span class="cstat-no" title="statement not covered" > if (props.options.paint) {</span>
332
244
  <span class="cstat-no" title="statement not covered" > for (key in props.options.paint) {</span>
333
- <span class="cstat-no" title="statement not covered" > mapContext</span>
334
- .getMap(props.mapId)
335
- .setPaintProperty(layerId.current, key, props.options.paint[key]);
245
+ <span class="cstat-no" title="statement not covered" > mapHook.map.setPaintProperty(layerId.current, key, props.options.paint[key]);</span>
336
246
  }
337
247
  }
338
- }, [props.options, layerId.current, mapContext, props.mapId]);
248
+ }, [props.options, layerId.current, props.mapId]);
339
249
  &nbsp;
340
250
  const addLayer = useCallback(() =&gt; {
341
251
  let tmpOptions = {
@@ -344,50 +254,35 @@ const MlImageMarkerLayer = (props) =&gt; {
344
254
  ...props.options,
345
255
  };
346
256
  tmpOptions.layout["icon-image"] = imageIdRef.current;
347
- mapRef.current.addLayer(
348
- tmpOptions,
349
- props.insertBeforeLayer,
350
- componentId.current
351
- );
352
- }, [props]);
257
+ mapHook.map.addLayer(tmpOptions, props.insertBeforeLayer, mapHook.componentId);
258
+ }, [props, mapHook.mapIsReady, mapHook.map]);
353
259
  &nbsp;
354
260
  useEffect(() =&gt; {
355
- if (
356
- !props.options ||
357
- !mapContext.mapExists(props.mapId) ||
358
- layerInitializedRef.current
359
- )
360
- return;
361
- &nbsp;
362
- // the MapLibre-gl instance (mapContext.map) is accessible here
363
- // initialize the layer and add it to the MapLibre-gl instance or do something else with it
364
- mapRef.current = mapContext.getMap(props.mapId);
261
+ if (!props.options || !mapHook.mapIsReady || layerInitializedRef.current) return;
365
262
  &nbsp;
366
263
  layerInitializedRef.current = true;
367
264
  &nbsp;
368
- console.log(props.imgSrc);
369
265
  if (props.imgSrc) {
370
- mapRef.current.loadImage(props.imgSrc, <span class="fstat-no" title="function not covered" >fu</span>nction (error, image) {
266
+ mapHook.map.loadImage(props.imgSrc, <span class="fstat-no" title="function not covered" >fu</span>nction (error, image) {
371
267
  <span class="cstat-no" title="statement not covered" > if (error) <span class="cstat-no" title="statement not covered" >throw error;</span></span>
372
- <span class="cstat-no" title="statement not covered" > mapRef.current.addImage(imageIdRef.current, image, componentId.current);</span>
268
+ <span class="cstat-no" title="statement not covered" > mapHook.map.addImage(imageIdRef.current, image, mapHook.componentId);</span>
373
269
  });
374
270
  }
271
+ &nbsp;
375
272
  addLayer();
376
- }, [mapContext.mapIds, mapContext, props, addLayer]);
273
+ }, [mapHook.mapIsReady, mapHook.map, addLayer, props]);
377
274
  &nbsp;
378
275
  useEffect(() =&gt; {
379
276
  if (
380
- !mapRef.current ||
381
- (mapRef.current &amp;&amp; !mapContext.getMap(props.mapId).getLayer(layerId.current)) ||
382
- !props.options
277
+ !mapHook.mapIsReady ||
278
+ (<span class="branch-1 cbranch-no" title="branch not covered" >mapHook.map </span>&amp;&amp; <span class="branch-2 cbranch-no" title="branch not covered" >!mapHook.map.getLayer(layerId.current))</span> ||
279
+ <span class="branch-3 cbranch-no" title="branch not covered" > !props.options</span>
383
280
  ) {
384
281
  return;
385
282
  }
386
- // the MapLibre-gl instance (mapContext.map) is accessible here
387
- // initialize the layer and add it to the MapLibre-gl instance or do something else with it
388
283
  &nbsp;
389
- mapRef.current.getSource(layerId.current).setData(props.options.source.data);
390
- }, [props.options.source.data, mapContext, props]);
284
+ <span class="cstat-no" title="statement not covered" > mapHook.map.getSource(layerId.current).setData(props.options.source.data);</span>
285
+ }, [props.options.source.data, props]);
391
286
  &nbsp;
392
287
  return &lt;&gt;&lt;/&gt;;
393
288
  };
@@ -399,10 +294,9 @@ export default MlImageMarkerLayer;
399
294
  </div><!-- /wrapper -->
400
295
  <div class='footer quiet pad2 space-top1 center small'>
401
296
  Code coverage generated by
402
- <a href="https://istanbul.js.org/" target="_blank" rel="noopener">istanbul</a>
403
- at Wed Dec 15 2021 17:41:09 GMT+0000 (Coordinated Universal Time)
297
+ <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
298
+ at Thu Jan 13 2022 12:08:19 GMT+0000 (Coordinated Universal Time)
404
299
  </div>
405
- </div>
406
300
  <script src="../../../prettify.js"></script>
407
301
  <script>
408
302
  window.onload = function () {
package/coverage/lcov-report/src/components/MlImageMarkerLayer/index.html CHANGED
@@ -23,30 +23,30 @@
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">79.54% </span>
26
+ <span class="strong">69.69% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>35/44</span>
28
+ <span class='fraction'>23/33</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">48.27% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>22/35</span>
35
+ <span class='fraction'>14/29</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">81.39% </span>
47
+ <span class="strong">70.96% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>35/43</span>
49
+ <span class='fraction'>22/31</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="MlImageMarkerLayer.js"><a href="MlImageMarkerLayer.js.html">MlImageMarkerLayer.js</a></td>
83
- <td data-value="79.54" class="pic medium">
84
- <div class="chart"><div class="cover-fill" style="width: 79%"></div><div class="cover-empty" style="width: 21%"></div></div>
83
+ <td data-value="69.69" class="pic medium">
84
+ <div class="chart"><div class="cover-fill" style="width: 69%"></div><div class="cover-empty" style="width: 31%"></div></div>
85
85
  </td>
86
- <td data-value="79.54" class="pct medium">79.54%</td>
87
- <td data-value="44" class="abs medium">35/44</td>
88
- <td data-value="62.85" class="pct medium">62.85%</td>
89
- <td data-value="35" class="abs medium">22/35</td>
90
- <td data-value="87.5" class="pct high">87.5%</td>
91
- <td data-value="8" class="abs high">7/8</td>
92
- <td data-value="81.39" class="pct high">81.39%</td>
93
- <td data-value="43" class="abs high">35/43</td>
86
+ <td data-value="69.69" class="pct medium">69.69%</td>
87
+ <td data-value="33" class="abs medium">23/33</td>
88
+ <td data-value="48.27" class="pct low">48.27%</td>
89
+ <td data-value="29" class="abs low">14/29</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="70.96" class="pct medium">70.96%</td>
93
+ <td data-value="31" class="abs medium">22/31</td>
94
94
  </tr>
95
95
 
96
96
  </tbody>
@@ -100,10 +100,9 @@
100
100
  </div><!-- /wrapper -->
101
101
  <div class='footer quiet pad2 space-top1 center small'>
102
102
  Code coverage generated by
103
- <a href="https://istanbul.js.org/" target="_blank" rel="noopener">istanbul</a>
104
- at Wed Dec 15 2021 17:41:09 GMT+0000 (Coordinated Universal Time)
103
+ <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
104
+ at Thu Jan 13 2022 12:08:19 GMT+0000 (Coordinated Universal Time)
105
105
  </div>
106
- </div>
107
106
  <script src="../../../prettify.js"></script>
108
107
  <script>
109
108
  window.onload = function () {
package/coverage/lcov-report/src/components/MlLayer/MlLayer.js.html CHANGED
@@ -23,30 +23,30 @@
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">75.67% </span>
26
+ <span class="strong">65.9% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>28/37</span>
28
+ <span class='fraction'>29/44</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
- <span class="strong">50% </span>
33
+ <span class="strong">40.62% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>14/28</span>
35
+ <span class='fraction'>13/32</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
- <span class="strong">100% </span>
40
+ <span class="strong">83.33% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>5/5</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">75% </span>
47
+ <span class="strong">65.11% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>27/36</span>
49
+ <span class='fraction'>28/43</span>
50
50
  </div>
51
51
 
52
52
 
@@ -149,25 +149,53 @@
149
149
  <a name='L84'></a><a href='#L84'>84</a>
150
150
  <a name='L85'></a><a href='#L85'>85</a>
151
151
  <a name='L86'></a><a href='#L86'>86</a>
152
- <a name='L87'></a><a href='#L87'>87</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
152
+ <a name='L87'></a><a href='#L87'>87</a>
153
+ <a name='L88'></a><a href='#L88'>88</a>
154
+ <a name='L89'></a><a href='#L89'>89</a>
155
+ <a name='L90'></a><a href='#L90'>90</a>
156
+ <a name='L91'></a><a href='#L91'>91</a>
157
+ <a name='L92'></a><a href='#L92'>92</a>
158
+ <a name='L93'></a><a href='#L93'>93</a>
159
+ <a name='L94'></a><a href='#L94'>94</a>
160
+ <a name='L95'></a><a href='#L95'>95</a>
161
+ <a name='L96'></a><a href='#L96'>96</a>
162
+ <a name='L97'></a><a href='#L97'>97</a>
163
+ <a name='L98'></a><a href='#L98'>98</a>
164
+ <a name='L99'></a><a href='#L99'>99</a>
165
+ <a name='L100'></a><a href='#L100'>100</a>
166
+ <a name='L101'></a><a href='#L101'>101</a>
167
+ <a name='L102'></a><a href='#L102'>102</a>
168
+ <a name='L103'></a><a href='#L103'>103</a>
169
+ <a name='L104'></a><a href='#L104'>104</a>
170
+ <a name='L105'></a><a href='#L105'>105</a>
171
+ <a name='L106'></a><a href='#L106'>106</a>
172
+ <a name='L107'></a><a href='#L107'>107</a>
173
+ <a name='L108'></a><a href='#L108'>108</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
174
+ <span class="cline-any cline-neutral">&nbsp;</span>
153
175
  <span class="cline-any cline-neutral">&nbsp;</span>
154
176
  <span class="cline-any cline-neutral">&nbsp;</span>
155
177
  <span class="cline-any cline-neutral">&nbsp;</span>
156
178
  <span class="cline-any cline-neutral">&nbsp;</span>
157
179
  <span class="cline-any cline-yes">1x</span>
158
180
  <span class="cline-any cline-neutral">&nbsp;</span>
159
- <span class="cline-any cline-yes">12x</span>
160
- <span class="cline-any cline-yes">12x</span>
161
- <span class="cline-any cline-yes">12x</span>
162
- <span class="cline-any cline-yes">12x</span>
181
+ <span class="cline-any cline-yes">16x</span>
163
182
  <span class="cline-any cline-neutral">&nbsp;</span>
183
+ <span class="cline-any cline-yes">16x</span>
164
184
  <span class="cline-any cline-neutral">&nbsp;</span>
165
- <span class="cline-any cline-yes">12x</span>
166
- <span class="cline-any cline-yes">12x</span>
167
- <span class="cline-any cline-yes">12x</span>
168
- <span class="cline-any cline-yes">12x</span>
169
185
  <span class="cline-any cline-neutral">&nbsp;</span>
170
- <span class="cline-any cline-yes">12x</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-yes">16x</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-neutral">&nbsp;</span>
198
+ <span class="cline-any cline-yes">16x</span>
171
199
  <span class="cline-any cline-yes">4x</span>
172
200
  <span class="cline-any cline-neutral">&nbsp;</span>
173
201
  <span class="cline-any cline-yes">4x</span>
@@ -178,7 +206,7 @@
178
206
  <span class="cline-any cline-neutral">&nbsp;</span>
179
207
  <span class="cline-any cline-neutral">&nbsp;</span>
180
208
  <span class="cline-any cline-neutral">&nbsp;</span>
181
- <span class="cline-any cline-yes">12x</span>
209
+ <span class="cline-any cline-yes">16x</span>
182
210
  <span class="cline-any cline-yes">12x</span>
183
211
  <span class="cline-any cline-neutral">&nbsp;</span>
184
212
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -206,8 +234,22 @@
206
234
  <span class="cline-any cline-neutral">&nbsp;</span>
207
235
  <span class="cline-any cline-neutral">&nbsp;</span>
208
236
  <span class="cline-any cline-neutral">&nbsp;</span>
209
- <span class="cline-any cline-yes">12x</span>
210
- <span class="cline-any cline-yes">12x</span>
237
+ <span class="cline-any cline-yes">16x</span>
238
+ <span class="cline-any cline-yes">16x</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-neutral">&nbsp;</span>
242
+ <span class="cline-any cline-neutral">&nbsp;</span>
243
+ <span class="cline-any cline-yes">4x</span>
244
+ <span class="cline-any cline-no">&nbsp;</span>
245
+ <span class="cline-any cline-neutral">&nbsp;</span>
246
+ <span class="cline-any cline-no">&nbsp;</span>
247
+ <span class="cline-any cline-no">&nbsp;</span>
248
+ <span class="cline-any cline-no">&nbsp;</span>
249
+ <span class="cline-any cline-neutral">&nbsp;</span>
250
+ <span class="cline-any cline-neutral">&nbsp;</span>
251
+ <span class="cline-any cline-no">&nbsp;</span>
252
+ <span class="cline-any cline-no">&nbsp;</span>
211
253
  <span class="cline-any cline-neutral">&nbsp;</span>
212
254
  <span class="cline-any cline-neutral">&nbsp;</span>
213
255
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -231,7 +273,7 @@
231
273
  <span class="cline-any cline-neutral">&nbsp;</span>
232
274
  <span class="cline-any cline-neutral">&nbsp;</span>
233
275
  <span class="cline-any cline-neutral">&nbsp;</span>
234
- <span class="cline-any cline-yes">12x</span>
276
+ <span class="cline-any cline-yes">16x</span>
235
277
  <span class="cline-any cline-neutral">&nbsp;</span>
236
278
  <span class="cline-any cline-neutral">&nbsp;</span>
237
279
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -239,16 +281,23 @@
239
281
  &nbsp;
240
282
  import { v4 as uuidv4 } from "uuid";
241
283
  import { MapContext } from "@mapcomponents/react-core";
284
+ import useMapState from "../../hooks/useMapState";
242
285
  &nbsp;
243
286
  const MlLayer = (props) =&gt; {
244
287
  // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
245
288
  const mapContext = useContext(MapContext);
289
+ &nbsp;
290
+ const mapState = useMapState({
291
+ mapId: props.mapId,
292
+ watch: {
293
+ viewport: false,
294
+ layers: true,
295
+ sources: false,
296
+ },
297
+ });
246
298
  const layerInitializedRef = useRef(false);
247
299
  const mapRef = useRef(null);
248
- const componentId = useRef(
249
- (props.layerId ? <span class="branch-0 cbranch-no" title="branch not covered" >props.layerId </span>: "MlLayer-") + uuidv4()
250
- );
251
- const idSuffixRef = useRef(props.idSuffix || new Date().getTime());
300
+ const componentId = useRef((props.layerId ? <span class="branch-0 cbranch-no" title="branch not covered" >props.layerId </span>: "MlLayer-") + uuidv4());
252
301
  const layerId = useRef(props.layerId || componentId.current);
253
302
  const layerPaintConfRef = useRef(undefined);
254
303
  const layerLayoutConfRef = useRef(undefined);
@@ -296,6 +345,20 @@ const MlLayer = (props) =&gt; {
296
345
  if (!mapContext.mapExists(props.mapId) || layerInitializedRef.current) return;
297
346
  // the MapLibre-gl instance (mapContext.map) is accessible here
298
347
  // initialize the layer and add it to the MapLibre-gl instance or do something else with it
348
+ &nbsp;
349
+ //check if insertBeforeLayer exists
350
+ <span class="missing-if-branch" title="if path not taken" >I</span>if (props.insertBeforeLayer) {
351
+ let layerFound = <span class="cstat-no" title="statement not covered" >false;</span>
352
+ &nbsp;
353
+ <span class="cstat-no" title="statement not covered" > mapState?.layers?.forEach(<span class="fstat-no" title="function not covered" >(l</span>ayer) =&gt; {</span>
354
+ <span class="cstat-no" title="statement not covered" > if (layer.id === props.insertBeforeLayer) {</span>
355
+ <span class="cstat-no" title="statement not covered" > layerFound = true;</span>
356
+ }
357
+ });
358
+ <span class="cstat-no" title="statement not covered" > if (!layerFound) {</span>
359
+ <span class="cstat-no" title="statement not covered" > return;</span>
360
+ }
361
+ }
299
362
  &nbsp;
300
363
  mapRef.current = mapContext.getMap(props.mapId);
301
364
  if (mapRef.current) {
@@ -315,7 +378,7 @@ const MlLayer = (props) =&gt; {
315
378
  layerPaintConfRef.current = JSON.stringify(props.options?.paint);
316
379
  layerLayoutConfRef.current = JSON.stringify(props.options?.layout);
317
380
  }
318
- }, [mapContext.mapIds, mapContext, props, layerId]);
381
+ }, [mapContext.mapIds, mapContext, props, mapState.layers]);
319
382
  &nbsp;
320
383
  return &lt;&gt;&lt;/&gt;;
321
384
  };
@@ -327,10 +390,9 @@ export default MlLayer;
327
390
  </div><!-- /wrapper -->
328
391
  <div class='footer quiet pad2 space-top1 center small'>
329
392
  Code coverage generated by
330
- <a href="https://istanbul.js.org/" target="_blank" rel="noopener">istanbul</a>
331
- at Wed Dec 15 2021 17:41:09 GMT+0000 (Coordinated Universal Time)
393
+ <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
394
+ at Thu Jan 13 2022 12:08:19 GMT+0000 (Coordinated Universal Time)
332
395
  </div>
333
- </div>
334
396
  <script src="../../../prettify.js"></script>
335
397
  <script>
336
398
  window.onload = function () {