@mapcomponents/react-maplibre 0.1.12 → 0.1.13

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 (120) hide show
  1. package/coverage/clover.xml +727 -608
  2. package/coverage/coverage-final.json +19 -14
  3. package/coverage/lcov-report/index.html +156 -96
  4. package/coverage/lcov-report/{components → src/components}/MapLibreMap/MapLibreMap.js.html +10 -10
  5. package/coverage/lcov-report/{components → src/components}/MapLibreMap/index.html +10 -10
  6. package/coverage/lcov-report/{components → src/components}/MlCreatePdfButton/MlCreatePdfButton.js.html +10 -10
  7. package/coverage/lcov-report/{components → src/components}/MlCreatePdfButton/index.html +10 -10
  8. package/coverage/lcov-report/{components → src/components}/MlFeatureEditor/MlFeatureEditor.js.html +10 -10
  9. package/coverage/lcov-report/{components → src/components}/MlFeatureEditor/index.html +10 -10
  10. package/coverage/lcov-report/{components → src/components}/MlFillExtrusionLayer/MlFillExtrusionLayer.js.html +10 -10
  11. package/coverage/lcov-report/{components → src/components}/MlFillExtrusionLayer/index.html +10 -10
  12. package/coverage/lcov-report/{components → src/components}/MlFollowGps/MlFollowGps.js.html +61 -55
  13. package/coverage/lcov-report/{components → src/components}/MlFollowGps/index.html +10 -10
  14. package/coverage/lcov-report/{components → src/components}/MlGPXViewer/MlGPXViewer.js.html +66 -60
  15. package/coverage/lcov-report/{components → src/components}/MlGPXViewer/gpxConverter.js.html +49 -70
  16. package/coverage/lcov-report/{components → src/components}/MlGPXViewer/index.html +25 -25
  17. package/coverage/lcov-report/{components → src/components}/MlGeoJsonLayer/MlGeoJsonLayer.js.html +70 -28
  18. package/coverage/lcov-report/{components → src/components}/MlGeoJsonLayer/index.html +27 -27
  19. package/coverage/lcov-report/{components → src/components}/MlImageMarkerLayer/MlImageMarkerLayer.js.html +19 -22
  20. package/coverage/lcov-report/{components → src/components}/MlImageMarkerLayer/index.html +19 -19
  21. package/coverage/lcov-report/{components → src/components}/MlLayer/MlLayer.js.html +30 -30
  22. package/coverage/lcov-report/{components → src/components}/MlLayer/index.html +26 -26
  23. package/coverage/lcov-report/{components → src/components}/MlLayerMagnify/MlLayerMagnify.js.html +41 -41
  24. package/coverage/lcov-report/{components → src/components}/MlLayerMagnify/index.html +24 -24
  25. package/coverage/lcov-report/{components → src/components}/MlLayerSwipe/MlLayerSwipe.js.html +38 -41
  26. package/coverage/lcov-report/{components → src/components}/MlLayerSwipe/index.html +24 -24
  27. package/coverage/lcov-report/src/components/MlLayerSwitcher/MlLayerSwitcher.js.html +755 -0
  28. package/coverage/lcov-report/src/components/MlLayerSwitcher/components/LayerBox.js.html +380 -0
  29. package/coverage/lcov-report/src/components/MlLayerSwitcher/components/index.html +117 -0
  30. package/coverage/lcov-report/src/components/MlLayerSwitcher/index.html +117 -0
  31. package/coverage/lcov-report/{components → src/components}/MlMarker/MlMarker.js.html +11 -11
  32. package/coverage/lcov-report/{components → src/components}/MlMarker/index.html +10 -10
  33. package/coverage/lcov-report/{components → src/components}/MlNavigationCompass/MlNavigationCompass.js.html +10 -10
  34. package/coverage/lcov-report/{components → src/components}/MlNavigationCompass/index.html +10 -10
  35. package/coverage/lcov-report/{components → src/components}/MlNavigationTools/MlNavigationTools.js.html +48 -36
  36. package/coverage/lcov-report/{components → src/components}/MlNavigationTools/index.html +16 -16
  37. package/coverage/lcov-report/{components → src/components}/MlOsmLayer/MlOsmLayer.js.html +10 -10
  38. package/coverage/lcov-report/{components → src/components}/MlOsmLayer/index.html +10 -10
  39. package/coverage/lcov-report/{components → src/components}/MlScaleReference/MlScaleReference.js.html +10 -10
  40. package/coverage/lcov-report/{components → src/components}/MlScaleReference/index.html +10 -10
  41. package/coverage/lcov-report/{components → src/components}/MlShareMapState/MlShareMapState.js.html +10 -10
  42. package/coverage/lcov-report/{components → src/components}/MlShareMapState/index.html +10 -10
  43. package/coverage/lcov-report/{components → src/components}/MlSpatialElevationProfile/MlSpatialElevationProfile.js.html +10 -10
  44. package/coverage/lcov-report/{components → src/components}/MlSpatialElevationProfile/index.html +10 -10
  45. package/coverage/lcov-report/{components → src/components}/MlThreeJsLayer/MlThreeJsLayer.js.html +30 -54
  46. package/coverage/lcov-report/{components → src/components}/MlThreeJsLayer/index.html +24 -24
  47. package/coverage/lcov-report/{components → src/components}/MlUseMapDebugger/MlUseMapDebugger.js.html +10 -10
  48. package/coverage/lcov-report/{components → src/components}/MlUseMapDebugger/index.html +10 -10
  49. package/coverage/lcov-report/{components → src/components}/MlVectorTileLayer/MlVectorTileLayer.js.html +10 -10
  50. package/coverage/lcov-report/{components → src/components}/MlVectorTileLayer/index.html +10 -10
  51. package/coverage/lcov-report/{components → src/components}/MlWmsFeatureInfoPopup/MlWmsFeatureInfoPopup.js.html +10 -10
  52. package/coverage/lcov-report/{components → src/components}/MlWmsFeatureInfoPopup/index.html +10 -10
  53. package/coverage/lcov-report/{components → src/components}/MlWmsLayer/MlWmsLayer.js.html +13 -13
  54. package/coverage/lcov-report/{components → src/components}/MlWmsLayer/index.html +14 -14
  55. package/coverage/lcov-report/{components → src/components}/MlWmsLoader/MlWmsLoader.js.html +31 -19
  56. package/coverage/lcov-report/{components → src/components}/MlWmsLoader/index.html +16 -16
  57. package/coverage/lcov-report/{hooks → src/hooks}/index.html +10 -10
  58. package/coverage/lcov-report/{hooks → src/hooks}/useMap.js.html +10 -10
  59. package/coverage/lcov-report/{hooks → src/hooks}/useMapState.js.html +10 -10
  60. package/coverage/lcov-report/{hooks → src/hooks}/useWms.js.html +18 -18
  61. package/coverage/lcov-report/src/i18n.js.html +167 -0
  62. package/coverage/lcov-report/src/index.html +117 -0
  63. package/coverage/lcov-report/src/translations/english.js.html +95 -0
  64. package/coverage/lcov-report/src/translations/german.js.html +95 -0
  65. package/coverage/lcov-report/src/translations/index.html +132 -0
  66. package/coverage/lcov.info +1240 -976
  67. package/dist/b556faa3bc6829d2.png +0 -0
  68. package/dist/index.esm.js +102 -71
  69. package/dist/index.esm.js.map +1 -1
  70. package/package.json +3 -1
  71. package/public/assets/dop.png +0 -0
  72. package/public/assets/historic.png +0 -0
  73. package/public/assets/osm.png +0 -0
  74. package/public/thumbnails/MlFollowGps.png +0 -0
  75. package/public/thumbnails/MlThreeJsLayer.png +0 -0
  76. package/src/components/MapLibreMap/lib/MapLibreGlWrapper.js +58 -73
  77. package/src/components/MlFeatureEditor/MlFeatureEditor.meta.json +2 -2
  78. package/src/components/MlFollowGps/MlFollowGps.js +45 -43
  79. package/src/components/MlFollowGps/MlFollowGps.meta.json +2 -2
  80. package/src/components/MlFollowGps/assets/marker.png +0 -0
  81. package/src/components/MlGPXViewer/MlGPXViewer.js +45 -43
  82. package/src/components/MlGPXViewer/gpxConverter.js +22 -29
  83. package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.js +22 -8
  84. package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.js +3 -4
  85. package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.test.js +6 -7
  86. package/src/components/MlLayer/MlLayer.js +2 -2
  87. package/src/components/MlLayer/MlLayer.test.js +12 -10
  88. package/src/components/MlLayerMagnify/MlLayerMagnify.js +3 -3
  89. package/src/components/MlLayerSwipe/MlLayerSwipe.js +4 -5
  90. package/src/components/MlLayerSwitcher/MlLayerSwitcher.css +17 -0
  91. package/src/components/MlLayerSwitcher/MlLayerSwitcher.doc.de.md +3 -0
  92. package/src/components/MlLayerSwitcher/MlLayerSwitcher.js +223 -0
  93. package/src/components/MlLayerSwitcher/MlLayerSwitcher.meta_.json +15 -0
  94. package/src/components/MlLayerSwitcher/MlLayerSwitcher.stories.js +106 -0
  95. package/src/components/MlLayerSwitcher/assets/sample_1.json +26 -0
  96. package/src/components/MlLayerSwitcher/assets/sample_2.json +22 -0
  97. package/src/components/MlLayerSwitcher/components/LayerBox.js +98 -0
  98. package/src/components/MlMarker/MlMarker.js +1 -1
  99. package/src/components/MlNavigationTools/MlNavigationTools.js +26 -22
  100. package/src/components/MlScaleReference/MlScaleReference.meta.json +1 -1
  101. package/src/components/MlScaleReference/MlScaleReference.stories.js +25 -21
  102. package/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.stories.js +12 -6
  103. package/src/components/MlThreeJsLayer/MlThreeJsLayer.js +8 -15
  104. package/src/components/MlWmsLayer/MlWmsLayer.js +1 -1
  105. package/src/components/MlWmsLoader/MlWmsLoader.js +8 -4
  106. package/src/components/MlWmsLoader/MlWmsLoader.meta.json +1 -1
  107. package/src/components/MlWmsLoader/MlWmsLoader.stories.js +5 -4
  108. package/src/decorators/EmptyMapContextDecorator.js +11 -6
  109. package/src/decorators/MapContext3DDecorator.js +25 -20
  110. package/src/decorators/MapContextDashboardDecorator.js +7 -2
  111. package/src/decorators/MapContextDecorator.js +7 -3
  112. package/src/decorators/MapContextKlokantechBasicDecorator.js +8 -4
  113. package/src/decorators/MultiMapContextDecorator.js +2 -1
  114. package/src/hooks/useWms.js +7 -6
  115. package/src/i18n.js +28 -0
  116. package/src/translations/english.js +4 -0
  117. package/src/translations/german.js +4 -0
  118. package/src/ui_components/ImageLoader.js +73 -0
  119. package/src/ui_components/Sidebar.js +75 -20
  120. package/src/ui_components/TopToolbar.js +18 -18
@@ -3,15 +3,15 @@
3
3
  <html lang="en">
4
4
 
5
5
  <head>
6
- <title>Code coverage report for components/MlMarker/MlMarker.js</title>
6
+ <title>Code coverage report for src/components/MlMarker/MlMarker.js</title>
7
7
  <meta charset="utf-8" />
8
- <link rel="stylesheet" href="../../prettify.css" />
9
- <link rel="stylesheet" href="../../base.css" />
10
- <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
8
+ <link rel="stylesheet" href="../../../prettify.css" />
9
+ <link rel="stylesheet" href="../../../base.css" />
10
+ <link rel="shortcut icon" type="image/x-icon" href="../../../favicon.png" />
11
11
  <meta name="viewport" content="width=device-width, initial-scale=1" />
12
12
  <style type='text/css'>
13
13
  .coverage-summary .sorter {
14
- background-image: url(../../sort-arrow-sprite.png);
14
+ background-image: url(../../../sort-arrow-sprite.png);
15
15
  }
16
16
  </style>
17
17
  </head>
@@ -19,7 +19,7 @@
19
19
  <body>
20
20
  <div class='wrapper'>
21
21
  <div class='pad1'>
22
- <h1><a href="../../index.html">All files</a> / <a href="index.html">components/MlMarker</a> MlMarker.js</h1>
22
+ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/components/MlMarker</a> MlMarker.js</h1>
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
@@ -492,7 +492,7 @@ const MlMarker = <span class="cstat-no" title="statement not covered" ><span cla
492
492
  "&amp;:hover": {
493
493
  opacity: 1,
494
494
  },
495
- zIndex: 1000,
495
+ zIndex: -1,
496
496
  }}
497
497
  &gt;
498
498
  &lt;iframe
@@ -538,17 +538,17 @@ export default MlMarker;
538
538
  <div class='footer quiet pad2 space-top1 center small'>
539
539
  Code coverage generated by
540
540
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener">istanbul</a>
541
- at Sat Dec 04 2021 10:55:55 GMT+0000 (Coordinated Universal Time)
541
+ at Wed Dec 15 2021 17:14:00 GMT+0000 (Coordinated Universal Time)
542
542
  </div>
543
543
  </div>
544
- <script src="../../prettify.js"></script>
544
+ <script src="../../../prettify.js"></script>
545
545
  <script>
546
546
  window.onload = function () {
547
547
  prettyPrint();
548
548
  };
549
549
  </script>
550
- <script src="../../sorter.js"></script>
551
- <script src="../../block-navigation.js"></script>
550
+ <script src="../../../sorter.js"></script>
551
+ <script src="../../../block-navigation.js"></script>
552
552
  </body>
553
553
  </html>
554
554
 
@@ -3,15 +3,15 @@
3
3
  <html lang="en">
4
4
 
5
5
  <head>
6
- <title>Code coverage report for components/MlMarker</title>
6
+ <title>Code coverage report for src/components/MlMarker</title>
7
7
  <meta charset="utf-8" />
8
- <link rel="stylesheet" href="../../prettify.css" />
9
- <link rel="stylesheet" href="../../base.css" />
10
- <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
8
+ <link rel="stylesheet" href="../../../prettify.css" />
9
+ <link rel="stylesheet" href="../../../base.css" />
10
+ <link rel="shortcut icon" type="image/x-icon" href="../../../favicon.png" />
11
11
  <meta name="viewport" content="width=device-width, initial-scale=1" />
12
12
  <style type='text/css'>
13
13
  .coverage-summary .sorter {
14
- background-image: url(../../sort-arrow-sprite.png);
14
+ background-image: url(../../../sort-arrow-sprite.png);
15
15
  }
16
16
  </style>
17
17
  </head>
@@ -19,7 +19,7 @@
19
19
  <body>
20
20
  <div class='wrapper'>
21
21
  <div class='pad1'>
22
- <h1><a href="../../index.html">All files</a> components/MlMarker</h1>
22
+ <h1><a href="../../../index.html">All files</a> src/components/MlMarker</h1>
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
@@ -101,17 +101,17 @@
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">istanbul</a>
104
- at Sat Dec 04 2021 10:55:55 GMT+0000 (Coordinated Universal Time)
104
+ at Wed Dec 15 2021 17:14:00 GMT+0000 (Coordinated Universal Time)
105
105
  </div>
106
106
  </div>
107
- <script src="../../prettify.js"></script>
107
+ <script src="../../../prettify.js"></script>
108
108
  <script>
109
109
  window.onload = function () {
110
110
  prettyPrint();
111
111
  };
112
112
  </script>
113
- <script src="../../sorter.js"></script>
114
- <script src="../../block-navigation.js"></script>
113
+ <script src="../../../sorter.js"></script>
114
+ <script src="../../../block-navigation.js"></script>
115
115
  </body>
116
116
  </html>
117
117
 
@@ -3,15 +3,15 @@
3
3
  <html lang="en">
4
4
 
5
5
  <head>
6
- <title>Code coverage report for components/MlNavigationCompass/MlNavigationCompass.js</title>
6
+ <title>Code coverage report for src/components/MlNavigationCompass/MlNavigationCompass.js</title>
7
7
  <meta charset="utf-8" />
8
- <link rel="stylesheet" href="../../prettify.css" />
9
- <link rel="stylesheet" href="../../base.css" />
10
- <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
8
+ <link rel="stylesheet" href="../../../prettify.css" />
9
+ <link rel="stylesheet" href="../../../base.css" />
10
+ <link rel="shortcut icon" type="image/x-icon" href="../../../favicon.png" />
11
11
  <meta name="viewport" content="width=device-width, initial-scale=1" />
12
12
  <style type='text/css'>
13
13
  .coverage-summary .sorter {
14
- background-image: url(../../sort-arrow-sprite.png);
14
+ background-image: url(../../../sort-arrow-sprite.png);
15
15
  }
16
16
  </style>
17
17
  </head>
@@ -19,7 +19,7 @@
19
19
  <body>
20
20
  <div class='wrapper'>
21
21
  <div class='pad1'>
22
- <h1><a href="../../index.html">All files</a> / <a href="index.html">components/MlNavigationCompass</a> MlNavigationCompass.js</h1>
22
+ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/components/MlNavigationCompass</a> MlNavigationCompass.js</h1>
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
@@ -763,17 +763,17 @@ export default MlNavigationCompass;
763
763
  <div class='footer quiet pad2 space-top1 center small'>
764
764
  Code coverage generated by
765
765
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener">istanbul</a>
766
- at Sat Dec 04 2021 10:55:55 GMT+0000 (Coordinated Universal Time)
766
+ at Wed Dec 15 2021 17:14:00 GMT+0000 (Coordinated Universal Time)
767
767
  </div>
768
768
  </div>
769
- <script src="../../prettify.js"></script>
769
+ <script src="../../../prettify.js"></script>
770
770
  <script>
771
771
  window.onload = function () {
772
772
  prettyPrint();
773
773
  };
774
774
  </script>
775
- <script src="../../sorter.js"></script>
776
- <script src="../../block-navigation.js"></script>
775
+ <script src="../../../sorter.js"></script>
776
+ <script src="../../../block-navigation.js"></script>
777
777
  </body>
778
778
  </html>
779
779
 
@@ -3,15 +3,15 @@
3
3
  <html lang="en">
4
4
 
5
5
  <head>
6
- <title>Code coverage report for components/MlNavigationCompass</title>
6
+ <title>Code coverage report for src/components/MlNavigationCompass</title>
7
7
  <meta charset="utf-8" />
8
- <link rel="stylesheet" href="../../prettify.css" />
9
- <link rel="stylesheet" href="../../base.css" />
10
- <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
8
+ <link rel="stylesheet" href="../../../prettify.css" />
9
+ <link rel="stylesheet" href="../../../base.css" />
10
+ <link rel="shortcut icon" type="image/x-icon" href="../../../favicon.png" />
11
11
  <meta name="viewport" content="width=device-width, initial-scale=1" />
12
12
  <style type='text/css'>
13
13
  .coverage-summary .sorter {
14
- background-image: url(../../sort-arrow-sprite.png);
14
+ background-image: url(../../../sort-arrow-sprite.png);
15
15
  }
16
16
  </style>
17
17
  </head>
@@ -19,7 +19,7 @@
19
19
  <body>
20
20
  <div class='wrapper'>
21
21
  <div class='pad1'>
22
- <h1><a href="../../index.html">All files</a> components/MlNavigationCompass</h1>
22
+ <h1><a href="../../../index.html">All files</a> src/components/MlNavigationCompass</h1>
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
@@ -101,17 +101,17 @@
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">istanbul</a>
104
- at Sat Dec 04 2021 10:55:55 GMT+0000 (Coordinated Universal Time)
104
+ at Wed Dec 15 2021 17:14:00 GMT+0000 (Coordinated Universal Time)
105
105
  </div>
106
106
  </div>
107
- <script src="../../prettify.js"></script>
107
+ <script src="../../../prettify.js"></script>
108
108
  <script>
109
109
  window.onload = function () {
110
110
  prettyPrint();
111
111
  };
112
112
  </script>
113
- <script src="../../sorter.js"></script>
114
- <script src="../../block-navigation.js"></script>
113
+ <script src="../../../sorter.js"></script>
114
+ <script src="../../../block-navigation.js"></script>
115
115
  </body>
116
116
  </html>
117
117
 
@@ -3,15 +3,15 @@
3
3
  <html lang="en">
4
4
 
5
5
  <head>
6
- <title>Code coverage report for components/MlNavigationTools/MlNavigationTools.js</title>
6
+ <title>Code coverage report for src/components/MlNavigationTools/MlNavigationTools.js</title>
7
7
  <meta charset="utf-8" />
8
- <link rel="stylesheet" href="../../prettify.css" />
9
- <link rel="stylesheet" href="../../base.css" />
10
- <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
8
+ <link rel="stylesheet" href="../../../prettify.css" />
9
+ <link rel="stylesheet" href="../../../base.css" />
10
+ <link rel="shortcut icon" type="image/x-icon" href="../../../favicon.png" />
11
11
  <meta name="viewport" content="width=device-width, initial-scale=1" />
12
12
  <style type='text/css'>
13
13
  .coverage-summary .sorter {
14
- background-image: url(../../sort-arrow-sprite.png);
14
+ background-image: url(../../../sort-arrow-sprite.png);
15
15
  }
16
16
  </style>
17
17
  </head>
@@ -19,20 +19,20 @@
19
19
  <body>
20
20
  <div class='wrapper'>
21
21
  <div class='pad1'>
22
- <h1><a href="../../index.html">All files</a> / <a href="index.html">components/MlNavigationTools</a> MlNavigationTools.js</h1>
22
+ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/components/MlNavigationTools</a> MlNavigationTools.js</h1>
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
26
  <span class="strong">0% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>0/48</span>
28
+ <span class='fraction'>0/49</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
33
  <span class="strong">0% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>0/22</span>
35
+ <span class='fraction'>0/44</span>
36
36
  </div>
37
37
 
38
38
 
@@ -46,7 +46,7 @@
46
46
  <div class='fl pad1y space-right2'>
47
47
  <span class="strong">0% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>0/44</span>
49
+ <span class='fraction'>0/45</span>
50
50
  </div>
51
51
 
52
52
 
@@ -227,7 +227,12 @@
227
227
  <a name='L162'></a><a href='#L162'>162</a>
228
228
  <a name='L163'></a><a href='#L163'>163</a>
229
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>
230
+ <a name='L165'></a><a href='#L165'>165</a>
231
+ <a name='L166'></a><a href='#L166'>166</a>
232
+ <a name='L167'></a><a href='#L167'>167</a>
233
+ <a name='L168'></a><a href='#L168'>168</a>
234
+ <a name='L169'></a><a href='#L169'>169</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
235
+ <span class="cline-any cline-neutral">&nbsp;</span>
231
236
  <span class="cline-any cline-neutral">&nbsp;</span>
232
237
  <span class="cline-any cline-neutral">&nbsp;</span>
233
238
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -252,6 +257,8 @@
252
257
  <span class="cline-any cline-no">&nbsp;</span>
253
258
  <span class="cline-any cline-no">&nbsp;</span>
254
259
  <span class="cline-any cline-no">&nbsp;</span>
260
+ <span class="cline-any cline-no">&nbsp;</span>
261
+ <span class="cline-any cline-neutral">&nbsp;</span>
255
262
  <span class="cline-any cline-neutral">&nbsp;</span>
256
263
  <span class="cline-any cline-neutral">&nbsp;</span>
257
264
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -391,10 +398,11 @@
391
398
  <span class="cline-any cline-neutral">&nbsp;</span>
392
399
  <span class="cline-any cline-neutral">&nbsp;</span>
393
400
  <span class="cline-any cline-neutral">&nbsp;</span>
401
+ <span class="cline-any cline-neutral">&nbsp;</span>
394
402
  <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React from "react";
395
403
  &nbsp;
396
- import { MapContext } from "@mapcomponents/react-core";
397
- import { useEffect, useRef, useContext, useState } from "react";
404
+ import {MapContext} from "@mapcomponents/react-core";
405
+ import {useEffect, useRef, useContext, useState} from "react";
398
406
  import Button from "@mui/material/Button";
399
407
  import ButtonGroup from "@mui/material/ButtonGroup";
400
408
  import ControlPointIcon from "@mui/icons-material/ControlPoint";
@@ -402,10 +410,11 @@ import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline";
402
410
  //import ZoomOutIcon from "@mui/icons-material/ZoomOut";
403
411
  //import ZoomInIcon from "@mui/icons-material/ZoomIn";
404
412
  import GpsFixedIcon from "@mui/icons-material/GpsFixed";
405
- import { v4 as uuidv4 } from "uuid";
413
+ import {v4 as uuidv4} from "uuid";
406
414
  &nbsp;
407
415
  import MlNavigationCompass from "../MlNavigationCompass/MlNavigationCompass";
408
416
  import MlFollowGps from "../MlFollowGps/MlFollowGps";
417
+ import useMediaQuery from "@mui/material/useMediaQuery";
409
418
  &nbsp;
410
419
  const MlNavigationTools = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(p</span>rops) =&gt; {</span>
411
420
  const mapContext = <span class="cstat-no" title="statement not covered" >useContext(MapContext);</span>
@@ -415,17 +424,19 @@ const MlNavigationTools = <span class="cstat-no" title="statement not covered" >
415
424
  &nbsp;
416
425
  const [pitch, setPitch] = <span class="cstat-no" title="statement not covered" >useState(0);</span>
417
426
  const [locationAccessDenied, setLocationAccessDenied] = <span class="cstat-no" title="statement not covered" >useState(false);</span>
427
+ const mediaIsMobile = <span class="cstat-no" title="statement not covered" >useMediaQuery("(max-width:900px)");</span>
418
428
  const buttonStyle = <span class="cstat-no" title="statement not covered" >{</span>
419
- minWidth: "30px",
420
- minHeight: "30px",
421
- width: "30px",
422
- height: "30px",
429
+ minWidth: "20px",
430
+ minHeight: "20px",
431
+ width: mediaIsMobile ? "50px" : "30px",
432
+ height: mediaIsMobile ? "50px" : "30px",
423
433
  color: "#bbb",
424
434
  backgroundColor: "#414141",
425
435
  borderRadius: "23%",
426
436
  //border: "1px solid #bbb",
427
437
  //boxShadow: "0px 0px 4px rgba(0,0,0,.5)",
428
438
  margin: 0.15,
439
+ fontSize: mediaIsMobile ? "1.5em" : "1.2em",
429
440
  ":hover": {
430
441
  backgroundColor: "#515151",
431
442
  color: "#ececec",
@@ -470,7 +481,7 @@ const MlNavigationTools = <span class="cstat-no" title="statement not covered" >
470
481
  <span class="cstat-no" title="statement not covered" > if (!mapRef.current) <span class="cstat-no" title="statement not covered" >return;</span></span>
471
482
  &nbsp;
472
483
  <span class="cstat-no" title="statement not covered" > if (mapRef.current.transform._zoom + 0.5 &lt;= mapRef.current.transform._maxZoom) {</span>
473
- <span class="cstat-no" title="statement not covered" > mapRef.current.easeTo({ zoom: mapRef.current.transform._zoom + 0.5 });</span>
484
+ <span class="cstat-no" title="statement not covered" > mapRef.current.easeTo({zoom: mapRef.current.transform._zoom + 0.5});</span>
474
485
  }
475
486
  };
476
487
  &nbsp;
@@ -478,7 +489,7 @@ const MlNavigationTools = <span class="cstat-no" title="statement not covered" >
478
489
  <span class="cstat-no" title="statement not covered" > if (!mapRef.current) <span class="cstat-no" title="statement not covered" >return;</span></span>
479
490
  &nbsp;
480
491
  <span class="cstat-no" title="statement not covered" > if (mapRef.current.transform._zoom - 0.5 &gt;= mapRef.current.transform._minZoom) {</span>
481
- <span class="cstat-no" title="statement not covered" > mapRef.current.easeTo({ zoom: mapRef.current.transform._zoom - 0.5 });</span>
492
+ <span class="cstat-no" title="statement not covered" > mapRef.current.easeTo({zoom: mapRef.current.transform._zoom - 0.5});</span>
482
493
  }
483
494
  };
484
495
  &nbsp;
@@ -489,7 +500,7 @@ const MlNavigationTools = <span class="cstat-no" title="statement not covered" >
489
500
  <span class="cstat-no" title="statement not covered" > if (mapRef.current.getPitch() !== 0) {</span>
490
501
  <span class="cstat-no" title="statement not covered" > targetPitch = 0;</span>
491
502
  }
492
- <span class="cstat-no" title="statement not covered" > mapRef.current.easeTo({ pitch: targetPitch });</span>
503
+ <span class="cstat-no" title="statement not covered" > mapRef.current.easeTo({pitch: targetPitch});</span>
493
504
  };
494
505
  &nbsp;
495
506
  const moveToCurrentLocation = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
@@ -510,8 +521,8 @@ const MlNavigationTools = <span class="cstat-no" title="statement not covered" >
510
521
  style={{
511
522
  zIndex: 501,
512
523
  position: "absolute",
513
- right: "20px",
514
- bottom: "20px",
524
+ right: mediaIsMobile ? "15px" : "5px",
525
+ bottom: mediaIsMobile ? "40px" : "20px",
515
526
  display: "flex",
516
527
  flexDirection: "column",
517
528
  }}
@@ -520,34 +531,35 @@ const MlNavigationTools = <span class="cstat-no" title="statement not covered" >
520
531
  style={{
521
532
  width: "31px",
522
533
  position: "relative",
523
- height: "50px",
524
- marginLeft: "-5px",
534
+ height: mediaIsMobile ? "55px" : "45px",
535
+ marginLeft: mediaIsMobile ? "3px" : "-5px",
536
+ transform: mediaIsMobile ? "scale(1.6)" : "scale(1)"
525
537
  }}
526
538
  backgroundStyle={{
527
539
  boxShadow: "0px 0px 18px rgba(0,0,0,.5)",
528
540
  }}
529
541
  /&gt;
530
- &lt;Button sx={{ ...buttonStyle, fontSize: ".9em", fontWeight: 600 }} onClick={adjustPitch}&gt;
542
+ &lt;Button sx={{...buttonStyle, fontWeight: 600}} onClick={adjustPitch}&gt;
531
543
  {pitch ? "2D" : "3D"}
532
544
  &lt;/Button&gt;
533
545
  &lt;Button sx={buttonStyle} onClick={moveToCurrentLocation} disabled={locationAccessDenied}&gt;
534
- &lt;GpsFixedIcon sx={{ width: ".9em" }} /&gt;
546
+ &lt;GpsFixedIcon sx={{fontSize: mediaIsMobile ? "1.5em" : "1.2em"}}/&gt;
535
547
  &lt;/Button&gt;
536
- &lt;MlFollowGps /&gt;
548
+ &lt;MlFollowGps style={buttonStyle}/&gt;
537
549
  &lt;ButtonGroup
538
550
  orientation="vertical"
539
551
  sx={{
540
- width: "30px",
552
+ width: "50px",
541
553
  border: "none",
542
- Button: { minWidth: "30px !important", border: "none", padding: 0 },
543
- "Button:hover": { border: "none" },
554
+ Button: {minWidth: "20px !important", border: "none", padding: 0},
555
+ "Button:hover": {border: "none"},
544
556
  }}
545
557
  &gt;
546
558
  &lt;Button sx={buttonStyle} onClick={zoomIn}&gt;
547
- &lt;ControlPointIcon /&gt;
559
+ &lt;ControlPointIcon sx={{fontSize: mediaIsMobile ? "1.5em" : "1.2em"}}/&gt;
548
560
  &lt;/Button&gt;
549
561
  &lt;Button sx={buttonStyle} onClick={zoomOut}&gt;
550
- &lt;RemoveCircleOutlineIcon /&gt;
562
+ &lt;RemoveCircleOutlineIcon sx={{fontSize: mediaIsMobile ? "1.5em" : "1.2em"}}/&gt;
551
563
  &lt;/Button&gt;
552
564
  &lt;/ButtonGroup&gt;
553
565
  &lt;/div&gt;
@@ -562,17 +574,17 @@ export default MlNavigationTools;
562
574
  <div class='footer quiet pad2 space-top1 center small'>
563
575
  Code coverage generated by
564
576
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener">istanbul</a>
565
- at Sat Dec 04 2021 10:55:55 GMT+0000 (Coordinated Universal Time)
577
+ at Wed Dec 15 2021 17:14:00 GMT+0000 (Coordinated Universal Time)
566
578
  </div>
567
579
  </div>
568
- <script src="../../prettify.js"></script>
580
+ <script src="../../../prettify.js"></script>
569
581
  <script>
570
582
  window.onload = function () {
571
583
  prettyPrint();
572
584
  };
573
585
  </script>
574
- <script src="../../sorter.js"></script>
575
- <script src="../../block-navigation.js"></script>
586
+ <script src="../../../sorter.js"></script>
587
+ <script src="../../../block-navigation.js"></script>
576
588
  </body>
577
589
  </html>
578
590
 
@@ -3,15 +3,15 @@
3
3
  <html lang="en">
4
4
 
5
5
  <head>
6
- <title>Code coverage report for components/MlNavigationTools</title>
6
+ <title>Code coverage report for src/components/MlNavigationTools</title>
7
7
  <meta charset="utf-8" />
8
- <link rel="stylesheet" href="../../prettify.css" />
9
- <link rel="stylesheet" href="../../base.css" />
10
- <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
8
+ <link rel="stylesheet" href="../../../prettify.css" />
9
+ <link rel="stylesheet" href="../../../base.css" />
10
+ <link rel="shortcut icon" type="image/x-icon" href="../../../favicon.png" />
11
11
  <meta name="viewport" content="width=device-width, initial-scale=1" />
12
12
  <style type='text/css'>
13
13
  .coverage-summary .sorter {
14
- background-image: url(../../sort-arrow-sprite.png);
14
+ background-image: url(../../../sort-arrow-sprite.png);
15
15
  }
16
16
  </style>
17
17
  </head>
@@ -19,20 +19,20 @@
19
19
  <body>
20
20
  <div class='wrapper'>
21
21
  <div class='pad1'>
22
- <h1><a href="../../index.html">All files</a> components/MlNavigationTools</h1>
22
+ <h1><a href="../../../index.html">All files</a> src/components/MlNavigationTools</h1>
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
26
  <span class="strong">0% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>0/48</span>
28
+ <span class='fraction'>0/49</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
33
  <span class="strong">0% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>0/22</span>
35
+ <span class='fraction'>0/44</span>
36
36
  </div>
37
37
 
38
38
 
@@ -46,7 +46,7 @@
46
46
  <div class='fl pad1y space-right2'>
47
47
  <span class="strong">0% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>0/44</span>
49
+ <span class='fraction'>0/45</span>
50
50
  </div>
51
51
 
52
52
 
@@ -84,13 +84,13 @@
84
84
  <div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
85
85
  </td>
86
86
  <td data-value="0" class="pct low">0%</td>
87
- <td data-value="48" class="abs low">0/48</td>
87
+ <td data-value="49" class="abs low">0/49</td>
88
88
  <td data-value="0" class="pct low">0%</td>
89
- <td data-value="22" class="abs low">0/22</td>
89
+ <td data-value="44" class="abs low">0/44</td>
90
90
  <td data-value="0" class="pct low">0%</td>
91
91
  <td data-value="11" class="abs low">0/11</td>
92
92
  <td data-value="0" class="pct low">0%</td>
93
- <td data-value="44" class="abs low">0/44</td>
93
+ <td data-value="45" class="abs low">0/45</td>
94
94
  </tr>
95
95
 
96
96
  </tbody>
@@ -101,17 +101,17 @@
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">istanbul</a>
104
- at Sat Dec 04 2021 10:55:55 GMT+0000 (Coordinated Universal Time)
104
+ at Wed Dec 15 2021 17:14:00 GMT+0000 (Coordinated Universal Time)
105
105
  </div>
106
106
  </div>
107
- <script src="../../prettify.js"></script>
107
+ <script src="../../../prettify.js"></script>
108
108
  <script>
109
109
  window.onload = function () {
110
110
  prettyPrint();
111
111
  };
112
112
  </script>
113
- <script src="../../sorter.js"></script>
114
- <script src="../../block-navigation.js"></script>
113
+ <script src="../../../sorter.js"></script>
114
+ <script src="../../../block-navigation.js"></script>
115
115
  </body>
116
116
  </html>
117
117
 
@@ -3,15 +3,15 @@
3
3
  <html lang="en">
4
4
 
5
5
  <head>
6
- <title>Code coverage report for components/MlOsmLayer/MlOsmLayer.js</title>
6
+ <title>Code coverage report for src/components/MlOsmLayer/MlOsmLayer.js</title>
7
7
  <meta charset="utf-8" />
8
- <link rel="stylesheet" href="../../prettify.css" />
9
- <link rel="stylesheet" href="../../base.css" />
10
- <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
8
+ <link rel="stylesheet" href="../../../prettify.css" />
9
+ <link rel="stylesheet" href="../../../base.css" />
10
+ <link rel="shortcut icon" type="image/x-icon" href="../../../favicon.png" />
11
11
  <meta name="viewport" content="width=device-width, initial-scale=1" />
12
12
  <style type='text/css'>
13
13
  .coverage-summary .sorter {
14
- background-image: url(../../sort-arrow-sprite.png);
14
+ background-image: url(../../../sort-arrow-sprite.png);
15
15
  }
16
16
  </style>
17
17
  </head>
@@ -19,7 +19,7 @@
19
19
  <body>
20
20
  <div class='wrapper'>
21
21
  <div class='pad1'>
22
- <h1><a href="../../index.html">All files</a> / <a href="index.html">components/MlOsmLayer</a> MlOsmLayer.js</h1>
22
+ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/components/MlOsmLayer</a> MlOsmLayer.js</h1>
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
@@ -406,17 +406,17 @@ export default MlOsmLayer;
406
406
  <div class='footer quiet pad2 space-top1 center small'>
407
407
  Code coverage generated by
408
408
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener">istanbul</a>
409
- at Sat Dec 04 2021 10:55:55 GMT+0000 (Coordinated Universal Time)
409
+ at Wed Dec 15 2021 17:14:00 GMT+0000 (Coordinated Universal Time)
410
410
  </div>
411
411
  </div>
412
- <script src="../../prettify.js"></script>
412
+ <script src="../../../prettify.js"></script>
413
413
  <script>
414
414
  window.onload = function () {
415
415
  prettyPrint();
416
416
  };
417
417
  </script>
418
- <script src="../../sorter.js"></script>
419
- <script src="../../block-navigation.js"></script>
418
+ <script src="../../../sorter.js"></script>
419
+ <script src="../../../block-navigation.js"></script>
420
420
  </body>
421
421
  </html>
422
422