@mapcomponents/react-maplibre 0.1.22 → 0.1.23

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 (71) hide show
  1. package/coverage/clover.xml +90 -109
  2. package/coverage/coverage-final.json +3 -3
  3. package/coverage/lcov-report/index.html +18 -18
  4. package/coverage/lcov-report/src/components/MapLibreMap/MapLibreMap.js.html +1 -1
  5. package/coverage/lcov-report/src/components/MapLibreMap/index.html +1 -1
  6. package/coverage/lcov-report/src/components/MlCreatePdfButton/MlCreatePdfButton.js.html +1 -1
  7. package/coverage/lcov-report/src/components/MlCreatePdfButton/index.html +1 -1
  8. package/coverage/lcov-report/src/components/MlFeatureEditor/MlFeatureEditor.js.html +1 -1
  9. package/coverage/lcov-report/src/components/MlFeatureEditor/index.html +1 -1
  10. package/coverage/lcov-report/src/components/MlFillExtrusionLayer/MlFillExtrusionLayer.js.html +1 -1
  11. package/coverage/lcov-report/src/components/MlFillExtrusionLayer/index.html +1 -1
  12. package/coverage/lcov-report/src/components/MlFollowGps/MlFollowGps.js.html +1 -1
  13. package/coverage/lcov-report/src/components/MlFollowGps/index.html +1 -1
  14. package/coverage/lcov-report/src/components/MlGPXViewer/MlGPXViewer.js.html +1 -1
  15. package/coverage/lcov-report/src/components/MlGPXViewer/gpxConverter.js.html +1 -1
  16. package/coverage/lcov-report/src/components/MlGPXViewer/index.html +1 -1
  17. package/coverage/lcov-report/src/components/MlGeoJsonLayer/MlGeoJsonLayer.js.html +1 -1
  18. package/coverage/lcov-report/src/components/MlGeoJsonLayer/index.html +1 -1
  19. package/coverage/lcov-report/src/components/MlImageMarkerLayer/MlImageMarkerLayer.js.html +1 -1
  20. package/coverage/lcov-report/src/components/MlImageMarkerLayer/index.html +1 -1
  21. package/coverage/lcov-report/src/components/MlLayer/MlLayer.js.html +1 -1
  22. package/coverage/lcov-report/src/components/MlLayer/index.html +1 -1
  23. package/coverage/lcov-report/src/components/MlLayerMagnify/MlLayerMagnify.js.html +1 -1
  24. package/coverage/lcov-report/src/components/MlLayerMagnify/index.html +1 -1
  25. package/coverage/lcov-report/src/components/MlLayerSwipe/MlLayerSwipe.js.html +1 -1
  26. package/coverage/lcov-report/src/components/MlLayerSwipe/index.html +1 -1
  27. package/coverage/lcov-report/src/components/MlLayerSwitcher/MlLayerSwitcher.js.html +1 -1
  28. package/coverage/lcov-report/src/components/MlLayerSwitcher/components/LayerBox.js.html +1 -1
  29. package/coverage/lcov-report/src/components/MlLayerSwitcher/components/index.html +1 -1
  30. package/coverage/lcov-report/src/components/MlLayerSwitcher/index.html +1 -1
  31. package/coverage/lcov-report/src/components/MlMarker/MlMarker.js.html +1 -1
  32. package/coverage/lcov-report/src/components/MlMarker/index.html +1 -1
  33. package/coverage/lcov-report/src/components/MlNavigationCompass/MlNavigationCompass.js.html +1 -1
  34. package/coverage/lcov-report/src/components/MlNavigationCompass/index.html +1 -1
  35. package/coverage/lcov-report/src/components/MlNavigationTools/MlNavigationTools.js.html +1 -1
  36. package/coverage/lcov-report/src/components/MlNavigationTools/index.html +1 -1
  37. package/coverage/lcov-report/src/components/MlOsmLayer/MlOsmLayer.js.html +1 -1
  38. package/coverage/lcov-report/src/components/MlOsmLayer/index.html +1 -1
  39. package/coverage/lcov-report/src/components/MlScaleReference/MlScaleReference.js.html +1 -1
  40. package/coverage/lcov-report/src/components/MlScaleReference/index.html +1 -1
  41. package/coverage/lcov-report/src/components/MlShareMapState/MlShareMapState.js.html +1 -1
  42. package/coverage/lcov-report/src/components/MlShareMapState/index.html +1 -1
  43. package/coverage/lcov-report/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.js.html +1 -1
  44. package/coverage/lcov-report/src/components/MlSpatialElevationProfile/index.html +1 -1
  45. package/coverage/lcov-report/src/components/MlThreeJsLayer/MlThreeJsLayer.js.html +1 -1
  46. package/coverage/lcov-report/src/components/MlThreeJsLayer/index.html +1 -1
  47. package/coverage/lcov-report/src/components/MlUseMapDebugger/MlUseMapDebugger.js.html +1 -1
  48. package/coverage/lcov-report/src/components/MlUseMapDebugger/index.html +1 -1
  49. package/coverage/lcov-report/src/components/MlVectorTileLayer/MlVectorTileLayer.js.html +74 -194
  50. package/coverage/lcov-report/src/components/MlVectorTileLayer/index.html +17 -17
  51. package/coverage/lcov-report/src/components/MlWmsFeatureInfoPopup/MlWmsFeatureInfoPopup.js.html +1 -1
  52. package/coverage/lcov-report/src/components/MlWmsFeatureInfoPopup/index.html +1 -1
  53. package/coverage/lcov-report/src/components/MlWmsLayer/MlWmsLayer.js.html +1 -1
  54. package/coverage/lcov-report/src/components/MlWmsLayer/index.html +1 -1
  55. package/coverage/lcov-report/src/components/MlWmsLoader/MlWmsLoader.js.html +1 -1
  56. package/coverage/lcov-report/src/components/MlWmsLoader/index.html +1 -1
  57. package/coverage/lcov-report/src/hooks/index.html +1 -1
  58. package/coverage/lcov-report/src/hooks/useMap.js.html +22 -22
  59. package/coverage/lcov-report/src/hooks/useMapState.js.html +34 -34
  60. package/coverage/lcov-report/src/hooks/useWms.js.html +1 -1
  61. package/coverage/lcov-report/src/i18n.js.html +1 -1
  62. package/coverage/lcov-report/src/index.html +1 -1
  63. package/coverage/lcov-report/src/translations/english.js.html +1 -1
  64. package/coverage/lcov-report/src/translations/german.js.html +1 -1
  65. package/coverage/lcov-report/src/translations/index.html +1 -1
  66. package/coverage/lcov.info +132 -167
  67. package/dist/index.esm.js +23 -60
  68. package/dist/index.esm.js.map +1 -1
  69. package/package.json +1 -1
  70. package/src/components/MlVectorTileLayer/MlVectorTileLayer.js +51 -91
  71. package/src/components/MlVectorTileLayer/MlVectorTileLayer.test.js +6 -6
@@ -23,30 +23,30 @@
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">83.92% </span>
26
+ <span class="strong">88.88% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>47/56</span>
28
+ <span class='fraction'>32/36</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
- <span class="strong">57.69% </span>
33
+ <span class="strong">81.25% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>15/26</span>
35
+ <span class='fraction'>13/16</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
40
  <span class="strong">100% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>6/6</span>
42
+ <span class='fraction'>3/3</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">83.01% </span>
47
+ <span class="strong">88.23% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>44/53</span>
49
+ <span class='fraction'>30/34</span>
50
50
  </div>
51
51
 
52
52
 
@@ -187,47 +187,7 @@
187
187
  <a name='L122'></a><a href='#L122'>122</a>
188
188
  <a name='L123'></a><a href='#L123'>123</a>
189
189
  <a name='L124'></a><a href='#L124'>124</a>
190
- <a name='L125'></a><a href='#L125'>125</a>
191
- <a name='L126'></a><a href='#L126'>126</a>
192
- <a name='L127'></a><a href='#L127'>127</a>
193
- <a name='L128'></a><a href='#L128'>128</a>
194
- <a name='L129'></a><a href='#L129'>129</a>
195
- <a name='L130'></a><a href='#L130'>130</a>
196
- <a name='L131'></a><a href='#L131'>131</a>
197
- <a name='L132'></a><a href='#L132'>132</a>
198
- <a name='L133'></a><a href='#L133'>133</a>
199
- <a name='L134'></a><a href='#L134'>134</a>
200
- <a name='L135'></a><a href='#L135'>135</a>
201
- <a name='L136'></a><a href='#L136'>136</a>
202
- <a name='L137'></a><a href='#L137'>137</a>
203
- <a name='L138'></a><a href='#L138'>138</a>
204
- <a name='L139'></a><a href='#L139'>139</a>
205
- <a name='L140'></a><a href='#L140'>140</a>
206
- <a name='L141'></a><a href='#L141'>141</a>
207
- <a name='L142'></a><a href='#L142'>142</a>
208
- <a name='L143'></a><a href='#L143'>143</a>
209
- <a name='L144'></a><a href='#L144'>144</a>
210
- <a name='L145'></a><a href='#L145'>145</a>
211
- <a name='L146'></a><a href='#L146'>146</a>
212
- <a name='L147'></a><a href='#L147'>147</a>
213
- <a name='L148'></a><a href='#L148'>148</a>
214
- <a name='L149'></a><a href='#L149'>149</a>
215
- <a name='L150'></a><a href='#L150'>150</a>
216
- <a name='L151'></a><a href='#L151'>151</a>
217
- <a name='L152'></a><a href='#L152'>152</a>
218
- <a name='L153'></a><a href='#L153'>153</a>
219
- <a name='L154'></a><a href='#L154'>154</a>
220
- <a name='L155'></a><a href='#L155'>155</a>
221
- <a name='L156'></a><a href='#L156'>156</a>
222
- <a name='L157'></a><a href='#L157'>157</a>
223
- <a name='L158'></a><a href='#L158'>158</a>
224
- <a name='L159'></a><a href='#L159'>159</a>
225
- <a name='L160'></a><a href='#L160'>160</a>
226
- <a name='L161'></a><a href='#L161'>161</a>
227
- <a name='L162'></a><a href='#L162'>162</a>
228
- <a name='L163'></a><a href='#L163'>163</a>
229
- <a name='L164'></a><a href='#L164'>164</a>
230
- <a name='L165'></a><a href='#L165'>165</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
190
+ <a name='L125'></a><a href='#L125'>125</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
231
191
  <span class="cline-any cline-neutral">&nbsp;</span>
232
192
  <span class="cline-any cline-neutral">&nbsp;</span>
233
193
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -238,43 +198,26 @@
238
198
  <span class="cline-any cline-neutral">&nbsp;</span>
239
199
  <span class="cline-any cline-neutral">&nbsp;</span>
240
200
  <span class="cline-any cline-yes">1x</span>
241
- <span class="cline-any cline-yes">8x</span>
201
+ <span class="cline-any cline-yes">12x</span>
242
202
  <span class="cline-any cline-neutral">&nbsp;</span>
243
- <span class="cline-any cline-yes">8x</span>
244
- <span class="cline-any cline-yes">8x</span>
245
- <span class="cline-any cline-yes">8x</span>
246
- <span class="cline-any cline-yes">8x</span>
247
- <span class="cline-any cline-yes">8x</span>
248
- <span class="cline-any cline-yes">8x</span>
249
- <span class="cline-any cline-yes">8x</span>
250
- <span class="cline-any cline-yes">8x</span>
203
+ <span class="cline-any cline-yes">12x</span>
204
+ <span class="cline-any cline-yes">12x</span>
205
+ <span class="cline-any cline-yes">12x</span>
206
+ <span class="cline-any cline-yes">12x</span>
207
+ <span class="cline-any cline-yes">12x</span>
251
208
  <span class="cline-any cline-neutral">&nbsp;</span>
209
+ <span class="cline-any cline-yes">12x</span>
252
210
  <span class="cline-any cline-yes">8x</span>
253
- <span class="cline-any cline-yes">2x</span>
254
- <span class="cline-any cline-yes">2x</span>
255
- <span class="cline-any cline-yes">2x</span>
256
- <span class="cline-any cline-yes">2x</span>
257
- <span class="cline-any cline-neutral">&nbsp;</span>
258
- <span class="cline-any cline-neutral">&nbsp;</span>
259
- <span class="cline-any cline-yes">2x</span>
260
- <span class="cline-any cline-yes">2x</span>
261
- <span class="cline-any cline-neutral">&nbsp;</span>
262
211
  <span class="cline-any cline-neutral">&nbsp;</span>
212
+ <span class="cline-any cline-yes">4x</span>
263
213
  <span class="cline-any cline-neutral">&nbsp;</span>
264
214
  <span class="cline-any cline-neutral">&nbsp;</span>
265
- <span class="cline-any cline-yes">8x</span>
266
215
  <span class="cline-any cline-yes">4x</span>
267
216
  <span class="cline-any cline-neutral">&nbsp;</span>
268
217
  <span class="cline-any cline-neutral">&nbsp;</span>
269
- <span class="cline-any cline-yes">8x</span>
270
- <span class="cline-any cline-yes">8x</span>
271
218
  <span class="cline-any cline-neutral">&nbsp;</span>
272
- <span class="cline-any cline-yes">4x</span>
273
- <span class="cline-any cline-yes">4x</span>
274
219
  <span class="cline-any cline-neutral">&nbsp;</span>
275
220
  <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
221
  <span class="cline-any cline-neutral">&nbsp;</span>
279
222
  <span class="cline-any cline-neutral">&nbsp;</span>
280
223
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -286,6 +229,7 @@
286
229
  <span class="cline-any cline-yes">4x</span>
287
230
  <span class="cline-any cline-neutral">&nbsp;</span>
288
231
  <span class="cline-any cline-yes">4x</span>
232
+ <span class="cline-any cline-yes">4x</span>
289
233
  <span class="cline-any cline-neutral">&nbsp;</span>
290
234
  <span class="cline-any cline-neutral">&nbsp;</span>
291
235
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -299,33 +243,20 @@
299
243
  <span class="cline-any cline-neutral">&nbsp;</span>
300
244
  <span class="cline-any cline-neutral">&nbsp;</span>
301
245
  <span class="cline-any cline-neutral">&nbsp;</span>
302
- <span class="cline-any cline-yes">4x</span>
303
- <span class="cline-any cline-yes">4x</span>
304
246
  <span class="cline-any cline-neutral">&nbsp;</span>
305
247
  <span class="cline-any cline-neutral">&nbsp;</span>
306
248
  <span class="cline-any cline-neutral">&nbsp;</span>
307
- <span class="cline-any cline-yes">8x</span>
308
- <span class="cline-any cline-yes">8x</span>
309
- <span class="cline-any cline-neutral">&nbsp;</span>
310
249
  <span class="cline-any cline-neutral">&nbsp;</span>
311
250
  <span class="cline-any cline-yes">4x</span>
312
251
  <span class="cline-any cline-yes">4x</span>
313
252
  <span class="cline-any cline-neutral">&nbsp;</span>
314
- <span class="cline-any cline-yes">4x</span>
315
- <span class="cline-any cline-neutral">&nbsp;</span>
316
- <span class="cline-any cline-yes">4x</span>
317
- <span class="cline-any cline-no">&nbsp;</span>
318
- <span class="cline-any cline-no">&nbsp;</span>
319
- <span class="cline-any cline-neutral">&nbsp;</span>
320
- <span class="cline-any cline-neutral">&nbsp;</span>
321
- <span class="cline-any cline-neutral">&nbsp;</span>
322
- <span class="cline-any cline-neutral">&nbsp;</span>
323
- <span class="cline-any cline-neutral">&nbsp;</span>
324
253
  <span class="cline-any cline-neutral">&nbsp;</span>
325
254
  <span class="cline-any cline-neutral">&nbsp;</span>
255
+ <span class="cline-any cline-yes">12x</span>
256
+ <span class="cline-any cline-yes">8x</span>
326
257
  <span class="cline-any cline-neutral">&nbsp;</span>
327
258
  <span class="cline-any cline-yes">4x</span>
328
- <span class="cline-any cline-neutral">&nbsp;</span>
259
+ <span class="cline-any cline-yes">4x</span>
329
260
  <span class="cline-any cline-neutral">&nbsp;</span>
330
261
  <span class="cline-any cline-yes">4x</span>
331
262
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -338,33 +269,26 @@
338
269
  <span class="cline-any cline-neutral">&nbsp;</span>
339
270
  <span class="cline-any cline-neutral">&nbsp;</span>
340
271
  <span class="cline-any cline-neutral">&nbsp;</span>
341
- <span class="cline-any cline-neutral">&nbsp;</span>
342
- <span class="cline-any cline-neutral">&nbsp;</span>
343
272
  <span class="cline-any cline-yes">4x</span>
344
273
  <span class="cline-any cline-neutral">&nbsp;</span>
345
274
  <span class="cline-any cline-neutral">&nbsp;</span>
346
- <span class="cline-any cline-neutral">&nbsp;</span>
347
- <span class="cline-any cline-neutral">&nbsp;</span>
348
- <span class="cline-any cline-yes">8x</span>
349
275
  <span class="cline-any cline-yes">4x</span>
350
276
  <span class="cline-any cline-neutral">&nbsp;</span>
351
- <span class="cline-any cline-no">&nbsp;</span>
352
- <span class="cline-any cline-no">&nbsp;</span>
353
- <span class="cline-any cline-neutral">&nbsp;</span>
277
+ <span class="cline-any cline-yes">4x</span>
354
278
  <span class="cline-any cline-no">&nbsp;</span>
355
279
  <span class="cline-any cline-no">&nbsp;</span>
356
280
  <span class="cline-any cline-neutral">&nbsp;</span>
357
281
  <span class="cline-any cline-neutral">&nbsp;</span>
358
282
  <span class="cline-any cline-neutral">&nbsp;</span>
359
- <span class="cline-any cline-no">&nbsp;</span>
360
283
  <span class="cline-any cline-neutral">&nbsp;</span>
361
284
  <span class="cline-any cline-neutral">&nbsp;</span>
362
285
  <span class="cline-any cline-neutral">&nbsp;</span>
286
+ <span class="cline-any cline-yes">4x</span>
363
287
  <span class="cline-any cline-neutral">&nbsp;</span>
364
288
  <span class="cline-any cline-neutral">&nbsp;</span>
365
289
  <span class="cline-any cline-neutral">&nbsp;</span>
366
290
  <span class="cline-any cline-neutral">&nbsp;</span>
367
- <span class="cline-any cline-yes">8x</span>
291
+ <span class="cline-any cline-yes">12x</span>
368
292
  <span class="cline-any cline-neutral">&nbsp;</span>
369
293
  <span class="cline-any cline-neutral">&nbsp;</span>
370
294
  <span class="cline-any cline-yes">1x</span>
@@ -387,12 +311,8 @@
387
311
  <span class="cline-any cline-neutral">&nbsp;</span>
388
312
  <span class="cline-any cline-neutral">&nbsp;</span>
389
313
  <span class="cline-any cline-neutral">&nbsp;</span>
390
- <span class="cline-any cline-neutral">&nbsp;</span>
391
- <span class="cline-any cline-neutral">&nbsp;</span>
392
- <span class="cline-any cline-neutral">&nbsp;</span>
393
- <span class="cline-any cline-neutral">&nbsp;</span>
394
- <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useContext, useRef, useEffect } from "react";
395
- import { MapContext } from "@mapcomponents/react-core";
314
+ <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useRef, useEffect } from "react";
315
+ import useMap from "../../hooks/useMap";
396
316
  import PropTypes from "prop-types";
397
317
  &nbsp;
398
318
  /**
@@ -402,90 +322,75 @@ import PropTypes from "prop-types";
402
322
  * @component
403
323
  */
404
324
  const MlVectorTileLayer = (props) =&gt; {
405
- const mapContext = useContext(MapContext);
325
+ const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
406
326
  &nbsp;
407
- const layerName = "vector-tile-layer-";
408
- const sourceName = "vector-tile-source-";
409
- const idSuffixRef = useRef(new Date().getTime());
410
327
  const layerIdsRef = useRef({});
328
+ const layerId = useRef(props.layerId || "MlVectorTileLayer-" + mapHook.componentId);
411
329
  const layerPaintConfsRef = useRef({});
412
330
  const layerLayoutConfsRef = useRef({});
413
331
  const initializedRef = useRef(false);
414
- const mapRef = useRef(null);
415
- &nbsp;
416
- const cleanup = () =&gt; {
417
- if (mapRef.current &amp;&amp; mapRef.current.style) {
418
- for (let key in layerIdsRef.current) {
419
- if (mapRef.current.getLayer(layerIdsRef.current[key])) {
420
- mapRef.current.removeLayer(layerIdsRef.current[key]);
421
- }
422
- }
423
- if (mapRef.current.getSource(sourceName + idSuffixRef.current)) {
424
- mapRef.current.removeSource(sourceName + idSuffixRef.current);
425
- }
426
- }
427
- };
428
- &nbsp;
429
- useEffect(() =&gt; {
430
- return cleanup;
431
- }, []);
432
332
  &nbsp;
433
333
  useEffect(() =&gt; {
434
- if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
334
+ if (!mapHook.map || initializedRef.current) return;
435
335
  &nbsp;
436
336
  initializedRef.current = true;
437
- mapRef.current = mapContext.getMap(props.mapId);
438
337
  &nbsp;
439
338
  // Add the new layer to the openlayers instance once it is available
440
- mapRef.current.addSource(sourceName + idSuffixRef.current, {
441
- type: "vector",
442
- tiles: [props.url],
443
- tileSize: 512,
444
- attribution: "",
445
- ...props.sourceOptions,
446
- });
339
+ mapHook.map.addSource(
340
+ layerId,
341
+ {
342
+ type: "vector",
343
+ tiles: [props.url],
344
+ tileSize: 512,
345
+ attribution: "",
346
+ ...props.sourceOptions,
347
+ },
348
+ mapHook.componentId
349
+ );
447
350
  &nbsp;
448
351
  for (let key in props.layers) {
449
- let layerId = layerName + "_" + key + "_" + idSuffixRef.current;
450
- layerIdsRef.current[key] = layerId;
352
+ let _layerId = layerId.current + "_" + key;
353
+ layerIdsRef.current[key] = _layerId;
451
354
  &nbsp;
452
- mapRef.current.addLayer({
453
- id: layerId,
454
- source: sourceName + idSuffixRef.current,
455
- type: "line",
456
- minzoom: 0,
457
- maxzoom: 22,
458
- layout: {},
459
- paint: {
460
- "line-opacity": 0.5,
461
- "line-color": "rgb(80, 80, 80)",
462
- "line-width": 2,
355
+ console.log(_layerId);
356
+ mapHook.map.addLayer(
357
+ {
358
+ id: _layerId,
359
+ source: layerId.current,
360
+ type: "line",
361
+ minzoom: 0,
362
+ maxzoom: 22,
363
+ layout: {},
364
+ paint: {
365
+ "line-opacity": 0.5,
366
+ "line-color": "rgb(80, 80, 80)",
367
+ "line-width": 2,
368
+ },
369
+ ...props.layers[key],
463
370
  },
464
- ...props.layers[key],
465
- });
371
+ props.insertBeforeLayer,
372
+ mapHook.componentId
373
+ );
466
374
  layerPaintConfsRef.current[key] = JSON.stringify(props.layers[key].paint);
467
375
  layerLayoutConfsRef.current[key] = JSON.stringify(props.layers[key].layout);
468
376
  }
469
- }, [mapContext.mapIds, props, mapContext]);
377
+ }, [mapHook.map, props]);
470
378
  &nbsp;
471
379
  useEffect(() =&gt; {
472
- if (!mapRef.current) return;
473
- // the MapLibre-gl instance (mapContext.map) is accessible here
380
+ if (!mapHook.map || !initializedRef.current) return;
474
381
  // initialize the layer and add it to the MapLibre-gl instance or do something else with it
475
382
  for (var key in props.layers) {
476
- if (mapRef.current.getLayer(layerIdsRef.current[key])) {
383
+ if (mapHook.map.getLayer(layerIdsRef.current[key])) {
477
384
  // update changed paint property
478
385
  let layerPaintConfString = JSON.stringify(props.layers[key].paint);
479
386
  &nbsp;
480
387
  <span class="missing-if-branch" title="if path not taken" >I</span>if (layerPaintConfString !== layerPaintConfsRef.current[key]) {
481
388
  <span class="cstat-no" title="statement not covered" > for (let paintKey in props.layers[key].paint) {</span>
482
- <span class="cstat-no" title="statement not covered" > mapContext</span>
483
- .getMap(props.mapId)
484
- .setPaintProperty(
485
- layerIdsRef.current[key],
486
- paintKey,
487
- props.layers[key].paint[paintKey]
488
- );
389
+ <span class="cstat-no" title="statement not covered" > mapHook.map.setPaintProperty(</span>
390
+ layerIdsRef.current[key],
391
+ paintKey,
392
+ props.layers[key].paint[paintKey]
393
+ );
489
394
  }
490
395
  }
491
396
  layerPaintConfsRef.current[key] = layerPaintConfString;
@@ -495,38 +400,17 @@ const MlVectorTileLayer = (props) =&gt; {
495
400
  &nbsp;
496
401
  <span class="missing-if-branch" title="if path not taken" >I</span>if (layerLayoutConfString !== layerLayoutConfsRef.current[key]) {
497
402
  <span class="cstat-no" title="statement not covered" > for (let layoutKey in props.layers[key].layout) {</span>
498
- <span class="cstat-no" title="statement not covered" > mapContext</span>
499
- .getMap(props.mapId)
500
- .setLayoutProperty(
501
- layerIdsRef.current[key],
502
- layoutKey,
503
- props.layers[key].layout[layoutKey]
504
- );
403
+ <span class="cstat-no" title="statement not covered" > mapHook.map.setLayoutProperty(</span>
404
+ layerIdsRef.current[key],
405
+ layoutKey,
406
+ props.layers[key].layout[layoutKey]
407
+ );
505
408
  }
506
409
  }
507
410
  layerLayoutConfsRef.current[key] = layerLayoutConfString;
508
411
  }
509
412
  }
510
- }, [props.layers, props, mapContext]);
511
- &nbsp;
512
- useEffect(() =&gt; {
513
- if (!mapRef.current) return;
514
- &nbsp;
515
- <span class="cstat-no" title="statement not covered" > for (var key in props.layers) {</span>
516
- <span class="cstat-no" title="statement not covered" > if (mapRef.current.getLayer(layerIdsRef.current[key])) {</span>
517
- // toggle layer visibility by changing the layout object's visibility property
518
- <span class="cstat-no" title="statement not covered" > if (props.visible) {</span>
519
- <span class="cstat-no" title="statement not covered" > mapContext</span>
520
- .getMap(props.mapId)
521
- .setLayoutProperty(layerIdsRef.current[key], "visibility", "visible");
522
- } else {
523
- <span class="cstat-no" title="statement not covered" > mapContext</span>
524
- .getMap(props.mapId)
525
- .setLayoutProperty(layerIdsRef.current[key], "visibility", "none");
526
- }
527
- }
528
- }
529
- }, [props.visible]);
413
+ }, [props.layers, mapHook.map]);
530
414
  &nbsp;
531
415
  return &lt;&gt;&lt;/&gt;;
532
416
  };
@@ -544,10 +428,6 @@ MlVectorTileLayer.propTypes = {
544
428
  * Object that hold layers
545
429
  */
546
430
  layers: PropTypes.object,
547
- /**
548
- * Boolean value to control the visibility of this layer
549
- */
550
- visible: PropTypes.bool,
551
431
  /**
552
432
  * String of the URL of a wms layer
553
433
  */
@@ -562,7 +442,7 @@ export default MlVectorTileLayer;
562
442
  <div class='footer quiet pad2 space-top1 center small'>
563
443
  Code coverage generated by
564
444
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
565
- at Sun Jan 23 2022 11:43:07 GMT+0000 (Coordinated Universal Time)
445
+ at Sun Jan 23 2022 14:13:38 GMT+0000 (Coordinated Universal Time)
566
446
  </div>
567
447
  <script src="../../../prettify.js"></script>
568
448
  <script>
@@ -23,30 +23,30 @@
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">83.92% </span>
26
+ <span class="strong">88.88% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>47/56</span>
28
+ <span class='fraction'>32/36</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
- <span class="strong">57.69% </span>
33
+ <span class="strong">81.25% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>15/26</span>
35
+ <span class='fraction'>13/16</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
40
  <span class="strong">100% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>6/6</span>
42
+ <span class='fraction'>3/3</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">83.01% </span>
47
+ <span class="strong">88.23% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>44/53</span>
49
+ <span class='fraction'>30/34</span>
50
50
  </div>
51
51
 
52
52
 
@@ -80,17 +80,17 @@
80
80
  </thead>
81
81
  <tbody><tr>
82
82
  <td class="file high" data-value="MlVectorTileLayer.js"><a href="MlVectorTileLayer.js.html">MlVectorTileLayer.js</a></td>
83
- <td data-value="83.92" class="pic high">
84
- <div class="chart"><div class="cover-fill" style="width: 83%"></div><div class="cover-empty" style="width: 17%"></div></div>
83
+ <td data-value="88.88" class="pic high">
84
+ <div class="chart"><div class="cover-fill" style="width: 88%"></div><div class="cover-empty" style="width: 12%"></div></div>
85
85
  </td>
86
- <td data-value="83.92" class="pct high">83.92%</td>
87
- <td data-value="56" class="abs high">47/56</td>
88
- <td data-value="57.69" class="pct medium">57.69%</td>
89
- <td data-value="26" class="abs medium">15/26</td>
86
+ <td data-value="88.88" class="pct high">88.88%</td>
87
+ <td data-value="36" class="abs high">32/36</td>
88
+ <td data-value="81.25" class="pct high">81.25%</td>
89
+ <td data-value="16" class="abs high">13/16</td>
90
90
  <td data-value="100" class="pct high">100%</td>
91
- <td data-value="6" class="abs high">6/6</td>
92
- <td data-value="83.01" class="pct high">83.01%</td>
93
- <td data-value="53" class="abs high">44/53</td>
91
+ <td data-value="3" class="abs high">3/3</td>
92
+ <td data-value="88.23" class="pct high">88.23%</td>
93
+ <td data-value="34" class="abs high">30/34</td>
94
94
  </tr>
95
95
 
96
96
  </tbody>
@@ -101,7 +101,7 @@
101
101
  <div class='footer quiet pad2 space-top1 center small'>
102
102
  Code coverage generated by
103
103
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
104
- at Sun Jan 23 2022 11:43:07 GMT+0000 (Coordinated Universal Time)
104
+ at Sun Jan 23 2022 14:13:38 GMT+0000 (Coordinated Universal Time)
105
105
  </div>
106
106
  <script src="../../../prettify.js"></script>
107
107
  <script>
@@ -262,7 +262,7 @@ export default MlWmsFeatureInfoPopup;
262
262
  <div class='footer quiet pad2 space-top1 center small'>
263
263
  Code coverage generated by
264
264
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
265
- at Sun Jan 23 2022 11:43:07 GMT+0000 (Coordinated Universal Time)
265
+ at Sun Jan 23 2022 14:13:38 GMT+0000 (Coordinated Universal Time)
266
266
  </div>
267
267
  <script src="../../../prettify.js"></script>
268
268
  <script>
@@ -101,7 +101,7 @@
101
101
  <div class='footer quiet pad2 space-top1 center small'>
102
102
  Code coverage generated by
103
103
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
104
- at Sun Jan 23 2022 11:43:07 GMT+0000 (Coordinated Universal Time)
104
+ at Sun Jan 23 2022 14:13:38 GMT+0000 (Coordinated Universal Time)
105
105
  </div>
106
106
  <script src="../../../prettify.js"></script>
107
107
  <script>
@@ -568,7 +568,7 @@ export default MlWmsLayer;
568
568
  <div class='footer quiet pad2 space-top1 center small'>
569
569
  Code coverage generated by
570
570
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
571
- at Sun Jan 23 2022 11:43:07 GMT+0000 (Coordinated Universal Time)
571
+ at Sun Jan 23 2022 14:13:38 GMT+0000 (Coordinated Universal Time)
572
572
  </div>
573
573
  <script src="../../../prettify.js"></script>
574
574
  <script>
@@ -101,7 +101,7 @@
101
101
  <div class='footer quiet pad2 space-top1 center small'>
102
102
  Code coverage generated by
103
103
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
104
- at Sun Jan 23 2022 11:43:07 GMT+0000 (Coordinated Universal Time)
104
+ at Sun Jan 23 2022 14:13:38 GMT+0000 (Coordinated Universal Time)
105
105
  </div>
106
106
  <script src="../../../prettify.js"></script>
107
107
  <script>
@@ -964,7 +964,7 @@ export default MlWmsLoader;
964
964
  <div class='footer quiet pad2 space-top1 center small'>
965
965
  Code coverage generated by
966
966
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
967
- at Sun Jan 23 2022 11:43:07 GMT+0000 (Coordinated Universal Time)
967
+ at Sun Jan 23 2022 14:13:38 GMT+0000 (Coordinated Universal Time)
968
968
  </div>
969
969
  <script src="../../../prettify.js"></script>
970
970
  <script>
@@ -101,7 +101,7 @@
101
101
  <div class='footer quiet pad2 space-top1 center small'>
102
102
  Code coverage generated by
103
103
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
104
- at Sun Jan 23 2022 11:43:07 GMT+0000 (Coordinated Universal Time)
104
+ at Sun Jan 23 2022 14:13:38 GMT+0000 (Coordinated Universal Time)
105
105
  </div>
106
106
  <script src="../../../prettify.js"></script>
107
107
  <script>
@@ -131,7 +131,7 @@
131
131
  <div class='footer quiet pad2 space-top1 center small'>
132
132
  Code coverage generated by
133
133
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
134
- at Sun Jan 23 2022 11:43:07 GMT+0000 (Coordinated Universal Time)
134
+ at Sun Jan 23 2022 14:13:38 GMT+0000 (Coordinated Universal Time)
135
135
  </div>
136
136
  <script src="../../prettify.js"></script>
137
137
  <script>