@mapcomponents/react-maplibre 0.1.16 → 0.1.17

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 (90) hide show
  1. package/coverage/clover.xml +257 -284
  2. package/coverage/coverage-final.json +10 -10
  3. package/coverage/lcov-report/index.html +44 -45
  4. package/coverage/lcov-report/src/components/MapLibreMap/MapLibreMap.js.html +2 -3
  5. package/coverage/lcov-report/src/components/MapLibreMap/index.html +2 -3
  6. package/coverage/lcov-report/src/components/MlCreatePdfButton/MlCreatePdfButton.js.html +2 -3
  7. package/coverage/lcov-report/src/components/MlCreatePdfButton/index.html +2 -3
  8. package/coverage/lcov-report/src/components/MlFeatureEditor/MlFeatureEditor.js.html +2 -3
  9. package/coverage/lcov-report/src/components/MlFeatureEditor/index.html +2 -3
  10. package/coverage/lcov-report/src/components/MlFillExtrusionLayer/MlFillExtrusionLayer.js.html +2 -3
  11. package/coverage/lcov-report/src/components/MlFillExtrusionLayer/index.html +2 -3
  12. package/coverage/lcov-report/src/components/MlFollowGps/MlFollowGps.js.html +2 -3
  13. package/coverage/lcov-report/src/components/MlFollowGps/index.html +2 -3
  14. package/coverage/lcov-report/src/components/MlGPXViewer/MlGPXViewer.js.html +2 -3
  15. package/coverage/lcov-report/src/components/MlGPXViewer/gpxConverter.js.html +2 -3
  16. package/coverage/lcov-report/src/components/MlGPXViewer/index.html +2 -3
  17. package/coverage/lcov-report/src/components/MlGeoJsonLayer/MlGeoJsonLayer.js.html +123 -181
  18. package/coverage/lcov-report/src/components/MlGeoJsonLayer/index.html +20 -21
  19. package/coverage/lcov-report/src/components/MlImageMarkerLayer/MlImageMarkerLayer.js.html +2 -3
  20. package/coverage/lcov-report/src/components/MlImageMarkerLayer/index.html +2 -3
  21. package/coverage/lcov-report/src/components/MlLayer/MlLayer.js.html +9 -13
  22. package/coverage/lcov-report/src/components/MlLayer/index.html +16 -17
  23. package/coverage/lcov-report/src/components/MlLayerMagnify/MlLayerMagnify.js.html +2 -3
  24. package/coverage/lcov-report/src/components/MlLayerMagnify/index.html +2 -3
  25. package/coverage/lcov-report/src/components/MlLayerSwipe/MlLayerSwipe.js.html +2 -3
  26. package/coverage/lcov-report/src/components/MlLayerSwipe/index.html +2 -3
  27. package/coverage/lcov-report/src/components/MlLayerSwitcher/MlLayerSwitcher.js.html +3 -10
  28. package/coverage/lcov-report/src/components/MlLayerSwitcher/components/LayerBox.js.html +9 -82
  29. package/coverage/lcov-report/src/components/MlLayerSwitcher/components/index.html +10 -11
  30. package/coverage/lcov-report/src/components/MlLayerSwitcher/index.html +2 -3
  31. package/coverage/lcov-report/src/components/MlMarker/MlMarker.js.html +6 -7
  32. package/coverage/lcov-report/src/components/MlMarker/index.html +6 -7
  33. package/coverage/lcov-report/src/components/MlNavigationCompass/MlNavigationCompass.js.html +2 -3
  34. package/coverage/lcov-report/src/components/MlNavigationCompass/index.html +2 -3
  35. package/coverage/lcov-report/src/components/MlNavigationTools/MlNavigationTools.js.html +2 -3
  36. package/coverage/lcov-report/src/components/MlNavigationTools/index.html +2 -3
  37. package/coverage/lcov-report/src/components/MlOsmLayer/MlOsmLayer.js.html +2 -3
  38. package/coverage/lcov-report/src/components/MlOsmLayer/index.html +2 -3
  39. package/coverage/lcov-report/src/components/MlScaleReference/MlScaleReference.js.html +2 -3
  40. package/coverage/lcov-report/src/components/MlScaleReference/index.html +2 -3
  41. package/coverage/lcov-report/src/components/MlShareMapState/MlShareMapState.js.html +2 -3
  42. package/coverage/lcov-report/src/components/MlShareMapState/index.html +2 -3
  43. package/coverage/lcov-report/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.js.html +2 -3
  44. package/coverage/lcov-report/src/components/MlSpatialElevationProfile/index.html +2 -3
  45. package/coverage/lcov-report/src/components/MlThreeJsLayer/MlThreeJsLayer.js.html +2 -3
  46. package/coverage/lcov-report/src/components/MlThreeJsLayer/index.html +2 -3
  47. package/coverage/lcov-report/src/components/MlUseMapDebugger/MlUseMapDebugger.js.html +6 -25
  48. package/coverage/lcov-report/src/components/MlUseMapDebugger/index.html +6 -7
  49. package/coverage/lcov-report/src/components/MlVectorTileLayer/MlVectorTileLayer.js.html +2 -3
  50. package/coverage/lcov-report/src/components/MlVectorTileLayer/index.html +2 -3
  51. package/coverage/lcov-report/src/components/MlWmsFeatureInfoPopup/MlWmsFeatureInfoPopup.js.html +2 -3
  52. package/coverage/lcov-report/src/components/MlWmsFeatureInfoPopup/index.html +2 -3
  53. package/coverage/lcov-report/src/components/MlWmsLayer/MlWmsLayer.js.html +2 -3
  54. package/coverage/lcov-report/src/components/MlWmsLayer/index.html +2 -3
  55. package/coverage/lcov-report/src/components/MlWmsLoader/MlWmsLoader.js.html +6 -19
  56. package/coverage/lcov-report/src/components/MlWmsLoader/index.html +8 -9
  57. package/coverage/lcov-report/src/hooks/index.html +14 -15
  58. package/coverage/lcov-report/src/hooks/useMap.js.html +23 -24
  59. package/coverage/lcov-report/src/hooks/useMapState.js.html +7 -50
  60. package/coverage/lcov-report/src/hooks/useWms.js.html +9 -22
  61. package/coverage/lcov-report/src/i18n.js.html +2 -3
  62. package/coverage/lcov-report/src/index.html +2 -3
  63. package/coverage/lcov-report/src/translations/english.js.html +2 -3
  64. package/coverage/lcov-report/src/translations/german.js.html +2 -3
  65. package/coverage/lcov-report/src/translations/index.html +2 -3
  66. package/coverage/lcov.info +487 -524
  67. package/dist/index.esm.js +137 -148
  68. package/dist/index.esm.js.map +1 -1
  69. package/package.json +2 -2
  70. package/src/components/MapLibreMap/lib/MapLibreGlWrapper.js +3 -2
  71. package/src/components/MlComponentTemplate/MlComponentTemplate.js +3 -3
  72. package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.js +90 -109
  73. package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.stories.js +20 -6
  74. package/src/components/MlGeoJsonLayer/assets/sample_polygon_1.json +33 -0
  75. package/src/components/MlGeoJsonLayer/util/getDefaultLayerTypeByGeometry.js +25 -0
  76. package/src/components/MlGeoJsonLayer/util/getDefaultPaintPropsByType.js +22 -0
  77. package/src/components/MlLayer/MlLayer.js +0 -1
  78. package/src/components/MlLayerSwitcher/MlLayerSwitcher.js +0 -2
  79. package/src/components/MlLayerSwitcher/MlLayerSwitcher.stories.js +3 -6
  80. package/src/components/MlLayerSwitcher/components/LayerBox.js +2 -26
  81. package/src/components/MlMarker/MlMarker.js +1 -1
  82. package/src/components/MlShareMapState/MlShareMapState.stories.js +14 -17
  83. package/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.stories.js +1 -3
  84. package/src/components/MlUseMapDebugger/MlUseMapDebugger.js +1 -7
  85. package/src/components/MlWmsLoader/MlWmsLoader.js +0 -4
  86. package/src/hooks/useMapState.js +0 -14
  87. package/src/hooks/useWms.js +2 -7
  88. package/src/ui_components/ImageLoader.js +8 -3
  89. package/src/ui_components/Sidebar.js +1 -1
  90. package/src/ui_components/TopToolbar.js +0 -2
package/coverage/lcov-report/src/components/MlGeoJsonLayer/MlGeoJsonLayer.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">63.51% </span>
26
+ <span class="strong">65.67% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>47/74</span>
28
+ <span class='fraction'>44/67</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
- <span class="strong">53.22% </span>
33
+ <span class="strong">55% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>33/62</span>
35
+ <span class='fraction'>33/60</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
- <span class="strong">77.77% </span>
40
+ <span class="strong">88.88% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>7/9</span>
42
+ <span class='fraction'>8/9</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">61.42% </span>
47
+ <span class="strong">63.49% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>43/70</span>
49
+ <span class='fraction'>40/63</span>
50
50
  </div>
51
51
 
52
52
 
@@ -306,26 +306,7 @@
306
306
  <a name='L241'></a><a href='#L241'>241</a>
307
307
  <a name='L242'></a><a href='#L242'>242</a>
308
308
  <a name='L243'></a><a href='#L243'>243</a>
309
- <a name='L244'></a><a href='#L244'>244</a>
310
- <a name='L245'></a><a href='#L245'>245</a>
311
- <a name='L246'></a><a href='#L246'>246</a>
312
- <a name='L247'></a><a href='#L247'>247</a>
313
- <a name='L248'></a><a href='#L248'>248</a>
314
- <a name='L249'></a><a href='#L249'>249</a>
315
- <a name='L250'></a><a href='#L250'>250</a>
316
- <a name='L251'></a><a href='#L251'>251</a>
317
- <a name='L252'></a><a href='#L252'>252</a>
318
- <a name='L253'></a><a href='#L253'>253</a>
319
- <a name='L254'></a><a href='#L254'>254</a>
320
- <a name='L255'></a><a href='#L255'>255</a>
321
- <a name='L256'></a><a href='#L256'>256</a>
322
- <a name='L257'></a><a href='#L257'>257</a>
323
- <a name='L258'></a><a href='#L258'>258</a>
324
- <a name='L259'></a><a href='#L259'>259</a>
325
- <a name='L260'></a><a href='#L260'>260</a>
326
- <a name='L261'></a><a href='#L261'>261</a>
327
- <a name='L262'></a><a href='#L262'>262</a>
328
- <a name='L263'></a><a href='#L263'>263</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
309
+ <a name='L244'></a><a href='#L244'>244</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
329
310
  <span class="cline-any cline-neutral">&nbsp;</span>
330
311
  <span class="cline-any cline-neutral">&nbsp;</span>
331
312
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -335,6 +316,8 @@
335
316
  <span class="cline-any cline-neutral">&nbsp;</span>
336
317
  <span class="cline-any cline-neutral">&nbsp;</span>
337
318
  <span class="cline-any cline-neutral">&nbsp;</span>
319
+ <span class="cline-any cline-neutral">&nbsp;</span>
320
+ <span class="cline-any cline-yes">2x</span>
338
321
  <span class="cline-any cline-yes">2x</span>
339
322
  <span class="cline-any cline-neutral">&nbsp;</span>
340
323
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -346,16 +329,10 @@
346
329
  <span class="cline-any cline-neutral">&nbsp;</span>
347
330
  <span class="cline-any cline-yes">12x</span>
348
331
  <span class="cline-any cline-yes">12x</span>
349
- <span class="cline-any cline-neutral">&nbsp;</span>
350
- <span class="cline-any cline-neutral">&nbsp;</span>
351
- <span class="cline-any cline-neutral">&nbsp;</span>
352
- <span class="cline-any cline-neutral">&nbsp;</span>
353
- <span class="cline-any cline-neutral">&nbsp;</span>
354
- <span class="cline-any cline-neutral">&nbsp;</span>
355
- <span class="cline-any cline-neutral">&nbsp;</span>
356
- <span class="cline-any cline-yes">12x</span>
357
332
  <span class="cline-any cline-yes">12x</span>
358
333
  <span class="cline-any cline-yes">12x</span>
334
+ <span class="cline-any cline-neutral">&nbsp;</span>
335
+ <span class="cline-any cline-neutral">&nbsp;</span>
359
336
  <span class="cline-any cline-yes">12x</span>
360
337
  <span class="cline-any cline-yes">12x</span>
361
338
  <span class="cline-any cline-yes">12x</span>
@@ -363,21 +340,12 @@
363
340
  <span class="cline-any cline-yes">12x</span>
364
341
  <span class="cline-any cline-yes">12x</span>
365
342
  <span class="cline-any cline-neutral">&nbsp;</span>
366
- <span class="cline-any cline-neutral">&nbsp;</span>
367
343
  <span class="cline-any cline-yes">12x</span>
368
- <span class="cline-any cline-neutral">&nbsp;</span>
369
- <span class="cline-any cline-yes">12x</span>
370
- <span class="cline-any cline-yes">4x</span>
371
344
  <span class="cline-any cline-yes">4x</span>
372
345
  <span class="cline-any cline-neutral">&nbsp;</span>
373
346
  <span class="cline-any cline-yes">2x</span>
374
347
  <span class="cline-any cline-no">&nbsp;</span>
375
348
  <span class="cline-any cline-neutral">&nbsp;</span>
376
- <span class="cline-any cline-yes">2x</span>
377
- <span class="cline-any cline-yes">2x</span>
378
- <span class="cline-any cline-neutral">&nbsp;</span>
379
- <span class="cline-any cline-yes">2x</span>
380
- <span class="cline-any cline-neutral">&nbsp;</span>
381
349
  <span class="cline-any cline-neutral">&nbsp;</span>
382
350
  <span class="cline-any cline-neutral">&nbsp;</span>
383
351
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -419,8 +387,6 @@
419
387
  <span class="cline-any cline-yes">12x</span>
420
388
  <span class="cline-any cline-yes">8x</span>
421
389
  <span class="cline-any cline-neutral">&nbsp;</span>
422
- <span class="cline-any cline-neutral">&nbsp;</span>
423
- <span class="cline-any cline-neutral">&nbsp;</span>
424
390
  <span class="cline-any cline-no">&nbsp;</span>
425
391
  <span class="cline-any cline-neutral">&nbsp;</span>
426
392
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -445,25 +411,6 @@
445
411
  <span class="cline-any cline-neutral">&nbsp;</span>
446
412
  <span class="cline-any cline-neutral">&nbsp;</span>
447
413
  <span class="cline-any cline-yes">12x</span>
448
- <span class="cline-any cline-yes">12x</span>
449
- <span class="cline-any cline-neutral">&nbsp;</span>
450
- <span class="cline-any cline-neutral">&nbsp;</span>
451
- <span class="cline-any cline-neutral">&nbsp;</span>
452
- <span class="cline-any cline-yes">4x</span>
453
- <span class="cline-any cline-neutral">&nbsp;</span>
454
- <span class="cline-any cline-yes">4x</span>
455
- <span class="cline-any cline-no">&nbsp;</span>
456
- <span class="cline-any cline-neutral">&nbsp;</span>
457
- <span class="cline-any cline-no">&nbsp;</span>
458
- <span class="cline-any cline-no">&nbsp;</span>
459
- <span class="cline-any cline-no">&nbsp;</span>
460
- <span class="cline-any cline-neutral">&nbsp;</span>
461
- <span class="cline-any cline-neutral">&nbsp;</span>
462
- <span class="cline-any cline-no">&nbsp;</span>
463
- <span class="cline-any cline-no">&nbsp;</span>
464
- <span class="cline-any cline-neutral">&nbsp;</span>
465
- <span class="cline-any cline-neutral">&nbsp;</span>
466
- <span class="cline-any cline-yes">4x</span>
467
414
  <span class="cline-any cline-yes">4x</span>
468
415
  <span class="cline-any cline-neutral">&nbsp;</span>
469
416
  <span class="cline-any cline-yes">4x</span>
@@ -493,7 +440,8 @@
493
440
  <span class="cline-any cline-neutral">&nbsp;</span>
494
441
  <span class="cline-any cline-neutral">&nbsp;</span>
495
442
  <span class="cline-any cline-neutral">&nbsp;</span>
496
- <span class="cline-any cline-neutral">&nbsp;</span>
443
+ <span class="cline-any cline-yes">4x</span>
444
+ <span class="cline-any cline-no">&nbsp;</span>
497
445
  <span class="cline-any cline-neutral">&nbsp;</span>
498
446
  <span class="cline-any cline-neutral">&nbsp;</span>
499
447
  <span class="cline-any cline-yes">4x</span>
@@ -505,29 +453,43 @@
505
453
  <span class="cline-any cline-neutral">&nbsp;</span>
506
454
  <span class="cline-any cline-neutral">&nbsp;</span>
507
455
  <span class="cline-any cline-yes">4x</span>
456
+ <span class="cline-any cline-neutral">&nbsp;</span>
457
+ <span class="cline-any cline-neutral">&nbsp;</span>
458
+ <span class="cline-any cline-neutral">&nbsp;</span>
459
+ <span class="cline-any cline-neutral">&nbsp;</span>
460
+ <span class="cline-any cline-no">&nbsp;</span>
508
461
  <span class="cline-any cline-no">&nbsp;</span>
509
462
  <span class="cline-any cline-neutral">&nbsp;</span>
510
463
  <span class="cline-any cline-neutral">&nbsp;</span>
464
+ <span class="cline-any cline-neutral">&nbsp;</span>
465
+ <span class="cline-any cline-yes">12x</span>
466
+ <span class="cline-any cline-yes">8x</span>
467
+ <span class="cline-any cline-neutral">&nbsp;</span>
511
468
  <span class="cline-any cline-yes">4x</span>
512
469
  <span class="cline-any cline-neutral">&nbsp;</span>
513
470
  <span class="cline-any cline-neutral">&nbsp;</span>
514
471
  <span class="cline-any cline-neutral">&nbsp;</span>
515
472
  <span class="cline-any cline-neutral">&nbsp;</span>
473
+ <span class="cline-any cline-neutral">&nbsp;</span>
516
474
  <span class="cline-any cline-no">&nbsp;</span>
517
- <span class="cline-any cline-no">&nbsp;</span>
475
+ <span class="cline-any cline-yes">4x</span>
518
476
  <span class="cline-any cline-neutral">&nbsp;</span>
519
477
  <span class="cline-any cline-neutral">&nbsp;</span>
520
478
  <span class="cline-any cline-neutral">&nbsp;</span>
521
479
  <span class="cline-any cline-neutral">&nbsp;</span>
522
- <span class="cline-any cline-yes">12x</span>
480
+ <span class="cline-any cline-no">&nbsp;</span>
523
481
  <span class="cline-any cline-neutral">&nbsp;</span>
524
482
  <span class="cline-any cline-neutral">&nbsp;</span>
525
- <span class="cline-any cline-yes">2x</span>
526
483
  <span class="cline-any cline-neutral">&nbsp;</span>
484
+ <span class="cline-any cline-yes">4x</span>
485
+ <span class="cline-any cline-neutral">&nbsp;</span>
486
+ <span class="cline-any cline-yes">4x</span>
527
487
  <span class="cline-any cline-neutral">&nbsp;</span>
528
488
  <span class="cline-any cline-neutral">&nbsp;</span>
489
+ <span class="cline-any cline-yes">12x</span>
529
490
  <span class="cline-any cline-neutral">&nbsp;</span>
530
491
  <span class="cline-any cline-neutral">&nbsp;</span>
492
+ <span class="cline-any cline-yes">2x</span>
531
493
  <span class="cline-any cline-neutral">&nbsp;</span>
532
494
  <span class="cline-any cline-neutral">&nbsp;</span>
533
495
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -587,17 +549,19 @@
587
549
  <span class="cline-any cline-neutral">&nbsp;</span>
588
550
  <span class="cline-any cline-neutral">&nbsp;</span>
589
551
  <span class="cline-any cline-neutral">&nbsp;</span>
590
- <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useRef, useEffect, useContext, useCallback } from "react";
552
+ <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useRef, useEffect, useCallback } from "react";
591
553
  import PropTypes from "prop-types";
592
554
  &nbsp;
593
- import { v4 as uuidv4 } from "uuid";
594
555
  import * as turf from "@turf/turf";
595
- import { MapContext } from "@mapcomponents/react-core";
596
- import useMapState from "../../hooks/useMapState";
556
+ &nbsp;
557
+ import useMap from "../../hooks/useMap";
597
558
  &nbsp;
598
559
  import { _transitionToGeojson } from "./util/transitionFunctions";
560
+ import getDefaultPaintPropsByType from "./util/getDefaultPaintPropsByType";
561
+ import getDefaulLayerTypeByGeometry from "./util/getDefaultLayerTypeByGeometry";
599
562
  &nbsp;
600
563
  const msPerStep = 50;
564
+ const legalLayerTypes = ["circle", "fill", "line"];
601
565
  &nbsp;
602
566
  /**
603
567
  * Adds source and layer of types "line", "fill" or "circle" to display GeoJSON data on the map.
@@ -606,58 +570,43 @@ const msPerStep = 50;
606
570
  */
607
571
  const MlGeoJsonLayer = (props) =&gt; {
608
572
  // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
609
- const mapContext = useContext(MapContext);
610
- const mapState = useMapState({
611
- mapId: props.mapId,
612
- watch: {
613
- viewport: false,
614
- layers: true,
615
- sources: false,
616
- },
617
- });
618
- const oldGeojsonRef = useRef(null);
619
- const mapRef = useRef(null);
573
+ const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
620
574
  const initializedRef = useRef(false);
575
+ const layerId = useRef(props.layerId || "MlGeoJsonLayer-" + mapHook.componentId);
576
+ const layerTypeRef = useRef(undefined);
577
+ &nbsp;
578
+ // transition effect variables
579
+ const oldGeojsonRef = useRef(null);
621
580
  const transitionInProgressRef = useRef(false);
622
581
  const transitionTimeoutRef = useRef(undefined);
623
582
  const currentTransitionStepRef = useRef(false);
624
583
  const transitionGeojsonDataRef = useRef([]);
625
584
  const transitionGeojsonCommonDataRef = useRef([]);
626
- const componentId = useRef(
627
- (props.layerId ? <span class="branch-0 cbranch-no" title="branch not covered" >props.layerId </span>: "MlGeoJsonLayer-") + (props.idSuffix || uuidv4())
628
- );
629
- const layerId = useRef(props.layerId || componentId.current);
630
585
  &nbsp;
631
586
  useEffect(() =&gt; {
632
- let _componentId = componentId.current;
633
587
  return () =&gt; {
634
588
  // This is the cleanup function, it is called when this react component is removed from react-dom
635
589
  <span class="missing-if-branch" title="if path not taken" >I</span>if (transitionTimeoutRef.current) {
636
590
  <span class="cstat-no" title="statement not covered" > clearTimeout(transitionTimeoutRef.current);</span>
637
591
  }
638
- if (mapRef.current) {
639
- mapRef.current.cleanup(_componentId);
640
- &nbsp;
641
- mapRef.current = null;
642
- }
643
592
  };
644
593
  }, []);
645
594
  &nbsp;
646
595
  useEffect(() =&gt; {
647
- if (!mapRef.current || <span class="branch-1 cbranch-no" title="branch not covered" >!initializedRef.current)</span> return;
596
+ if (!mapHook.map || !initializedRef.current) return;
648
597
  &nbsp;
649
598
  <span class="cstat-no" title="statement not covered" > for (var key in props.layout) {</span>
650
- <span class="cstat-no" title="statement not covered" > mapContext.getMap(props.mapId).setLayoutProperty(layerId.current, key, props.layout[key]);</span>
599
+ <span class="cstat-no" title="statement not covered" > mapHook.map.setLayoutProperty(layerId.current, key, props.layout[key]);</span>
651
600
  }
652
- }, [props.layout, mapContext, props.mapId]);
601
+ }, [props.layout, mapHook.map, props.mapId]);
653
602
  &nbsp;
654
603
  useEffect(() =&gt; {
655
- if (!mapRef.current || <span class="branch-1 cbranch-no" title="branch not covered" >!initializedRef.current)</span> return;
604
+ if (!mapHook.map || !initializedRef.current) return;
656
605
  &nbsp;
657
606
  <span class="cstat-no" title="statement not covered" > for (var key in props.paint) {</span>
658
- <span class="cstat-no" title="statement not covered" > mapContext.getMap(props.mapId).setPaintProperty(layerId.current, key, props.paint[key]);</span>
607
+ <span class="cstat-no" title="statement not covered" > mapHook.map.setPaintProperty(layerId.current, key, props.paint[key]);</span>
659
608
  }
660
- }, [props.paint, mapContext, props.mapId]);
609
+ }, [props.paint, mapHook.map, props.mapId]);
661
610
  &nbsp;
662
611
  const transitionToGeojson = useCallback(
663
612
  <span class="fstat-no" title="function not covered" > (n</span>ewGeojson) =&gt; {
@@ -670,18 +619,16 @@ const MlGeoJsonLayer = (props) =&gt; {
670
619
  oldGeojsonRef,
671
620
  msPerStep,
672
621
  currentTransitionStepRef,
673
- mapRef.current,
674
- componentId.current,
622
+ mapHook.map,
623
+ layerId.current,
675
624
  transitionTimeoutRef
676
625
  );
677
626
  },
678
- [props]
627
+ [props, mapHook.map]
679
628
  );
680
629
  &nbsp;
681
630
  useEffect(() =&gt; {
682
- if (!mapRef.current?.getSource?.(componentId.current) || <span class="branch-1 cbranch-no" title="branch not covered" >!initializedRef.current)</span> return;
683
- // the MapLibre-gl instance (mapContext.map) is accessible here
684
- // initialize the layer and add it to the MapLibre-gl instance or do something else with it
631
+ if (!mapHook?.map?.getSource(layerId.current) || <span class="branch-1 cbranch-no" title="branch not covered" >!initializedRef.current)</span> return;
685
632
  &nbsp;
686
633
  <span class="cstat-no" title="statement not covered" > if (</span>
687
634
  typeof props.transitionTime !== "undefined" &amp;&amp;
@@ -694,92 +641,93 @@ const MlGeoJsonLayer = (props) =&gt; {
694
641
  <span class="cstat-no" title="statement not covered" > transitionGeojsonCommonDataRef.current = [];</span>
695
642
  <span class="cstat-no" title="statement not covered" > transitionToGeojson(props.geojson);</span>
696
643
  } else {
697
- <span class="cstat-no" title="statement not covered" > mapRef.current.getSource(componentId.current).setData(props.geojson);</span>
644
+ <span class="cstat-no" title="statement not covered" > mapHook.map.getSource(layerId.current).setData(props.geojson);</span>
698
645
  }
699
646
  <span class="cstat-no" title="statement not covered" > oldGeojsonRef.current = props.geojson;</span>
700
647
  }, [
701
648
  props.geojson,
702
649
  props.mapId,
703
- mapContext,
650
+ mapHook.map,
704
651
  props.type,
705
652
  transitionToGeojson,
706
653
  props.transitionTime,
707
654
  ]);
708
655
  &nbsp;
709
- useEffect(() =&gt; {
710
- if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
711
- // the MapLibre-gl instance (mapContext.map) is accessible here
712
- // initialize the layer and add it to the MapLibre-gl instance or do something else with it
656
+ const createLayer = useCallback(() =&gt; {
657
+ let geojson = props.geojson;
713
658
  &nbsp;
714
- if (props.geojson) {
715
- //check if insertBeforeLayer exists
716
- <span class="missing-if-branch" title="if path not taken" >I</span>if (props.insertBeforeLayer) {
717
- let layerFound = <span class="cstat-no" title="statement not covered" >false;</span>
659
+ <span class="missing-if-branch" title="if path not taken" >I</span>if (
660
+ props.type === "line" &amp;&amp;
661
+ typeof props.transitionTime !== "undefined" &amp;&amp;
662
+ <span class="branch-2 cbranch-no" title="branch not covered" > props.transitionTime </span>&amp;&amp;
663
+ <span class="branch-3 cbranch-no" title="branch not covered" > typeof props.geojson.geometry !== "undefined"</span>
664
+ ) {
665
+ var tmpChunks = <span class="cstat-no" title="statement not covered" >turf.lineChunk(props.geojson, 0.01);</span>
666
+ <span class="cstat-no" title="statement not covered" > geojson = tmpChunks.features[0];</span>
667
+ }
718
668
  &nbsp;
719
- <span class="cstat-no" title="statement not covered" > mapState?.layers?.forEach(<span class="fstat-no" title="function not covered" >(l</span>ayer) =&gt; {</span>
720
- <span class="cstat-no" title="statement not covered" > if (layer.id === props.insertBeforeLayer) {</span>
721
- <span class="cstat-no" title="statement not covered" > layerFound = true;</span>
722
- }
723
- });
724
- <span class="cstat-no" title="statement not covered" > if (!layerFound) {</span>
725
- <span class="cstat-no" title="statement not covered" > return;</span>
726
- }
727
- }
728
- initializedRef.current = true;
729
- let geojson = props.geojson;
669
+ layerTypeRef.current = props.type || <span class="branch-1 cbranch-no" title="branch not covered" >getDefaulLayerTypeByGeometry(props.geojson);</span>
730
670
  &nbsp;
731
- <span class="missing-if-branch" title="if path not taken" >I</span>if (
732
- props.type === "line" &amp;&amp;
733
- typeof props.transitionTime !== "undefined" &amp;&amp;
734
- <span class="branch-2 cbranch-no" title="branch not covered" > props.transitionTime </span>&amp;&amp;
735
- <span class="branch-3 cbranch-no" title="branch not covered" > typeof props.geojson.geometry !== "undefined"</span>
736
- ) {
737
- var tmpChunks = <span class="cstat-no" title="statement not covered" >turf.lineChunk(props.geojson, 0.01);</span>
738
- <span class="cstat-no" title="statement not covered" > geojson = tmpChunks.features[0];</span>
739
- }
671
+ mapHook.map.addLayer(
672
+ {
673
+ id: layerId.current,
674
+ source: {
675
+ type: "geojson",
676
+ data: geojson,
677
+ },
678
+ type: layerTypeRef.current,
679
+ paint: props.paint || getDefaultPaintPropsByType(layerTypeRef.current),
680
+ layout: props.layout || {},
681
+ },
682
+ props.insertBeforeLayer,
683
+ mapHook.componentId
684
+ );
740
685
  &nbsp;
741
- mapRef.current = mapContext.getMap(props.mapId);
686
+ <span class="missing-if-branch" title="if path not taken" >I</span>if (typeof props.onHover !== "undefined") {
687
+ <span class="cstat-no" title="statement not covered" > mapHook.map.on("mousemove", mapHook.componentId, props.onHover, mapHook.componentId);</span>
688
+ }
742
689
  &nbsp;
743
- mapRef.current.addLayer(
744
- {
745
- id: layerId.current,
746
- source: {
747
- type: "geojson",
748
- data: geojson,
749
- },
750
- type: props.type || <span class="branch-1 cbranch-no" title="branch not covered" >"line",</span>
751
- paint: props.paint || {
752
- "line-color": "rgb(100,200,100)",
753
- "line-width": 10,
754
- },
755
- layout: props.layout || {},
756
- },
757
- props.insertBeforeLayer,
758
- componentId.current
759
- );
690
+ <span class="missing-if-branch" title="if path not taken" >I</span>if (typeof props.onClick !== "undefined") {
691
+ <span class="cstat-no" title="statement not covered" > mapHook.map.on("click", mapHook.componentId, props.onClick, mapHook.componentId);</span>
692
+ }
760
693
  &nbsp;
761
- <span class="missing-if-branch" title="if path not taken" >I</span>if (typeof props.onHover !== "undefined") {
762
- <span class="cstat-no" title="statement not covered" > mapRef.current.on("mousemove", componentId.current, props.onHover, componentId.current);</span>
763
- }
694
+ <span class="missing-if-branch" title="if path not taken" >I</span>if (typeof props.onLeave !== "undefined") {
695
+ <span class="cstat-no" title="statement not covered" > mapHook.map.on("mouseleave", mapHook.componentId, props.onLeave, mapHook.componentId);</span>
696
+ }
764
697
  &nbsp;
765
- <span class="missing-if-branch" title="if path not taken" >I</span>if (typeof props.onClick !== "undefined") {
766
- <span class="cstat-no" title="statement not covered" > mapRef.current.on("click", componentId.current, props.onClick, componentId.current);</span>
767
- }
698
+ <span class="missing-if-branch" title="if path not taken" >I</span>if (
699
+ props.type === "line" &amp;&amp;
700
+ typeof props.transitionTime !== "undefined" &amp;&amp;
701
+ <span class="branch-2 cbranch-no" title="branch not covered" > typeof props.geojson.geometry !== "undefined"</span>
702
+ ) {
703
+ <span class="cstat-no" title="statement not covered" > transitionToGeojson(props.geojson);</span>
704
+ <span class="cstat-no" title="statement not covered" > oldGeojsonRef.current = props.geojson;</span>
705
+ }
706
+ }, [mapHook.map, props, transitionToGeojson]);
768
707
  &nbsp;
769
- <span class="missing-if-branch" title="if path not taken" >I</span>if (typeof props.onLeave !== "undefined") {
770
- <span class="cstat-no" title="statement not covered" > mapRef.current.on("mouseleave", componentId.current, props.onLeave, componentId.current);</span>
771
- }
708
+ useEffect(() =&gt; {
709
+ if (!mapHook.mapIsReady || !props.geojson) return;
772
710
  &nbsp;
773
- <span class="missing-if-branch" title="if path not taken" >I</span>if (
774
- props.type === "line" &amp;&amp;
775
- typeof props.transitionTime !== "undefined" &amp;&amp;
776
- <span class="branch-2 cbranch-no" title="branch not covered" > typeof props.geojson.geometry !== "undefined"</span>
777
- ) {
778
- <span class="cstat-no" title="statement not covered" > transitionToGeojson(props.geojson);</span>
779
- <span class="cstat-no" title="statement not covered" > oldGeojsonRef.current = props.geojson;</span>
780
- }
711
+ <span class="missing-if-branch" title="if path not taken" >I</span>if (
712
+ initializedRef.current &amp;&amp;
713
+ <span class="branch-1 cbranch-no" title="branch not covered" > legalLayerTypes.indexOf(props.type) !== -1 </span>&amp;&amp;
714
+ <span class="branch-2 cbranch-no" title="branch not covered" > layerTypeRef.current </span>&amp;&amp;
715
+ <span class="branch-3 cbranch-no" title="branch not covered" > props.type !== layerTypeRef.current</span>
716
+ ) {
717
+ <span class="cstat-no" title="statement not covered" > mapHook.map.cleanup(mapHook.componentId);</span>
718
+ } else <span class="missing-if-branch" title="if path not taken" >I</span>if (
719
+ initializedRef.current &amp;&amp;
720
+ (<span class="branch-1 cbranch-no" title="branch not covered" >legalLayerTypes.indexOf(props.type) === -1 </span>||
721
+ (<span class="branch-2 cbranch-no" title="branch not covered" >legalLayerTypes.indexOf(props.type) !== -1 </span>&amp;&amp; <span class="branch-3 cbranch-no" title="branch not covered" >props.type === layerTypeRef.current)</span>)
722
+ ) {
723
+ <span class="cstat-no" title="statement not covered" > return;</span>
781
724
  }
782
- }, [mapContext.mapIds, mapContext, props, transitionToGeojson, mapState.layers]);
725
+ &nbsp;
726
+ // initialize the layer and add it to the MapLibre-gl instance or do something else with it
727
+ initializedRef.current = true;
728
+ &nbsp;
729
+ createLayer();
730
+ }, [mapHook.mapIsReady, createLayer, props]);
783
731
  &nbsp;
784
732
  return &lt;&gt;&lt;/&gt;;
785
733
  };
@@ -841,11 +789,6 @@ MlGeoJsonLayer.propTypes = {
841
789
  * Only works with layer type "line" and LineString GeoJSON data.
842
790
  */
843
791
  transitionTime: PropTypes.number,
844
- /**
845
- * Id suffix string that is appended to the componentId.
846
- * Probably removed soon.
847
- */
848
- idSuffix: PropTypes.string,
849
792
  };
850
793
  &nbsp;
851
794
  export default MlGeoJsonLayer;
@@ -855,10 +798,9 @@ export default MlGeoJsonLayer;
855
798
  </div><!-- /wrapper -->
856
799
  <div class='footer quiet pad2 space-top1 center small'>
857
800
  Code coverage generated by
858
- <a href="https://istanbul.js.org/" target="_blank" rel="noopener">istanbul</a>
859
- at Thu Dec 23 2021 12:19:00 GMT+0000 (Coordinated Universal Time)
801
+ <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
802
+ at Sun Jan 09 2022 17:13:08 GMT+0000 (Coordinated Universal Time)
860
803
  </div>
861
- </div>
862
804
  <script src="../../../prettify.js"></script>
863
805
  <script>
864
806
  window.onload = function () {
package/coverage/lcov-report/src/components/MlGeoJsonLayer/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">63.51% </span>
26
+ <span class="strong">65.67% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>47/74</span>
28
+ <span class='fraction'>44/67</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
- <span class="strong">53.22% </span>
33
+ <span class="strong">55% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>33/62</span>
35
+ <span class='fraction'>33/60</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
- <span class="strong">77.77% </span>
40
+ <span class="strong">88.88% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>7/9</span>
42
+ <span class='fraction'>8/9</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">61.42% </span>
47
+ <span class="strong">63.49% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>43/70</span>
49
+ <span class='fraction'>40/63</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="MlGeoJsonLayer.js"><a href="MlGeoJsonLayer.js.html">MlGeoJsonLayer.js</a></td>
83
- <td data-value="63.51" class="pic medium">
84
- <div class="chart"><div class="cover-fill" style="width: 63%"></div><div class="cover-empty" style="width: 37%"></div></div>
83
+ <td data-value="65.67" class="pic medium">
84
+ <div class="chart"><div class="cover-fill" style="width: 65%"></div><div class="cover-empty" style="width: 35%"></div></div>
85
85
  </td>
86
- <td data-value="63.51" class="pct medium">63.51%</td>
87
- <td data-value="74" class="abs medium">47/74</td>
88
- <td data-value="53.22" class="pct medium">53.22%</td>
89
- <td data-value="62" class="abs medium">33/62</td>
90
- <td data-value="77.77" class="pct medium">77.77%</td>
91
- <td data-value="9" class="abs medium">7/9</td>
92
- <td data-value="61.42" class="pct medium">61.42%</td>
93
- <td data-value="70" class="abs medium">43/70</td>
86
+ <td data-value="65.67" class="pct medium">65.67%</td>
87
+ <td data-value="67" class="abs medium">44/67</td>
88
+ <td data-value="55" class="pct medium">55%</td>
89
+ <td data-value="60" class="abs medium">33/60</td>
90
+ <td data-value="88.88" class="pct high">88.88%</td>
91
+ <td data-value="9" class="abs high">8/9</td>
92
+ <td data-value="63.49" class="pct medium">63.49%</td>
93
+ <td data-value="63" class="abs medium">40/63</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 Thu Dec 23 2021 12:19:00 GMT+0000 (Coordinated Universal Time)
103
+ <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
104
+ at Sun Jan 09 2022 17:13:08 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/MlImageMarkerLayer/MlImageMarkerLayer.js.html CHANGED
@@ -294,10 +294,9 @@ export default MlImageMarkerLayer;
294
294
  </div><!-- /wrapper -->
295
295
  <div class='footer quiet pad2 space-top1 center small'>
296
296
  Code coverage generated by
297
- <a href="https://istanbul.js.org/" target="_blank" rel="noopener">istanbul</a>
298
- at Thu Dec 23 2021 12:19:00 GMT+0000 (Coordinated Universal Time)
297
+ <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
298
+ at Sun Jan 09 2022 17:13:08 GMT+0000 (Coordinated Universal Time)
299
299
  </div>
300
- </div>
301
300
  <script src="../../../prettify.js"></script>
302
301
  <script>
303
302
  window.onload = function () {
package/coverage/lcov-report/src/components/MlImageMarkerLayer/index.html CHANGED
@@ -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 Thu Dec 23 2021 12:19:00 GMT+0000 (Coordinated Universal Time)
103
+ <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
104
+ at Sun Jan 09 2022 17:13:08 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 () {