@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.
- package/.github/workflows/storybook.yml +4 -2
- package/CHANGELOG.md +33 -0
- package/README.md +22 -6
- package/coverage/clover.xml +893 -760
- package/coverage/coverage-final.json +22 -17
- package/coverage/lcov-report/index.html +183 -123
- package/coverage/lcov-report/{components → src/components}/MapLibreMap/MapLibreMap.js.html +10 -10
- package/coverage/lcov-report/{components → src/components}/MapLibreMap/index.html +10 -10
- package/coverage/lcov-report/{components → src/components}/MlCreatePdfButton/MlCreatePdfButton.js.html +10 -10
- package/coverage/lcov-report/{components → src/components}/MlCreatePdfButton/index.html +10 -10
- package/coverage/lcov-report/{components → src/components}/MlFeatureEditor/MlFeatureEditor.js.html +10 -10
- package/coverage/lcov-report/{components → src/components}/MlFeatureEditor/index.html +10 -10
- package/coverage/lcov-report/{components → src/components}/MlFillExtrusionLayer/MlFillExtrusionLayer.js.html +10 -10
- package/coverage/lcov-report/{components → src/components}/MlFillExtrusionLayer/index.html +10 -10
- package/coverage/lcov-report/{components → src/components}/MlFollowGps/MlFollowGps.js.html +148 -136
- package/coverage/lcov-report/{components → src/components}/MlFollowGps/index.html +24 -24
- package/coverage/lcov-report/{components → src/components}/MlGPXViewer/MlGPXViewer.js.html +66 -60
- package/coverage/lcov-report/{components → src/components}/MlGPXViewer/gpxConverter.js.html +49 -70
- package/coverage/lcov-report/{components → src/components}/MlGPXViewer/index.html +25 -25
- package/coverage/lcov-report/{components → src/components}/MlGeoJsonLayer/MlGeoJsonLayer.js.html +155 -47
- package/coverage/lcov-report/{components → src/components}/MlGeoJsonLayer/index.html +28 -28
- package/coverage/lcov-report/{components/MlLayer/MlLayer.js.html → src/components/MlImageMarkerLayer/MlImageMarkerLayer.js.html} +88 -121
- package/coverage/lcov-report/{components → src/components}/MlImageMarkerLayer/index.html +28 -28
- package/coverage/lcov-report/{components/MlImageMarkerLayer/MlImageMarkerLayer.js.html → src/components/MlLayer/MlLayer.js.html} +116 -125
- package/coverage/lcov-report/src/components/MlLayer/index.html +117 -0
- package/coverage/lcov-report/{components → src/components}/MlLayerMagnify/MlLayerMagnify.js.html +41 -41
- package/coverage/lcov-report/{components → src/components}/MlLayerMagnify/index.html +24 -24
- package/coverage/lcov-report/{components → src/components}/MlLayerSwipe/MlLayerSwipe.js.html +38 -41
- package/coverage/lcov-report/{components → src/components}/MlLayerSwipe/index.html +24 -24
- package/coverage/lcov-report/src/components/MlLayerSwitcher/MlLayerSwitcher.js.html +755 -0
- package/coverage/lcov-report/src/components/MlLayerSwitcher/components/LayerBox.js.html +380 -0
- package/coverage/lcov-report/src/components/MlLayerSwitcher/components/index.html +117 -0
- package/coverage/lcov-report/src/components/MlLayerSwitcher/index.html +117 -0
- package/coverage/lcov-report/{components → src/components}/MlMarker/MlMarker.js.html +11 -11
- package/coverage/lcov-report/{components → src/components}/MlMarker/index.html +10 -10
- package/coverage/lcov-report/{components → src/components}/MlNavigationCompass/MlNavigationCompass.js.html +10 -10
- package/coverage/lcov-report/{components → src/components}/MlNavigationCompass/index.html +10 -10
- package/coverage/lcov-report/{components → src/components}/MlNavigationTools/MlNavigationTools.js.html +50 -41
- package/coverage/lcov-report/{components → src/components}/MlNavigationTools/index.html +18 -18
- package/coverage/lcov-report/{components → src/components}/MlOsmLayer/MlOsmLayer.js.html +10 -10
- package/coverage/lcov-report/{components → src/components}/MlOsmLayer/index.html +10 -10
- package/coverage/lcov-report/{components → src/components}/MlScaleReference/MlScaleReference.js.html +10 -10
- package/coverage/lcov-report/{components → src/components}/MlScaleReference/index.html +10 -10
- package/coverage/lcov-report/{components → src/components}/MlShareMapState/MlShareMapState.js.html +217 -25
- package/coverage/lcov-report/{components → src/components}/MlShareMapState/index.html +18 -18
- package/coverage/lcov-report/{components → src/components}/MlSpatialElevationProfile/MlSpatialElevationProfile.js.html +10 -10
- package/coverage/lcov-report/{components → src/components}/MlSpatialElevationProfile/index.html +10 -10
- package/coverage/lcov-report/{components → src/components}/MlThreeJsLayer/MlThreeJsLayer.js.html +30 -54
- package/coverage/lcov-report/{components → src/components}/MlThreeJsLayer/index.html +24 -24
- package/coverage/lcov-report/{components → src/components}/MlUseMapDebugger/MlUseMapDebugger.js.html +10 -10
- package/coverage/lcov-report/{components → src/components}/MlUseMapDebugger/index.html +10 -10
- package/coverage/lcov-report/{components → src/components}/MlVectorTileLayer/MlVectorTileLayer.js.html +10 -10
- package/coverage/lcov-report/{components → src/components}/MlVectorTileLayer/index.html +10 -10
- package/coverage/lcov-report/{components → src/components}/MlWmsFeatureInfoPopup/MlWmsFeatureInfoPopup.js.html +10 -10
- package/coverage/lcov-report/{components → src/components}/MlWmsFeatureInfoPopup/index.html +10 -10
- package/coverage/lcov-report/{components → src/components}/MlWmsLayer/MlWmsLayer.js.html +13 -13
- package/coverage/lcov-report/{components → src/components}/MlWmsLayer/index.html +14 -14
- package/coverage/lcov-report/{components → src/components}/MlWmsLoader/MlWmsLoader.js.html +31 -19
- package/coverage/lcov-report/{components → src/components}/MlWmsLoader/index.html +16 -16
- package/coverage/lcov-report/src/hooks/index.html +147 -0
- package/coverage/lcov-report/src/hooks/useMap.js.html +296 -0
- package/coverage/lcov-report/{hooks → src/hooks}/useMapState.js.html +91 -91
- package/coverage/lcov-report/{hooks → src/hooks}/useWms.js.html +18 -18
- package/coverage/lcov-report/src/i18n.js.html +167 -0
- package/coverage/lcov-report/src/index.html +117 -0
- package/coverage/lcov-report/src/translations/english.js.html +95 -0
- package/coverage/lcov-report/src/translations/german.js.html +95 -0
- package/coverage/lcov-report/src/translations/index.html +132 -0
- package/coverage/lcov.info +1610 -1314
- package/dist/b556faa3bc6829d2.png +0 -0
- package/dist/index.esm.js +934 -668
- package/dist/index.esm.js.map +1 -1
- package/package.json +3 -1
- package/public/assets/dop.png +0 -0
- package/public/assets/historic.png +0 -0
- package/public/assets/osm.png +0 -0
- package/public/thumbnails/MlFollowGps.png +0 -0
- package/public/thumbnails/MlThreeJsLayer.png +0 -0
- package/src/components/MapLibreMap/lib/MapLibreGlWrapper.js +53 -67
- package/src/components/MlComponentTemplate/MlComponentTemplate.js +6 -31
- package/src/components/MlFeatureEditor/MlFeatureEditor.meta.json +2 -2
- package/src/components/MlFollowGps/MlFollowGps.js +92 -88
- package/src/components/MlFollowGps/MlFollowGps.meta.json +2 -2
- package/src/components/MlFollowGps/MlFollowGps.test.js +3 -5
- package/src/components/MlFollowGps/assets/marker.png +0 -0
- package/src/components/MlGPXViewer/MlGPXViewer.js +45 -43
- package/src/components/MlGPXViewer/gpxConverter.js +22 -29
- package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.js +45 -9
- package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.js +21 -57
- package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.test.js +6 -7
- package/src/components/MlLayer/MlLayer.js +28 -6
- package/src/components/MlLayer/MlLayer.test.js +12 -10
- package/src/components/MlLayerMagnify/MlLayerMagnify.js +3 -3
- package/src/components/MlLayerSwipe/MlLayerSwipe.js +4 -5
- package/src/components/MlLayerSwitcher/MlLayerSwitcher.css +17 -0
- package/src/components/MlLayerSwitcher/MlLayerSwitcher.doc.de.md +3 -0
- package/src/components/MlLayerSwitcher/MlLayerSwitcher.js +223 -0
- package/src/components/MlLayerSwitcher/MlLayerSwitcher.meta_.json +15 -0
- package/src/components/MlLayerSwitcher/MlLayerSwitcher.stories.js +106 -0
- package/src/components/MlLayerSwitcher/assets/sample_1.json +26 -0
- package/src/components/MlLayerSwitcher/assets/sample_2.json +22 -0
- package/src/components/MlLayerSwitcher/components/LayerBox.js +98 -0
- package/src/components/MlMarker/MlMarker.js +1 -1
- package/src/components/MlNavigationTools/MlNavigationTools.js +29 -26
- package/src/components/MlScaleReference/MlScaleReference.meta.json +1 -1
- package/src/components/MlScaleReference/MlScaleReference.stories.js +25 -21
- package/src/components/MlShareMapState/MlShareMapState.js +73 -9
- package/src/components/MlShareMapState/MlShareMapState.stories.js +24 -1
- package/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.stories.js +12 -6
- package/src/components/MlThreeJsLayer/MlThreeJsLayer.js +8 -15
- package/src/components/MlWmsLayer/MlWmsLayer.js +1 -1
- package/src/components/MlWmsLoader/MlWmsLoader.js +8 -4
- package/src/components/MlWmsLoader/MlWmsLoader.meta.json +1 -1
- package/src/components/MlWmsLoader/MlWmsLoader.stories.js +5 -4
- package/src/decorators/EmptyMapContextDecorator.js +11 -6
- package/src/decorators/MapContext3DDecorator.js +25 -20
- package/src/decorators/MapContextDashboardDecorator.js +7 -2
- package/src/decorators/MapContextDecorator.js +7 -3
- package/src/decorators/MapContextKlokantechBasicDecorator.js +8 -4
- package/src/decorators/MultiMapContextDecorator.js +2 -1
- package/src/hooks/useMap.js +33 -62
- package/src/hooks/useMapState.js +3 -3
- package/src/hooks/useWms.js +7 -6
- package/src/i18n.js +28 -0
- package/src/index.js +3 -0
- package/src/translations/english.js +4 -0
- package/src/translations/german.js +4 -0
- package/src/ui_components/ImageLoader.js +73 -0
- package/src/ui_components/Sidebar.js +75 -20
- package/src/ui_components/TopToolbar.js +18 -18
- package/coverage/lcov-report/components/MlLayer/index.html +0 -117
- package/coverage/lcov-report/hooks/index.html +0 -147
- 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/MlFollowGps/MlFollowGps.js</title>
|
|
6
|
+
<title>Code coverage report for src/components/MlFollowGps/MlFollowGps.js</title>
|
|
7
7
|
<meta charset="utf-8" />
|
|
8
|
-
<link rel="stylesheet" href="
|
|
9
|
-
<link rel="stylesheet" href="
|
|
10
|
-
<link rel="shortcut icon" type="image/x-icon" href="
|
|
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(
|
|
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="
|
|
22
|
+
<h1><a href="../../../index.html">All files</a> / <a href="index.html">src/components/MlFollowGps</a> MlFollowGps.js</h1>
|
|
23
23
|
<div class='clearfix'>
|
|
24
24
|
|
|
25
25
|
<div class='fl pad1y space-right2'>
|
|
26
|
-
<span class="strong">
|
|
26
|
+
<span class="strong">65.62% </span>
|
|
27
27
|
<span class="quiet">Statements</span>
|
|
28
|
-
<span class='fraction'>
|
|
28
|
+
<span class='fraction'>21/32</span>
|
|
29
29
|
</div>
|
|
30
30
|
|
|
31
31
|
|
|
32
32
|
<div class='fl pad1y space-right2'>
|
|
33
|
-
<span class="strong">
|
|
33
|
+
<span class="strong">55.55% </span>
|
|
34
34
|
<span class="quiet">Branches</span>
|
|
35
|
-
<span class='fraction'>
|
|
35
|
+
<span class='fraction'>10/18</span>
|
|
36
36
|
</div>
|
|
37
37
|
|
|
38
38
|
|
|
@@ -44,9 +44,9 @@
|
|
|
44
44
|
|
|
45
45
|
|
|
46
46
|
<div class='fl pad1y space-right2'>
|
|
47
|
-
<span class="strong">
|
|
47
|
+
<span class="strong">66.66% </span>
|
|
48
48
|
<span class="quiet">Lines</span>
|
|
49
|
-
<span class='fraction'>
|
|
49
|
+
<span class='fraction'>20/30</span>
|
|
50
50
|
</div>
|
|
51
51
|
|
|
52
52
|
|
|
@@ -232,7 +232,11 @@
|
|
|
232
232
|
<a name='L167'></a><a href='#L167'>167</a>
|
|
233
233
|
<a name='L168'></a><a href='#L168'>168</a>
|
|
234
234
|
<a name='L169'></a><a href='#L169'>169</a>
|
|
235
|
-
<a name='L170'></a><a href='#L170'>170</a
|
|
235
|
+
<a name='L170'></a><a href='#L170'>170</a>
|
|
236
|
+
<a name='L171'></a><a href='#L171'>171</a>
|
|
237
|
+
<a name='L172'></a><a href='#L172'>172</a>
|
|
238
|
+
<a name='L173'></a><a href='#L173'>173</a>
|
|
239
|
+
<a name='L174'></a><a href='#L174'>174</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral"> </span>
|
|
236
240
|
<span class="cline-any cline-neutral"> </span>
|
|
237
241
|
<span class="cline-any cline-neutral"> </span>
|
|
238
242
|
<span class="cline-any cline-neutral"> </span>
|
|
@@ -252,32 +256,28 @@
|
|
|
252
256
|
<span class="cline-any cline-neutral"> </span>
|
|
253
257
|
<span class="cline-any cline-neutral"> </span>
|
|
254
258
|
<span class="cline-any cline-neutral"> </span>
|
|
255
|
-
<span class="cline-any cline-yes">1x</span>
|
|
256
259
|
<span class="cline-any cline-neutral"> </span>
|
|
257
|
-
<span class="cline-any cline-yes">
|
|
258
|
-
<span class="cline-any cline-yes">
|
|
259
|
-
<span class="cline-any cline-yes">7x</span>
|
|
260
|
-
<span class="cline-any cline-yes">7x</span>
|
|
261
|
-
<span class="cline-any cline-yes">7x</span>
|
|
262
|
-
<span class="cline-any cline-neutral"> </span>
|
|
263
|
-
<span class="cline-any cline-yes">7x</span>
|
|
264
|
-
<span class="cline-any cline-yes">7x</span>
|
|
265
|
-
<span class="cline-any cline-yes">7x</span>
|
|
266
|
-
<span class="cline-any cline-yes">7x</span>
|
|
260
|
+
<span class="cline-any cline-yes">1x</span>
|
|
261
|
+
<span class="cline-any cline-yes">9x</span>
|
|
267
262
|
<span class="cline-any cline-neutral"> </span>
|
|
268
|
-
<span class="cline-any cline-yes">
|
|
269
|
-
<span class="cline-any cline-yes">
|
|
263
|
+
<span class="cline-any cline-yes">9x</span>
|
|
264
|
+
<span class="cline-any cline-yes">9x</span>
|
|
265
|
+
<span class="cline-any cline-yes">9x</span>
|
|
266
|
+
<span class="cline-any cline-yes">9x</span>
|
|
270
267
|
<span class="cline-any cline-neutral"> </span>
|
|
268
|
+
<span class="cline-any cline-yes">9x</span>
|
|
271
269
|
<span class="cline-any cline-neutral"> </span>
|
|
270
|
+
<span class="cline-any cline-yes">9x</span>
|
|
272
271
|
<span class="cline-any cline-yes">2x</span>
|
|
272
|
+
<span class="cline-any cline-no"> </span>
|
|
273
|
+
<span class="cline-any cline-no"> </span>
|
|
274
|
+
<span class="cline-any cline-no"> </span>
|
|
273
275
|
<span class="cline-any cline-neutral"> </span>
|
|
274
276
|
<span class="cline-any cline-neutral"> </span>
|
|
275
277
|
<span class="cline-any cline-neutral"> </span>
|
|
276
278
|
<span class="cline-any cline-neutral"> </span>
|
|
279
|
+
<span class="cline-any cline-yes">9x</span>
|
|
277
280
|
<span class="cline-any cline-neutral"> </span>
|
|
278
|
-
<span class="cline-any cline-neutral"> </span>
|
|
279
|
-
<span class="cline-any cline-no"> </span>
|
|
280
|
-
<span class="cline-any cline-no"> </span>
|
|
281
281
|
<span class="cline-any cline-no"> </span>
|
|
282
282
|
<span class="cline-any cline-neutral"> </span>
|
|
283
283
|
<span class="cline-any cline-no"> </span>
|
|
@@ -288,29 +288,25 @@
|
|
|
288
288
|
<span class="cline-any cline-neutral"> </span>
|
|
289
289
|
<span class="cline-any cline-neutral"> </span>
|
|
290
290
|
<span class="cline-any cline-neutral"> </span>
|
|
291
|
-
<span class="cline-any cline-yes">
|
|
292
|
-
<span class="cline-any cline-
|
|
291
|
+
<span class="cline-any cline-yes">9x</span>
|
|
292
|
+
<span class="cline-any cline-no"> </span>
|
|
293
|
+
<span class="cline-any cline-no"> </span>
|
|
293
294
|
<span class="cline-any cline-neutral"> </span>
|
|
294
295
|
<span class="cline-any cline-neutral"> </span>
|
|
295
|
-
<span class="cline-any cline-yes">
|
|
296
|
-
<span class="cline-any cline-yes">
|
|
296
|
+
<span class="cline-any cline-yes">9x</span>
|
|
297
|
+
<span class="cline-any cline-yes">7x</span>
|
|
298
|
+
<span class="cline-any cline-neutral"> </span>
|
|
299
|
+
<span class="cline-any cline-yes">5x</span>
|
|
297
300
|
<span class="cline-any cline-yes">2x</span>
|
|
298
301
|
<span class="cline-any cline-neutral"> </span>
|
|
299
302
|
<span class="cline-any cline-neutral"> </span>
|
|
300
303
|
<span class="cline-any cline-neutral"> </span>
|
|
301
|
-
<span class="cline-any cline-yes">7x</span>
|
|
302
|
-
<span class="cline-any cline-no"> </span>
|
|
303
|
-
<span class="cline-any cline-no"> </span>
|
|
304
|
-
<span class="cline-any cline-no"> </span>
|
|
305
|
-
<span class="cline-any cline-no"> </span>
|
|
306
304
|
<span class="cline-any cline-neutral"> </span>
|
|
305
|
+
<span class="cline-any cline-yes">3x</span>
|
|
307
306
|
<span class="cline-any cline-neutral"> </span>
|
|
308
|
-
<span class="cline-any cline-yes">7x</span>
|
|
309
|
-
<span class="cline-any cline-no"> </span>
|
|
310
|
-
<span class="cline-any cline-no"> </span>
|
|
311
307
|
<span class="cline-any cline-neutral"> </span>
|
|
312
308
|
<span class="cline-any cline-neutral"> </span>
|
|
313
|
-
<span class="cline-any cline-yes">
|
|
309
|
+
<span class="cline-any cline-yes">9x</span>
|
|
314
310
|
<span class="cline-any cline-neutral"> </span>
|
|
315
311
|
<span class="cline-any cline-neutral"> </span>
|
|
316
312
|
<span class="cline-any cline-neutral"> </span>
|
|
@@ -348,6 +344,9 @@
|
|
|
348
344
|
<span class="cline-any cline-neutral"> </span>
|
|
349
345
|
<span class="cline-any cline-neutral"> </span>
|
|
350
346
|
<span class="cline-any cline-neutral"> </span>
|
|
347
|
+
<span class="cline-any cline-yes">3x</span>
|
|
348
|
+
<span class="cline-any cline-neutral"> </span>
|
|
349
|
+
<span class="cline-any cline-neutral"> </span>
|
|
351
350
|
<span class="cline-any cline-neutral"> </span>
|
|
352
351
|
<span class="cline-any cline-neutral"> </span>
|
|
353
352
|
<span class="cline-any cline-neutral"> </span>
|
|
@@ -355,15 +354,17 @@
|
|
|
355
354
|
<span class="cline-any cline-neutral"> </span>
|
|
356
355
|
<span class="cline-any cline-neutral"> </span>
|
|
357
356
|
<span class="cline-any cline-neutral"> </span>
|
|
358
|
-
<span class="cline-any cline-yes">3x</span>
|
|
359
357
|
<span class="cline-any cline-yes">1x</span>
|
|
360
358
|
<span class="cline-any cline-neutral"> </span>
|
|
361
|
-
<span class="cline-any cline-yes">2x</span>
|
|
362
359
|
<span class="cline-any cline-neutral"> </span>
|
|
363
360
|
<span class="cline-any cline-neutral"> </span>
|
|
364
361
|
<span class="cline-any cline-neutral"> </span>
|
|
365
362
|
<span class="cline-any cline-neutral"> </span>
|
|
366
|
-
<span class="cline-any cline-
|
|
363
|
+
<span class="cline-any cline-neutral"> </span>
|
|
364
|
+
<span class="cline-any cline-neutral"> </span>
|
|
365
|
+
<span class="cline-any cline-neutral"> </span>
|
|
366
|
+
<span class="cline-any cline-neutral"> </span>
|
|
367
|
+
<span class="cline-any cline-neutral"> </span>
|
|
367
368
|
<span class="cline-any cline-neutral"> </span>
|
|
368
369
|
<span class="cline-any cline-neutral"> </span>
|
|
369
370
|
<span class="cline-any cline-neutral"> </span>
|
|
@@ -390,7 +391,6 @@
|
|
|
390
391
|
<span class="cline-any cline-neutral"> </span>
|
|
391
392
|
<span class="cline-any cline-neutral"> </span>
|
|
392
393
|
<span class="cline-any cline-neutral"> </span>
|
|
393
|
-
<span class="cline-any cline-yes">1x</span>
|
|
394
394
|
<span class="cline-any cline-neutral"> </span>
|
|
395
395
|
<span class="cline-any cline-neutral"> </span>
|
|
396
396
|
<span class="cline-any cline-neutral"> </span>
|
|
@@ -401,17 +401,26 @@
|
|
|
401
401
|
<span class="cline-any cline-neutral"> </span>
|
|
402
402
|
<span class="cline-any cline-neutral"> </span>
|
|
403
403
|
<span class="cline-any cline-neutral"> </span>
|
|
404
|
-
<span class="cline-any cline-neutral"> </span
|
|
404
|
+
<span class="cline-any cline-neutral"> </span>
|
|
405
|
+
<span class="cline-any cline-neutral"> </span>
|
|
406
|
+
<span class="cline-any cline-neutral"> </span>
|
|
407
|
+
<span class="cline-any cline-neutral"> </span>
|
|
408
|
+
<span class="cline-any cline-neutral"> </span>
|
|
409
|
+
<span class="cline-any cline-neutral"> </span>
|
|
410
|
+
<span class="cline-any cline-neutral"> </span>
|
|
411
|
+
<span class="cline-any cline-neutral"> </span>
|
|
412
|
+
<span class="cline-any cline-neutral"> </span></td><td class="text"><pre class="prettyprint lang-js">import React, { useRef, useEffect, useState, useCallback } from "react";
|
|
405
413
|
import PropTypes from "prop-types";
|
|
414
|
+
import useMap from "../../hooks/useMap";
|
|
406
415
|
|
|
407
|
-
import {MapContext} from "@mapcomponents/react-core";
|
|
408
|
-
import {v4 as uuidv4} from "uuid";
|
|
409
416
|
import Button from "@mui/material/Button";
|
|
410
417
|
import RoomIcon from "@mui/icons-material/Room";
|
|
411
|
-
import {point} from "@turf/turf"
|
|
418
|
+
import { point, circle } from "@turf/turf";
|
|
412
419
|
import MlGeoJsonLayer from "../MlGeoJsonLayer/MlGeoJsonLayer";
|
|
413
420
|
import MlImageMarkerLayer from "../MlImageMarkerLayer/MlImageMarkerLayer";
|
|
414
421
|
|
|
422
|
+
import marker from "./assets/marker.png";
|
|
423
|
+
|
|
415
424
|
/**
|
|
416
425
|
* Adds a button that makes the map follow the users GPS position using
|
|
417
426
|
* navigator.geolocation.watchPosition if activated
|
|
@@ -422,121 +431,97 @@ import MlImageMarkerLayer from "../MlImageMarkerLayer/MlImageMarkerLayer";
|
|
|
422
431
|
* @component
|
|
423
432
|
*/
|
|
424
433
|
const MlFollowGps = (props) => {
|
|
425
|
-
|
|
426
|
-
|
|
434
|
+
const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
|
|
435
|
+
|
|
427
436
|
const [isFollowed, setIsFollowed] = useState(false);
|
|
428
437
|
const [geoJson, setGeoJson] = useState(undefined);
|
|
429
438
|
const watchIdRef = useRef(undefined);
|
|
430
439
|
const [locationAccessDenied, setLocationAccessDenied] = useState(false);
|
|
431
440
|
|
|
432
|
-
const
|
|
433
|
-
const mapRef = useRef(undefined);
|
|
434
|
-
const componentId = useRef((props.idPrefix ? <span class="branch-0 cbranch-no" title="branch not covered" >props.idPrefix </span>: "MlFollowGps-") + uuidv4());
|
|
435
|
-
const [accuracyRadius, setAccuracyRadius] = useState(30);
|
|
441
|
+
const [accuracyGeoJson, setAccuracyGeoJson] = useState();
|
|
436
442
|
|
|
437
443
|
useEffect(() => {
|
|
438
|
-
let _componentId = componentId.current;
|
|
439
|
-
|
|
440
|
-
|
|
441
444
|
return <span class="fstat-no" title="function not covered" >()</span> => {
|
|
442
|
-
// This is the cleanup function, it is called when this react component is removed from react-dom
|
|
443
|
-
// try to remove anything this component has added to the MapLibre-gl instance
|
|
444
|
-
// e.g.: remove the layer
|
|
445
|
-
// mapContext.getMap(props.mapId).removeLayer(layerRef.current);
|
|
446
|
-
// check for the existence of map.style before calling getLayer or getSource
|
|
447
|
-
|
|
448
|
-
<span class="cstat-no" title="statement not covered" > if (mapRef.current) {</span>
|
|
449
|
-
<span class="cstat-no" title="statement not covered" > mapRef.current.cleanup(_componentId);</span>
|
|
450
|
-
<span class="cstat-no" title="statement not covered" > mapRef.current = undefined;</span>
|
|
451
|
-
}
|
|
452
445
|
<span class="cstat-no" title="statement not covered" > if (watchIdRef.current) {</span>
|
|
453
|
-
<span class="cstat-no" title="statement not covered" > initializedRef.current = false;</span>
|
|
454
446
|
<span class="cstat-no" title="statement not covered" > navigator.geolocation.clearWatch(watchIdRef.current);</span>
|
|
455
447
|
<span class="cstat-no" title="statement not covered" > watchIdRef.current = undefined;</span>
|
|
456
448
|
}
|
|
457
449
|
};
|
|
458
450
|
}, []);
|
|
459
451
|
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
// initialize the layer and add it to the MapLibre-gl instance or do something else with it
|
|
464
|
-
initializedRef.current = true;
|
|
465
|
-
mapRef.current = mapContext.getMap(props.mapId);
|
|
466
|
-
mapRef.current.setCenter([7.132122000552613, 50.716405378037706]);
|
|
452
|
+
const getLocationSuccess = useCallback(
|
|
453
|
+
<span class="fstat-no" title="function not covered" > (p</span>os) => {
|
|
454
|
+
<span class="cstat-no" title="statement not covered" > if (!mapHook.map) <span class="cstat-no" title="statement not covered" >return;</span></span>
|
|
467
455
|
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
<span class="cstat-no" title="statement not covered" >
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
};
|
|
456
|
+
<span class="cstat-no" title="statement not covered" > mapHook.map.setCenter([pos.coords.longitude, pos.coords.latitude]);</span>
|
|
457
|
+
const geoJsonPoint = <span class="cstat-no" title="statement not covered" >point([pos.coords.longitude, pos.coords.latitude]);</span>
|
|
458
|
+
<span class="cstat-no" title="statement not covered" > setGeoJson(geoJsonPoint);</span>
|
|
459
|
+
<span class="cstat-no" title="statement not covered" > setAccuracyGeoJson(circle(geoJsonPoint, pos.coords.accuracy / 1000));</span>
|
|
460
|
+
},
|
|
461
|
+
[mapHook.map]
|
|
462
|
+
);
|
|
476
463
|
|
|
477
464
|
const getLocationError = <span class="fstat-no" title="function not covered" >(e</span>rr) => {
|
|
478
465
|
<span class="cstat-no" title="statement not covered" > console.log("Access of user location denied");</span>
|
|
479
466
|
<span class="cstat-no" title="statement not covered" > setLocationAccessDenied(true);</span>
|
|
480
467
|
};
|
|
468
|
+
|
|
469
|
+
useEffect(() => {
|
|
470
|
+
if (!mapHook.map) return;
|
|
471
|
+
|
|
472
|
+
if (isFollowed) {
|
|
473
|
+
watchIdRef.current = navigator.geolocation.watchPosition(
|
|
474
|
+
getLocationSuccess,
|
|
475
|
+
getLocationError
|
|
476
|
+
);
|
|
477
|
+
} else {
|
|
478
|
+
navigator.geolocation.clearWatch(watchIdRef.current);
|
|
479
|
+
}
|
|
480
|
+
}, [isFollowed, getLocationSuccess]);
|
|
481
481
|
|
|
482
482
|
return (
|
|
483
483
|
<>
|
|
484
|
-
{isFollowed && geoJson &&
|
|
485
|
-
<span class="branch-2 cbranch-no" title="branch not covered" >
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
],
|
|
497
|
-
base: 2,
|
|
498
|
-
},
|
|
499
|
-
"circle-color": "#ee7700",
|
|
500
|
-
"circle-opacity": 0.5,
|
|
501
|
-
}}
|
|
502
|
-
/>
|
|
503
|
-
}
|
|
484
|
+
{isFollowed && geoJson && (
|
|
485
|
+
<span class="branch-2 cbranch-no" title="branch not covered" > <MlGeoJsonLayer</span>
|
|
486
|
+
geojson={accuracyGeoJson}
|
|
487
|
+
type={"fill"}
|
|
488
|
+
paint={{
|
|
489
|
+
"fill-color": "#ee7700",
|
|
490
|
+
"fill-opacity": 0.5,
|
|
491
|
+
...props.accuracyPaint,
|
|
492
|
+
}}
|
|
493
|
+
insertBeforeLayer={"MlFollowGpsMarker"}
|
|
494
|
+
/>
|
|
495
|
+
)}
|
|
504
496
|
|
|
505
|
-
{isFollowed && geoJson &&
|
|
506
|
-
<span class="branch-2 cbranch-no" title="branch not covered" >
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
497
|
+
{isFollowed && geoJson && (
|
|
498
|
+
<span class="branch-2 cbranch-no" title="branch not covered" > <MlImageMarkerLayer</span>
|
|
499
|
+
layerId={"MlFollowGpsMarker"}
|
|
500
|
+
options={{
|
|
501
|
+
type: "symbol",
|
|
502
|
+
source: {
|
|
503
|
+
type: "geojson",
|
|
504
|
+
data: geoJson,
|
|
505
|
+
},
|
|
506
|
+
layout: {
|
|
507
|
+
"icon-size": 0.1,
|
|
508
|
+
"icon-offset": [0, -340],
|
|
509
|
+
...props.markerLayout,
|
|
510
|
+
},
|
|
511
|
+
}}
|
|
512
|
+
imgSrc={props.markerImage || marker}
|
|
513
|
+
/>
|
|
514
|
+
)}
|
|
522
515
|
|
|
523
516
|
<Button
|
|
524
|
-
sx={{zIndex: 1002, color: isFollowed ?
|
|
517
|
+
sx={{ zIndex: 1002, color: isFollowed ? props.onColor : props.offColor, ...props.style }}
|
|
525
518
|
disabled={locationAccessDenied}
|
|
526
519
|
onClick={() => {
|
|
527
|
-
if (isFollowed) {
|
|
528
|
-
navigator.geolocation.clearWatch(watchIdRef.current);
|
|
529
|
-
} else {
|
|
530
|
-
watchIdRef.current = navigator.geolocation.watchPosition(
|
|
531
|
-
getLocationSuccess,
|
|
532
|
-
getLocationError
|
|
533
|
-
);
|
|
534
|
-
}
|
|
535
520
|
setIsFollowed(!isFollowed);
|
|
536
521
|
}}
|
|
537
522
|
>
|
|
538
523
|
{" "}
|
|
539
|
-
<RoomIcon sx={{}}/>{" "}
|
|
524
|
+
<RoomIcon sx={{ fontSize: props.style.fontSize }} />{" "}
|
|
540
525
|
</Button>
|
|
541
526
|
</>
|
|
542
527
|
);
|
|
@@ -552,11 +537,14 @@ MlFollowGps.defaultProps = {
|
|
|
552
537
|
backgroundColor: "#414141",
|
|
553
538
|
borderRadius: "23%",
|
|
554
539
|
margin: 0.15,
|
|
540
|
+
fontSize: "1.3em",
|
|
555
541
|
":hover": {
|
|
556
542
|
backgroundColor: "#515151",
|
|
557
543
|
color: "#ececec",
|
|
558
544
|
},
|
|
559
545
|
},
|
|
546
|
+
onColor: "#ececec",
|
|
547
|
+
offColor: "#666",
|
|
560
548
|
};
|
|
561
549
|
|
|
562
550
|
MlFollowGps.propTypes = {
|
|
@@ -568,6 +556,30 @@ MlFollowGps.propTypes = {
|
|
|
568
556
|
* CSS style object that is applied to the button component
|
|
569
557
|
*/
|
|
570
558
|
style: PropTypes.object,
|
|
559
|
+
/**
|
|
560
|
+
* Active button font color
|
|
561
|
+
*/
|
|
562
|
+
onColor: PropTypes.string,
|
|
563
|
+
/**
|
|
564
|
+
* Inactive button font color
|
|
565
|
+
*/
|
|
566
|
+
offColor: PropTypes.string,
|
|
567
|
+
/**
|
|
568
|
+
* Accuracy paint property object, that is passed to the MlGeoJsonLayer responsible for drawing the accuracy circle.
|
|
569
|
+
* Use any available paint prop from layer type "fill".
|
|
570
|
+
* https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
|
|
571
|
+
*/
|
|
572
|
+
accuracyPaint: PropTypes.object,
|
|
573
|
+
/**
|
|
574
|
+
* Marker layout property object, that is passed to the MlImageMarkerLayer responsible for drawing the position marker.
|
|
575
|
+
* Use any available layout property from layer type "symbol".
|
|
576
|
+
* https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#symbol
|
|
577
|
+
*/
|
|
578
|
+
markerLayout: PropTypes.object,
|
|
579
|
+
/**
|
|
580
|
+
* Replace the default marker image with a custom one.
|
|
581
|
+
*/
|
|
582
|
+
markerImage: PropTypes.string,
|
|
571
583
|
};
|
|
572
584
|
export default MlFollowGps;
|
|
573
585
|
</pre></td></tr></table></pre>
|
|
@@ -577,17 +589,17 @@ export default MlFollowGps;
|
|
|
577
589
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
578
590
|
Code coverage generated by
|
|
579
591
|
<a href="https://istanbul.js.org/" target="_blank" rel="noopener">istanbul</a>
|
|
580
|
-
at
|
|
592
|
+
at Thu Dec 23 2021 12:19:00 GMT+0000 (Coordinated Universal Time)
|
|
581
593
|
</div>
|
|
582
594
|
</div>
|
|
583
|
-
<script src="
|
|
595
|
+
<script src="../../../prettify.js"></script>
|
|
584
596
|
<script>
|
|
585
597
|
window.onload = function () {
|
|
586
598
|
prettyPrint();
|
|
587
599
|
};
|
|
588
600
|
</script>
|
|
589
|
-
<script src="
|
|
590
|
-
<script src="
|
|
601
|
+
<script src="../../../sorter.js"></script>
|
|
602
|
+
<script src="../../../block-navigation.js"></script>
|
|
591
603
|
</body>
|
|
592
604
|
</html>
|
|
593
605
|
|
|
@@ -3,15 +3,15 @@
|
|
|
3
3
|
<html lang="en">
|
|
4
4
|
|
|
5
5
|
<head>
|
|
6
|
-
<title>Code coverage report for components/MlFollowGps</title>
|
|
6
|
+
<title>Code coverage report for src/components/MlFollowGps</title>
|
|
7
7
|
<meta charset="utf-8" />
|
|
8
|
-
<link rel="stylesheet" href="
|
|
9
|
-
<link rel="stylesheet" href="
|
|
10
|
-
<link rel="shortcut icon" type="image/x-icon" href="
|
|
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(
|
|
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="
|
|
22
|
+
<h1><a href="../../../index.html">All files</a> src/components/MlFollowGps</h1>
|
|
23
23
|
<div class='clearfix'>
|
|
24
24
|
|
|
25
25
|
<div class='fl pad1y space-right2'>
|
|
26
|
-
<span class="strong">
|
|
26
|
+
<span class="strong">65.62% </span>
|
|
27
27
|
<span class="quiet">Statements</span>
|
|
28
|
-
<span class='fraction'>
|
|
28
|
+
<span class='fraction'>21/32</span>
|
|
29
29
|
</div>
|
|
30
30
|
|
|
31
31
|
|
|
32
32
|
<div class='fl pad1y space-right2'>
|
|
33
|
-
<span class="strong">
|
|
33
|
+
<span class="strong">55.55% </span>
|
|
34
34
|
<span class="quiet">Branches</span>
|
|
35
|
-
<span class='fraction'>
|
|
35
|
+
<span class='fraction'>10/18</span>
|
|
36
36
|
</div>
|
|
37
37
|
|
|
38
38
|
|
|
@@ -44,9 +44,9 @@
|
|
|
44
44
|
|
|
45
45
|
|
|
46
46
|
<div class='fl pad1y space-right2'>
|
|
47
|
-
<span class="strong">
|
|
47
|
+
<span class="strong">66.66% </span>
|
|
48
48
|
<span class="quiet">Lines</span>
|
|
49
|
-
<span class='fraction'>
|
|
49
|
+
<span class='fraction'>20/30</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="MlFollowGps.js"><a href="MlFollowGps.js.html">MlFollowGps.js</a></td>
|
|
83
|
-
<td data-value="
|
|
84
|
-
<div class="chart"><div class="cover-fill" style="width:
|
|
83
|
+
<td data-value="65.62" 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="
|
|
87
|
-
<td data-value="
|
|
88
|
-
<td data-value="
|
|
89
|
-
<td data-value="
|
|
86
|
+
<td data-value="65.62" class="pct medium">65.62%</td>
|
|
87
|
+
<td data-value="32" class="abs medium">21/32</td>
|
|
88
|
+
<td data-value="55.55" class="pct medium">55.55%</td>
|
|
89
|
+
<td data-value="18" class="abs medium">10/18</td>
|
|
90
90
|
<td data-value="57.14" class="pct medium">57.14%</td>
|
|
91
91
|
<td data-value="7" class="abs medium">4/7</td>
|
|
92
|
-
<td data-value="
|
|
93
|
-
<td data-value="
|
|
92
|
+
<td data-value="66.66" class="pct medium">66.66%</td>
|
|
93
|
+
<td data-value="30" class="abs medium">20/30</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
|
|
104
|
+
at Thu Dec 23 2021 12:19:00 GMT+0000 (Coordinated Universal Time)
|
|
105
105
|
</div>
|
|
106
106
|
</div>
|
|
107
|
-
<script src="
|
|
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="
|
|
114
|
-
<script src="
|
|
113
|
+
<script src="../../../sorter.js"></script>
|
|
114
|
+
<script src="../../../block-navigation.js"></script>
|
|
115
115
|
</body>
|
|
116
116
|
</html>
|
|
117
117
|
|