@mapcomponents/react-maplibre 0.1.63 → 0.1.64

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 (294) hide show
  1. package/.editorconfig +1 -1
  2. package/.eslintrc.js +9 -6
  3. package/.github/workflows/check-catalogue-metadata-schema.yml +19 -0
  4. package/CHANGELOG.md +27 -2
  5. package/coverage/clover.xml +671 -1032
  6. package/coverage/coverage-final.json +24 -21
  7. package/coverage/lcov-report/index.html +112 -82
  8. package/coverage/lcov-report/src/components/MapLibreMap/MapLibreMap.tsx.html +24 -24
  9. package/coverage/lcov-report/src/components/MapLibreMap/index.html +1 -1
  10. package/coverage/lcov-report/src/components/MlCenterPosition/MlCenterPosition.tsx.html +5 -5
  11. package/coverage/lcov-report/src/components/MlCenterPosition/index.html +1 -1
  12. package/coverage/lcov-report/src/components/MlCreatePdfButton/MlCreatePdfButton.tsx.html +2 -2
  13. package/coverage/lcov-report/src/components/MlCreatePdfButton/index.html +1 -1
  14. package/coverage/lcov-report/src/components/MlCreatePdfForm/MlCreatePdfForm.cy.tsx.html +1 -1
  15. package/coverage/lcov-report/src/components/MlCreatePdfForm/MlCreatePdfForm.tsx.html +1 -1
  16. package/coverage/lcov-report/src/components/MlCreatePdfForm/index.html +1 -1
  17. package/coverage/lcov-report/src/components/MlFeatureEditor/MlFeatureEditor.tsx.html +2 -5
  18. package/coverage/lcov-report/src/components/MlFeatureEditor/index.html +1 -1
  19. package/coverage/lcov-report/src/components/MlFillExtrusionLayer/MlFillExtrusionLayer.tsx.html +1 -1
  20. package/coverage/lcov-report/src/components/MlFillExtrusionLayer/index.html +1 -1
  21. package/coverage/lcov-report/src/components/MlFollowGps/MlFollowGps.tsx.html +1 -1
  22. package/coverage/lcov-report/src/components/MlFollowGps/index.html +1 -1
  23. package/coverage/lcov-report/src/components/MlGeoJsonLayer/MlGeoJsonLayer.tsx.html +40 -19
  24. package/coverage/lcov-report/src/components/MlGeoJsonLayer/index.html +1 -1
  25. package/coverage/lcov-report/src/components/MlGeoJsonLayer/story_utils/MlGeoJsonLayer.lineStyler.js.html +1 -1
  26. package/coverage/lcov-report/src/components/MlGeoJsonLayer/story_utils/MlGeoJsonLayer.polygonStyler.js.html +1 -1
  27. package/coverage/lcov-report/src/components/MlGeoJsonLayer/story_utils/MlGeojsonLayerCircleStyler.tsx.html +112 -0
  28. package/coverage/lcov-report/src/components/MlGeoJsonLayer/story_utils/MlGeojsonLayerHeatMapStyler.tsx.html +115 -0
  29. package/coverage/lcov-report/src/components/MlGeoJsonLayer/story_utils/index.html +34 -4
  30. package/coverage/lcov-report/src/components/MlGeojsonLayerWithSource/MlGeojsonLayerWithSource.tsx.html +1 -1
  31. package/coverage/lcov-report/src/components/MlGeojsonLayerWithSource/index.html +1 -1
  32. package/coverage/lcov-report/src/components/MlGpxViewer/MlGpxViewer.tsx.html +394 -0
  33. package/coverage/lcov-report/src/components/{MlGPXViewer → MlGpxViewer}/index.html +23 -38
  34. package/coverage/lcov-report/src/components/MlImageMarkerLayer/MlImageMarkerLayer.tsx.html +63 -285
  35. package/coverage/lcov-report/src/components/MlImageMarkerLayer/index.html +21 -21
  36. package/coverage/lcov-report/src/components/MlLayer/MlLayer.tsx.html +1 -1
  37. package/coverage/lcov-report/src/components/MlLayer/index.html +1 -1
  38. package/coverage/lcov-report/src/components/MlLayerMagnify/MlLayerMagnify.tsx.html +58 -76
  39. package/coverage/lcov-report/src/components/MlLayerMagnify/index.html +1 -1
  40. package/coverage/lcov-report/src/components/MlLayerSwipe/MlLayerSwipe.tsx.html +58 -61
  41. package/coverage/lcov-report/src/components/MlLayerSwipe/index.html +11 -11
  42. package/coverage/lcov-report/src/components/MlLayerSwitcher/MlLayerSwitcher.js.html +1 -1
  43. package/coverage/lcov-report/src/components/MlLayerSwitcher/components/LayerBox.js.html +30 -21
  44. package/coverage/lcov-report/src/components/MlLayerSwitcher/components/index.html +1 -1
  45. package/coverage/lcov-report/src/components/MlLayerSwitcher/index.html +1 -1
  46. package/coverage/lcov-report/src/components/MlMarker/MlMarker.tsx.html +1 -1
  47. package/coverage/lcov-report/src/components/MlMarker/index.html +1 -1
  48. package/coverage/lcov-report/src/components/MlMeasureTool/MlMeasureTool.tsx.html +1 -1
  49. package/coverage/lcov-report/src/components/MlMeasureTool/index.html +1 -1
  50. package/coverage/lcov-report/src/components/MlNavigationCompass/MlNavigationCompass.tsx.html +1 -1
  51. package/coverage/lcov-report/src/components/MlNavigationCompass/index.html +1 -1
  52. package/coverage/lcov-report/src/components/MlNavigationTools/MlNavigationTools.tsx.html +1 -1
  53. package/coverage/lcov-report/src/components/MlNavigationTools/index.html +1 -1
  54. package/coverage/lcov-report/src/components/MlOsmLayer/MlOsmLayer.js.html +1 -1
  55. package/coverage/lcov-report/src/components/MlOsmLayer/MlOsmLayer.stories_.js.html +1 -1
  56. package/coverage/lcov-report/src/components/MlOsmLayer/index.html +1 -1
  57. package/coverage/lcov-report/src/components/MlScaleReference/MlScaleReference.js.html +1 -1
  58. package/coverage/lcov-report/src/components/MlScaleReference/index.html +1 -1
  59. package/coverage/lcov-report/src/components/MlShareMapState/MlShareMapState.js.html +1 -1
  60. package/coverage/lcov-report/src/components/MlShareMapState/index.html +1 -1
  61. package/coverage/lcov-report/src/components/MlSketchTool/LayerList/ColorPicker.tsx.html +1 -1
  62. package/coverage/lcov-report/src/components/MlSketchTool/LayerList/LayerList.tsx.html +1 -1
  63. package/coverage/lcov-report/src/components/MlSketchTool/LayerList/LayerListItem.tsx.html +1 -1
  64. package/coverage/lcov-report/src/components/MlSketchTool/LayerList/LayerPropertyForm.tsx.html +1 -1
  65. package/coverage/lcov-report/src/components/MlSketchTool/LayerList/index.html +1 -1
  66. package/coverage/lcov-report/src/components/MlSketchTool/MlSketchTool.tsx.html +1 -1
  67. package/coverage/lcov-report/src/components/MlSketchTool/index.html +1 -1
  68. package/coverage/lcov-report/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.tsx.html +514 -0
  69. package/coverage/lcov-report/src/components/MlSpatialElevationProfile/index.html +21 -21
  70. package/coverage/lcov-report/src/components/MlThreeJsLayer/MlThreeJsLayer.js.html +1 -1
  71. package/coverage/lcov-report/src/components/MlThreeJsLayer/index.html +1 -1
  72. package/coverage/lcov-report/src/components/MlTransitionGeoJsonLayer/MlTransitionGeoJsonLayer.tsx.html +20 -206
  73. package/coverage/lcov-report/src/components/MlTransitionGeoJsonLayer/index.html +1 -1
  74. package/coverage/lcov-report/src/components/MlUseMapDebugger/MlUseMapDebugger.js.html +1 -1
  75. package/coverage/lcov-report/src/components/MlUseMapDebugger/index.html +1 -1
  76. package/coverage/lcov-report/src/components/MlVectorTileLayer/MlVectorTileLayer.tsx.html +10 -7
  77. package/coverage/lcov-report/src/components/MlVectorTileLayer/index.html +5 -5
  78. package/coverage/lcov-report/src/components/MlWmsFeatureInfoPopup/MlWmsFeatureInfoPopup.js.html +1 -1
  79. package/coverage/lcov-report/src/components/MlWmsFeatureInfoPopup/index.html +1 -1
  80. package/coverage/lcov-report/src/components/MlWmsLayer/MlWmsLayer.tsx.html +111 -57
  81. package/coverage/lcov-report/src/components/MlWmsLayer/index.html +19 -19
  82. package/coverage/lcov-report/src/components/MlWmsLoader/MlWmsLoader.tsx.html +201 -144
  83. package/coverage/lcov-report/src/components/MlWmsLoader/index.html +9 -9
  84. package/coverage/lcov-report/src/contexts/MapContext.tsx.html +23 -23
  85. package/coverage/lcov-report/src/contexts/SimpleDataContext.js.html +1 -1
  86. package/coverage/lcov-report/src/contexts/SimpleDataProvider.js.html +1 -1
  87. package/coverage/lcov-report/src/contexts/index.html +1 -1
  88. package/coverage/lcov-report/src/hooks/index.html +50 -50
  89. package/coverage/lcov-report/src/hooks/useCameraFollowPath/index.html +1 -1
  90. package/coverage/lcov-report/src/hooks/useCameraFollowPath/useCameraFollowPath.tsx.html +1 -1
  91. package/coverage/lcov-report/src/hooks/useExportMap/index.html +1 -1
  92. package/coverage/lcov-report/src/hooks/useExportMap/index.ts.html +1 -1
  93. package/coverage/lcov-report/src/hooks/useExportMap/lib.ts.html +1 -1
  94. package/coverage/lcov-report/src/hooks/useGpx/index.html +116 -0
  95. package/coverage/lcov-report/src/hooks/useGpx/useGpx.tsx.html +295 -0
  96. package/coverage/lcov-report/src/hooks/useLayer.ts.html +132 -66
  97. package/coverage/lcov-report/src/hooks/useLayerEvent.js.html +1 -1
  98. package/coverage/lcov-report/src/hooks/useLayerHoverPopup/index.html +116 -0
  99. package/coverage/lcov-report/src/hooks/useLayerHoverPopup/useLayerHoverPopup.tsx.html +331 -0
  100. package/coverage/lcov-report/src/hooks/useMap.ts.html +47 -47
  101. package/coverage/lcov-report/src/hooks/useMapState.ts.html +54 -54
  102. package/coverage/lcov-report/src/hooks/useSource.ts.html +57 -57
  103. package/coverage/lcov-report/src/hooks/{useWms.js.html → useWms.ts.html} +54 -15
  104. package/coverage/lcov-report/src/index.html +1 -1
  105. package/coverage/lcov-report/src/index.ts.html +6 -6
  106. package/coverage/lcov.info +1284 -1959
  107. package/dist/components/MapLibreMap/lib/MapLibreGlWrapper.d.ts +51 -25
  108. package/dist/components/MlCenterPosition/MlCenterPosition.d.ts +3 -2
  109. package/dist/components/MlCenterPosition/MlCenterPosition.stories.d.ts +35 -16
  110. package/dist/components/MlComponentTemplate/MlComponentTemplate.d.ts +1 -1
  111. package/dist/components/MlComponentTemplate/MlComponentTemplate.stories.d.ts +12 -9
  112. package/dist/components/MlCreatePdfButton/MlCreatePdfButton.d.ts +1 -1
  113. package/dist/components/MlCreatePdfButton/MlCreatePdfButton.stories.d.ts +12 -9
  114. package/dist/components/MlGPXViewer/util/GeoJsonContext.d.ts +1 -1
  115. package/dist/components/MlGeoJsonLayer/MlGeoJsonLayer.d.ts +22 -11
  116. package/dist/components/MlGeoJsonLayer/MlGeoJsonLayer.stories.d.ts +4 -95
  117. package/dist/components/MlGeoJsonLayer/story_utils/MlGeojsonLayerCircleStyler.d.ts +3 -0
  118. package/dist/components/MlGeoJsonLayer/story_utils/MlGeojsonLayerHeatMapStyler.d.ts +3 -0
  119. package/dist/components/MlGpxViewer/MlGpxViewer.d.ts +30 -0
  120. package/dist/components/MlGpxViewer/MlGpxViewer.stories.d.ts +17 -0
  121. package/dist/components/MlGpxViewer/MlGpxViewer.test.d.ts +1 -0
  122. package/dist/components/MlGpxViewer/util/GeoJsonContext.d.ts +10 -0
  123. package/dist/components/MlGpxViewer/util/GeoJsonProvider.d.ts +4 -0
  124. package/dist/components/MlGpxViewer/util/MetadataDrawer.d.ts +7 -0
  125. package/dist/components/MlGpxViewer/util/MlGpxDemoLoader.d.ts +10 -0
  126. package/dist/components/MlGpxViewer/util/MlGpxViewerInstructions.d.ts +3 -0
  127. package/dist/components/MlImageMarkerLayer/MlImageMarkerLayer.d.ts +11 -2
  128. package/dist/components/MlImageMarkerLayer/MlImageMarkerLayer.stories.d.ts +7 -9
  129. package/dist/components/MlLayerMagnify/MlLayerMagnify.d.ts +8 -2
  130. package/dist/components/MlLayerMagnify/MlLayerMagnify.stories.d.ts +13 -9
  131. package/dist/components/MlLayerSwipe/MlLayerSwipe.d.ts +13 -3
  132. package/dist/components/MlLayerSwipe/MlLayerSwipe.stories.d.ts +12 -10
  133. package/dist/components/MlSpatialElevationProfile/MlSpatialElevationProfile.d.ts +33 -14
  134. package/dist/components/MlSpatialElevationProfile/MlSpatialElevationProfile.stories.d.ts +18 -15
  135. package/dist/components/MlSpatialElevationProfile/util/getElevationData.d.ts +14 -0
  136. package/dist/components/MlTransitionGeoJsonLayer/MlTransitionGeoJsonLayer.d.ts +3 -67
  137. package/dist/components/MlWmsLayer/MlWmsLayer.d.ts +7 -4
  138. package/dist/components/MlWmsLoader/MlWmsLoader.d.ts +17 -10
  139. package/dist/components/MlWmsLoader/MlWmsLoader.stories.d.ts +23 -12
  140. package/dist/components/MlWmsLoader/utils/MlWmsLoaderInstructions.d.ts +3 -0
  141. package/dist/components/MlWmsLoader/utils/WMSLinks.d.ts +6 -0
  142. package/dist/decorators/ThemeWrapper.d.ts +3 -1
  143. package/dist/hooks/useGpx/lib/gpxConverter.d.ts +11 -0
  144. package/dist/hooks/useGpx/useGpx.d.ts +26 -0
  145. package/dist/hooks/useGpx/useGpx.stories.d.ts +10 -0
  146. package/dist/hooks/useLayer.d.ts +13 -7
  147. package/dist/hooks/useLayerHoverPopup/useLayerHoverPopup.d.ts +23 -0
  148. package/dist/hooks/useLayerHoverPopup/useLayerHoverPopup.stories.d.ts +10 -0
  149. package/dist/hooks/useMap.d.ts +1 -1
  150. package/dist/hooks/useMap.test.d.ts +1 -0
  151. package/dist/hooks/useSource.d.ts +2 -2
  152. package/dist/hooks/useWms.d.ts +24 -16
  153. package/dist/index.d.ts +5 -5
  154. package/dist/index.esm.js +9310 -14006
  155. package/dist/index.esm.js.map +1 -1
  156. package/dist/setupTests.d.ts +6 -5
  157. package/dist/ui_components/Dropzone.d.ts +5 -0
  158. package/dist/ui_components/ImageLoader.d.ts +8 -1
  159. package/dist/ui_components/LoadingOverlayContext.d.ts +11 -11
  160. package/dist/ui_components/Sidebar.d.ts +7 -6
  161. package/dist/ui_components/Tooltip.d.ts +1 -1
  162. package/dist/ui_components/TopToolbar.d.ts +4 -3
  163. package/dist/ui_components/UploadButton.d.ts +6 -0
  164. package/dist/util/BubbleForInstructions.d.ts +2 -0
  165. package/dist/util/Instructions.d.ts +13 -0
  166. package/package.json +195 -191
  167. package/{src/components/MlImageMarkerLayer → public}/assets/wg-marker.png +0 -0
  168. package/scripts/build-catalogue-meta.js +35 -11
  169. package/src/components/MapLibreMap/lib/MapLibreGlWrapper.ts +230 -188
  170. package/src/components/MlCenterPosition/MlCenterPosition.meta_.json +1 -2
  171. package/src/components/MlCenterPosition/MlCenterPosition.stories.tsx +20 -0
  172. package/src/components/MlCenterPosition/MlCenterPosition.tsx +4 -4
  173. package/src/components/MlComponentTemplate/MlComponentTemplate.meta_.json +1 -2
  174. package/src/components/MlComponentTemplate/{MlComponentTemplate.stories.js → MlComponentTemplate.stories.tsx} +2 -2
  175. package/src/components/MlComponentTemplate/MlComponentTemplate.tsx +1 -1
  176. package/src/components/MlCreatePdfButton/MlCreatePdfButton.meta_.json +1 -2
  177. package/src/components/MlCreatePdfButton/{MlCreatePdfButton.stories.js → MlCreatePdfButton.stories.tsx} +1 -1
  178. package/src/components/MlCreatePdfButton/MlCreatePdfButton.tsx +1 -1
  179. package/src/components/MlCreatePdfForm/MlCreatePdfForm.meta.json +1 -2
  180. package/src/components/MlCreatePdfForm/lib/PdfForm.tsx +25 -2
  181. package/src/components/MlFeatureEditor/MlFeatureEditor.meta.json +1 -2
  182. package/src/components/MlFeatureEditor/MlFeatureEditor.tsx +0 -1
  183. package/src/components/MlFillExtrusionLayer/MlFillExtrusionLayer.meta.json +1 -2
  184. package/src/components/MlFollowGps/MlFollowGps.meta.json +1 -2
  185. package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.meta.json +1 -2
  186. package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.stories.tsx +89 -0
  187. package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.tsx +24 -17
  188. package/src/components/MlGeoJsonLayer/assets/earthquake.json +109937 -0
  189. package/src/components/MlGeoJsonLayer/assets/wg_locations.json +65 -0
  190. package/src/components/MlGeoJsonLayer/story_utils/MlGeojsonLayerCircleStyler.tsx +9 -0
  191. package/src/components/MlGeoJsonLayer/story_utils/MlGeojsonLayerHeatMapStyler.tsx +10 -0
  192. package/src/components/MlGeojsonLayerWithSource/MlGeojsonLayerWithSource.meta_.json +1 -2
  193. package/src/components/{MlGPXViewer/MlGPXViewer.doc.de.md → MlGpxViewer/MlGpxViewer.doc.de.md} +0 -0
  194. package/src/components/{MlGPXViewer/MlGPXViewer.doc.en.md → MlGpxViewer/MlGpxViewer.doc.en.md} +0 -0
  195. package/src/components/{MlGPXViewer/MlGPXViewer.meta.json → MlGpxViewer/MlGpxViewer.meta.json} +2 -3
  196. package/src/components/MlGpxViewer/MlGpxViewer.stories.tsx +109 -0
  197. package/src/components/MlGpxViewer/MlGpxViewer.test.js +53 -0
  198. package/src/components/MlGpxViewer/MlGpxViewer.tsx +103 -0
  199. package/src/components/{MlGPXViewer → MlGpxViewer}/util/GeoJsonContext.ts +0 -0
  200. package/src/components/{MlGPXViewer → MlGpxViewer}/util/GeoJsonProvider.tsx +0 -0
  201. package/src/components/MlGpxViewer/util/MetadataDrawer.tsx +38 -0
  202. package/src/components/MlGpxViewer/util/MlGpxDemoLoader.tsx +128 -0
  203. package/src/components/MlGpxViewer/util/MlGpxViewerInstructions.tsx +68 -0
  204. package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.meta_.json +1 -2
  205. package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.stories.tsx +41 -0
  206. package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.test.js +27 -8
  207. package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.tsx +41 -115
  208. package/src/components/MlLayer/MlLayer.meta_.json +1 -2
  209. package/src/components/MlLayerMagnify/MlLayerMagnify.meta.json +1 -2
  210. package/src/components/MlLayerMagnify/MlLayerMagnify.stories.tsx +44 -0
  211. package/src/components/MlLayerMagnify/{MlLayerMagnify.test.js → MlLayerMagnify.test.tsx} +15 -18
  212. package/src/components/MlLayerMagnify/MlLayerMagnify.tsx +55 -61
  213. package/src/components/MlLayerSwipe/MlLayerSwipe.meta.json +1 -2
  214. package/src/components/MlLayerSwipe/{MlLayerSwipe.stories.js → MlLayerSwipe.stories.tsx} +9 -11
  215. package/src/components/MlLayerSwipe/MlLayerSwipe.tsx +47 -48
  216. package/src/components/MlLayerSwitcher/MlLayerSwitcher.meta_.json +1 -2
  217. package/src/components/MlLayerSwitcher/components/LayerBox.js +22 -19
  218. package/src/components/MlMarker/MlMarker.meta_.json +1 -2
  219. package/src/components/MlMeasureTool/MlMeasureTool.meta.json +1 -2
  220. package/src/components/MlNavigationCompass/MlNavigationCompass.meta.json +1 -2
  221. package/src/components/MlNavigationTools/MlNavigationTools.meta.json +1 -2
  222. package/src/components/MlScaleReference/MlScaleReference.meta.json +1 -2
  223. package/src/components/MlShareMapState/MlShareMapState.meta_.json +1 -2
  224. package/src/components/MlSketchTool/MlSketchTool.meta.json +1 -2
  225. package/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.meta.json +1 -2
  226. package/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.stories.tsx +121 -0
  227. package/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.test.js +30 -1
  228. package/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.tsx +143 -0
  229. package/src/components/MlSpatialElevationProfile/util/getElevationData.tsx +103 -0
  230. package/src/components/MlThreeJsLayer/MlThreeJsLayer.meta.json +1 -2
  231. package/src/components/MlTransitionGeoJsonLayer/MlTransitionGeoJsonLayer.meta.json +1 -2
  232. package/src/components/MlTransitionGeoJsonLayer/MlTransitionGeoJsonLayer.stories.js +2 -3
  233. package/src/components/MlTransitionGeoJsonLayer/MlTransitionGeoJsonLayer.tsx +17 -79
  234. package/src/components/MlUseMapDebugger/MlUseMapDebugger.meta_.json +1 -2
  235. package/src/components/MlVectorTileLayer/MlVectorTileLayer.meta.json +1 -2
  236. package/src/components/MlVectorTileLayer/MlVectorTileLayer.tsx +3 -2
  237. package/src/components/MlWmsFeatureInfoPopup/MlWmsFeatureInfoPopup.meta_.json +1 -2
  238. package/src/components/MlWmsLayer/MlWmsLayer.tsx +59 -41
  239. package/src/components/MlWmsLoader/MlWmsLoader.meta.json +1 -2
  240. package/src/components/MlWmsLoader/MlWmsLoader.stories.tsx +89 -0
  241. package/src/components/MlWmsLoader/MlWmsLoader.tsx +141 -122
  242. package/src/components/MlWmsLoader/utils/MlWmsLoaderInstructions.tsx +50 -0
  243. package/src/components/MlWmsLoader/utils/WMSLinks.tsx +128 -0
  244. package/src/decorators/MapContextDecorator.js +1 -1
  245. package/src/decorators/MapContextDecoratorHooks.js +1 -1
  246. package/src/decorators/ThemeWrapper.tsx +9 -0
  247. package/src/hooks/useCameraFollowPath/useCameraFollowPath.meta.json +1 -2
  248. package/src/{components/MlGPXViewer → hooks/useGpx/lib}/gpxConverter.js +1 -0
  249. package/src/hooks/useGpx/useGpx.doc.de.md +3 -0
  250. package/src/hooks/useGpx/useGpx.meta_.json +15 -0
  251. package/src/{components/MlCenterPosition/MlCenterPosition.stories.js → hooks/useGpx/useGpx.stories.js} +4 -5
  252. package/src/hooks/useGpx/useGpx.tsx +70 -0
  253. package/src/hooks/useLayer.ts +32 -10
  254. package/src/hooks/useLayerHoverPopup/useLayerHoverPopup.doc.de.md +3 -0
  255. package/src/hooks/useLayerHoverPopup/useLayerHoverPopup.meta_.json +15 -0
  256. package/src/hooks/useLayerHoverPopup/useLayerHoverPopup.stories.js +20 -0
  257. package/src/hooks/useLayerHoverPopup/useLayerHoverPopup.tsx +82 -0
  258. package/src/hooks/useMap.test.tsx +48 -0
  259. package/src/hooks/useMap.ts +8 -8
  260. package/src/hooks/useSource.ts +4 -4
  261. package/src/hooks/{useWms.js → useWms.ts} +24 -11
  262. package/src/index.ts +5 -5
  263. package/src/setupTests.js +18 -15
  264. package/src/ui_components/Dropzone.tsx +104 -0
  265. package/src/ui_components/{ImageLoader.js → ImageLoader.tsx} +30 -25
  266. package/src/ui_components/{LoadingOverlayContext.js → LoadingOverlayContext.tsx} +12 -15
  267. package/src/ui_components/Sidebar.tsx +12 -10
  268. package/src/ui_components/Tooltip.tsx +17 -0
  269. package/src/ui_components/TopToolbar.tsx +5 -3
  270. package/src/ui_components/UploadButton.tsx +57 -0
  271. package/src/util/BubbleForInstructions.js +46 -0
  272. package/src/util/Instructions.tsx +60 -0
  273. package/tsconfig.json +1 -1
  274. package/coverage/lcov-report/src/components/MlGPXViewer/MlGPXViewer.tsx.html +0 -1222
  275. package/coverage/lcov-report/src/components/MlGPXViewer/gpxConverter.js.html +0 -1645
  276. package/coverage/lcov-report/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.js.html +0 -757
  277. package/dist/components/MlGPXViewer/util/MlGPXViewerInstructions.d.ts +0 -1
  278. package/dist/components/MlGPXViewer/util/SampleLayer.d.ts +0 -0
  279. package/dist/components/MlGPXViewer/util/demoViewer.d.ts +0 -5
  280. package/src/components/MlGPXViewer/MlGPXViewer.stories.js +0 -91
  281. package/src/components/MlGPXViewer/MlGPXViewer.test.js +0 -28
  282. package/src/components/MlGPXViewer/MlGPXViewer.tsx +0 -379
  283. package/src/components/MlGPXViewer/util/MlGPXViewerInstructions.js +0 -145
  284. package/src/components/MlGPXViewer/util/SampleLayer.js +0 -2
  285. package/src/components/MlGPXViewer/util/demoViewer.js +0 -254
  286. package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.stories.js +0 -45
  287. package/src/components/MlLayerMagnify/MlLayerMagnify.stories.js +0 -41
  288. package/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.js +0 -224
  289. package/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.stories.js +0 -57
  290. package/src/components/MlWmsLoader/MlWmsLoader.stories.js +0 -47
  291. package/src/decorators/ThemeWrapper.jsx +0 -9
  292. package/src/ui_components/Legend.js +0 -44
  293. package/src/ui_components/LoadingOverlay.js +0 -41
  294. package/src/ui_components/Tooltip.js +0 -21
@@ -1,28 +1,29 @@
1
- import React, { useRef, useEffect, useContext, useCallback, useState } from "react";
2
-
3
- import MapContext from "../../contexts/MapContext";
4
- import { v4 as uuidv4 } from "uuid";
5
-
6
- import MlWmsLayer from "../MlWmsLayer/MlWmsLayer";
7
- import MlMarker from "../MlMarker/MlMarker";
8
- import MlLayer from "../MlLayer/MlLayer";
9
- import useWms from "../../hooks/useWms";
10
-
11
- import VisibilityIcon from "@mui/icons-material/Visibility";
12
- import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
13
- import List from "@mui/material/List";
14
- import ListItem from "@mui/material/ListItem";
15
- import ListItemText from "@mui/material/ListItemText";
16
- import IconButton from "@mui/material/IconButton";
17
- import { LngLat } from "maplibre-gl";
18
- import MapLibreGlWrapper from "../MapLibreMap/lib/MapLibreGlWrapper";
19
-
20
- var originShift = (2 * Math.PI * 6378137) / 2.0;
1
+ import React, { useRef, useEffect, useContext, useCallback, useState, useMemo } from 'react';
2
+
3
+ import MapContext from '../../contexts/MapContext';
4
+ import { v4 as uuidv4 } from 'uuid';
5
+
6
+ import MlWmsLayer from '../MlWmsLayer/MlWmsLayer';
7
+ import MlMarker from '../MlMarker/MlMarker';
8
+ import useWms, { useWmsProps } from '../../hooks/useWms';
9
+
10
+ import VisibilityIcon from '@mui/icons-material/Visibility';
11
+ import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
12
+ import List from '@mui/material/List';
13
+ import ListItem from '@mui/material/ListItem';
14
+ import ListItemText from '@mui/material/ListItemText';
15
+ import IconButton from '@mui/material/IconButton';
16
+ import { LngLat } from 'maplibre-gl';
17
+ import MapLibreGlWrapper from '../MapLibreMap/lib/MapLibreGlWrapper';
18
+ import { Layer2, Layer3 } from 'wms-capabilities';
19
+ import { useWmsReturnType } from '../../hooks/useWms';
20
+
21
+ const originShift = (2 * Math.PI * 6378137) / 2.0;
21
22
  const lngLatToMeters = function (lnglat: LngLat, accuracy = { enable: true, decimal: 1 }) {
22
- var lng = lnglat.lng;
23
- var lat = lnglat.lat;
24
- var x = (lng * originShift) / 180.0;
25
- var y = Math.log(Math.tan(((90 + lat) * Math.PI) / 360.0)) / (Math.PI / 180.0);
23
+ const lng = lnglat.lng;
24
+ const lat = lnglat.lat;
25
+ let x = (lng * originShift) / 180.0;
26
+ let y = Math.log(Math.tan(((90 + lat) * Math.PI) / 360.0)) / (Math.PI / 180.0);
26
27
  y = (y * originShift) / 180.0;
27
28
  if (accuracy.enable) {
28
29
  x = Number(x.toFixed(accuracy.decimal));
@@ -31,7 +32,7 @@ const lngLatToMeters = function (lnglat: LngLat, accuracy = { enable: true, deci
31
32
  return [x, y];
32
33
  };
33
34
 
34
- interface MlWmsLoaderProps {
35
+ export interface MlWmsLoaderProps {
35
36
  /**
36
37
  * WMS URL
37
38
  */
@@ -43,19 +44,21 @@ interface MlWmsLoaderProps {
43
44
  /**
44
45
  * URL parameters that will be used in the getCapabilities request
45
46
  */
46
- urlParameters: object;
47
+ urlParameters?: useWmsProps['urlParameters'];
47
48
  /**
48
49
  * URL parameters that will be added when requesting WMS capabilities
49
50
  */
50
- wmsUrlParameters: object;
51
- /**
52
- * URL parameters that will be added when requesting tiles
53
- */
54
- layerUrlParameters: object;
55
- lngLat: LngLat;
56
- idPrefix: string;
51
+ wmsUrlParameters?: { [key: string]: string };
52
+ lngLat?: LngLat;
53
+ idPrefix?: string;
57
54
  }
58
55
 
56
+ export type LayerType = {
57
+ visible: boolean;
58
+ Name: string;
59
+ Attribution?: { Title: string };
60
+ } & Omit<Layer2, 'Layer'> &
61
+ Partial<Pick<Layer2, 'Layer'>>;
59
62
  /**
60
63
  * Loads a WMS getCapabilities xml document and adds a MlWmsLayer component for each layer that is
61
64
  * offered by the WMS.
@@ -67,30 +70,22 @@ interface MlWmsLoaderProps {
67
70
  const MlWmsLoader = (props: MlWmsLoaderProps) => {
68
71
  // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
69
72
  const mapContext: MapContextType = useContext(MapContext);
70
- const { capabilities, error, setUrl, getFeatureInfoUrl, wmsUrl }: any = useWms({
71
- url: undefined,
73
+ const { capabilities, error, setUrl, getFeatureInfoUrl, wmsUrl }: useWmsReturnType = useWms({
72
74
  urlParameters: props.urlParameters,
73
75
  });
74
- let layerType: {
75
- visible: boolean;
76
- queryable: boolean;
77
- Name: string;
78
- Title: string;
79
- LatLonBoundingBox: Array<number>;
80
- EX_GeographicBoundingBox: Array<number>;
81
- Abstract: any;
82
- };
83
76
 
84
77
  const initializedRef = useRef(false);
85
78
  const mapRef = useRef<MapLibreGlWrapper>();
86
- const componentId = useRef((props.idPrefix ? props.idPrefix : "MlWmsLoader-") + uuidv4());
87
- const [layers, setLayers] = useState<Array<typeof layerType>>([]);
79
+ const componentId = useRef((props.idPrefix ? props.idPrefix : 'MlWmsLoader-') + uuidv4());
80
+ const [layers, setLayers] = useState<Array<LayerType>>([]);
88
81
 
89
- const [featureInfoLngLat, setFeatureInfoLngLat] = useState<{lng:number,lat:number} | undefined>();
82
+ const [featureInfoLngLat, setFeatureInfoLngLat] = useState<
83
+ { lng: number; lat: number } | undefined
84
+ >();
90
85
  const [featureInfoContent, setFeatureInfoContent] = useState<string | undefined>(undefined);
91
86
 
92
87
  useEffect(() => {
93
- let _componentId = componentId.current;
88
+ const _componentId = componentId.current;
94
89
 
95
90
  return () => {
96
91
  // This is the cleanup function, it is called when this react component is removed from react-dom
@@ -113,67 +108,71 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => {
113
108
  setUrl(props.url);
114
109
  }, [props.url]);
115
110
 
111
+ const attribution = useMemo(() => {
112
+ return layers
113
+ .filter((el) => el.visible && el?.Attribution?.Title)
114
+ .map((el) => el?.Attribution?.Title)
115
+ .filter((value, index, self) => self.indexOf(value) === index)
116
+ .join(' ');
117
+ }, [layers]);
118
+
116
119
  const getFeatureInfo = useCallback(
117
120
  (ev) => {
118
121
  if (!mapRef.current) return;
119
122
  setFeatureInfoLngLat(undefined);
120
123
  setFeatureInfoContent(undefined);
121
- let _bounds = mapRef.current.map.getBounds();
122
- let _sw = lngLatToMeters(_bounds._sw);
123
- let _ne = lngLatToMeters(_bounds._ne);
124
- let bbox = [_sw[0], _sw[1], _ne[0], _ne[1]];
125
- let _getFeatureInfoUrlParams = {
126
- REQUEST: "GetFeatureInfo",
127
-
128
- BBOX: bbox.join(","),
129
- SERVICE: "WMS",
124
+ const _bounds = mapRef.current.map.getBounds();
125
+ const _sw = lngLatToMeters(_bounds._sw);
126
+ const _ne = lngLatToMeters(_bounds._ne);
127
+ const bbox = [_sw[0], _sw[1], _ne[0], _ne[1]];
128
+ const _getFeatureInfoUrlParams = {
129
+ REQUEST: 'GetFeatureInfo',
130
+
131
+ BBOX: bbox.join(','),
132
+ SERVICE: 'WMS',
130
133
  INFO_FORMAT:
131
- capabilities?.Capability?.Request?.GetFeatureInfo.Format.indexOf("text/html") !== -1
132
- ? "text/html"
133
- : "text/plain",
134
- FEATURE_COUNT: "10",
134
+ capabilities?.Capability?.Request?.GetFeatureInfo.Format.indexOf('text/html') !== -1
135
+ ? 'text/html'
136
+ : 'text/plain',
137
+ FEATURE_COUNT: '10',
135
138
  LAYERS: layers
136
- .map((layer: typeof layerType) =>
137
- layer.visible && layer.queryable ? layer.Name : undefined
138
- )
139
+ .map((layer: LayerType) => (layer.visible && layer.queryable ? layer.Title : undefined))
139
140
  .filter((n) => n),
140
141
  QUERY_LAYERS: layers
141
- .map((layer: typeof layerType) =>
142
- layer.visible && layer.queryable ? layer.Name : undefined
143
- )
142
+ .map((layer: LayerType) => (layer.visible && layer.queryable ? layer.Title : undefined))
144
143
  .filter((n) => n),
145
144
  WIDTH: mapRef.current?.map._container.clientWidth,
146
145
  HEIGHT: mapRef.current?.map._container.clientHeight,
147
- srs: "EPSG:3857",
148
- CRS: "EPSG:3857",
149
- version: "1.3.0",
146
+ srs: 'EPSG:3857',
147
+ CRS: 'EPSG:3857',
148
+ version: '1.3.0',
150
149
  X: ev.point.x,
151
150
  Y: ev.point.y,
152
151
  I: ev.point.x,
153
152
  J: ev.point.y,
154
- buffer: "50",
153
+ buffer: '50',
155
154
  };
156
155
 
157
156
  let _gfiUrl: string | undefined = getFeatureInfoUrl;
158
157
  let _gfiUrlParts;
159
- if (_gfiUrl?.indexOf?.("?") !== -1) {
160
- _gfiUrlParts = props.url.split("?");
158
+ if (_gfiUrl?.indexOf?.('?') !== -1) {
159
+ _gfiUrlParts = props.url.split('?');
161
160
  _gfiUrl = _gfiUrlParts[0];
162
161
  }
163
- let _urlParamsFromUrl = new URLSearchParams(_gfiUrlParts?.[1]);
162
+ const _urlParamsFromUrl = new URLSearchParams(_gfiUrlParts?.[1]);
164
163
 
165
- let urlParamsObj = {
164
+ const urlParamsObj = {
166
165
  ...Object.fromEntries(_urlParamsFromUrl),
167
166
  ..._getFeatureInfoUrlParams,
168
167
  };
169
168
  // create URLSearchParams object to assemble the URL Parameters
170
169
  // "as any" can be removed once the URLSearchParams ts spec is fixed
171
- let urlParams = new URLSearchParams(urlParamsObj as any);
170
+ const urlParams = new URLSearchParams(urlParamsObj as unknown as Record<string, string>);
172
171
 
173
- fetch(props.url + "?" + urlParams.toString())
172
+ fetch(props.url + '?' + urlParams.toString())
174
173
  .then((res) => {
175
174
  if (!res.ok) {
176
- throw new Error("FeatureInfo could not be fetched");
175
+ throw new Error('FeatureInfo could not be fetched');
177
176
  }
178
177
  return res.text();
179
178
  })
@@ -191,37 +190,61 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => {
191
190
 
192
191
  const _getFeatureInfo = getFeatureInfo;
193
192
 
194
- mapRef.current.on("click", _getFeatureInfo, componentId.current);
193
+ mapRef.current.on('click', _getFeatureInfo, componentId.current);
195
194
  return () => {
196
- mapRef.current?.map.off?.("click", _getFeatureInfo);
195
+ mapRef.current?.map.off?.('click', _getFeatureInfo);
197
196
  };
198
197
  }, [getFeatureInfo]);
199
198
 
200
199
  useEffect(() => {
201
200
  if (!capabilities?.Service) return;
202
201
 
203
- if (capabilities?.Capability?.Layer?.SRS?.indexOf?.("EPSG:3857") === -1) {
202
+ if (capabilities?.Capability?.Layer?.CRS?.indexOf?.('EPSG:3857') === -1) {
204
203
  console.log(
205
- "MlWmsLoader (" + capabilities.Service.Title + "): No WGS 84/Pseudo-Mercator support"
204
+ 'MlWmsLoader (' + capabilities.Service.Title + '): No WGS 84/Pseudo-Mercator support'
206
205
  );
207
206
  } else {
208
207
  console.log(
209
- "MlWmsLoader (" + capabilities.Service.Title + "): WGS 84/Pseudo-Mercator supported"
208
+ 'MlWmsLoader (' + capabilities.Service.Title + '): WGS 84/Pseudo-Mercator supported'
210
209
  );
211
210
 
212
211
  let _LatLonBoundingBox: Array<number> = [];
213
- setLayers(
214
- capabilities?.Capability?.Layer?.Layer.map((layer: typeof layerType, idx: number) => {
215
- if (idx === 0) {
216
- _LatLonBoundingBox = layer.LatLonBoundingBox;
217
- if (!_LatLonBoundingBox) {
212
+
213
+ // collect aueriable Layer2 layers
214
+ let _layers: LayerType[] = capabilities?.Capability?.Layer?.Layer.filter(
215
+ (el) => el.CRS.length
216
+ ).map((layer: Layer2 & { Name: string }, idx: number) => {
217
+ if (idx === 0) {
218
+ _LatLonBoundingBox = layer.EX_GeographicBoundingBox;
219
+ }
220
+ return {
221
+ visible: capabilities?.Capability?.Layer?.Layer?.length > 2 ? idx > 1 : true,
222
+ Attribution: { Title: '' },
223
+ ...layer,
224
+ };
225
+ });
226
+
227
+ // collect aueriable Layer3 layers
228
+ capabilities?.Capability?.Layer?.Layer.forEach((el) => {
229
+ const tmpLayers = el?.Layer?.filter((el) => el.CRS.length).map(
230
+ (layer: Layer3, idx: number) => {
231
+ if (idx === 0) {
218
232
  _LatLonBoundingBox = layer.EX_GeographicBoundingBox;
219
233
  }
234
+ return {
235
+ visible: false,
236
+ Attribution: { Title: '' },
237
+ ...layer,
238
+ };
220
239
  }
221
- layer.visible = capabilities?.Capability?.Layer?.Layer?.length > 2 ? idx > 1 : true;
222
- return layer;
223
- })
224
- );
240
+ );
241
+
242
+ if (tmpLayers) {
243
+ _layers = [..._layers, ...tmpLayers];
244
+ }
245
+ });
246
+
247
+ setLayers(_layers);
225
248
 
226
249
  // zoom to extent of first layer
227
250
  if (mapRef.current && _LatLonBoundingBox.length > 3) {
@@ -239,7 +262,6 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => {
239
262
  // initialize the layer and add it to the MapLibre-gl instance or do something else with it
240
263
  initializedRef.current = true;
241
264
  mapRef.current = mapContext.getMap(props.mapId);
242
- console.log("set url " + props.url);
243
265
  setUrl(props.url);
244
266
  }, [mapContext.mapIds, mapContext, props.mapId, props.url]);
245
267
 
@@ -247,21 +269,9 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => {
247
269
  <>
248
270
  {error && <p>{error}</p>}
249
271
  <h3 key="title">{capabilities?.Service?.Title}</h3>
250
- {console.log(componentId.current)}
251
- {capabilities?.Capability?.Layer?.Layer.map((layer: any, idx: number) => (
252
- <MlLayer
253
- layerId={"Order-" + componentId.current + "-" + idx}
254
- key={componentId.current + "-" + idx}
255
- {...(idx > 0
256
- ? {
257
- insertBeforeLayer: "Order-" + componentId.current + "-" + (idx - 1),
258
- }
259
- : undefined)}
260
- />
261
- ))}
262
272
  <List dense key="layers">
263
273
  {wmsUrl &&
264
- layers?.map?.((layer: typeof layerType, idx) => {
274
+ layers?.map?.((layer, idx) => {
265
275
  return layer?.Name ? (
266
276
  <ListItem
267
277
  key={layer.Name + idx}
@@ -270,7 +280,7 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => {
270
280
  edge="end"
271
281
  aria-label="toggle visibility"
272
282
  onClick={() => {
273
- let _layers: Array<typeof layerType> = [...layers];
283
+ const _layers: Array<LayerType> = [...layers];
274
284
  _layers[idx].visible = !_layers[idx].visible;
275
285
  setLayers([..._layers]);
276
286
  }}
@@ -279,22 +289,31 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => {
279
289
  </IconButton>
280
290
  }
281
291
  >
282
- <ListItemText primary={layer?.Title} secondary={layer?.Abstract} />
283
- <MlWmsLayer
284
- key={layer?.Name + idx}
285
- url={wmsUrl}
286
- urlParameters={{ ...props.wmsUrlParameters, layers: layer?.Name }}
287
- visible={layers[idx].visible}
288
- insertBeforeLayer={"Order-" + componentId.current + "-" + idx}
289
- />
292
+ <ListItemText primary={layer?.Title} />
290
293
  </ListItem>
291
294
  ) : (
292
295
  <></>
293
296
  );
294
297
  })}
295
298
  </List>
296
- <p key="description" style={{ fontSize: ".7em" }}>
297
- {capabilities?.Capability?.Layer?.Abstract}
299
+ {wmsUrl && layers?.length && (
300
+ <MlWmsLayer
301
+ key={componentId.current}
302
+ url={wmsUrl}
303
+ attribution={attribution}
304
+ urlParameters={{
305
+ ...props.wmsUrlParameters,
306
+ layers: layers
307
+ ?.filter?.((layer) => layer.visible)
308
+ .map((el) => el.Name)
309
+ .reverse()
310
+ .join(','),
311
+ }}
312
+ />
313
+ )}
314
+
315
+ <p key="description" style={{ fontSize: '.7em' }}>
316
+ {capabilities?.Capability?.Layer?.['Abstract']}
298
317
  </p>
299
318
 
300
319
  {featureInfoLngLat && <MlMarker {...featureInfoLngLat} content={featureInfoContent} />}
@@ -303,14 +322,14 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => {
303
322
  };
304
323
 
305
324
  MlWmsLoader.defaultProps = {
306
- url: "",
325
+ url: '',
307
326
  urlParameters: {
308
- SERVICE: "WMS",
309
- VERSION: "1.3.0",
310
- REQUEST: "GetCapabilities",
327
+ SERVICE: 'WMS',
328
+ VERSION: '1.3.0',
329
+ REQUEST: 'GetCapabilities',
311
330
  },
312
331
  wmsUrlParameters: {
313
- TRANSPARENT: "TRUE",
332
+ TRANSPARENT: 'TRUE',
314
333
  },
315
334
  };
316
335
 
@@ -0,0 +1,50 @@
1
+ import React from 'react';
2
+ import Instructions from '../../../util/Instructions';
3
+
4
+ const steps = [
5
+ {
6
+ duration: 2500,
7
+ props: {
8
+ bubbleTop: '200px',
9
+ bubbleLeft: '-180px',
10
+ textMarginTop: '150px',
11
+ textMarginLeft: '200px',
12
+ iconTransform: 'rotate(90deg)',
13
+ iconMarginTop: '-210px',
14
+ iconMarginLeft: '200px',
15
+ zIndex: 1210
16
+ },
17
+ content: (
18
+ <>
19
+ Introduce an <br />
20
+ WMS Service <br /> URL here
21
+ </>
22
+ ),
23
+ },
24
+ {
25
+ duration: 3000,
26
+ props: {
27
+ bubbleLeft: '-40px',
28
+ bubbleTop: '-150px',
29
+ textMarginTop: '240px',
30
+ textMarginLeft: '75px',
31
+ iconTransform: 'rotate(90deg)',
32
+ iconMarginTop: '-125px',
33
+ iconMarginLeft: '280px',
34
+ zIndex: 1210
35
+ },
36
+ content: (
37
+ <>
38
+ In demo mode we <br /> provide you some <br /> WMS links <br /> to copy and use.
39
+ </>
40
+ ),
41
+ },
42
+ ];
43
+
44
+ export default function MlWmsLoaderInstructions(props: { open: boolean }) {
45
+ return (
46
+ <>
47
+ <Instructions steps={steps} open={props.open} />
48
+ </>
49
+ );
50
+ }
@@ -0,0 +1,128 @@
1
+ import React, { useEffect, useState } from 'react';
2
+ import useMediaQuery from '@mui/material/useMediaQuery';
3
+ import { Box, Typography, Button, Divider, TextField, Grid, Fade, Paper } from '@mui/material';
4
+ import ContentCopyIcon from '@mui/icons-material/ContentCopy';
5
+ import CloseIcon from '@mui/icons-material/Close';
6
+
7
+
8
+ const modalStyle = {
9
+ position: 'absolute',
10
+ zIndex: 500,
11
+ top: '55%',
12
+ left: '80%',
13
+ transform: 'translate(-50%, -50%)',
14
+ width: '400px',
15
+ height: '600px',
16
+ boxShadow: 20,
17
+ alignItems: 'center',
18
+ padding: 0,
19
+ opacity: 1,
20
+ transition: 'opacity 1s',
21
+ };
22
+
23
+ const mobileStyle = {
24
+ position: 'absolute',
25
+ top: '10%',
26
+ left: '20%',
27
+ width: '60%',
28
+ height: '70%',
29
+ bgcolor: 'background.paper',
30
+ boxShadow: 24,
31
+ zIndex: 200,
32
+ overflow: 'scroll',
33
+ };
34
+
35
+ const wmsServices = [
36
+ {
37
+ id: '1',
38
+ title: 'HistOSM',
39
+ description: 'Historic objects stored in the OpenStreetMap database',
40
+ link: 'https://maps.heigit.org/histosm/wms',
41
+ },
42
+ {
43
+ id: '2',
44
+ title: 'MagOSM',
45
+ description:
46
+ 'MagOSM is a project of the company Magellium which offers services related to thematic data from OpenStreetMap. Currently these services are provided at the scale of metropolitan France. The data of the different services are updated daily.',
47
+ link: 'https://magosm.magellium.com/geoserver/wms',
48
+ },
49
+ {
50
+ id: '3',
51
+ title: 'NRW_vdop',
52
+ description:
53
+ 'The WMS NW vDOP Geobasis North Rhine-Westphalia provides intermediate results from the production process of the digital orthophotos (DOP).',
54
+ link: 'https://www.wms.nrw.de/geobasis/wms_nw_vdop',
55
+ },
56
+ ];
57
+
58
+ export interface wmsLinksProps {
59
+ load: (str: string) => void;
60
+ open: boolean;
61
+ close: () => void;
62
+
63
+ }
64
+
65
+ export default function WMSLinks(props: wmsLinksProps) {
66
+ const mediaIsMobile = useMediaQuery('(max-width:900px)');
67
+ const [selectedSample, setSelectedSample] = useState<string>();
68
+
69
+ const Links = () => {
70
+ return (
71
+ <>
72
+ {wmsServices.map((el) => (
73
+ <Grid item xs={12} sx={{ marginTop: 5 }} key={el.id}>
74
+ <Typography variant="h6">{el.title}</Typography>
75
+ <Typography variant="body2">{el.description}</Typography>
76
+ <TextField value={el.link} size="small"></TextField>
77
+ <Button
78
+ variant="contained"
79
+ sx={{ marginTop: 0.2 }}
80
+ onClick={() => {
81
+ setSelectedSample(el.link);
82
+ document.getElementById('wms_text_field')?.focus()
83
+ }}
84
+ >
85
+ <ContentCopyIcon />
86
+ </Button>
87
+ <Divider sx={{ marginTop: '10px' }} />
88
+ </Grid>
89
+ ))}
90
+ </>
91
+ );
92
+ };
93
+
94
+ useEffect(() => {
95
+ if (selectedSample) {
96
+ props.load(selectedSample);
97
+ }
98
+ }, [selectedSample]);
99
+
100
+ return (
101
+ <>
102
+ {props.open && (
103
+ <Fade in={props.open} appear={false}>
104
+ <Box sx={mediaIsMobile ? mobileStyle : modalStyle}>
105
+ <Paper sx={{ padding: '20px' }}>
106
+ <Grid container>
107
+ <Grid item xs={10}>
108
+ <Typography id="modal-modal-title" variant="h6">
109
+ WMS Links
110
+ </Typography>
111
+ </Grid>
112
+ <Grid item xs={2}>
113
+ <Button onClick={props.close}>
114
+ <CloseIcon sx={{ color: 'black' }} />
115
+ </Button>
116
+ </Grid>
117
+ </Grid>
118
+ <Divider />
119
+ <Grid container>
120
+ <Links />
121
+ </Grid>
122
+ </Paper>
123
+ </Box>
124
+ </Fade>
125
+ )}
126
+ </>
127
+ );
128
+ }
@@ -21,7 +21,7 @@ const decorators = [
21
21
  mapId="map_1"
22
22
  />
23
23
  <MlNavgiationTools
24
- sx={{ top: "10px", right: "5px" }}
24
+ sx={{ bottom: "25px", right: 0 }}
25
25
  showZoomButtons={false}
26
26
  mapId="map_1"
27
27
  />
@@ -21,7 +21,7 @@ const decorators = [
21
21
  mapId="map_1"
22
22
  />
23
23
  <MlNavgiationTools
24
- sx={{ top: "10px", right: "5px" }}
24
+ sx={{ bottom: "25px", right: 0 }}
25
25
  showZoomButtons={false}
26
26
  mapId="map_1"
27
27
  />
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ import { ThemeProvider as MUIThemeProvider, createTheme } from '@mui/material/styles';
3
+
4
+ const theme = createTheme({
5
+ });
6
+
7
+ export default function ThemeWrapper(props: { children: unknown }) {
8
+ return <MUIThemeProvider theme={theme}>{props?.children}</MUIThemeProvider>;
9
+ }
@@ -10,6 +10,5 @@
10
10
  },
11
11
  "tags": [],
12
12
  "category": "",
13
- "type": "component",
14
- "price": 1000
13
+ "type": "component"
15
14
  }
@@ -123,6 +123,7 @@ var toGeoJSON = (function () {
123
123
  var isNodeEnv = typeof process === "object" && !process.browser;
124
124
  var isTitaniumEnv = typeof Titanium === "object";
125
125
  if (typeof exports === "object" && (isNodeEnv || isTitaniumEnv)) {
126
+ // eslint-disable-next-line @typescript-eslint/no-var-requires, no-undef
126
127
  serializer = new (require("xmldom").XMLSerializer)();
127
128
  } else {
128
129
  throw new Error("Unable to initialize serializer");
@@ -0,0 +1,3 @@
1
+ # Component Beschreibung
2
+
3
+ Beschreibungstext
@@ -0,0 +1,15 @@
1
+ {
2
+ "name": "useGpx",
3
+ "title": "",
4
+ "description": "",
5
+ "i18n": {
6
+ "de": {
7
+ "title": "",
8
+ "description": ""
9
+ }
10
+ },
11
+ "tags": [],
12
+ "category": "",
13
+ "type": "component",
14
+ "price": 0
15
+ }