diff --git a/docs/architecture.md b/docs/architecture.md new file mode 100644 index 0000000..92b9c7c --- /dev/null +++ b/docs/architecture.md @@ -0,0 +1,87 @@ +# GeoView Demo Architecture + +## Overview + +The GeoView Demo project is designed to showcase the capabilities of the GeoView library. +GeoViewDemo offers users the following functionalities; +- Ability to build and test their config files via a UI. +- A place to try GeoView API functions and see the code that triggers such functions. +This document provides an overview of the architecture, including the main components and their interactions. + +![image](https://github.com/user-attachments/assets/b971db56-442c-4a90-987c-3204e5eed9ef) + + +## The UI Structure + +The UI structure consists mainly of two sections. The map and the drawers sections. +The map basically renders the generated map. +The drawer consists of different tabs - each displaying information about the map or offering a way of manipulating the map. + +## Folder Structure + +The GeoView Demo project follows a structured layout to maintain clarity and organization. Below is an overview of the main folders and their purposes: + +``` +/geoview-demo +├── /docs +├── /src +│ ├── /components +│ ├── /providers +│ ├── /routes +│ └── /pages +│ └── /constants.ts +│ └── /types.ts +``` + +### /docs +- **Purpose**: Contains all the documentation related to the project, including architectural overviews, API documentation, and user guides. + +### /src +- **Purpose**: The main source code of the project. +- **Subfolders**: + - **/components**: Contains React components used in the UI. + - **/routes**: Contains routes for the application. At the moment the application has only one route (/default); but can be expanded to add more routes. + - **/providers**: This folder containers all our providers used in the application. + - **/routes**: Pages associated with routes. + +### /public +- **Purpose**: Static files that are publicly accessible, such as HTML templates, images, and other assets. + +This folder structure promotes a clean separation of concerns, making the project easier to navigate and maintain. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html index 83435ee..8ee3823 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,9 @@ - + - + GeoView Demo Page diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index cc6cd75..0000000 Binary files a/public/favicon.ico and /dev/null differ diff --git a/public/img/Check.png b/public/img/Check.png deleted file mode 100644 index d745747..0000000 Binary files a/public/img/Check.png and /dev/null differ diff --git a/public/img/GeoCaIcon.svg b/public/img/GeoCaIcon.svg deleted file mode 100644 index ca7ef97..0000000 --- a/public/img/GeoCaIcon.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - \ No newline at end of file diff --git a/public/img/Logo.png b/public/img/Logo.png deleted file mode 100644 index dc2a8c8..0000000 Binary files a/public/img/Logo.png and /dev/null differ diff --git a/public/img/Marker.png b/public/img/Marker.png deleted file mode 100644 index 8cea26a..0000000 Binary files a/public/img/Marker.png and /dev/null differ diff --git a/public/img/guide/datatable/action_icon_filters.png b/public/img/guide/datatable/action_icon_filters.png deleted file mode 100644 index ee84fab..0000000 Binary files a/public/img/guide/datatable/action_icon_filters.png and /dev/null differ diff --git a/public/img/guide/datatable/column_action.svg b/public/img/guide/datatable/column_action.svg deleted file mode 100644 index 455ae7f..0000000 --- a/public/img/guide/datatable/column_action.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/datatable/column_hide_25.svg b/public/img/guide/datatable/column_hide_25.svg deleted file mode 100644 index 0b51ecc..0000000 --- a/public/img/guide/datatable/column_hide_25.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/datatable/column_show.svg b/public/img/guide/datatable/column_show.svg deleted file mode 100644 index 1b042a0..0000000 --- a/public/img/guide/datatable/column_show.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/datatable/density.svg b/public/img/guide/datatable/density.svg deleted file mode 100644 index b26b8bc..0000000 --- a/public/img/guide/datatable/density.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/datatable/export.svg b/public/img/guide/datatable/export.svg deleted file mode 100644 index c26e6db..0000000 --- a/public/img/guide/datatable/export.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/datatable/filter.png b/public/img/guide/datatable/filter.png deleted file mode 100644 index dce4524..0000000 Binary files a/public/img/guide/datatable/filter.png and /dev/null differ diff --git a/public/img/guide/datatable/filter_clear_25.svg b/public/img/guide/datatable/filter_clear_25.svg deleted file mode 100644 index a6717b7..0000000 --- a/public/img/guide/datatable/filter_clear_25.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/datatable/filter_open.png b/public/img/guide/datatable/filter_open.png deleted file mode 100644 index cec202b..0000000 Binary files a/public/img/guide/datatable/filter_open.png and /dev/null differ diff --git a/public/img/guide/datatable/filter_toggle.svg b/public/img/guide/datatable/filter_toggle.svg deleted file mode 100644 index aedf9a9..0000000 --- a/public/img/guide/datatable/filter_toggle.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/datatable/filter_toggle_25.svg b/public/img/guide/datatable/filter_toggle_25.svg deleted file mode 100644 index 0648168..0000000 --- a/public/img/guide/datatable/filter_toggle_25.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/datatable/fullscreen.svg b/public/img/guide/datatable/fullscreen.svg deleted file mode 100644 index 92d8447..0000000 --- a/public/img/guide/datatable/fullscreen.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/datatable/layer_features.png b/public/img/guide/datatable/layer_features.png deleted file mode 100644 index fefe1fa..0000000 Binary files a/public/img/guide/datatable/layer_features.png and /dev/null differ diff --git a/public/img/guide/datatable/pin_left_25.svg b/public/img/guide/datatable/pin_left_25.svg deleted file mode 100644 index b4b8dd5..0000000 --- a/public/img/guide/datatable/pin_left_25.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/datatable/pin_right_25.svg b/public/img/guide/datatable/pin_right_25.svg deleted file mode 100644 index e68e61e..0000000 --- a/public/img/guide/datatable/pin_right_25.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/datatable/settings.png b/public/img/guide/datatable/settings.png deleted file mode 100644 index 51ef5be..0000000 Binary files a/public/img/guide/datatable/settings.png and /dev/null differ diff --git a/public/img/guide/datatable/zoom.svg b/public/img/guide/datatable/zoom.svg deleted file mode 100644 index 07780cc..0000000 --- a/public/img/guide/datatable/zoom.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/footer/back_arrow_30.svg b/public/img/guide/footer/back_arrow_30.svg deleted file mode 100644 index d63767e..0000000 --- a/public/img/guide/footer/back_arrow_30.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/footer/back_arrow_50.svg b/public/img/guide/footer/back_arrow_50.svg deleted file mode 100644 index bc4be17..0000000 --- a/public/img/guide/footer/back_arrow_50.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/footer/bar_chart.png b/public/img/guide/footer/bar_chart.png deleted file mode 100644 index af58354..0000000 Binary files a/public/img/guide/footer/bar_chart.png and /dev/null differ diff --git a/public/img/guide/footer/chart.png b/public/img/guide/footer/chart.png deleted file mode 100644 index 2f5de25..0000000 Binary files a/public/img/guide/footer/chart.png and /dev/null differ diff --git a/public/img/guide/footer/chart1.png b/public/img/guide/footer/chart1.png deleted file mode 100644 index ad6cdcf..0000000 Binary files a/public/img/guide/footer/chart1.png and /dev/null differ diff --git a/public/img/guide/footer/chart_30.svg b/public/img/guide/footer/chart_30.svg deleted file mode 100644 index 094bede..0000000 --- a/public/img/guide/footer/chart_30.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/footer/chart_x.png b/public/img/guide/footer/chart_x.png deleted file mode 100644 index db1c39f..0000000 Binary files a/public/img/guide/footer/chart_x.png and /dev/null differ diff --git a/public/img/guide/footer/checkbox.png b/public/img/guide/footer/checkbox.png deleted file mode 100644 index 1b4b634..0000000 Binary files a/public/img/guide/footer/checkbox.png and /dev/null differ diff --git a/public/img/guide/footer/data_table.svg b/public/img/guide/footer/data_table.svg deleted file mode 100644 index 73eb25c..0000000 --- a/public/img/guide/footer/data_table.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/footer/datatable.png b/public/img/guide/footer/datatable.png deleted file mode 100644 index f6a5a18..0000000 Binary files a/public/img/guide/footer/datatable.png and /dev/null differ diff --git a/public/img/guide/footer/details.png b/public/img/guide/footer/details.png deleted file mode 100644 index df0c5d6..0000000 Binary files a/public/img/guide/footer/details.png and /dev/null differ diff --git a/public/img/guide/footer/direction_arrow_30.svg b/public/img/guide/footer/direction_arrow_30.svg deleted file mode 100644 index 2d34cb9..0000000 --- a/public/img/guide/footer/direction_arrow_30.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/footer/eye.png b/public/img/guide/footer/eye.png deleted file mode 100644 index 99211ba..0000000 Binary files a/public/img/guide/footer/eye.png and /dev/null differ diff --git a/public/img/guide/footer/eye_disabled.png b/public/img/guide/footer/eye_disabled.png deleted file mode 100644 index 88b96a5..0000000 Binary files a/public/img/guide/footer/eye_disabled.png and /dev/null differ diff --git a/public/img/guide/footer/eye_not_visible.png b/public/img/guide/footer/eye_not_visible.png deleted file mode 100644 index 1a447ea..0000000 Binary files a/public/img/guide/footer/eye_not_visible.png and /dev/null differ diff --git a/public/img/guide/footer/footer.png b/public/img/guide/footer/footer.png deleted file mode 100644 index 72cd2b8..0000000 Binary files a/public/img/guide/footer/footer.png and /dev/null differ diff --git a/public/img/guide/footer/footer_tabs.png b/public/img/guide/footer/footer_tabs.png deleted file mode 100644 index 5bf6f06..0000000 Binary files a/public/img/guide/footer/footer_tabs.png and /dev/null differ diff --git a/public/img/guide/footer/forward_arrow_30.svg b/public/img/guide/footer/forward_arrow_30.svg deleted file mode 100644 index e6b1b8f..0000000 --- a/public/img/guide/footer/forward_arrow_30.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/footer/icon_multiple.png b/public/img/guide/footer/icon_multiple.png deleted file mode 100644 index bb06a96..0000000 Binary files a/public/img/guide/footer/icon_multiple.png and /dev/null differ diff --git a/public/img/guide/footer/icon_single.png b/public/img/guide/footer/icon_single.png deleted file mode 100644 index c2cec25..0000000 Binary files a/public/img/guide/footer/icon_single.png and /dev/null differ diff --git a/public/img/guide/footer/layers_30.svg b/public/img/guide/footer/layers_30.svg deleted file mode 100644 index b9aa702..0000000 --- a/public/img/guide/footer/layers_30.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/footer/lock_30.svg b/public/img/guide/footer/lock_30.svg deleted file mode 100644 index 87b3722..0000000 --- a/public/img/guide/footer/lock_30.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/footer/pie_chart.png b/public/img/guide/footer/pie_chart.png deleted file mode 100644 index 7b28e2f..0000000 Binary files a/public/img/guide/footer/pie_chart.png and /dev/null differ diff --git a/public/img/guide/footer/play_arrow.svg b/public/img/guide/footer/play_arrow.svg deleted file mode 100644 index 9e7e9c4..0000000 --- a/public/img/guide/footer/play_arrow.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/footer/play_arrow_30.svg b/public/img/guide/footer/play_arrow_30.svg deleted file mode 100644 index 9e7e9c4..0000000 --- a/public/img/guide/footer/play_arrow_30.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/footer/swap_vert_FILL0_wght400_GRAD0_opsz24.svg b/public/img/guide/footer/swap_vert_FILL0_wght400_GRAD0_opsz24.svg deleted file mode 100644 index 12e0174..0000000 --- a/public/img/guide/footer/swap_vert_FILL0_wght400_GRAD0_opsz24.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/footer/time_slider.png b/public/img/guide/footer/time_slider.png deleted file mode 100644 index 0a45668..0000000 Binary files a/public/img/guide/footer/time_slider.png and /dev/null differ diff --git a/public/img/guide/footer/time_slider_30.svg b/public/img/guide/footer/time_slider_30.svg deleted file mode 100644 index ff06b39..0000000 --- a/public/img/guide/footer/time_slider_30.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/footer/view_25.svg b/public/img/guide/footer/view_25.svg deleted file mode 100644 index ca1d8f8..0000000 --- a/public/img/guide/footer/view_25.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/geosearch/clear.svg b/public/img/guide/geosearch/clear.svg deleted file mode 100644 index a282d04..0000000 --- a/public/img/guide/geosearch/clear.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/geosearch/geofilter_en.png b/public/img/guide/geosearch/geofilter_en.png deleted file mode 100644 index 0ddc238..0000000 Binary files a/public/img/guide/geosearch/geofilter_en.png and /dev/null differ diff --git a/public/img/guide/geosearch/geofilter_fr.png b/public/img/guide/geosearch/geofilter_fr.png deleted file mode 100644 index c431e74..0000000 Binary files a/public/img/guide/geosearch/geofilter_fr.png and /dev/null differ diff --git a/public/img/guide/geosearch/geolocator.svg b/public/img/guide/geosearch/geolocator.svg deleted file mode 100644 index 0a9a83d..0000000 --- a/public/img/guide/geosearch/geolocator.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/geosearch/geolocator_20.svg b/public/img/guide/geosearch/geolocator_20.svg deleted file mode 100644 index b86230b..0000000 --- a/public/img/guide/geosearch/geolocator_20.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/geosearch/searchbar_en.png b/public/img/guide/geosearch/searchbar_en.png deleted file mode 100644 index 06d37a4..0000000 Binary files a/public/img/guide/geosearch/searchbar_en.png and /dev/null differ diff --git a/public/img/guide/geosearch/searchbar_fr.png b/public/img/guide/geosearch/searchbar_fr.png deleted file mode 100644 index 71042f4..0000000 Binary files a/public/img/guide/geosearch/searchbar_fr.png and /dev/null differ diff --git a/public/img/guide/geosearch/visiblemap_en.png b/public/img/guide/geosearch/visiblemap_en.png deleted file mode 100644 index 0ef965f..0000000 Binary files a/public/img/guide/geosearch/visiblemap_en.png and /dev/null differ diff --git a/public/img/guide/geosearch/visiblemap_fr.png b/public/img/guide/geosearch/visiblemap_fr.png deleted file mode 100644 index 1abf2cc..0000000 Binary files a/public/img/guide/geosearch/visiblemap_fr.png and /dev/null differ diff --git a/public/img/guide/layers/add_25.svg b/public/img/guide/layers/add_25.svg deleted file mode 100644 index a4b5774..0000000 --- a/public/img/guide/layers/add_25.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/layers/add_layer.png b/public/img/guide/layers/add_layer.png deleted file mode 100644 index 82cf316..0000000 Binary files a/public/img/guide/layers/add_layer.png and /dev/null differ diff --git a/public/img/guide/layers/check.png b/public/img/guide/layers/check.png deleted file mode 100644 index c0c7f1e..0000000 Binary files a/public/img/guide/layers/check.png and /dev/null differ diff --git a/public/img/guide/layers/details.png b/public/img/guide/layers/details.png deleted file mode 100644 index 2f7db4f..0000000 Binary files a/public/img/guide/layers/details.png and /dev/null differ diff --git a/public/img/guide/layers/details.svg b/public/img/guide/layers/details.svg deleted file mode 100644 index 19eb3a6..0000000 --- a/public/img/guide/layers/details.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/layers/group.png b/public/img/guide/layers/group.png deleted file mode 100644 index 7aa251e..0000000 Binary files a/public/img/guide/layers/group.png and /dev/null differ diff --git a/public/img/guide/layers/group.svg b/public/img/guide/layers/group.svg deleted file mode 100644 index d17b9fb..0000000 --- a/public/img/guide/layers/group.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/layers/highlight.png b/public/img/guide/layers/highlight.png deleted file mode 100644 index 8792dcc..0000000 Binary files a/public/img/guide/layers/highlight.png and /dev/null differ diff --git a/public/img/guide/layers/highlight_60.svg b/public/img/guide/layers/highlight_60.svg deleted file mode 100644 index 64f1d4b..0000000 --- a/public/img/guide/layers/highlight_60.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/layers/opacity.png b/public/img/guide/layers/opacity.png deleted file mode 100644 index 9f815b5..0000000 Binary files a/public/img/guide/layers/opacity.png and /dev/null differ diff --git a/public/img/guide/layers/refresh.png b/public/img/guide/layers/refresh.png deleted file mode 100644 index eba93fd..0000000 Binary files a/public/img/guide/layers/refresh.png and /dev/null differ diff --git a/public/img/guide/layers/refresh_60.svg b/public/img/guide/layers/refresh_60.svg deleted file mode 100644 index fe4a46b..0000000 --- a/public/img/guide/layers/refresh_60.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/layers/remove_25.svg b/public/img/guide/layers/remove_25.svg deleted file mode 100644 index 9999f4f..0000000 --- a/public/img/guide/layers/remove_25.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/layers/settings.png b/public/img/guide/layers/settings.png deleted file mode 100644 index 85a700a..0000000 Binary files a/public/img/guide/layers/settings.png and /dev/null differ diff --git a/public/img/guide/layers/sort_25.svg b/public/img/guide/layers/sort_25.svg deleted file mode 100644 index 87038de..0000000 --- a/public/img/guide/layers/sort_25.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/layers/table_view.svg b/public/img/guide/layers/table_view.svg deleted file mode 100644 index 78b513c..0000000 --- a/public/img/guide/layers/table_view.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/layers/table_view_60.svg b/public/img/guide/layers/table_view_60.svg deleted file mode 100644 index 68cb73b..0000000 --- a/public/img/guide/layers/table_view_60.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/layers/view.png b/public/img/guide/layers/view.png deleted file mode 100644 index 93b48db..0000000 Binary files a/public/img/guide/layers/view.png and /dev/null differ diff --git a/public/img/guide/layers/zoom.png b/public/img/guide/layers/zoom.png deleted file mode 100644 index 17b4a15..0000000 Binary files a/public/img/guide/layers/zoom.png and /dev/null differ diff --git a/public/img/guide/layers/zoom_60.svg b/public/img/guide/layers/zoom_60.svg deleted file mode 100644 index f4932da..0000000 --- a/public/img/guide/layers/zoom_60.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/navigation/attribute.svg b/public/img/guide/navigation/attribute.svg deleted file mode 100644 index 1389447..0000000 --- a/public/img/guide/navigation/attribute.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/navigation/chevron_left.svg b/public/img/guide/navigation/chevron_left.svg deleted file mode 100644 index e7922d6..0000000 --- a/public/img/guide/navigation/chevron_left.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/navigation/chevron_overview.png b/public/img/guide/navigation/chevron_overview.png deleted file mode 100644 index 84fd08b..0000000 Binary files a/public/img/guide/navigation/chevron_overview.png and /dev/null differ diff --git a/public/img/guide/navigation/chevron_up.svg b/public/img/guide/navigation/chevron_up.svg deleted file mode 100644 index ffc8421..0000000 --- a/public/img/guide/navigation/chevron_up.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/navigation/crosshair.svg b/public/img/guide/navigation/crosshair.svg deleted file mode 100644 index 6ce9935..0000000 --- a/public/img/guide/navigation/crosshair.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/navigation/down_arrow_20.svg b/public/img/guide/navigation/down_arrow_20.svg deleted file mode 100644 index 7d4271c..0000000 --- a/public/img/guide/navigation/down_arrow_20.svg +++ /dev/null @@ -1,37 +0,0 @@ - - - - - - diff --git a/public/img/guide/navigation/enable.png b/public/img/guide/navigation/enable.png deleted file mode 100644 index 02fdf36..0000000 Binary files a/public/img/guide/navigation/enable.png and /dev/null differ diff --git a/public/img/guide/navigation/fix_north.png b/public/img/guide/navigation/fix_north.png deleted file mode 100644 index 7f10935..0000000 Binary files a/public/img/guide/navigation/fix_north.png and /dev/null differ diff --git a/public/img/guide/navigation/fullscreen.svg b/public/img/guide/navigation/fullscreen.svg deleted file mode 100644 index 0fa17a1..0000000 --- a/public/img/guide/navigation/fullscreen.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/navigation/geolocation.png b/public/img/guide/navigation/geolocation.png deleted file mode 100644 index 40a9afd..0000000 Binary files a/public/img/guide/navigation/geolocation.png and /dev/null differ diff --git a/public/img/guide/navigation/geolocation.svg b/public/img/guide/navigation/geolocation.svg deleted file mode 100644 index 47d4f12..0000000 --- a/public/img/guide/navigation/geolocation.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/navigation/home.svg b/public/img/guide/navigation/home.svg deleted file mode 100644 index fd14cd0..0000000 --- a/public/img/guide/navigation/home.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/navigation/keyboard_nav.png b/public/img/guide/navigation/keyboard_nav.png deleted file mode 100644 index 02fdf36..0000000 Binary files a/public/img/guide/navigation/keyboard_nav.png and /dev/null differ diff --git a/public/img/guide/navigation/map_info.png b/public/img/guide/navigation/map_info.png deleted file mode 100644 index f341cd7..0000000 Binary files a/public/img/guide/navigation/map_info.png and /dev/null differ diff --git a/public/img/guide/navigation/minus.svg b/public/img/guide/navigation/minus.svg deleted file mode 100644 index 08fd710..0000000 --- a/public/img/guide/navigation/minus.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/navigation/overview.png b/public/img/guide/navigation/overview.png deleted file mode 100644 index a267fe0..0000000 Binary files a/public/img/guide/navigation/overview.png and /dev/null differ diff --git a/public/img/guide/navigation/plus.svg b/public/img/guide/navigation/plus.svg deleted file mode 100644 index 4f1757e..0000000 --- a/public/img/guide/navigation/plus.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/navigation/up_arrow.svg b/public/img/guide/navigation/up_arrow.svg deleted file mode 100644 index dbaf1e0..0000000 --- a/public/img/guide/navigation/up_arrow.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/navigation/up_arrow_20.svg b/public/img/guide/navigation/up_arrow_20.svg deleted file mode 100644 index 4cd6d93..0000000 --- a/public/img/guide/navigation/up_arrow_20.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/sidebar/about.svg b/public/img/guide/sidebar/about.svg deleted file mode 100644 index b4dcce6..0000000 --- a/public/img/guide/sidebar/about.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/sidebar/basemap.svg b/public/img/guide/sidebar/basemap.svg deleted file mode 100644 index 8c96ea5..0000000 --- a/public/img/guide/sidebar/basemap.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/sidebar/basemap_30.svg b/public/img/guide/sidebar/basemap_30.svg deleted file mode 100644 index 41ca478..0000000 --- a/public/img/guide/sidebar/basemap_30.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/sidebar/details.svg b/public/img/guide/sidebar/details.svg deleted file mode 100644 index c220feb..0000000 --- a/public/img/guide/sidebar/details.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/sidebar/details_30.svg b/public/img/guide/sidebar/details_30.svg deleted file mode 100644 index 88c863c..0000000 --- a/public/img/guide/sidebar/details_30.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/sidebar/export.svg b/public/img/guide/sidebar/export.svg deleted file mode 100644 index ae63cc1..0000000 --- a/public/img/guide/sidebar/export.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/sidebar/export_30.svg b/public/img/guide/sidebar/export_30.svg deleted file mode 100644 index ebbcc34..0000000 --- a/public/img/guide/sidebar/export_30.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/sidebar/geolocator.svg b/public/img/guide/sidebar/geolocator.svg deleted file mode 100644 index 26d677e..0000000 --- a/public/img/guide/sidebar/geolocator.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/sidebar/geolocator_20.svg b/public/img/guide/sidebar/geolocator_20.svg deleted file mode 100644 index b86230b..0000000 --- a/public/img/guide/sidebar/geolocator_20.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/sidebar/guide.svg b/public/img/guide/sidebar/guide.svg deleted file mode 100644 index 7e37b5a..0000000 --- a/public/img/guide/sidebar/guide.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/sidebar/legend.svg b/public/img/guide/sidebar/legend.svg deleted file mode 100644 index 2c4fd2d..0000000 --- a/public/img/guide/sidebar/legend.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/sidebar/legend_25.svg b/public/img/guide/sidebar/legend_25.svg deleted file mode 100644 index 0135781..0000000 --- a/public/img/guide/sidebar/legend_25.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/sidebar/legend_30.svg b/public/img/guide/sidebar/legend_30.svg deleted file mode 100644 index 37edfd4..0000000 --- a/public/img/guide/sidebar/legend_30.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/sidebar/notifications.svg b/public/img/guide/sidebar/notifications.svg deleted file mode 100644 index c6c56eb..0000000 --- a/public/img/guide/sidebar/notifications.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/guide/sidebar/searchbar.png b/public/img/guide/sidebar/searchbar.png deleted file mode 100644 index 848f06d..0000000 Binary files a/public/img/guide/sidebar/searchbar.png and /dev/null differ diff --git a/public/img/marker-icon36.png b/public/img/marker-icon36.png deleted file mode 100644 index 028b60c..0000000 Binary files a/public/img/marker-icon36.png and /dev/null differ diff --git a/src/assets/logo.png b/src/assets/logo.png deleted file mode 100644 index dc2a8c8..0000000 Binary files a/src/assets/logo.png and /dev/null differ diff --git a/src/assets/react.svg b/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/ConfigurationsDrawer/ApiFunctionsTab/ApiFunctionsTab.tsx b/src/components/ApiFunctionsTab/ApiFunctionsTab.tsx similarity index 98% rename from src/components/ConfigurationsDrawer/ApiFunctionsTab/ApiFunctionsTab.tsx rename to src/components/ApiFunctionsTab/ApiFunctionsTab.tsx index 16d0cc6..935b306 100644 --- a/src/components/ConfigurationsDrawer/ApiFunctionsTab/ApiFunctionsTab.tsx +++ b/src/components/ApiFunctionsTab/ApiFunctionsTab.tsx @@ -3,7 +3,7 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { Fragment, useContext, useState } from 'react'; import { CGPVContext } from '@/providers/cgpvContextProvider/CGPVContextProvider'; import _ from 'lodash'; -import { CodeSnipperPopup } from '../../CodeSnippet'; +import { CodeSnipperPopup } from '@/components/CodeSnippet'; import apiFunctions from './apiFunctions'; export interface ApiFuncItem { diff --git a/src/components/ConfigurationsDrawer/ApiFunctionsTab/apiFunctions.ts b/src/components/ApiFunctionsTab/apiFunctions.ts similarity index 100% rename from src/components/ConfigurationsDrawer/ApiFunctionsTab/apiFunctions.ts rename to src/components/ApiFunctionsTab/apiFunctions.ts diff --git a/src/components/AppToolbar.tsx b/src/components/AppToolbar.tsx index 04a560f..5933a60 100644 --- a/src/components/AppToolbar.tsx +++ b/src/components/AppToolbar.tsx @@ -1,7 +1,7 @@ import { IconButton, Link, Menu, MenuItem, Toolbar, Typography } from "@mui/material"; import { useState } from "react"; import SettingsIcon from '@mui/icons-material/Settings'; -import Logo from '../assets/logo.png'; +import { GEOVIEW_CORE_URL } from "@/constants"; interface AppToolbarProps { children?: React.ReactNode; @@ -23,7 +23,7 @@ export const AppToolbar = (props: AppToolbarProps) => { return ( {children} - GeoView{/* Adjust height and margin as needed */} + GeoView{/* Adjust height and margin as needed */} Canadian Geospatial Platform (CGP) - GeoView Project diff --git a/src/components/ConfigTextEditor.tsx b/src/components/ConfigTextEditor.tsx index e1744e1..928a6f9 100644 --- a/src/components/ConfigTextEditor.tsx +++ b/src/components/ConfigTextEditor.tsx @@ -4,6 +4,7 @@ import { Box, Button, Modal } from '@mui/material'; import { useSnackbar } from '@/providers/snackbarProvider'; import DataObjectIcon from '@mui/icons-material/DataObject'; import { CopyToClipboardButton } from './CopyToClipboardButton'; +import _ from 'lodash'; export function ConfigTextEditor() { const cgpvContext = useContext(CGPVContext); @@ -28,7 +29,8 @@ export function ConfigTextEditor() { }, [configJson]); const resetEditorText = () => { - const jsonObj = configJson || {}; + let jsonObj = configJson || {}; + jsonObj = _.omit((jsonObj), ['mapDimensions']); const jsonTxt = JSON.stringify(jsonObj, null, 4); setEditorText(jsonTxt); setIsEditorTouched(false); diff --git a/src/components/ConfigurationsDrawer/ConfigurationsDrawer.tsx b/src/components/DrawerTabs.tsx similarity index 68% rename from src/components/ConfigurationsDrawer/ConfigurationsDrawer.tsx rename to src/components/DrawerTabs.tsx index e004760..eca4389 100644 --- a/src/components/ConfigurationsDrawer/ConfigurationsDrawer.tsx +++ b/src/components/DrawerTabs.tsx @@ -1,23 +1,39 @@ import { TabContext, TabList, TabPanel } from '@mui/lab'; -import { Box, Tab } from '@mui/material'; -import { useState } from 'react'; +import { Box, CircularProgress, Tab } from '@mui/material'; +import { useContext, useState } from 'react'; import SettingsIcon from '@mui/icons-material/Settings'; import ListAltIcon from '@mui/icons-material/ListAlt'; import BallotIcon from '@mui/icons-material/Ballot'; import RunCircleIcon from '@mui/icons-material/RunCircle'; import ApiFunctionsTab from './ApiFunctionsTab/ApiFunctionsTab'; -import { MapBuilderTab } from './MapBuilderTab/MapBuilderTab'; -import { EventsLog } from '../EventsLog'; -import { LegendLayerStatusTable } from '../LegendLayerStatusTable'; +import { MapBuilder } from './MapBuilder'; +import { EventsLog } from './EventsLog'; +import { LegendLayerStatusTable } from './LegendLayerStatusTable'; +import { CGPVContext } from '@/providers/cgpvContextProvider/CGPVContextProvider'; -export default function ConfigurationDrawer() { +export default function DrawerTabs() { + const cgpvContext = useContext(CGPVContext); + + if (!cgpvContext) { + throw new Error('CGPVContent must be used within a CGPVProvider'); + } + + const { isLoading } = cgpvContext; const [selectedTab, setSelectedTab] = useState('config-builder'); const handleTabChange = (event: React.SyntheticEvent, newValue: string) => { setSelectedTab(newValue); }; + + if (isLoading) { + return + + ; + } + + return ( @@ -33,7 +49,7 @@ export default function ConfigurationDrawer() { - + diff --git a/src/components/EventsLog.tsx b/src/components/EventsLog.tsx index 8ec1a7b..94c7a26 100644 --- a/src/components/EventsLog.tsx +++ b/src/components/EventsLog.tsx @@ -1,6 +1,6 @@ import { useContext, useEffect, useState } from 'react'; import { CGPVContext } from '../providers/cgpvContextProvider/CGPVContextProvider'; -import { Box, List, ListItem, ListItemText } from '@mui/material'; +import { Box, Button, List, ListItem, ListItemText } from '@mui/material'; import { EventListItemType, ListOptionType } from '../types'; import PillsAutoComplete from './PillsAutoComplete'; @@ -11,7 +11,7 @@ export function EventsLog() { throw new Error('CGPVContent must be used within a CGPVProvider'); } - const { eventsList } = cgpvContext; + const { eventsList, clearEventsList } = cgpvContext; const [logsList, setLogsList] = useState(eventsList); const [selectedEventTypes, setSelectedEventTypes] = useState([]); @@ -39,18 +39,21 @@ export function EventsLog() {

Events Log

- + setSelectedEventTypes(value)} options={eventTypeOptions} label="Filter by eventName" placeholder="" /> + + + {logsList.length === 0 &&

No events logs found

} {logsList.map((row, index) => ( - + ))} diff --git a/src/components/GeoViewMap.tsx b/src/components/GeoViewMap.tsx index c5cd9bb..a977f98 100644 --- a/src/components/GeoViewMap.tsx +++ b/src/components/GeoViewMap.tsx @@ -1,18 +1,17 @@ import React, { useContext, useEffect } from 'react'; import { AppBar, Box, CssBaseline, Drawer, IconButton, Toolbar } from '@mui/material'; import MenuIcon from '@mui/icons-material/Menu'; -import ConfigurationDrawer from './ConfigurationsDrawer/ConfigurationsDrawer'; +import DrawerTabs from './DrawerTabs'; import { CGPVContext } from '../providers/cgpvContextProvider/CGPVContextProvider'; import { MapRenderer } from './MapRenderer'; -import { DEFAULT_CONFIG } from '../constants'; import ArrowBackIcon from '@mui/icons-material/ArrowBack'; import { useNavigate } from 'react-router-dom'; import { AppToolbar } from './AppToolbar'; +import { useSearchParams } from "react-router-dom"; +import { DEFAULT_CONFIG_FILE } from '@/constants'; interface GeoViewMapProps { showConfigEditor?: boolean; - config: string | object; - configIsFilePath?: boolean; children?: React.ReactNode; top?: React.ReactNode; codeSnippet?: string; @@ -22,29 +21,39 @@ interface GeoViewMapProps { function GeoViewMap(props: GeoViewMapProps) { const cgpvContext = useContext(CGPVContext); const navigate = useNavigate(); + const [searchParams, setSearchParams] = useSearchParams(); + if (!cgpvContext) { throw new Error('CGPVContent must be used within a CGPVProvider'); } - const { initializeMap, isInitialized } = cgpvContext; + const { configFilePath, initializeMap, isInitialized } = cgpvContext; + + const [mobileOpen, setMobileOpen] = React.useState(false); + const [isClosing, setIsClosing] = React.useState(false); + const { - config = DEFAULT_CONFIG, - configIsFilePath, children } = props; - const drawerWidth = 440; + const DRAWER_WIDTH = 440; - //when component is mounted, initialize the map useEffect(() => { - if (!isInitialized) { - initializeMap('sandboxMap3', config, configIsFilePath); + if(!isInitialized) { + const fPath = searchParams.get('config') ?? DEFAULT_CONFIG_FILE; + initializeMap(fPath, true); } }, []); // eslint-disable-line react-hooks/exhaustive-deps - const [mobileOpen, setMobileOpen] = React.useState(false); - const [isClosing, setIsClosing] = React.useState(false); + useEffect(() => { + if (configFilePath && configFilePath.length > 0) { + setSearchParams({ config: configFilePath }); + } else if(isInitialized) { + setSearchParams({ config: ''}); + } + }, [configFilePath]); + const handleDrawerClose = () => { setIsClosing(true); @@ -71,8 +80,8 @@ function GeoViewMap(props: GeoViewMapProps) { @@ -96,7 +105,7 @@ function GeoViewMap(props: GeoViewMapProps) { - + {/* The implementation can be swapped with js to avoid SEO duplication of links. */} - + - + - + {props.top} {children} diff --git a/src/components/LegendLayerStatusTable.tsx b/src/components/LegendLayerStatusTable.tsx index 7297f44..a34d9d7 100644 --- a/src/components/LegendLayerStatusTable.tsx +++ b/src/components/LegendLayerStatusTable.tsx @@ -17,10 +17,12 @@ export function LegendLayerStatusTable() {

Legend Layer Status

+ {legendLayerStatusList.length === 0 &&

No layers found

} + {legendLayerStatusList.map((row, index) => ( - + diff --git a/src/components/ConfigurationsDrawer/MapBuilderTab/MapBuilderTab.tsx b/src/components/MapBuilder.tsx similarity index 76% rename from src/components/ConfigurationsDrawer/MapBuilderTab/MapBuilderTab.tsx rename to src/components/MapBuilder.tsx index e74887e..baf9939 100644 --- a/src/components/ConfigurationsDrawer/MapBuilderTab/MapBuilderTab.tsx +++ b/src/components/MapBuilder.tsx @@ -2,30 +2,31 @@ import { Box, Button, - CircularProgress, Divider, FormControl, FormGroup, FormLabel, Switch, + TextField, } from '@mui/material'; import { useContext, useState } from 'react'; import { CGPVContext } from '@/providers/cgpvContextProvider/CGPVContextProvider'; import _ from 'lodash'; -import PillsAutoComplete from '../../PillsAutoComplete'; +import PillsAutoComplete from './PillsAutoComplete'; import { componentsOptions, footerTabslist, navBarOptions, appBarOptions, mapInteractionOptions, mapProjectionOptions, zoomOptions, themeOptions, CONFIG_FILES_LIST, corePackagesOptions } from '@/constants'; -import SingleSelectComplete from '../../SingleSelectAutoComplete'; -import { ConfigSaveUploadButtons } from '../../ConfigSaveUploadButtons'; +import SingleSelectComplete from './SingleSelectAutoComplete'; +import { ConfigSaveUploadButtons } from './ConfigSaveUploadButtons'; -export function MapBuilderTab() { + +export function MapBuilder() { const cgpvContext = useContext(CGPVContext); if (!cgpvContext) { throw new Error('CGPVContent must be used within a CGPVProvider'); } - const { configJson, handleConfigFileChange, handleConfigJsonChange, configFilePath, isLoading } = cgpvContext; + const { configJson, handleConfigFileChange, handleConfigJsonChange, configFilePath } = cgpvContext; const [modifiedConfigJson, setModifiedConfigJson] = useState(configJson); const [isModified, setIsModified] = useState(false); @@ -73,13 +74,6 @@ export function MapBuilderTab() { setIsModified(false); } - - if (isLoading) { - return - - ; - } - return ( @@ -95,27 +89,54 @@ export function MapBuilderTab() { - handleConfigFileChange(value)} label="Select Configuration File" placeholder="" /> updateProperty('theme', value)} label="Display Theme" placeholder="" /> updateProperty('map.interaction', value)} label="Map Interaction" placeholder="" /> + + Map Size + + + + updateProperty('mapDimensions.width', event.target.value)} + helperText="e.g. 100% or 500px" + variant="outlined" /> + + + updateProperty('mapDimensions.height', event.target.value)} + helperText="e.g. 100% or 500px" + variant="outlined" /> + + + + + Zoom Levels @@ -123,14 +144,14 @@ export function MapBuilderTab() { updateProperty('map.viewSettings.minZoom', value)} label="Min Zoom" placeholder="" /> updateProperty('map.viewSettings.maxZoom', value)} label="Max Zoom" placeholder="" /> @@ -140,7 +161,7 @@ export function MapBuilderTab() { updateProperty('map.viewSettings.projection', value)} label="Map Projection" placeholder="" /> @@ -148,7 +169,7 @@ export function MapBuilderTab() { Components updateArrayProperty('components', value)} options={componentsOptions} label="Components Options" @@ -159,7 +180,7 @@ export function MapBuilderTab() { Navigation Bar updateArrayProperty('navBar', value)} options={navBarOptions} label="Options" placeholder="" /> @@ -173,7 +194,7 @@ export function MapBuilderTab() { /> updateArrayProperty('footerBar.tabs.core', value)} options={footerTabslist} label="Footer Options" placeholder="" /> @@ -186,7 +207,7 @@ export function MapBuilderTab() { /> updateArrayProperty('appBar.tabs.core', value)} options={appBarOptions} label="App-bar Options" placeholder="" /> @@ -194,7 +215,7 @@ export function MapBuilderTab() { Core Packages updateArrayProperty('corePackages', value)} options={corePackagesOptions} label="CorePackages Options" placeholder="" /> diff --git a/src/components/MapRenderer.tsx b/src/components/MapRenderer.tsx index 604432e..36e9af3 100644 --- a/src/components/MapRenderer.tsx +++ b/src/components/MapRenderer.tsx @@ -1,6 +1,8 @@ import { Box } from '@mui/material'; import { CGPVContext } from '../providers/cgpvContextProvider/CGPVContextProvider'; import { useContext } from 'react'; +import { DEFAULT_MAP_HEIGHT, DEFAULT_MAP_WIDTH } from '@/constants'; +import _ from 'lodash'; //TODO Maybe update this to control its own rendering on some feature changes. Eg. height, width, etc. export function MapRenderer() { @@ -10,9 +12,14 @@ export function MapRenderer() { throw new Error('CGPVContent must be used within a CGPVProvider'); } + const { configJson } = cgpvContext; + + const mapWidth = _.get(configJson, 'mapDimensions.width', DEFAULT_MAP_WIDTH); + const mapHeight = _.get(configJson, 'mapDimensions.height', DEFAULT_MAP_HEIGHT); + return ( - - + + ); } diff --git a/src/components/PillsAutoComplete.tsx b/src/components/PillsAutoComplete.tsx index ed77ad4..179507b 100644 --- a/src/components/PillsAutoComplete.tsx +++ b/src/components/PillsAutoComplete.tsx @@ -12,7 +12,7 @@ const checkedIcon = ; interface PillsAutoCompleteProps { options: ListOptionType[]; - value?: any[]; + defaultValue?: any[]; onChange?: (value: any[]) => void; label: string; placeholder?: string; @@ -20,7 +20,7 @@ interface PillsAutoCompleteProps { export default function PillsAutoComplete(props: PillsAutoCompleteProps) { - const { options, value, onChange, label, placeholder } = props; + const { options, defaultValue, onChange, label, placeholder } = props; const handleOnChange = (event: React.SyntheticEvent, value: ListOptionType[]) => { const newValue = value.map((v) => v.value); @@ -34,7 +34,7 @@ export default function PillsAutoComplete(props: PillsAutoCompleteProps) { size="small" options={options} disableCloseOnSelect - value={options.filter((option) => value?.includes(option.value))} + defaultValue={options.filter((option) => defaultValue?.includes(option.value))} isOptionEqualToValue={(option, value) => option.value === value.value} getOptionLabel={(option) => option.title} onChange={handleOnChange} diff --git a/src/components/SingleSelectAutoComplete.tsx b/src/components/SingleSelectAutoComplete.tsx index a33febe..d19b09c 100644 --- a/src/components/SingleSelectAutoComplete.tsx +++ b/src/components/SingleSelectAutoComplete.tsx @@ -7,7 +7,7 @@ import _ from 'lodash'; interface PillsAutoCompleteProps { options: ListOptionType[]; - value?: any; + defaultValue?: any; onChange?: (value: any) => void; label: string; placeholder?: string; @@ -16,7 +16,7 @@ interface PillsAutoCompleteProps { export default function SingleSelectComplete(props: PillsAutoCompleteProps) { - const { options, value, onChange, label, placeholder,applyGrouping = false } = props; + const { options, defaultValue, onChange, label, placeholder,applyGrouping = false } = props; const handleOnChange = (event: React.SyntheticEvent, newValue: ListOptionType| null) => { if(newValue === null) { @@ -33,7 +33,7 @@ export default function SingleSelectComplete(props: PillsAutoCompleteProps) { size="small" options={_.orderBy(options, ['group', 'title'], ['asc', 'asc'])} disableClearable - value={options.find((option) => option.value === value)} + defaultValue={options.find((option) => option.value === defaultValue)} isOptionEqualToValue={(option, value) => option.value === value.value} getOptionLabel={(option) => option.title} groupBy={applyGrouping ? ((option) => option.group ?? 'Others') : undefined} diff --git a/src/components/SplitButton.tsx b/src/components/SplitButton.tsx index 39bc415..23c0c49 100644 --- a/src/components/SplitButton.tsx +++ b/src/components/SplitButton.tsx @@ -1,3 +1,7 @@ +/** + * @author: Christopher Phelefu + * @description: split button is a dual-action button that allows users to trigger a default action and a dropdown menu. + */ import * as React from 'react'; import Button from '@mui/material/Button'; import ButtonGroup from '@mui/material/ButtonGroup'; diff --git a/src/constants.ts b/src/constants.ts index 73fddcf..4b54370 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -4,8 +4,9 @@ import { ListOptionType } from './types'; export const DEFAULT_DISPLAY_LANGUAGE = 'en'; export const DEFAULT_DISPLAY_THEME = 'geo.ca'; export const DEFAULT_DISPLAY_PROJECTION = 3978; -export const DEFAULT_MAP_WIDTH = 800; -export const DEFAULT_MAP_HEIGHT = 600; +export const DEFAULT_MAP_WIDTH = '800px'; +export const DEFAULT_MAP_HEIGHT = '900px'; +export const DEFAULT_CONFIG_FILE = '01-basemap-LCC-TLS.json'; export const DEFAULT_CONFIG = { map: { @@ -48,37 +49,38 @@ export const DEFAULT_CONFIG = { theme: 'geo.ca', }; -const URL_TO_CONFIGS = 'https://canadian-geospatial-platform.github.io/geoview-demo/configs/'; -//`https://cphelefu.github.io/geoview/configs/`; +export const GEOVIEW_CORE_URL = 'https://canadian-geospatial-platform.github.io/geoview/'; +export const URL_TO_CONFIGS = `${GEOVIEW_CORE_URL}/configs/navigator/`; + export const CONFIG_FILES_LIST: ListOptionType[] = [ - { value: `${URL_TO_CONFIGS}navigator/01-basemap-LCC-TLS.json`, title: 'Basemap LCC Transport-Labeled-Shaded', group: 'Basemaps' }, - { value: `${URL_TO_CONFIGS}navigator/02-basemap-LCC-SL.json`, title: 'Basemap LCC Simple-Labeled (overview map hide on zoom 7 and lower)', group: 'Basemaps' }, - { value: `${URL_TO_CONFIGS}navigator/03-projection-WM.json`, title: 'Basemap WM', group: 'Basemaps' }, - { value: `${URL_TO_CONFIGS}navigator/04-restrict-zoom.json`, title: 'Restricted zoom [4, 8]', group: 'Navigator' }, - { value: `${URL_TO_CONFIGS}navigator/05-zoom-layer.json`, title: 'Zoom on layer extent', group: 'Navigator' }, - { value: `${URL_TO_CONFIGS}navigator/06-basic-footer.json`, title: 'Basic map with footer', group: 'Basic' }, - { value: `${URL_TO_CONFIGS}navigator/07-basic-appbar.json`, title: 'Basic map with app bar', group: 'Basic' }, - { value: `${URL_TO_CONFIGS}navigator/26-package-area-of-interest.json`, title: 'Package Area of interest', group: 'Packages' }, - { value: `${URL_TO_CONFIGS}navigator/08-package-basemap.json`, title: 'Package basemap panel', group: 'Packages' }, - { value: `${URL_TO_CONFIGS}navigator/09-package-basemap-custom.json`, title: 'Package custom basemap panel', group: 'Packages' }, - { value: `${URL_TO_CONFIGS}navigator/10-package-time-slider.json`, title: 'Package time slider', group: 'Packages' }, - { value: `${URL_TO_CONFIGS}navigator/11-package-time-slider-custom.json`, title: 'Package custom time slider', group: 'Packages' }, - { value: `${URL_TO_CONFIGS}navigator/12-package-geochart.json`, title: 'Package geochart', group: 'Packages' }, - { value: `${URL_TO_CONFIGS}navigator/12-a-package-swiper.json`, title: 'Package swiper', group: 'Packages' }, - { value: `${URL_TO_CONFIGS}navigator/13-all-layers.json`, title: 'All Layer Types', group: 'Layer Types' }, - { value: `${URL_TO_CONFIGS}navigator/14-wms-layer.json`, title: 'Layer - WMS -', group: 'Layer Types' }, - { value: `${URL_TO_CONFIGS}navigator/15-xyz-tile.json`, title: 'Layer - XYZ Tile -', group: 'Layer Types' }, - { value: `${URL_TO_CONFIGS}navigator/16-esri-dynamic.json`, title: 'Layer - ESRI Dynamic -', group: 'Layer Types' }, - { value: `${URL_TO_CONFIGS}navigator/17-esri-feature.json`, title: 'Layer - ESRI Feature -', group: 'Layer Types' }, - { value: `${URL_TO_CONFIGS}navigator/18-esri-image.json`, title: 'Layer - ESRI Image -', group: 'Layer Types' }, - { value: `${URL_TO_CONFIGS}navigator/19-geojson.json`, title: 'Layer - GeoJSON -', group: 'Layer Types' }, - { value: `${URL_TO_CONFIGS}navigator/20-wfs.json`, title: 'Layer - WFS -', group: 'Layer Types' }, - { value: `${URL_TO_CONFIGS}navigator/21-ogc-feature-api.json`, title: 'Layer - OGC Feature API -', group: 'Layer Types' }, - { value: `${URL_TO_CONFIGS}navigator/22-static-image.json`, title: 'Layer - Static Image -', group: 'Layer Types' }, - { value: `${URL_TO_CONFIGS}navigator/23-csv.json`, title: 'Layer - CSV -', group: 'Layer Types' }, - { value: `${URL_TO_CONFIGS}navigator/24-vector-tile.json`, title: 'Layer - Vector Tile -', group: 'Layer Types' }, - { value: `${URL_TO_CONFIGS}navigator/25-geojson-multi.json`, title: 'Layer - GeoJSON MutiPolygon -', group: 'Layer Types' }, + { value: `01-basemap-LCC-TLS.json`, title: 'Basemap LCC Transport-Labeled-Shaded', group: 'Basemaps' }, + { value: `02-basemap-LCC-SL.json`, title: 'Basemap LCC Simple-Labeled (overview map hide on zoom 7 and lower)', group: 'Basemaps' }, + { value: `03-projection-WM.json`, title: 'Basemap WM', group: 'Basemaps' }, + { value: `04-restrict-zoom.json`, title: 'Restricted zoom [4, 8]', group: 'Navigator' }, + { value: `05-zoom-layer.json`, title: 'Zoom on layer extent', group: 'Navigator' }, + { value: `06-basic-footer.json`, title: 'Basic map with footer', group: 'Basic' }, + { value: `07-basic-appbar.json`, title: 'Basic map with app bar', group: 'Basic' }, + { value: `26-package-area-of-interest.json`, title: 'Package Area of interest', group: 'Packages' }, + { value: `08-package-basemap.json`, title: 'Package basemap panel', group: 'Packages' }, + { value: `09-package-basemap-custom.json`, title: 'Package custom basemap panel', group: 'Packages' }, + { value: `10-package-time-slider.json`, title: 'Package time slider', group: 'Packages' }, + { value: `11-package-time-slider-custom.json`, title: 'Package custom time slider', group: 'Packages' }, + { value: `12-package-geochart.json`, title: 'Package geochart', group: 'Packages' }, + { value: `12-a-package-swiper.json`, title: 'Package swiper', group: 'Packages' }, + { value: `13-all-layers.json`, title: 'All Layer Types', group: 'Layer Types' }, + { value: `14-wms-layer.json`, title: 'Layer - WMS -', group: 'Layer Types' }, + { value: `15-xyz-tile.json`, title: 'Layer - XYZ Tile -', group: 'Layer Types' }, + { value: `16-esri-dynamic.json`, title: 'Layer - ESRI Dynamic -', group: 'Layer Types' }, + { value: `17-esri-feature.json`, title: 'Layer - ESRI Feature -', group: 'Layer Types' }, + { value: `18-esri-image.json`, title: 'Layer - ESRI Image -', group: 'Layer Types' }, + { value: `19-geojson.json`, title: 'Layer - GeoJSON -', group: 'Layer Types' }, + { value: `20-wfs.json`, title: 'Layer - WFS -', group: 'Layer Types' }, + { value: `21-ogc-feature-api.json`, title: 'Layer - OGC Feature API -', group: 'Layer Types' }, + { value: `22-static-image.json`, title: 'Layer - Static Image -', group: 'Layer Types' }, + { value: `23-csv.json`, title: 'Layer - CSV -', group: 'Layer Types' }, + { value: `24-vector-tile.json`, title: 'Layer - Vector Tile -', group: 'Layer Types' }, + { value: `25-geojson-multi.json`, title: 'Layer - GeoJSON MutiPolygon -', group: 'Layer Types' }, ]; export const basemapOptions: ListOptionType[] = [ diff --git a/src/pages/default.tsx b/src/pages/default.tsx index ba868a4..34948c8 100644 --- a/src/pages/default.tsx +++ b/src/pages/default.tsx @@ -1,12 +1,11 @@ import GeoViewMap from '../components/GeoViewMap'; -import { DEFAULT_CONFIG } from '../constants'; import GeoViewPage from '../components/GeoViewPage'; function DefaultPage() { return ( - + ); } diff --git a/src/pages/package-swiper.tsx b/src/pages/package-swiper.tsx deleted file mode 100644 index 1ea19b8..0000000 --- a/src/pages/package-swiper.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import GeoViewMap from '../components/GeoViewMap'; -import { Button } from '@mui/material'; - -function PackageSwiperPage() { - - const codeSnippet = `function addSwiper() { - cgpv.api.maps['mapWM3'].plugins['swiper'].activateForLayer(document.getElementById('mapWM3Input').value); - } - - function removeSwiper() { - cgpv.api.maps['mapWM3'].plugins['swiper'].deActivateForLayer(document.getElementById('mapWM3Input').value); - } - - function removeSwiperAll() { - cgpv.api.maps['mapWM3'].plugins['swiper'].deActivateAll(); - }`; - - const renderTop = () => { - const addSwiper = () => { - //cgpv.api.maps[mapId].plugins['swiper'].activateForLayer(document.getElementById('mapWM3Input').value); - } - - const removeSwiper = () => { - } - - const removeSwiperAll = () => { - } - return ( -
- - - - -
- ); - } - - const renderBottom = () => { - return ( -
-

- I am the bottom section -

-
- ); - } - - return ( - -

- I am the children section -

- - ); -} - -export default PackageSwiperPage; diff --git a/src/providers/cgpvContextProvider/cgpvHook.ts b/src/providers/cgpvContextProvider/cgpvHook.ts index 6e9a21e..656b409 100644 --- a/src/providers/cgpvContextProvider/cgpvHook.ts +++ b/src/providers/cgpvContextProvider/cgpvHook.ts @@ -4,6 +4,7 @@ import { v4 as uuidv4 } from 'uuid'; import { DEFAULT_MAP_HEIGHT, DEFAULT_MAP_WIDTH, + URL_TO_CONFIGS, } from '../../constants'; import _ from 'lodash'; import { EventListItemType, LegendLayerStatus } from '@/types'; @@ -14,30 +15,21 @@ export interface ICgpvHook { isLoading: boolean; configFilePath: string; configJson: object; - mapWidth: number; - applyWidthHeight: boolean; - setMapWidth: React.Dispatch>; - mapHeight: number; - setMapHeight: React.Dispatch>; eventsList: EventListItemType[]; legendLayerStatusList: LegendLayerStatus[]; - initializeMap: (mapId: string, config: string | object, configIsFilePath?: boolean) => void; - handleRemoveMap: () => string; + initializeMap: (config: string | object, configIsFilePath?: boolean) => void; handleConfigFileChange: (filePath: string | null) => void; handleConfigJsonChange: (data: any) => void; - handleApplyWidthHeight: (val: boolean) => void; validateConfigJson: (json: string) => string | null; createMapFromConfigText: (configText: string) => void; updateConfigProperty: (property: string, value: any) => void; handleApplyStateToConfigFile: () => void; + clearEventsList: () => void; } export function useCgpvHook(): ICgpvHook { const [mapId, setMapId] = useState('sandboxMap3'); - const [applyWidthHeight, setApplyWidthHeight] = useState(false); - const [mapWidth, setMapWidth] = useState(DEFAULT_MAP_WIDTH); - const [mapHeight, setMapHeight] = useState(DEFAULT_MAP_HEIGHT); const [configFilePath, setConfigFilePath] = useState(''); const [configJson, setConfigJson] = useState({}); const [isInitialized, setIsInitialized] = useState(false); @@ -57,12 +49,11 @@ export function useCgpvHook(): ICgpvHook { console.log('registering events'); cgpv.api.maps[mapId].layer.legendsLayerSet.onLayerSetUpdated((sender: any, payload: any) => { - console.log('legendsLayerSet updated', payload); const { resultSet } = payload; const resultArr: LegendLayerStatus[] = Object.keys(resultSet).map((key) => { return { layerName: resultSet[key]?.layerName, status: resultSet[key]?.layerStatus }; }); - console.log('resultArr', resultArr); + setLegendLayerStatusList(resultArr); }); @@ -119,37 +110,37 @@ export function useCgpvHook(): ICgpvHook { */ // listen to layer item visibility changed event (any layers) - cgpv.api.maps[mapId].layer.onLayerVisibilityToggled((sender: any, payload:any) => { + cgpv.api.maps[mapId].layer.onLayerVisibilityToggled((sender: any, payload: any) => { addEventToList('onLayerVisibilityToggled', `layer ${payload.layerPath} visibility set to ${payload.visibility} - global`); }); // listen to layer item visibility changed event (any layers) - cgpv.api.maps[mapId].layer.onLayerItemVisibilityToggled((sender: any, payload:any) => { + cgpv.api.maps[mapId].layer.onLayerItemVisibilityToggled((sender: any, payload: any) => { addEventToList('onLayerItemVisibilityToggled', `${payload.itemName} on layer ${payload.layerPath} visibility set to ${payload.visibility} - global`); }); // listen to map zoom event - cgpv.api.maps[mapId].onMapZoomEnd((sender: any, payload:any) => { + cgpv.api.maps[mapId].onMapZoomEnd((sender: any, payload: any) => { addEventToList('onLayerItemVisibilityToggled', `Zoomed to level ${payload.zoom}`); }); // listen to map move event - cgpv.api.maps[mapId].onMapMoveEnd((sender: any, payload:any) => { + cgpv.api.maps[mapId].onMapMoveEnd((sender: any, payload: any) => { addEventToList('onLayerItemVisibilityToggled', `Map moved to center latitude ${payload.lnglat[1]} and longitude ${payload.lnglat[0]}`); }); // listen to map language changed event - cgpv.api.maps[mapId].onMapLanguageChanged((sender: any, payload:any) => { + cgpv.api.maps[mapId].onMapLanguageChanged((sender: any, payload: any) => { addEventToList('onMapLanguageChanged', `Map language changed to ${payload.language}`); }); // listen to basemap changed event - cgpv.api.maps[mapId].basemap.onBasemapChanged((sender: any, payload:any) => { + cgpv.api.maps[mapId].basemap.onBasemapChanged((sender: any, payload: any) => { addEventToList('onBasemapChanged', `Basemap changed to ${payload.basemap.basemapId}`); }); // listen to layer reordered event - cgpv.api.maps[mapId].stateApi.onLayersReordered((sender: any, payload:any) => { + cgpv.api.maps[mapId].stateApi.onLayersReordered((sender: any, payload: any) => { addEventToList('onLayersReordered', `Layers reordered to ${payload.orderedLayers.map((layer: any) => layer.layerPath)}`); }); @@ -161,121 +152,118 @@ export function useCgpvHook(): ICgpvHook { }; const readConfigFile = async (filePath: string) => { - const res = await fetch(`${filePath}`); + const res = await fetch(`${URL_TO_CONFIGS}${filePath}`, { mode: 'cors' }); if (!res.ok) { throw new Error(`HTTP error! Status: ${res.status}`); } return res.json(); } - const initializeMap = (mapId: string, config: string | object, configIsFilePath = false) => { + const initializeMap = (config: string | object, configIsFilePath = false) => { if (isInitialized) return; - setIsLoading(true); - if (configIsFilePath) { - readConfigFile(config as string).then((data) => { - console.log('i fetch a file ', data); - initializeMap(mapId, data); - }); - } else { - setIsInitialized(true); - const configJson = typeof config === 'string' ? JSON.parse(config) : config; - handleCreateMap(mapId, configJson); - cgpv.init(() => { - // write some code ... - registerEventListeners(mapId); - setIsLoading(false); - }); - } + setIsInitialized(true); + createNewMap(config, configIsFilePath); }; - - const handleConfigFileChange = async (filePath: string | null) => { - if (!filePath) return; - readConfigFile(filePath).then((data) => { - setEventsList([]); - setLegendLayerStatusList([]); - handleConfigJsonChange(data); - setConfigFilePath(filePath); - }); - }; + //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// //removes map and creates a new map - const handleRemoveMap = (): string => { + const createNewMap = (config: string | object, configIsFilePath = false) => { cgpv.api.maps[mapId]?.remove(true); - const newMapId = 'sandboxMap_' + uuidv4(); + // replace div with id 'sandboxMap' with another div const mapContainerDiv = document.getElementById('sandboxMapContainer'); + if (!mapContainerDiv) { + throw new Error('Element with id sandboxMapContainer not found'); + } + + mapContainerDiv.innerHTML = ''; const newDiv = document.createElement('div'); newDiv.id = newMapId; newDiv.className = 'geoview-map2'; mapContainerDiv?.appendChild(newDiv); setMapId(newMapId); - return newMapId; + setTimeout(() => { + renderNewMap(newMapId, config, configIsFilePath); + }, 1500); }; + const renderNewMap = async (mapId: string, config: string | object, configIsFilePath = false) => { + setEventsList([]); + setLegendLayerStatusList([]); - const handleCreateMap = (theMapId: string, data: any) => { - const mapDiv = document.getElementById(theMapId); - if (applyWidthHeight) { - mapDiv?.setAttribute('style', `width: ${mapWidth}px; height: ${mapHeight}px;`); + const mapElement = document.getElementById(mapId) as HTMLElement; + if (!mapElement) { + return; + //throw new Error(`Element with id ${mapId} not found`); } - cgpv.api.createMapFromConfig(theMapId, JSON.stringify(data)); - cgpv.init(() => { - // write some code ... - console.log('map created----------------------------------------'); - registerEventListeners(theMapId); - }); - setConfigJson({ ...data }); - setMapId(theMapId); - setTimeout(() => { + let configTxt = ''; + let configData = {}; + if (typeof config !== 'string' && !configIsFilePath) { + configTxt = JSON.stringify(config); + configData = JSON.parse(configTxt as string); + } + + if (configIsFilePath) { + const res = await readConfigFile(config as string); + configData = res; + configTxt = JSON.stringify(res) + } + + if (_.get(configData, 'mapDimensions.width') === undefined) { + _.set(configData, 'mapDimensions.width', DEFAULT_MAP_WIDTH); + } + if (_.get(configData, 'mapDimensions.height') === undefined) { + _.set(configData, 'mapDimensions.height', DEFAULT_MAP_HEIGHT); + } + + // setting dimensions of the map + const mapWidth = _.get(configData, 'mapDimensions.width'); + const mapHeight = _.get(configData, 'mapDimensions.height'); + mapElement?.setAttribute('style', `width: ${mapWidth}; min-height: ${mapHeight}; height: ${mapHeight}`); + mapElement.setAttribute('dataset', `height: ${mapHeight}`); + + //we have json; now lets start + setIsLoading(true); + + if (configIsFilePath) { + setConfigFilePath(config as string); + } + + setConfigJson({ ...configData }); + if (configIsFilePath) { + cgpv.api.createMapFromConfig(mapId, `${URL_TO_CONFIGS}${config}`, 800); // just use file directly if its a file path + } else { + const toUse = _.omit(configData, ['mapDimensions']); + const toUseTxt = JSON.stringify(toUse, null, 4); + cgpv.api.createMapFromConfig(mapId, toUseTxt); + } + + setTimeout(() => { // just a delay for animation purposes setIsLoading(false); - }, 1500); - }; + registerEventListeners(mapId); + }, 800); + cgpv.init(async () => { + console.log('registering events '); + //registerEventListeners(mapId); - //deletes old map and creates a new map - const reCreateMap = () => { - const newMapId = handleRemoveMap(); - setTimeout(() => { - //waiting for states that were prior to this function to update - const mapDiv = document.getElementById(newMapId); - if (applyWidthHeight) { - mapDiv?.setAttribute('style', `width: ${mapWidth}px; height: ${mapHeight}px;`); - } - - cgpv.api.createMapFromConfig(newMapId, JSON.stringify(configJson)); - }, 500); - setMapId(newMapId); + }); }; - const handleApplyWidthHeight = (val: boolean) => { - setApplyWidthHeight(val); - reCreateMap(); - } + ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - /* - const onHeightChange = (newHeight: number) => { - setMapHeight(newHeight); - reCreateMap(); + const handleConfigFileChange = async (filePath: string | null) => { + if (!filePath) return; + createNewMap(filePath, true); }; - const onWidthChange = (newWidth: number) => { - setMapWidth(newWidth); - reCreateMap(); - };*/ - //when config settings changes recreate map const handleConfigJsonChange = (data: any) => { // pre-select theme and projection from config file - setIsLoading(true); - - const newMapId = handleRemoveMap(); - setTimeout(() => { - // create map - handleCreateMap(newMapId, data); - }, 1500); + createNewMap(data, false); }; const validateConfigJson = (json: string): string | null => { @@ -310,28 +298,26 @@ export function useCgpvHook(): ICgpvHook { handleConfigJsonChange(state); } + const clearEventsList = () => { + setEventsList([]); + } + return { mapId, configFilePath, configJson, - mapWidth, - setMapWidth, - mapHeight, - setMapHeight, isInitialized, isLoading, - applyWidthHeight, eventsList, legendLayerStatusList, initializeMap, - handleRemoveMap, handleConfigFileChange, handleConfigJsonChange, validateConfigJson, - handleApplyWidthHeight, createMapFromConfigText, updateConfigProperty, - handleApplyStateToConfigFile + handleApplyStateToConfigFile, + clearEventsList }; } diff --git a/src/routes/index.tsx b/src/routes/index.tsx index b2c000b..522a6b6 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,12 +1,9 @@ import { createBrowserRouter } from "react-router-dom"; import DefaultPage from "../pages/default"; import ListOfDemosPage from "../pages/ListOfDemos"; -import PackageSwiperPage from "../pages/package-swiper"; -import GeoViewPage from "../components/GeoViewPage"; export const router = createBrowserRouter([ - { path: "/", element: }, - { path: "/general", element: }, - { path: "/package-swiper", element: } + { path: "/", element: }, + { path: "/demos", element: }, ],{ basename: import.meta.env.BASE_URL }); \ No newline at end of file