feat(recreate map): added functions to build map config to current ma…

…p state (#2421) Closes #2399
Canadian-Geospatial-Platform · Aug 1, 2024 · 9db2e44 · 9db2e44
1 parent 1ee1322
commit 9db2e44
Show file tree

Hide file tree

Showing 15 changed files with 427 additions and 17 deletions.
diff --git a/packages/geoview-core/public/templates/demos/demo-function-event.html b/packages/geoview-core/public/templates/demos/demo-function-event.html
@@ -161,6 +161,12 @@ <h3>API Functions:</h3>
           </select><br />
           cgpv.api.utilities.geo.calculateDistance(coordinates[], 'EPSG:4326', outProj)
         </li>
+        <li><button id="Get-config">Get config with current state (in console)</button><br />
+          cgpv.api.maps.Map1.createMapConfigFromMapState()
+        </li>
+        <li><button id="Reload-map">Reload map with current state</button><br />
+          cgpv.api.maps.Map1.reloadWithCurrentState()
+        </li>
       </ul>
       <h3>Events that will generate notifications:</h3>
       <ul>
@@ -583,6 +589,24 @@ <h3>Events that will generate notifications:</h3>
         const dist = cgpv.api.utilities.geo.calculateDistance(arr, 'EPSG:4326', proj.value);
         console.log(`Total: ${dist.total}, Sections: ${dist.sections}`);
       });
+
+      // Get map config Button================================================================================================
+      // find the button element by ID
+      var getConfigButton = document.getElementById('Get-config');
+
+      // add an event listener when a button is clicked
+      getConfigButton.addEventListener('click', async () => {
+        console.log(cgpv.api.maps.Map1.createMapConfigFromMapState());
+      });
+
+      // Reload-map Button================================================================================================
+      // find the button element by ID
+      var reloadMapButton = document.getElementById('Reload-map');
+
+      // add an event listener when a button is clicked
+      reloadMapButton.addEventListener('click', async () => {
+        console.log(cgpv.api.maps.Map1.reloadWithCurrentState());
+      });
 
       // create snippets
       window.addEventListener('load', () => {

diff --git a/packages/geoview-core/public/templates/sandbox.html b/packages/geoview-core/public/templates/sandbox.html
@@ -205,7 +205,7 @@ <h4 id="HLCONF1">Sanbox Map</h4>
           const configArea = document.getElementById('configGeoview');
           const configJSON = JSON.parse(configArea.value.replaceAll(`'`, `"`));
 
-          const validConfig = cgpv.api.configApi.createMapConfig(document.getElementById('configGeoview').value.replaceAll("'", '"'), 'en');
+          const validConfig = cgpv.api.config.createMapConfig(document.getElementById('configGeoview').value.replaceAll("'", '"'), 'en');
 
           // set class and message
           message.classList.add('config-json-valid');

diff --git a/packages/geoview-core/schema.json b/packages/geoview-core/schema.json
@@ -1660,6 +1660,11 @@
           "type": "boolean",
           "default": false,
           "description": "State of footer bar when map is loaded (expanded or collapsed)"
+        },
+        "selectedTab": {
+          "type": "string",
+          "enum": ["legend", "layers", "details", "data-table", "time-slider", "geochart"],
+          "description": "Footer tab to be selected at map load"
         }
       },
       "required": ["tabs"]
@@ -1685,6 +1690,16 @@
             }
           },
           "additionalProperties": false
+        },
+        "collapsed": {
+          "description": "State of app bar when map is loaded (expanded or collapsed)",
+          "type": "boolean",
+          "default": true
+        },
+        "selectedTab": {
+          "type": "string",
+          "enum": ["geolocator", "basemap-panel", "geochart", "details", "legend", "guide"],
+          "description": "App bar tab to be selected at map load"
         }
       },
       "required": ["tabs"]

diff --git a/packages/geoview-core/src/api/config/types/config-validation-schema.json b/packages/geoview-core/src/api/config/types/config-validation-schema.json
@@ -159,6 +159,11 @@
           "description": "State of footer bar when map is loaded (expanded or collapsed)",
           "type": "boolean",
           "default": false
+        },
+        "selectedTab": {
+          "type": "string",
+          "enum": ["legend", "layers", "details", "data-table", "time-slider", "geochart"],
+          "description": "Footer tab to be selected at map load"
         }
       },
       "required": ["tabs"]
@@ -188,6 +193,16 @@
               "uniqueItems": true
             }
           }
+        },
+        "collapsed": {
+          "description": "State of app bar when map is loaded (expanded or collapsed)",
+          "type": "boolean",
+          "default": true
+        },
+        "selectedTab": {
+          "type": "string",
+          "enum": ["geolocator", "basemap-panel", "geochart", "details", "legend", "guide", "data-table", "layers", "aoi-panel"],
+          "description": "App bar tab to be selected at map load"
         }
       },
       "required": ["tabs"]

diff --git a/packages/geoview-core/src/api/config/types/map-schema-types.ts b/packages/geoview-core/src/api/config/types/map-schema-types.ts
@@ -53,6 +53,7 @@ export type TypeFooterBarProps = {
     custom: TypeFooterBarTabsCustomProps[]; // TODO: support custom tab by creating a Typeobject for it
   };
   collapsed: boolean;
+  selectedTab: TypeValidFooterBarTabsCoreProps;
 };
 
 /** Supported app bar values. */
@@ -73,6 +74,8 @@ export type TypeAppBarProps = {
   tabs: {
     core: TypeValidAppBarCoreProps[];
   };
+  collapsed: boolean;
+  selectedTab: TypeValidAppBarCoreProps;
 };
 
 /** Overview map options. Default none. */