@mapcomponents/react-maplibre 0.1.22 → 0.1.26

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 (77) hide show
  1. package/CHANGELOG.md +48 -8
  2. package/coverage/clover.xml +109 -134
  3. package/coverage/coverage-final.json +6 -6
  4. package/coverage/lcov-report/index.html +27 -27
  5. package/coverage/lcov-report/src/components/MapLibreMap/MapLibreMap.js.html +1 -1
  6. package/coverage/lcov-report/src/components/MapLibreMap/index.html +1 -1
  7. package/coverage/lcov-report/src/components/MlCreatePdfButton/MlCreatePdfButton.js.html +1 -1
  8. package/coverage/lcov-report/src/components/MlCreatePdfButton/index.html +1 -1
  9. package/coverage/lcov-report/src/components/MlFeatureEditor/MlFeatureEditor.js.html +1 -1
  10. package/coverage/lcov-report/src/components/MlFeatureEditor/index.html +1 -1
  11. package/coverage/lcov-report/src/components/MlFillExtrusionLayer/MlFillExtrusionLayer.js.html +1 -1
  12. package/coverage/lcov-report/src/components/MlFillExtrusionLayer/index.html +1 -1
  13. package/coverage/lcov-report/src/components/MlFollowGps/MlFollowGps.js.html +43 -94
  14. package/coverage/lcov-report/src/components/MlFollowGps/index.html +18 -18
  15. package/coverage/lcov-report/src/components/MlGPXViewer/MlGPXViewer.js.html +1 -1
  16. package/coverage/lcov-report/src/components/MlGPXViewer/gpxConverter.js.html +1 -1
  17. package/coverage/lcov-report/src/components/MlGPXViewer/index.html +1 -1
  18. package/coverage/lcov-report/src/components/MlGeoJsonLayer/MlGeoJsonLayer.js.html +1 -1
  19. package/coverage/lcov-report/src/components/MlGeoJsonLayer/index.html +1 -1
  20. package/coverage/lcov-report/src/components/MlImageMarkerLayer/MlImageMarkerLayer.js.html +2 -2
  21. package/coverage/lcov-report/src/components/MlImageMarkerLayer/index.html +1 -1
  22. package/coverage/lcov-report/src/components/MlLayer/MlLayer.js.html +1 -1
  23. package/coverage/lcov-report/src/components/MlLayer/index.html +1 -1
  24. package/coverage/lcov-report/src/components/MlLayerMagnify/MlLayerMagnify.js.html +1 -1
  25. package/coverage/lcov-report/src/components/MlLayerMagnify/index.html +1 -1
  26. package/coverage/lcov-report/src/components/MlLayerSwipe/MlLayerSwipe.js.html +1 -1
  27. package/coverage/lcov-report/src/components/MlLayerSwipe/index.html +1 -1
  28. package/coverage/lcov-report/src/components/MlLayerSwitcher/MlLayerSwitcher.js.html +1 -1
  29. package/coverage/lcov-report/src/components/MlLayerSwitcher/components/LayerBox.js.html +1 -1
  30. package/coverage/lcov-report/src/components/MlLayerSwitcher/components/index.html +1 -1
  31. package/coverage/lcov-report/src/components/MlLayerSwitcher/index.html +1 -1
  32. package/coverage/lcov-report/src/components/MlMarker/MlMarker.js.html +1 -1
  33. package/coverage/lcov-report/src/components/MlMarker/index.html +1 -1
  34. package/coverage/lcov-report/src/components/MlNavigationCompass/MlNavigationCompass.js.html +1 -1
  35. package/coverage/lcov-report/src/components/MlNavigationCompass/index.html +1 -1
  36. package/coverage/lcov-report/src/components/MlNavigationTools/MlNavigationTools.js.html +1 -1
  37. package/coverage/lcov-report/src/components/MlNavigationTools/index.html +1 -1
  38. package/coverage/lcov-report/src/components/MlOsmLayer/MlOsmLayer.js.html +1 -1
  39. package/coverage/lcov-report/src/components/MlOsmLayer/index.html +1 -1
  40. package/coverage/lcov-report/src/components/MlScaleReference/MlScaleReference.js.html +1 -1
  41. package/coverage/lcov-report/src/components/MlScaleReference/index.html +1 -1
  42. package/coverage/lcov-report/src/components/MlShareMapState/MlShareMapState.js.html +1 -1
  43. package/coverage/lcov-report/src/components/MlShareMapState/index.html +1 -1
  44. package/coverage/lcov-report/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.js.html +1 -1
  45. package/coverage/lcov-report/src/components/MlSpatialElevationProfile/index.html +1 -1
  46. package/coverage/lcov-report/src/components/MlThreeJsLayer/MlThreeJsLayer.js.html +1 -1
  47. package/coverage/lcov-report/src/components/MlThreeJsLayer/index.html +1 -1
  48. package/coverage/lcov-report/src/components/MlUseMapDebugger/MlUseMapDebugger.js.html +1 -1
  49. package/coverage/lcov-report/src/components/MlUseMapDebugger/index.html +1 -1
  50. package/coverage/lcov-report/src/components/MlVectorTileLayer/MlVectorTileLayer.js.html +72 -195
  51. package/coverage/lcov-report/src/components/MlVectorTileLayer/index.html +17 -17
  52. package/coverage/lcov-report/src/components/MlWmsFeatureInfoPopup/MlWmsFeatureInfoPopup.js.html +1 -1
  53. package/coverage/lcov-report/src/components/MlWmsFeatureInfoPopup/index.html +1 -1
  54. package/coverage/lcov-report/src/components/MlWmsLayer/MlWmsLayer.js.html +1 -1
  55. package/coverage/lcov-report/src/components/MlWmsLayer/index.html +1 -1
  56. package/coverage/lcov-report/src/components/MlWmsLoader/MlWmsLoader.js.html +1 -1
  57. package/coverage/lcov-report/src/components/MlWmsLoader/index.html +1 -1
  58. package/coverage/lcov-report/src/hooks/index.html +1 -1
  59. package/coverage/lcov-report/src/hooks/useMap.js.html +22 -22
  60. package/coverage/lcov-report/src/hooks/useMapState.js.html +34 -34
  61. package/coverage/lcov-report/src/hooks/useWms.js.html +2 -2
  62. package/coverage/lcov-report/src/i18n.js.html +1 -1
  63. package/coverage/lcov-report/src/index.html +1 -1
  64. package/coverage/lcov-report/src/translations/english.js.html +1 -1
  65. package/coverage/lcov-report/src/translations/german.js.html +1 -1
  66. package/coverage/lcov-report/src/translations/index.html +1 -1
  67. package/coverage/lcov.info +178 -225
  68. package/dist/index.esm.js +108 -160
  69. package/dist/index.esm.js.map +1 -1
  70. package/package.json +1 -1
  71. package/src/components/MlFollowGps/MlFollowGps.js +29 -46
  72. package/src/components/MlFollowGps/MlFollowGps.test.js +1 -1
  73. package/src/components/MlVectorTileLayer/MlVectorTileLayer.js +50 -91
  74. package/src/components/MlVectorTileLayer/MlVectorTileLayer.test.js +6 -6
  75. package/src/hooks/useWms.js +1 -1
  76. package/dist/b556faa3bc6829d2.png +0 -0
  77. package/src/components/MlFollowGps/assets/marker.png +0 -0
@@ -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.57% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>47/56</span>
28
+ <span class='fraction'>31/35</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">87.87% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>44/53</span>
49
+ <span class='fraction'>29/33</span>
50
50
  </div>
51
51
 
52
52
 
@@ -186,48 +186,7 @@
186
186
  <a name='L121'></a><a href='#L121'>121</a>
187
187
  <a name='L122'></a><a href='#L122'>122</a>
188
188
  <a name='L123'></a><a href='#L123'>123</a>
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>
189
+ <a name='L124'></a><a href='#L124'>124</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
231
190
  <span class="cline-any cline-neutral">&nbsp;</span>
232
191
  <span class="cline-any cline-neutral">&nbsp;</span>
233
192
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -238,43 +197,26 @@
238
197
  <span class="cline-any cline-neutral">&nbsp;</span>
239
198
  <span class="cline-any cline-neutral">&nbsp;</span>
240
199
  <span class="cline-any cline-yes">1x</span>
241
- <span class="cline-any cline-yes">8x</span>
200
+ <span class="cline-any cline-yes">12x</span>
242
201
  <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>
202
+ <span class="cline-any cline-yes">12x</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>
251
207
  <span class="cline-any cline-neutral">&nbsp;</span>
208
+ <span class="cline-any cline-yes">12x</span>
252
209
  <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
210
  <span class="cline-any cline-neutral">&nbsp;</span>
211
+ <span class="cline-any cline-yes">4x</span>
263
212
  <span class="cline-any cline-neutral">&nbsp;</span>
264
213
  <span class="cline-any cline-neutral">&nbsp;</span>
265
- <span class="cline-any cline-yes">8x</span>
266
214
  <span class="cline-any cline-yes">4x</span>
267
215
  <span class="cline-any cline-neutral">&nbsp;</span>
268
216
  <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
217
  <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
218
  <span class="cline-any cline-neutral">&nbsp;</span>
275
219
  <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
220
  <span class="cline-any cline-neutral">&nbsp;</span>
279
221
  <span class="cline-any cline-neutral">&nbsp;</span>
280
222
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -299,33 +241,20 @@
299
241
  <span class="cline-any cline-neutral">&nbsp;</span>
300
242
  <span class="cline-any cline-neutral">&nbsp;</span>
301
243
  <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
244
  <span class="cline-any cline-neutral">&nbsp;</span>
305
245
  <span class="cline-any cline-neutral">&nbsp;</span>
306
246
  <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
247
  <span class="cline-any cline-neutral">&nbsp;</span>
311
248
  <span class="cline-any cline-yes">4x</span>
312
249
  <span class="cline-any cline-yes">4x</span>
313
250
  <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
251
  <span class="cline-any cline-neutral">&nbsp;</span>
325
252
  <span class="cline-any cline-neutral">&nbsp;</span>
253
+ <span class="cline-any cline-yes">12x</span>
254
+ <span class="cline-any cline-yes">8x</span>
326
255
  <span class="cline-any cline-neutral">&nbsp;</span>
327
256
  <span class="cline-any cline-yes">4x</span>
328
- <span class="cline-any cline-neutral">&nbsp;</span>
257
+ <span class="cline-any cline-yes">4x</span>
329
258
  <span class="cline-any cline-neutral">&nbsp;</span>
330
259
  <span class="cline-any cline-yes">4x</span>
331
260
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -338,33 +267,26 @@
338
267
  <span class="cline-any cline-neutral">&nbsp;</span>
339
268
  <span class="cline-any cline-neutral">&nbsp;</span>
340
269
  <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
270
  <span class="cline-any cline-yes">4x</span>
344
271
  <span class="cline-any cline-neutral">&nbsp;</span>
345
272
  <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
273
  <span class="cline-any cline-yes">4x</span>
350
274
  <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>
275
+ <span class="cline-any cline-yes">4x</span>
354
276
  <span class="cline-any cline-no">&nbsp;</span>
355
277
  <span class="cline-any cline-no">&nbsp;</span>
356
278
  <span class="cline-any cline-neutral">&nbsp;</span>
357
279
  <span class="cline-any cline-neutral">&nbsp;</span>
358
280
  <span class="cline-any cline-neutral">&nbsp;</span>
359
- <span class="cline-any cline-no">&nbsp;</span>
360
281
  <span class="cline-any cline-neutral">&nbsp;</span>
361
282
  <span class="cline-any cline-neutral">&nbsp;</span>
362
283
  <span class="cline-any cline-neutral">&nbsp;</span>
284
+ <span class="cline-any cline-yes">4x</span>
363
285
  <span class="cline-any cline-neutral">&nbsp;</span>
364
286
  <span class="cline-any cline-neutral">&nbsp;</span>
365
287
  <span class="cline-any cline-neutral">&nbsp;</span>
366
288
  <span class="cline-any cline-neutral">&nbsp;</span>
367
- <span class="cline-any cline-yes">8x</span>
289
+ <span class="cline-any cline-yes">12x</span>
368
290
  <span class="cline-any cline-neutral">&nbsp;</span>
369
291
  <span class="cline-any cline-neutral">&nbsp;</span>
370
292
  <span class="cline-any cline-yes">1x</span>
@@ -387,12 +309,8 @@
387
309
  <span class="cline-any cline-neutral">&nbsp;</span>
388
310
  <span class="cline-any cline-neutral">&nbsp;</span>
389
311
  <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";
312
+ <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useRef, useEffect } from "react";
313
+ import useMap from "../../hooks/useMap";
396
314
  import PropTypes from "prop-types";
397
315
  &nbsp;
398
316
  /**
@@ -402,90 +320,74 @@ import PropTypes from "prop-types";
402
320
  * @component
403
321
  */
404
322
  const MlVectorTileLayer = (props) =&gt; {
405
- const mapContext = useContext(MapContext);
323
+ const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
406
324
  &nbsp;
407
- const layerName = "vector-tile-layer-";
408
- const sourceName = "vector-tile-source-";
409
- const idSuffixRef = useRef(new Date().getTime());
410
325
  const layerIdsRef = useRef({});
326
+ const layerId = useRef(props.layerId || "MlVectorTileLayer-" + mapHook.componentId);
411
327
  const layerPaintConfsRef = useRef({});
412
328
  const layerLayoutConfsRef = useRef({});
413
329
  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
330
  &nbsp;
433
331
  useEffect(() =&gt; {
434
- if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
332
+ if (!mapHook.map || initializedRef.current) return;
435
333
  &nbsp;
436
334
  initializedRef.current = true;
437
- mapRef.current = mapContext.getMap(props.mapId);
438
335
  &nbsp;
439
336
  // 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
- });
337
+ mapHook.map.addSource(
338
+ layerId.current,
339
+ {
340
+ type: "vector",
341
+ tiles: [props.url],
342
+ tileSize: 512,
343
+ attribution: "",
344
+ ...props.sourceOptions,
345
+ },
346
+ mapHook.componentId
347
+ );
447
348
  &nbsp;
448
349
  for (let key in props.layers) {
449
- let layerId = layerName + "_" + key + "_" + idSuffixRef.current;
450
- layerIdsRef.current[key] = layerId;
350
+ let _layerId = layerId.current + "_" + key;
351
+ layerIdsRef.current[key] = _layerId;
451
352
  &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,
353
+ mapHook.map.addLayer(
354
+ {
355
+ id: _layerId,
356
+ source: layerId.current,
357
+ type: "line",
358
+ minzoom: 0,
359
+ maxzoom: 22,
360
+ layout: {},
361
+ paint: {
362
+ "line-opacity": 0.5,
363
+ "line-color": "rgb(80, 80, 80)",
364
+ "line-width": 2,
365
+ },
366
+ ...props.layers[key],
463
367
  },
464
- ...props.layers[key],
465
- });
368
+ props.insertBeforeLayer,
369
+ mapHook.componentId
370
+ );
466
371
  layerPaintConfsRef.current[key] = JSON.stringify(props.layers[key].paint);
467
372
  layerLayoutConfsRef.current[key] = JSON.stringify(props.layers[key].layout);
468
373
  }
469
- }, [mapContext.mapIds, props, mapContext]);
374
+ }, [mapHook.map, props]);
470
375
  &nbsp;
471
376
  useEffect(() =&gt; {
472
- if (!mapRef.current) return;
473
- // the MapLibre-gl instance (mapContext.map) is accessible here
377
+ if (!mapHook.map || !initializedRef.current) return;
474
378
  // initialize the layer and add it to the MapLibre-gl instance or do something else with it
475
379
  for (var key in props.layers) {
476
- if (mapRef.current.getLayer(layerIdsRef.current[key])) {
380
+ if (mapHook.map.getLayer(layerIdsRef.current[key])) {
477
381
  // update changed paint property
478
382
  let layerPaintConfString = JSON.stringify(props.layers[key].paint);
479
383
  &nbsp;
480
384
  <span class="missing-if-branch" title="if path not taken" >I</span>if (layerPaintConfString !== layerPaintConfsRef.current[key]) {
481
385
  <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
- );
386
+ <span class="cstat-no" title="statement not covered" > mapHook.map.setPaintProperty(</span>
387
+ layerIdsRef.current[key],
388
+ paintKey,
389
+ props.layers[key].paint[paintKey]
390
+ );
489
391
  }
490
392
  }
491
393
  layerPaintConfsRef.current[key] = layerPaintConfString;
@@ -495,38 +397,17 @@ const MlVectorTileLayer = (props) =&gt; {
495
397
  &nbsp;
496
398
  <span class="missing-if-branch" title="if path not taken" >I</span>if (layerLayoutConfString !== layerLayoutConfsRef.current[key]) {
497
399
  <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
- );
400
+ <span class="cstat-no" title="statement not covered" > mapHook.map.setLayoutProperty(</span>
401
+ layerIdsRef.current[key],
402
+ layoutKey,
403
+ props.layers[key].layout[layoutKey]
404
+ );
505
405
  }
506
406
  }
507
407
  layerLayoutConfsRef.current[key] = layerLayoutConfString;
508
408
  }
509
409
  }
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]);
410
+ }, [props.layers, mapHook.map]);
530
411
  &nbsp;
531
412
  return &lt;&gt;&lt;/&gt;;
532
413
  };
@@ -544,10 +425,6 @@ MlVectorTileLayer.propTypes = {
544
425
  * Object that hold layers
545
426
  */
546
427
  layers: PropTypes.object,
547
- /**
548
- * Boolean value to control the visibility of this layer
549
- */
550
- visible: PropTypes.bool,
551
428
  /**
552
429
  * String of the URL of a wms layer
553
430
  */
@@ -562,7 +439,7 @@ export default MlVectorTileLayer;
562
439
  <div class='footer quiet pad2 space-top1 center small'>
563
440
  Code coverage generated by
564
441
  <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)
442
+ at Wed Feb 02 2022 11:57:29 GMT+0000 (Coordinated Universal Time)
566
443
  </div>
567
444
  <script src="../../../prettify.js"></script>
568
445
  <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.57% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>47/56</span>
28
+ <span class='fraction'>31/35</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">87.87% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>44/53</span>
49
+ <span class='fraction'>29/33</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.57" 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.57" class="pct high">88.57%</td>
87
+ <td data-value="35" class="abs high">31/35</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="87.87" class="pct high">87.87%</td>
93
+ <td data-value="33" class="abs high">29/33</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 Wed Feb 02 2022 11:57:29 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 Wed Feb 02 2022 11:57:29 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 Wed Feb 02 2022 11:57:29 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 Wed Feb 02 2022 11:57:29 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 Wed Feb 02 2022 11:57:29 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 Wed Feb 02 2022 11:57:29 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 Wed Feb 02 2022 11:57:29 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 Wed Feb 02 2022 11:57:29 GMT+0000 (Coordinated Universal Time)
135
135
  </div>
136
136
  <script src="../../prettify.js"></script>
137
137
  <script>