@mapcomponents/react-maplibre 0.1.12 → 0.1.16

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 (133) hide show
  1. package/.github/workflows/storybook.yml +4 -2
  2. package/CHANGELOG.md +33 -0
  3. package/README.md +22 -6
  4. package/coverage/clover.xml +893 -760
  5. package/coverage/coverage-final.json +22 -17
  6. package/coverage/lcov-report/index.html +183 -123
  7. package/coverage/lcov-report/{components → src/components}/MapLibreMap/MapLibreMap.js.html +10 -10
  8. package/coverage/lcov-report/{components → src/components}/MapLibreMap/index.html +10 -10
  9. package/coverage/lcov-report/{components → src/components}/MlCreatePdfButton/MlCreatePdfButton.js.html +10 -10
  10. package/coverage/lcov-report/{components → src/components}/MlCreatePdfButton/index.html +10 -10
  11. package/coverage/lcov-report/{components → src/components}/MlFeatureEditor/MlFeatureEditor.js.html +10 -10
  12. package/coverage/lcov-report/{components → src/components}/MlFeatureEditor/index.html +10 -10
  13. package/coverage/lcov-report/{components → src/components}/MlFillExtrusionLayer/MlFillExtrusionLayer.js.html +10 -10
  14. package/coverage/lcov-report/{components → src/components}/MlFillExtrusionLayer/index.html +10 -10
  15. package/coverage/lcov-report/{components → src/components}/MlFollowGps/MlFollowGps.js.html +148 -136
  16. package/coverage/lcov-report/{components → src/components}/MlFollowGps/index.html +24 -24
  17. package/coverage/lcov-report/{components → src/components}/MlGPXViewer/MlGPXViewer.js.html +66 -60
  18. package/coverage/lcov-report/{components → src/components}/MlGPXViewer/gpxConverter.js.html +49 -70
  19. package/coverage/lcov-report/{components → src/components}/MlGPXViewer/index.html +25 -25
  20. package/coverage/lcov-report/{components → src/components}/MlGeoJsonLayer/MlGeoJsonLayer.js.html +155 -47
  21. package/coverage/lcov-report/{components → src/components}/MlGeoJsonLayer/index.html +28 -28
  22. package/coverage/lcov-report/{components/MlLayer/MlLayer.js.html → src/components/MlImageMarkerLayer/MlImageMarkerLayer.js.html} +88 -121
  23. package/coverage/lcov-report/{components → src/components}/MlImageMarkerLayer/index.html +28 -28
  24. package/coverage/lcov-report/{components/MlImageMarkerLayer/MlImageMarkerLayer.js.html → src/components/MlLayer/MlLayer.js.html} +116 -125
  25. package/coverage/lcov-report/src/components/MlLayer/index.html +117 -0
  26. package/coverage/lcov-report/{components → src/components}/MlLayerMagnify/MlLayerMagnify.js.html +41 -41
  27. package/coverage/lcov-report/{components → src/components}/MlLayerMagnify/index.html +24 -24
  28. package/coverage/lcov-report/{components → src/components}/MlLayerSwipe/MlLayerSwipe.js.html +38 -41
  29. package/coverage/lcov-report/{components → src/components}/MlLayerSwipe/index.html +24 -24
  30. package/coverage/lcov-report/src/components/MlLayerSwitcher/MlLayerSwitcher.js.html +755 -0
  31. package/coverage/lcov-report/src/components/MlLayerSwitcher/components/LayerBox.js.html +380 -0
  32. package/coverage/lcov-report/src/components/MlLayerSwitcher/components/index.html +117 -0
  33. package/coverage/lcov-report/src/components/MlLayerSwitcher/index.html +117 -0
  34. package/coverage/lcov-report/{components → src/components}/MlMarker/MlMarker.js.html +11 -11
  35. package/coverage/lcov-report/{components → src/components}/MlMarker/index.html +10 -10
  36. package/coverage/lcov-report/{components → src/components}/MlNavigationCompass/MlNavigationCompass.js.html +10 -10
  37. package/coverage/lcov-report/{components → src/components}/MlNavigationCompass/index.html +10 -10
  38. package/coverage/lcov-report/{components → src/components}/MlNavigationTools/MlNavigationTools.js.html +50 -41
  39. package/coverage/lcov-report/{components → src/components}/MlNavigationTools/index.html +18 -18
  40. package/coverage/lcov-report/{components → src/components}/MlOsmLayer/MlOsmLayer.js.html +10 -10
  41. package/coverage/lcov-report/{components → src/components}/MlOsmLayer/index.html +10 -10
  42. package/coverage/lcov-report/{components → src/components}/MlScaleReference/MlScaleReference.js.html +10 -10
  43. package/coverage/lcov-report/{components → src/components}/MlScaleReference/index.html +10 -10
  44. package/coverage/lcov-report/{components → src/components}/MlShareMapState/MlShareMapState.js.html +217 -25
  45. package/coverage/lcov-report/{components → src/components}/MlShareMapState/index.html +18 -18
  46. package/coverage/lcov-report/{components → src/components}/MlSpatialElevationProfile/MlSpatialElevationProfile.js.html +10 -10
  47. package/coverage/lcov-report/{components → src/components}/MlSpatialElevationProfile/index.html +10 -10
  48. package/coverage/lcov-report/{components → src/components}/MlThreeJsLayer/MlThreeJsLayer.js.html +30 -54
  49. package/coverage/lcov-report/{components → src/components}/MlThreeJsLayer/index.html +24 -24
  50. package/coverage/lcov-report/{components → src/components}/MlUseMapDebugger/MlUseMapDebugger.js.html +10 -10
  51. package/coverage/lcov-report/{components → src/components}/MlUseMapDebugger/index.html +10 -10
  52. package/coverage/lcov-report/{components → src/components}/MlVectorTileLayer/MlVectorTileLayer.js.html +10 -10
  53. package/coverage/lcov-report/{components → src/components}/MlVectorTileLayer/index.html +10 -10
  54. package/coverage/lcov-report/{components → src/components}/MlWmsFeatureInfoPopup/MlWmsFeatureInfoPopup.js.html +10 -10
  55. package/coverage/lcov-report/{components → src/components}/MlWmsFeatureInfoPopup/index.html +10 -10
  56. package/coverage/lcov-report/{components → src/components}/MlWmsLayer/MlWmsLayer.js.html +13 -13
  57. package/coverage/lcov-report/{components → src/components}/MlWmsLayer/index.html +14 -14
  58. package/coverage/lcov-report/{components → src/components}/MlWmsLoader/MlWmsLoader.js.html +31 -19
  59. package/coverage/lcov-report/{components → src/components}/MlWmsLoader/index.html +16 -16
  60. package/coverage/lcov-report/src/hooks/index.html +147 -0
  61. package/coverage/lcov-report/src/hooks/useMap.js.html +296 -0
  62. package/coverage/lcov-report/{hooks → src/hooks}/useMapState.js.html +91 -91
  63. package/coverage/lcov-report/{hooks → src/hooks}/useWms.js.html +18 -18
  64. package/coverage/lcov-report/src/i18n.js.html +167 -0
  65. package/coverage/lcov-report/src/index.html +117 -0
  66. package/coverage/lcov-report/src/translations/english.js.html +95 -0
  67. package/coverage/lcov-report/src/translations/german.js.html +95 -0
  68. package/coverage/lcov-report/src/translations/index.html +132 -0
  69. package/coverage/lcov.info +1610 -1314
  70. package/dist/b556faa3bc6829d2.png +0 -0
  71. package/dist/index.esm.js +934 -668
  72. package/dist/index.esm.js.map +1 -1
  73. package/package.json +3 -1
  74. package/public/assets/dop.png +0 -0
  75. package/public/assets/historic.png +0 -0
  76. package/public/assets/osm.png +0 -0
  77. package/public/thumbnails/MlFollowGps.png +0 -0
  78. package/public/thumbnails/MlThreeJsLayer.png +0 -0
  79. package/src/components/MapLibreMap/lib/MapLibreGlWrapper.js +53 -67
  80. package/src/components/MlComponentTemplate/MlComponentTemplate.js +6 -31
  81. package/src/components/MlFeatureEditor/MlFeatureEditor.meta.json +2 -2
  82. package/src/components/MlFollowGps/MlFollowGps.js +92 -88
  83. package/src/components/MlFollowGps/MlFollowGps.meta.json +2 -2
  84. package/src/components/MlFollowGps/MlFollowGps.test.js +3 -5
  85. package/src/components/MlFollowGps/assets/marker.png +0 -0
  86. package/src/components/MlGPXViewer/MlGPXViewer.js +45 -43
  87. package/src/components/MlGPXViewer/gpxConverter.js +22 -29
  88. package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.js +45 -9
  89. package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.js +21 -57
  90. package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.test.js +6 -7
  91. package/src/components/MlLayer/MlLayer.js +28 -6
  92. package/src/components/MlLayer/MlLayer.test.js +12 -10
  93. package/src/components/MlLayerMagnify/MlLayerMagnify.js +3 -3
  94. package/src/components/MlLayerSwipe/MlLayerSwipe.js +4 -5
  95. package/src/components/MlLayerSwitcher/MlLayerSwitcher.css +17 -0
  96. package/src/components/MlLayerSwitcher/MlLayerSwitcher.doc.de.md +3 -0
  97. package/src/components/MlLayerSwitcher/MlLayerSwitcher.js +223 -0
  98. package/src/components/MlLayerSwitcher/MlLayerSwitcher.meta_.json +15 -0
  99. package/src/components/MlLayerSwitcher/MlLayerSwitcher.stories.js +106 -0
  100. package/src/components/MlLayerSwitcher/assets/sample_1.json +26 -0
  101. package/src/components/MlLayerSwitcher/assets/sample_2.json +22 -0
  102. package/src/components/MlLayerSwitcher/components/LayerBox.js +98 -0
  103. package/src/components/MlMarker/MlMarker.js +1 -1
  104. package/src/components/MlNavigationTools/MlNavigationTools.js +29 -26
  105. package/src/components/MlScaleReference/MlScaleReference.meta.json +1 -1
  106. package/src/components/MlScaleReference/MlScaleReference.stories.js +25 -21
  107. package/src/components/MlShareMapState/MlShareMapState.js +73 -9
  108. package/src/components/MlShareMapState/MlShareMapState.stories.js +24 -1
  109. package/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.stories.js +12 -6
  110. package/src/components/MlThreeJsLayer/MlThreeJsLayer.js +8 -15
  111. package/src/components/MlWmsLayer/MlWmsLayer.js +1 -1
  112. package/src/components/MlWmsLoader/MlWmsLoader.js +8 -4
  113. package/src/components/MlWmsLoader/MlWmsLoader.meta.json +1 -1
  114. package/src/components/MlWmsLoader/MlWmsLoader.stories.js +5 -4
  115. package/src/decorators/EmptyMapContextDecorator.js +11 -6
  116. package/src/decorators/MapContext3DDecorator.js +25 -20
  117. package/src/decorators/MapContextDashboardDecorator.js +7 -2
  118. package/src/decorators/MapContextDecorator.js +7 -3
  119. package/src/decorators/MapContextKlokantechBasicDecorator.js +8 -4
  120. package/src/decorators/MultiMapContextDecorator.js +2 -1
  121. package/src/hooks/useMap.js +33 -62
  122. package/src/hooks/useMapState.js +3 -3
  123. package/src/hooks/useWms.js +7 -6
  124. package/src/i18n.js +28 -0
  125. package/src/index.js +3 -0
  126. package/src/translations/english.js +4 -0
  127. package/src/translations/german.js +4 -0
  128. package/src/ui_components/ImageLoader.js +73 -0
  129. package/src/ui_components/Sidebar.js +75 -20
  130. package/src/ui_components/TopToolbar.js +18 -18
  131. package/coverage/lcov-report/components/MlLayer/index.html +0 -117
  132. package/coverage/lcov-report/hooks/index.html +0 -147
  133. package/coverage/lcov-report/hooks/useMap.js.html +0 -383
@@ -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 Thu Dec 23 2021 12:19: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 Thu Dec 23 2021 12:19: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 Thu Dec 23 2021 12:19: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 Thu Dec 23 2021 12:19: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,34 +19,34 @@
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/50</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
 
39
39
  <div class='fl pad1y space-right2'>
40
40
  <span class="strong">0% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>0/11</span>
42
+ <span class='fraction'>0/12</span>
43
43
  </div>
44
44
 
45
45
 
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/46</span>
50
50
  </div>
51
51
 
52
52
 
@@ -227,7 +227,11 @@
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></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
234
+ <span class="cline-any cline-neutral">&nbsp;</span>
231
235
  <span class="cline-any cline-neutral">&nbsp;</span>
232
236
  <span class="cline-any cline-neutral">&nbsp;</span>
233
237
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -252,6 +256,7 @@
252
256
  <span class="cline-any cline-no">&nbsp;</span>
253
257
  <span class="cline-any cline-no">&nbsp;</span>
254
258
  <span class="cline-any cline-no">&nbsp;</span>
259
+ <span class="cline-any cline-no">&nbsp;</span>
255
260
  <span class="cline-any cline-neutral">&nbsp;</span>
256
261
  <span class="cline-any cline-neutral">&nbsp;</span>
257
262
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -370,6 +375,7 @@
370
375
  <span class="cline-any cline-neutral">&nbsp;</span>
371
376
  <span class="cline-any cline-neutral">&nbsp;</span>
372
377
  <span class="cline-any cline-neutral">&nbsp;</span>
378
+ <span class="cline-any cline-no">&nbsp;</span>
373
379
  <span class="cline-any cline-neutral">&nbsp;</span>
374
380
  <span class="cline-any cline-neutral">&nbsp;</span>
375
381
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -393,8 +399,8 @@
393
399
  <span class="cline-any cline-neutral">&nbsp;</span>
394
400
  <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React from "react";
395
401
  &nbsp;
396
- import { MapContext } from "@mapcomponents/react-core";
397
- import { useEffect, useRef, useContext, useState } from "react";
402
+ import {MapContext} from "@mapcomponents/react-core";
403
+ import {useEffect, useRef, useContext, useState} from "react";
398
404
  import Button from "@mui/material/Button";
399
405
  import ButtonGroup from "@mui/material/ButtonGroup";
400
406
  import ControlPointIcon from "@mui/icons-material/ControlPoint";
@@ -402,10 +408,11 @@ import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline";
402
408
  //import ZoomOutIcon from "@mui/icons-material/ZoomOut";
403
409
  //import ZoomInIcon from "@mui/icons-material/ZoomIn";
404
410
  import GpsFixedIcon from "@mui/icons-material/GpsFixed";
405
- import { v4 as uuidv4 } from "uuid";
411
+ import {v4 as uuidv4} from "uuid";
406
412
  &nbsp;
407
413
  import MlNavigationCompass from "../MlNavigationCompass/MlNavigationCompass";
408
414
  import MlFollowGps from "../MlFollowGps/MlFollowGps";
415
+ import useMediaQuery from "@mui/material/useMediaQuery";
409
416
  &nbsp;
410
417
  const MlNavigationTools = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(p</span>rops) =&gt; {</span>
411
418
  const mapContext = <span class="cstat-no" title="statement not covered" >useContext(MapContext);</span>
@@ -415,21 +422,22 @@ const MlNavigationTools = <span class="cstat-no" title="statement not covered" >
415
422
  &nbsp;
416
423
  const [pitch, setPitch] = <span class="cstat-no" title="statement not covered" >useState(0);</span>
417
424
  const [locationAccessDenied, setLocationAccessDenied] = <span class="cstat-no" title="statement not covered" >useState(false);</span>
425
+ const mediaIsMobile = <span class="cstat-no" title="statement not covered" >useMediaQuery("(max-width:900px)");</span>
418
426
  const buttonStyle = <span class="cstat-no" title="statement not covered" >{</span>
419
- minWidth: "30px",
420
- minHeight: "30px",
421
- width: "30px",
422
- height: "30px",
423
- color: "#bbb",
427
+ minWidth: "20px",
428
+ minHeight: "20px",
429
+ width: mediaIsMobile ? "50px" : "30px",
430
+ height: mediaIsMobile ? "50px" : "30px",
424
431
  backgroundColor: "#414141",
425
432
  borderRadius: "23%",
426
433
  //border: "1px solid #bbb",
427
434
  //boxShadow: "0px 0px 4px rgba(0,0,0,.5)",
428
435
  margin: 0.15,
436
+ fontSize: mediaIsMobile ? "1.5em" : "1.2em",
429
437
  ":hover": {
430
438
  backgroundColor: "#515151",
431
- color: "#ececec",
432
439
  },
440
+ color: "#ececec"
433
441
  };
434
442
  &nbsp;
435
443
  <span class="cstat-no" title="statement not covered" > useEffect(<span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
@@ -470,7 +478,7 @@ const MlNavigationTools = <span class="cstat-no" title="statement not covered" >
470
478
  <span class="cstat-no" title="statement not covered" > if (!mapRef.current) <span class="cstat-no" title="statement not covered" >return;</span></span>
471
479
  &nbsp;
472
480
  <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>
481
+ <span class="cstat-no" title="statement not covered" > mapRef.current.easeTo({zoom: mapRef.current.transform._zoom + 0.5});</span>
474
482
  }
475
483
  };
476
484
  &nbsp;
@@ -478,7 +486,7 @@ const MlNavigationTools = <span class="cstat-no" title="statement not covered" >
478
486
  <span class="cstat-no" title="statement not covered" > if (!mapRef.current) <span class="cstat-no" title="statement not covered" >return;</span></span>
479
487
  &nbsp;
480
488
  <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>
489
+ <span class="cstat-no" title="statement not covered" > mapRef.current.easeTo({zoom: mapRef.current.transform._zoom - 0.5});</span>
482
490
  }
483
491
  };
484
492
  &nbsp;
@@ -489,7 +497,7 @@ const MlNavigationTools = <span class="cstat-no" title="statement not covered" >
489
497
  <span class="cstat-no" title="statement not covered" > if (mapRef.current.getPitch() !== 0) {</span>
490
498
  <span class="cstat-no" title="statement not covered" > targetPitch = 0;</span>
491
499
  }
492
- <span class="cstat-no" title="statement not covered" > mapRef.current.easeTo({ pitch: targetPitch });</span>
500
+ <span class="cstat-no" title="statement not covered" > mapRef.current.easeTo({pitch: targetPitch});</span>
493
501
  };
494
502
  &nbsp;
495
503
  const moveToCurrentLocation = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
@@ -510,8 +518,8 @@ const MlNavigationTools = <span class="cstat-no" title="statement not covered" >
510
518
  style={{
511
519
  zIndex: 501,
512
520
  position: "absolute",
513
- right: "20px",
514
- bottom: "20px",
521
+ right: mediaIsMobile ? "15px" : "5px",
522
+ bottom: mediaIsMobile ? "40px" : "20px",
515
523
  display: "flex",
516
524
  flexDirection: "column",
517
525
  }}
@@ -520,34 +528,35 @@ const MlNavigationTools = <span class="cstat-no" title="statement not covered" >
520
528
  style={{
521
529
  width: "31px",
522
530
  position: "relative",
523
- height: "50px",
524
- marginLeft: "-5px",
531
+ height: mediaIsMobile ? "55px" : "45px",
532
+ marginLeft: mediaIsMobile ? "3px" : "-5px",
533
+ transform: mediaIsMobile ? "scale(1.6)" : "scale(1)"
525
534
  }}
526
535
  backgroundStyle={{
527
536
  boxShadow: "0px 0px 18px rgba(0,0,0,.5)",
528
537
  }}
529
538
  /&gt;
530
- &lt;Button sx={{ ...buttonStyle, fontSize: ".9em", fontWeight: 600 }} onClick={adjustPitch}&gt;
539
+ &lt;Button sx={{...buttonStyle, fontWeight: 600}} onClick={adjustPitch}&gt;
531
540
  {pitch ? "2D" : "3D"}
532
541
  &lt;/Button&gt;
533
542
  &lt;Button sx={buttonStyle} onClick={moveToCurrentLocation} disabled={locationAccessDenied}&gt;
534
- &lt;GpsFixedIcon sx={{ width: ".9em" }} /&gt;
543
+ &lt;GpsFixedIcon sx={{fontSize: mediaIsMobile ? "1.5em" : "1.2em"}}/&gt;
535
544
  &lt;/Button&gt;
536
- &lt;MlFollowGps /&gt;
545
+ &lt;MlFollowGps style={{...(<span class="fstat-no" title="function not covered" >({</span>color, ...rest}) =&gt; <span class="cstat-no" title="statement not covered" >rest)</span>(buttonStyle)}} /&gt;
537
546
  &lt;ButtonGroup
538
547
  orientation="vertical"
539
548
  sx={{
540
- width: "30px",
549
+ width: "50px",
541
550
  border: "none",
542
- Button: { minWidth: "30px !important", border: "none", padding: 0 },
543
- "Button:hover": { border: "none" },
551
+ Button: {minWidth: "20px !important", border: "none", padding: 0},
552
+ "Button:hover": {border: "none"},
544
553
  }}
545
554
  &gt;
546
- &lt;Button sx={buttonStyle} onClick={zoomIn}&gt;
547
- &lt;ControlPointIcon /&gt;
555
+ &lt;Button sx={{...buttonStyle, color: "#ececec",}} onClick={zoomIn}&gt;
556
+ &lt;ControlPointIcon sx={{fontSize: mediaIsMobile ? "1.5em" : "1.2em"}}/&gt;
548
557
  &lt;/Button&gt;
549
- &lt;Button sx={buttonStyle} onClick={zoomOut}&gt;
550
- &lt;RemoveCircleOutlineIcon /&gt;
558
+ &lt;Button sx={{...buttonStyle, color: "#ececec",}} onClick={zoomOut}&gt;
559
+ &lt;RemoveCircleOutlineIcon sx={{fontSize: mediaIsMobile ? "1.5em" : "1.2em"}}/&gt;
551
560
  &lt;/Button&gt;
552
561
  &lt;/ButtonGroup&gt;
553
562
  &lt;/div&gt;
@@ -562,17 +571,17 @@ export default MlNavigationTools;
562
571
  <div class='footer quiet pad2 space-top1 center small'>
563
572
  Code coverage generated by
564
573
  <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)
574
+ at Thu Dec 23 2021 12:19:00 GMT+0000 (Coordinated Universal Time)
566
575
  </div>
567
576
  </div>
568
- <script src="../../prettify.js"></script>
577
+ <script src="../../../prettify.js"></script>
569
578
  <script>
570
579
  window.onload = function () {
571
580
  prettyPrint();
572
581
  };
573
582
  </script>
574
- <script src="../../sorter.js"></script>
575
- <script src="../../block-navigation.js"></script>
583
+ <script src="../../../sorter.js"></script>
584
+ <script src="../../../block-navigation.js"></script>
576
585
  </body>
577
586
  </html>
578
587
 
@@ -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,34 +19,34 @@
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/50</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
 
39
39
  <div class='fl pad1y space-right2'>
40
40
  <span class="strong">0% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>0/11</span>
42
+ <span class='fraction'>0/12</span>
43
43
  </div>
44
44
 
45
45
 
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/46</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="50" class="abs low">0/50</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
- <td data-value="11" class="abs low">0/11</td>
91
+ <td data-value="12" class="abs low">0/12</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="46" class="abs low">0/46</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 Thu Dec 23 2021 12:19: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 Thu Dec 23 2021 12:19: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