From 9a1f7e054de07e4f10bf72d724db4251f7535729 Mon Sep 17 00:00:00 2001
From: Yves Choquette <yves.choquette@icloud.com>
Date: Mon, 15 Jul 2024 14:50:58 -0400
Subject: [PATCH 1/3] 2357-Code_alignment_to_last_schema

---
 common/config/rush/pnpm-lock.yaml             | 259 +++++-----
 packages/geoview-core/package.json            |   3 +-
 .../configs/validator/05-metadata-group.json  |  64 +++
 .../public/templates/config-sandbox.html      | 482 +++++++++++++-----
 .../geoview-core/src/api/config/config-api.ts | 103 +++-
 .../config/types/classes/config-exceptions.ts |   1 -
 .../abstract-geoview-esri-layer-config.ts     | 142 ++++--
 .../abstract-geoview-layer-config.ts          | 121 +++--
 .../raster-config/esri-dynamic-config.ts      |  25 +-
 .../vector-config/esri-feature-config.ts      |  25 +-
 .../types/classes/map-feature-config.ts       |  18 +-
 .../abstract-base-esri-layer-entry-config.ts  |   6 +-
 .../abstract-base-layer-entry-config.ts       |  35 +-
 .../entry-config-base-class.ts                |  56 +-
 .../group-layer-entry-config.ts               |  21 +-
 .../esri-dynamic-layer-entry-config.ts        |  41 +-
 .../esri-feature-layer-entry-config.ts        |  42 +-
 .../src/api/config/types/config-constants.ts  |   2 +-
 .../types/config-validation-schema.json       |  78 ++-
 .../src/api/config/types/map-schema-types.ts  |   1 +
 packages/geoview-core/src/api/config/utils.ts |   6 +-
 .../src/api/config/uuid-config-reader.ts      |  20 +-
 22 files changed, 979 insertions(+), 572 deletions(-)
 create mode 100644 packages/geoview-core/public/configs/validator/05-metadata-group.json

diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
index a54e1142191..26c52c9db33 100644
--- a/common/config/rush/pnpm-lock.yaml
+++ b/common/config/rush/pnpm-lock.yaml
@@ -206,22 +206,22 @@ importers:
         version: 5.0.0-beta.37(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
       '@mui/icons-material':
         specifier: ^5.15.11
-        version: 5.15.21(@mui/material@5.15.21)(@types/react@18.3.3)(react@18.3.1)
+        version: 5.16.0(@mui/material@5.16.0)(@types/react@18.3.3)(react@18.3.1)
       '@mui/lab':
         specifier: 5.0.0-alpha.168
-        version: 5.0.0-alpha.168(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@5.15.21)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
+        version: 5.0.0-alpha.168(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@5.16.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
       '@mui/material':
         specifier: ^5.15.11
-        version: 5.15.21(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
+        version: 5.16.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
       '@mui/styles':
         specifier: ^5.15.11
-        version: 5.15.21(@types/react@18.3.3)(react@18.3.1)
+        version: 5.16.0(@types/react@18.3.3)(react@18.3.1)
       '@mui/system':
         specifier: ^5.15.11
-        version: 5.15.20(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react@18.3.1)
+        version: 5.16.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react@18.3.1)
       '@mui/x-date-pickers':
         specifier: ^7.6.1
-        version: 7.8.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@5.15.21)(@types/react@18.3.3)(dayjs@1.11.11)(react-dom@18.3.1)(react@18.3.1)
+        version: 7.9.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@5.16.0)(@types/react@18.3.3)(dayjs@1.11.11)(react-dom@18.3.1)(react@18.3.1)
       '@nieuwlandgeo/sldreader':
         specifier: ^0.3.1
         version: 0.3.1(ol@9.2.4)
@@ -229,8 +229,11 @@ importers:
         specifier: ^9.7.3
         version: 9.7.3(react-dom@18.3.1)(react@18.3.1)
       ajv:
-        specifier: ^8.12.0
+        specifier: ^8.16.0
         version: 8.16.0
+      ajv-errors:
+        specifier: ^3.0.0
+        version: 3.0.0(ajv@8.16.0)
       axios:
         specifier: ^1.3.4
         version: 1.7.2
@@ -275,7 +278,7 @@ importers:
         version: 7.4.7(react@18.3.1)
       material-react-table:
         specifier: ^2.13.0
-        version: 2.13.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/icons-material@5.15.21)(@mui/material@5.15.21)(@mui/x-date-pickers@7.8.0)(react-dom@18.3.1)(react@18.3.1)
+        version: 2.13.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/icons-material@5.16.0)(@mui/material@5.16.0)(@mui/x-date-pickers@7.9.0)(react-dom@18.3.1)(react@18.3.1)
       ol:
         specifier: ^9.2.4
         version: 9.2.4
@@ -314,7 +317,7 @@ importers:
         version: 1.10.3
       yet-another-react-lightbox:
         specifier: ^3.11.3
-        version: 3.21.0(react-dom@18.3.1)(react@18.3.1)
+        version: 3.21.1(react-dom@18.3.1)(react@18.3.1)
       zustand:
         specifier: ~4.4.1
         version: 4.4.7(@types/react@18.3.3)(react@18.3.1)
@@ -516,10 +519,10 @@ importers:
         version: 2.8.8
       sass:
         specifier: ^1.49.7
-        version: 1.77.6
+        version: 1.77.7
       sass-loader:
         specifier: ^12.4.0
-        version: 12.6.0(sass@1.77.6)(webpack@5.92.1)
+        version: 12.6.0(sass@1.77.7)(webpack@5.92.1)
       simple-zustand-devtools:
         specifier: ^1.1.0
         version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)(zustand@4.4.7)
@@ -558,7 +561,7 @@ importers:
     dependencies:
       '@mui/material':
         specifier: ^5.15.11
-        version: 5.15.21(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
+        version: 5.16.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
       geochart:
         specifier: Canadian-Geospatial-Platform/geochart#develop
         version: github.com/Canadian-Geospatial-Platform/geochart/9e0aece295bb511352d1981168bc3c99102ac7e5(@types/react@18.3.3)
@@ -713,7 +716,7 @@ importers:
     dependencies:
       '@mui/material':
         specifier: ^5.15.11
-        version: 5.15.21(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
+        version: 5.16.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
       geoview-core:
         specifier: workspace:~1.0.0
         version: link:../geoview-core
@@ -893,7 +896,7 @@ packages:
     dependencies:
       '@babel/compat-data': 7.24.7
       '@babel/helper-validator-option': 7.24.7
-      browserslist: 4.23.1
+      browserslist: 4.23.2
       lru-cache: 5.1.1
       semver: 6.3.1
     dev: true
@@ -2592,7 +2595,7 @@ packages:
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
       '@jest/types': 27.5.1
-      '@types/node': 20.14.9
+      '@types/node': 20.14.10
       chalk: 4.1.2
       jest-message-util: 27.5.1
       jest-util: 27.5.1
@@ -2613,7 +2616,7 @@ packages:
       '@jest/test-result': 27.5.1
       '@jest/transform': 27.5.1
       '@jest/types': 27.5.1
-      '@types/node': 20.14.9
+      '@types/node': 20.14.10
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       emittery: 0.8.1
@@ -2650,7 +2653,7 @@ packages:
     dependencies:
       '@jest/fake-timers': 27.5.1
       '@jest/types': 27.5.1
-      '@types/node': 20.14.9
+      '@types/node': 20.14.10
       jest-mock: 27.5.1
     dev: true
 
@@ -2660,7 +2663,7 @@ packages:
     dependencies:
       '@jest/types': 27.5.1
       '@sinonjs/fake-timers': 8.1.0
-      '@types/node': 20.14.9
+      '@types/node': 20.14.10
       jest-message-util: 27.5.1
       jest-mock: 27.5.1
       jest-util: 27.5.1
@@ -2689,7 +2692,7 @@ packages:
       '@jest/test-result': 27.5.1
       '@jest/transform': 27.5.1
       '@jest/types': 27.5.1
-      '@types/node': 20.14.9
+      '@types/node': 20.14.10
       chalk: 4.1.2
       collect-v8-coverage: 1.0.2
       exit: 0.1.2
@@ -2773,7 +2776,7 @@ packages:
     dependencies:
       '@types/istanbul-lib-coverage': 2.0.6
       '@types/istanbul-reports': 3.0.4
-      '@types/node': 20.14.9
+      '@types/node': 20.14.10
       '@types/yargs': 16.0.9
       chalk: 4.1.2
     dev: true
@@ -2783,7 +2786,7 @@ packages:
     engines: {node: '>=6.0.0'}
     dependencies:
       '@jridgewell/set-array': 1.2.1
-      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/sourcemap-codec': 1.5.0
       '@jridgewell/trace-mapping': 0.3.25
 
   /@jridgewell/resolve-uri@3.1.2:
@@ -2801,14 +2804,14 @@ packages:
       '@jridgewell/trace-mapping': 0.3.25
     dev: true
 
-  /@jridgewell/sourcemap-codec@1.4.15:
-    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
+  /@jridgewell/sourcemap-codec@1.5.0:
+    resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
 
   /@jridgewell/trace-mapping@0.3.25:
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/sourcemap-codec': 1.5.0
 
   /@kurkle/color@0.3.2:
     resolution: {integrity: sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==}
@@ -2859,7 +2862,7 @@ packages:
       '@babel/runtime': 7.24.7
       '@floating-ui/react-dom': 2.1.1(react-dom@18.3.1)(react@18.3.1)
       '@mui/types': 7.2.14(@types/react@18.3.3)
-      '@mui/utils': 5.15.20(@types/react@18.3.3)(react@18.3.1)
+      '@mui/utils': 5.16.0(@types/react@18.3.3)(react@18.3.1)
       '@popperjs/core': 2.11.8
       '@types/react': 18.3.3
       clsx: 2.1.1
@@ -2882,7 +2885,7 @@ packages:
       '@babel/runtime': 7.24.7
       '@floating-ui/react-dom': 2.1.1(react-dom@18.3.1)(react@18.3.1)
       '@mui/types': 7.2.14(@types/react@18.3.3)
-      '@mui/utils': 5.15.20(@types/react@18.3.3)(react@18.3.1)
+      '@mui/utils': 5.16.0(@types/react@18.3.3)(react@18.3.1)
       '@popperjs/core': 2.11.8
       '@types/react': 18.3.3
       clsx: 2.1.1
@@ -2905,7 +2908,7 @@ packages:
       '@babel/runtime': 7.24.7
       '@floating-ui/react-dom': 2.1.1(react-dom@18.3.1)(react@18.3.1)
       '@mui/types': 7.2.14(@types/react@18.3.3)
-      '@mui/utils': 5.15.20(@types/react@18.3.3)(react@18.3.1)
+      '@mui/utils': 5.16.0(@types/react@18.3.3)(react@18.3.1)
       '@popperjs/core': 2.11.8
       '@types/react': 18.3.3
       clsx: 2.1.1
@@ -2914,12 +2917,12 @@ packages:
       react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /@mui/core-downloads-tracker@5.15.21:
-    resolution: {integrity: sha512-dp9lXBaJZzJYeJfQY3Ow4Rb49QaCEdkl2KKYscdQHQm6bMJ+l4XPY3Cd9PCeeJTsHPIDJ60lzXbeRgs6sx/rpw==}
+  /@mui/core-downloads-tracker@5.16.0:
+    resolution: {integrity: sha512-8SLffXYPRVpcZx5QzxNE8fytTqzp+IuU3deZbQWg/vSaTlDpR5YVrQ4qQtXTi5cRdhOufV5INylmwlKK+//nPw==}
     dev: false
 
-  /@mui/icons-material@5.15.21(@mui/material@5.15.21)(@types/react@18.3.3)(react@18.3.1):
-    resolution: {integrity: sha512-yqkq1MbdkmX5ZHyvZTBuAaA6RkvoqkoAgwBSx9Oh0L0jAfj9T/Ih/NhMNjkl8PWVSonjfDUkKroBnjRyo/1M9Q==}
+  /@mui/icons-material@5.16.0(@mui/material@5.16.0)(@types/react@18.3.3)(react@18.3.1):
+    resolution: {integrity: sha512-6ISoOhkp9w5gD0PEW9JklrcbyARDkFWNTBdwXZ1Oy5IGlyu9B0zG0hnUIe4H17IaF1Vgj6C8VI+v4tkSdK0veg==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@mui/material': ^5.0.0
@@ -2930,12 +2933,12 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.24.7
-      '@mui/material': 5.15.21(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
+      '@mui/material': 5.16.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
       '@types/react': 18.3.3
       react: 18.3.1
     dev: false
 
-  /@mui/lab@5.0.0-alpha.168(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@5.15.21)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1):
+  /@mui/lab@5.0.0-alpha.168(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@5.16.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-VKLQP5J/SujylvW3/riMtQYTspTluUkKLW/eu48RwuKby583cFCg8p4fWl4PpC3drwq6g9AeJ7DG4w0K+zFbdA==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
@@ -2957,10 +2960,10 @@ packages:
       '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1)
       '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(@types/react@18.3.3)(react@18.3.1)
       '@mui/base': 5.0.0-beta.39(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
-      '@mui/material': 5.15.21(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
-      '@mui/system': 5.15.20(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react@18.3.1)
+      '@mui/material': 5.16.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
+      '@mui/system': 5.16.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react@18.3.1)
       '@mui/types': 7.2.14(@types/react@18.3.3)
-      '@mui/utils': 5.15.20(@types/react@18.3.3)(react@18.3.1)
+      '@mui/utils': 5.16.0(@types/react@18.3.3)(react@18.3.1)
       '@types/react': 18.3.3
       clsx: 2.1.1
       prop-types: 15.8.1
@@ -2968,8 +2971,8 @@ packages:
       react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /@mui/material@5.15.21(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-nTyCcgduKwHqiuQ/B03EQUa+utSMzn2sQp0QAibsnYe4tvc3zkMbO0amKpl48vhABIY3IvT6w9615BFIgMt0YA==}
+  /@mui/material@5.16.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-DbR1NckTLpjt9Zut9EGQ70th86HfN0BYQgyYro6aXQrNfjzSwe3BJS1AyBQ5mJ7TdL6YVRqohfukxj9JlqZZUg==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@emotion/react': ^11.5.0
@@ -2989,10 +2992,10 @@ packages:
       '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1)
       '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(@types/react@18.3.3)(react@18.3.1)
       '@mui/base': 5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
-      '@mui/core-downloads-tracker': 5.15.21
-      '@mui/system': 5.15.20(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react@18.3.1)
+      '@mui/core-downloads-tracker': 5.16.0
+      '@mui/system': 5.16.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react@18.3.1)
       '@mui/types': 7.2.14(@types/react@18.3.3)
-      '@mui/utils': 5.15.20(@types/react@18.3.3)(react@18.3.1)
+      '@mui/utils': 5.16.0(@types/react@18.3.3)(react@18.3.1)
       '@types/react': 18.3.3
       '@types/react-transition-group': 4.4.10
       clsx: 2.1.1
@@ -3004,8 +3007,8 @@ packages:
       react-transition-group: 4.4.5(react-dom@18.3.1)(react@18.3.1)
     dev: false
 
-  /@mui/private-theming@5.15.20(@types/react@18.3.3)(react@18.3.1):
-    resolution: {integrity: sha512-BK8F94AIqSrnaPYXf2KAOjGZJgWfvqAVQ2gVR3EryvQFtuBnG6RwodxrCvd3B48VuMy6Wsk897+lQMUxJyk+6g==}
+  /@mui/private-theming@5.16.0(@types/react@18.3.3)(react@18.3.1):
+    resolution: {integrity: sha512-sYpubkO1MZOnxNyVOClrPNOTs0MfuRVVnAvCeMaOaXt6GimgQbnUcshYv2pSr6PFj+Mqzdff/FYOBceK8u5QgA==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@types/react': ^17.0.0 || ^18.0.0
@@ -3015,7 +3018,7 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.24.7
-      '@mui/utils': 5.15.20(@types/react@18.3.3)(react@18.3.1)
+      '@mui/utils': 5.16.0(@types/react@18.3.3)(react@18.3.1)
       '@types/react': 18.3.3
       prop-types: 15.8.1
       react: 18.3.1
@@ -3043,8 +3046,8 @@ packages:
       react: 18.3.1
     dev: false
 
-  /@mui/styles@5.15.21(@types/react@18.3.3)(react@18.3.1):
-    resolution: {integrity: sha512-XYGRd25kE31GCapoftHrWrhr3zCNZypraBO+UAWNaguSRZ24HAHEOxEkAOTXt71BzFgW7S0qoE4jmyx8DfgZIg==}
+  /@mui/styles@5.16.0(@types/react@18.3.3)(react@18.3.1):
+    resolution: {integrity: sha512-d/Hd1FJuIzAmX89sNazRcnFBGZLb8klPG9E+AshhVpWZcoV/9Ar29On2XS0IxRh7Y5GoA0oTDkU0jivKWjzkiw==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@types/react': ^17.0.0 || ^18.0.0
@@ -3055,9 +3058,9 @@ packages:
     dependencies:
       '@babel/runtime': 7.24.7
       '@emotion/hash': 0.9.1
-      '@mui/private-theming': 5.15.20(@types/react@18.3.3)(react@18.3.1)
+      '@mui/private-theming': 5.16.0(@types/react@18.3.3)(react@18.3.1)
       '@mui/types': 7.2.14(@types/react@18.3.3)
-      '@mui/utils': 5.15.20(@types/react@18.3.3)(react@18.3.1)
+      '@mui/utils': 5.16.0(@types/react@18.3.3)(react@18.3.1)
       '@types/react': 18.3.3
       clsx: 2.1.1
       csstype: 3.1.3
@@ -3074,8 +3077,8 @@ packages:
       react: 18.3.1
     dev: false
 
-  /@mui/system@5.15.20(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react@18.3.1):
-    resolution: {integrity: sha512-LoMq4IlAAhxzL2VNUDBTQxAb4chnBe8JvRINVNDiMtHE2PiPOoHlhOPutSxEbaL5mkECPVWSv6p8JEV+uykwIA==}
+  /@mui/system@5.16.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react@18.3.1):
+    resolution: {integrity: sha512-9YbkC2m3+pNumAvubYv+ijLtog6puJ0fJ6rYfzfLCM47pWrw3m+30nXNM8zMgDaKL6vpfWJcCXm+LPaWBpy7sw==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@emotion/react': ^11.5.0
@@ -3093,10 +3096,10 @@ packages:
       '@babel/runtime': 7.24.7
       '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1)
       '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(@types/react@18.3.3)(react@18.3.1)
-      '@mui/private-theming': 5.15.20(@types/react@18.3.3)(react@18.3.1)
+      '@mui/private-theming': 5.16.0(@types/react@18.3.3)(react@18.3.1)
       '@mui/styled-engine': 5.15.14(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
       '@mui/types': 7.2.14(@types/react@18.3.3)
-      '@mui/utils': 5.15.20(@types/react@18.3.3)(react@18.3.1)
+      '@mui/utils': 5.16.0(@types/react@18.3.3)(react@18.3.1)
       '@types/react': 18.3.3
       clsx: 2.1.1
       csstype: 3.1.3
@@ -3115,8 +3118,8 @@ packages:
       '@types/react': 18.3.3
     dev: false
 
-  /@mui/utils@5.15.20(@types/react@18.3.3)(react@18.3.1):
-    resolution: {integrity: sha512-mAbYx0sovrnpAu1zHc3MDIhPqL8RPVC5W5xcO1b7PiSCJPtckIZmBkp8hefamAvUiAV8gpfMOM6Zb+eSisbI2A==}
+  /@mui/utils@5.16.0(@types/react@18.3.3)(react@18.3.1):
+    resolution: {integrity: sha512-kLLi5J1xY+mwtUlMb8Ubdxf4qFAA1+U7WPBvjM/qQ4CIwLCohNb0sHo1oYPufjSIH/Z9+dhVxD7dJlfGjd1AVA==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@types/react': ^17.0.0 || ^18.0.0
@@ -3133,8 +3136,8 @@ packages:
       react-is: 18.3.1
     dev: false
 
-  /@mui/x-date-pickers@7.8.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@5.15.21)(@types/react@18.3.3)(dayjs@1.11.11)(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-SkolW0vZ4XiUeD5FBevG9NQ3pAgfNYlJA5XFhSLFD/swNQRO4EYOUXw38O/ccOh1lkAcwVR+rrGPCoT4/0YGEg==}
+  /@mui/x-date-pickers@7.9.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@5.16.0)(@types/react@18.3.3)(dayjs@1.11.11)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-GMDprioHlYmNle8Cbh6TxB4QThDGgqJxfH/R/p/5dNk+Tn5vB1gZSDMn3wVxItiEV6tDXbkyS5gPhSMVFDGvAA==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@emotion/react': ^11.9.0
@@ -3173,9 +3176,9 @@ packages:
       '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1)
       '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(@types/react@18.3.3)(react@18.3.1)
       '@mui/base': 5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
-      '@mui/material': 5.15.21(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
-      '@mui/system': 5.15.20(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react@18.3.1)
-      '@mui/utils': 5.15.20(@types/react@18.3.3)(react@18.3.1)
+      '@mui/material': 5.16.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
+      '@mui/system': 5.16.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react@18.3.1)
+      '@mui/utils': 5.16.0(@types/react@18.3.3)(react@18.3.1)
       '@types/react-transition-group': 4.4.10
       clsx: 2.1.1
       dayjs: 1.11.11
@@ -3377,26 +3380,26 @@ packages:
     resolution: {integrity: sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==}
     dependencies:
       '@types/connect': 3.4.38
-      '@types/node': 20.14.9
+      '@types/node': 20.14.10
     dev: true
 
   /@types/bonjour@3.5.13:
     resolution: {integrity: sha512-z9fJ5Im06zvUL548KvYNecEVlA7cVDkGUi6kZusb04mpyEFKCIZJvloCcmpmLaIahDpOQGHaHmG6imtPMmPXGQ==}
     dependencies:
-      '@types/node': 20.14.9
+      '@types/node': 20.14.10
     dev: true
 
   /@types/connect-history-api-fallback@1.5.4:
     resolution: {integrity: sha512-n6Cr2xS1h4uAulPRdlw6Jl6s1oG8KrVilPN2yUITEs+K48EzMJJ3W1xy8K5eWuFvjp3R74AOIGSmp2UfBJ8HFw==}
     dependencies:
       '@types/express-serve-static-core': 4.19.5
-      '@types/node': 20.14.9
+      '@types/node': 20.14.10
     dev: true
 
   /@types/connect@3.4.38:
     resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
     dependencies:
-      '@types/node': 20.14.9
+      '@types/node': 20.14.10
     dev: true
 
   /@types/create-react-class@15.6.8:
@@ -3431,7 +3434,7 @@ packages:
   /@types/express-serve-static-core@4.19.5:
     resolution: {integrity: sha512-y6W03tvrACO72aijJ5uF02FRq5cgDR9lUxddQ8vyF+GvmjJQqbzDcJngEjURc+ZsG31VI3hODNZJ2URj86pzmg==}
     dependencies:
-      '@types/node': 20.14.9
+      '@types/node': 20.14.10
       '@types/qs': 6.9.15
       '@types/range-parser': 1.2.7
       '@types/send': 0.17.4
@@ -3461,13 +3464,13 @@ packages:
     resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==}
     dependencies:
       '@types/minimatch': 5.1.2
-      '@types/node': 20.14.9
+      '@types/node': 20.14.10
     dev: true
 
   /@types/graceful-fs@4.1.9:
     resolution: {integrity: sha512-olP3sd1qOEe5dXTSaFvQG+02VdRXcdytWLAZsAq1PecU8uqQAhkrnbli7DagjtXKW/Bl7YJbUsa8MPcuc8LHEQ==}
     dependencies:
-      '@types/node': 20.14.9
+      '@types/node': 20.14.10
     dev: true
 
   /@types/history@4.7.11:
@@ -3485,7 +3488,7 @@ packages:
   /@types/http-proxy@1.17.14:
     resolution: {integrity: sha512-SSrD0c1OQzlFX7pGu1eXxSEjemej64aaNPRhhVYUGqXh0BtldAAx37MG8btcumvpgKyZp1F5Gn3JkktdxiFv6w==}
     dependencies:
-      '@types/node': 20.14.9
+      '@types/node': 20.14.10
     dev: true
 
   /@types/istanbul-lib-coverage@2.0.6:
@@ -3540,11 +3543,11 @@ packages:
   /@types/node-forge@1.3.11:
     resolution: {integrity: sha512-FQx220y22OKNTqaByeBGqHWYz4cl94tpcxeFdvBo3wjG6XPBuZ0BNgNZRV5J5TFmmcsJ4IzsLkmGRiQbnYsBEQ==}
     dependencies:
-      '@types/node': 20.14.9
+      '@types/node': 20.14.10
     dev: true
 
-  /@types/node@20.14.9:
-    resolution: {integrity: sha512-06OCtnTXtWOZBJlRApleWndH4JsRVs1pDCc8dLSQp+7PpUpX3ePdHyeNSFTeSe7FtKyQkrlPvHwJOW3SLd8Oyg==}
+  /@types/node@20.14.10:
+    resolution: {integrity: sha512-MdiXf+nDuMvY0gJKxyfZ7/6UFsETO7mGKF54MVD/ekJS6HdFtpZFBgrh6Pseu64XTb2MLyFPlbW6hj8HYRQNOQ==}
     dependencies:
       undici-types: 5.26.5
     dev: true
@@ -3623,7 +3626,7 @@ packages:
     resolution: {integrity: sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==}
     dependencies:
       '@types/mime': 1.3.5
-      '@types/node': 20.14.9
+      '@types/node': 20.14.10
     dev: true
 
   /@types/serve-index@1.9.4:
@@ -3636,14 +3639,14 @@ packages:
     resolution: {integrity: sha512-W8Ym+h8nhuRwaKPaDw34QUkwsGi6Rc4yYqvKFo5rm2FUEhCFbzVWrxXUxuKK8TASjWsysJY0nsmNCGhCOIsrOw==}
     dependencies:
       '@types/http-errors': 2.0.4
-      '@types/node': 20.14.9
+      '@types/node': 20.14.10
       '@types/send': 0.17.4
     dev: true
 
   /@types/sockjs@0.3.36:
     resolution: {integrity: sha512-MK9V6NzAS1+Ud7JV9lJLFqW85VbC9dq3LmwZCuBe4wBDgKC0Kj/jd8Xl+nSviU+Qc3+m7umHHyHg//2KSa0a0Q==}
     dependencies:
-      '@types/node': 20.14.9
+      '@types/node': 20.14.10
     dev: true
 
   /@types/source-list-map@0.1.6:
@@ -3654,7 +3657,7 @@ packages:
     resolution: {integrity: sha512-ep8b36RKHlgWPqjNG9ToUrPiwkhwh0AEzy883mO5Xnd+cL6VBH1EvSjBAAuxLUFF2Vn/moE3Me6v9E1Lo+48GQ==}
     dependencies:
       '@types/emscripten': 1.39.13
-      '@types/node': 20.14.9
+      '@types/node': 20.14.10
     dev: true
 
   /@types/stack-utils@2.0.3:
@@ -3674,7 +3677,7 @@ packages:
   /@types/webpack-sources@3.2.3:
     resolution: {integrity: sha512-4nZOdMwSPHZ4pTEZzSp0AsTM4K7Qmu40UKW4tJDiOVs20UzYF9l+qUe4s0ftfN0pin06n+5cWWDJXH+sbhAiDw==}
     dependencies:
-      '@types/node': 20.14.9
+      '@types/node': 20.14.10
       '@types/source-list-map': 0.1.6
       source-map: 0.7.4
     dev: true
@@ -3682,7 +3685,7 @@ packages:
   /@types/webpack@4.41.38:
     resolution: {integrity: sha512-oOW7E931XJU1mVfCnxCVgv8GLFL768pDO5u2Gzk82i8yTIgX6i7cntyZOkZYb/JtYM8252SN9bQp9tgkVDSsRw==}
     dependencies:
-      '@types/node': 20.14.9
+      '@types/node': 20.14.10
       '@types/tapable': 1.0.12
       '@types/uglify-js': 3.17.5
       '@types/webpack-sources': 3.2.3
@@ -3693,7 +3696,7 @@ packages:
   /@types/ws@8.5.10:
     resolution: {integrity: sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==}
     dependencies:
-      '@types/node': 20.14.9
+      '@types/node': 20.14.10
     dev: true
 
   /@types/yargs-parser@21.0.3:
@@ -4119,6 +4122,14 @@ packages:
       - supports-color
     dev: true
 
+  /ajv-errors@3.0.0(ajv@8.16.0):
+    resolution: {integrity: sha512-V3wD15YHfHz6y0KdhYFjyy9vWtEVALT9UrxfN3zqlI6dMioHnJrqOYfyPKol3oqrnCM9uwkcdCwkJ0WUcbLMTQ==}
+    peerDependencies:
+      ajv: ^8.0.1
+    dependencies:
+      ajv: 8.16.0
+    dev: false
+
   /ajv-formats@2.1.1:
     resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==}
     dependencies:
@@ -4616,15 +4627,15 @@ packages:
     resolution: {integrity: sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==}
     dev: true
 
-  /browserslist@4.23.1:
-    resolution: {integrity: sha512-TUfofFo/KsK/bWZ9TWQ5O26tsWW4Uhmt8IYklbnUa70udB6P2wA7w7o4PY4muaEPBQaAX+CEnmmIA41NVHtPVw==}
+  /browserslist@4.23.2:
+    resolution: {integrity: sha512-qkqSyistMYdxAcw+CzbZwlBy8AGmS/eEWs+sEV5TnLRGDOL+C5M2EnH6tlZyg0YoAxGJAFKh61En9BR941GnHA==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001640
-      electron-to-chromium: 1.4.816
+      caniuse-lite: 1.0.30001641
+      electron-to-chromium: 1.4.824
       node-releases: 2.0.14
-      update-browserslist-db: 1.1.0(browserslist@4.23.1)
+      update-browserslist-db: 1.1.0(browserslist@4.23.2)
     dev: true
 
   /bser@2.1.1:
@@ -4679,8 +4690,8 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /caniuse-lite@1.0.30001640:
-    resolution: {integrity: sha512-lA4VMpW0PSUrFnkmVuEKBUovSWKhj7puyCg8StBChgu298N1AtuF1sKWEvfDuimSEDbhlb/KqPKC3fs1HbuQUA==}
+  /caniuse-lite@1.0.30001641:
+    resolution: {integrity: sha512-Phv5thgl67bHYo1TtMY/MurjkHhV4EDaCosezRXgZ8jzA/Ub+wjxAvbGvjoFENStinwi5kCyOYV3mi5tOGykwA==}
     dev: true
 
   /chalk@2.4.2:
@@ -4962,7 +4973,7 @@ packages:
   /core-js-compat@3.37.1:
     resolution: {integrity: sha512-9TNiImhKvQqSUkOvk/mMRZzOANTiEVC7WaBNhHcKM7x+/5E1l5NvsysR19zuDQScE8k+kfQXWRN3AtS/eOSHpg==}
     dependencies:
-      browserslist: 4.23.1
+      browserslist: 4.23.2
     dev: true
 
   /core-js-pure@3.37.1:
@@ -5365,8 +5376,8 @@ packages:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
     dev: true
 
-  /electron-to-chromium@1.4.816:
-    resolution: {integrity: sha512-EKH5X5oqC6hLmiS7/vYtZHZFTNdhsYG5NVPRN6Yn0kQHNBlT59+xSM8HBy66P5fxWpKgZbPqb+diC64ng295Jw==}
+  /electron-to-chromium@1.4.824:
+    resolution: {integrity: sha512-GTQnZOP1v0wCuoWzKOxL8rurg9T13QRYISkoICGaZzskBf9laC3V8g9BHTpJv+j9vBRcKOulbGXwMzuzNdVrAA==}
     dev: true
 
   /email-addresses@3.1.0:
@@ -5833,7 +5844,7 @@ packages:
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1
-      esquery: 1.5.0
+      esquery: 1.6.0
       esutils: 2.0.3
       fast-deep-equal: 3.1.3
       file-entry-cache: 6.0.1
@@ -5873,8 +5884,8 @@ packages:
     hasBin: true
     dev: true
 
-  /esquery@1.5.0:
-    resolution: {integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==}
+  /esquery@1.6.0:
+    resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
     engines: {node: '>=0.10'}
     dependencies:
       estraverse: 5.3.0
@@ -6550,7 +6561,7 @@ packages:
       he: 1.2.0
       param-case: 3.0.4
       relateurl: 0.2.7
-      terser: 5.31.1
+      terser: 5.31.2
     dev: true
 
   /html-minifier-terser@7.2.0:
@@ -6564,7 +6575,7 @@ packages:
       entities: 4.5.0
       param-case: 3.0.4
       relateurl: 0.2.7
-      terser: 5.31.1
+      terser: 5.31.2
     dev: true
 
   /html-parse-stringify@3.0.1:
@@ -7173,7 +7184,7 @@ packages:
       '@jest/environment': 27.5.1
       '@jest/test-result': 27.5.1
       '@jest/types': 27.5.1
-      '@types/node': 20.14.9
+      '@types/node': 20.14.10
       chalk: 4.1.2
       co: 4.6.0
       dedent: 0.7.0
@@ -7298,7 +7309,7 @@ packages:
       '@jest/environment': 27.5.1
       '@jest/fake-timers': 27.5.1
       '@jest/types': 27.5.1
-      '@types/node': 20.14.9
+      '@types/node': 20.14.10
       jest-mock: 27.5.1
       jest-util: 27.5.1
       jsdom: 16.7.0
@@ -7316,7 +7327,7 @@ packages:
       '@jest/environment': 27.5.1
       '@jest/fake-timers': 27.5.1
       '@jest/types': 27.5.1
-      '@types/node': 20.14.9
+      '@types/node': 20.14.10
       jest-mock: 27.5.1
       jest-util: 27.5.1
     dev: true
@@ -7332,7 +7343,7 @@ packages:
     dependencies:
       '@jest/types': 27.5.1
       '@types/graceful-fs': 4.1.9
-      '@types/node': 20.14.9
+      '@types/node': 20.14.10
       anymatch: 3.1.3
       fb-watchman: 2.0.2
       graceful-fs: 4.2.11
@@ -7354,7 +7365,7 @@ packages:
       '@jest/source-map': 27.5.1
       '@jest/test-result': 27.5.1
       '@jest/types': 27.5.1
-      '@types/node': 20.14.9
+      '@types/node': 20.14.10
       chalk: 4.1.2
       co: 4.6.0
       expect: 27.5.1
@@ -7409,7 +7420,7 @@ packages:
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
       '@jest/types': 27.5.1
-      '@types/node': 20.14.9
+      '@types/node': 20.14.10
     dev: true
 
   /jest-pnp-resolver@1.2.3(jest-resolve@27.5.1):
@@ -7465,7 +7476,7 @@ packages:
       '@jest/test-result': 27.5.1
       '@jest/transform': 27.5.1
       '@jest/types': 27.5.1
-      '@types/node': 20.14.9
+      '@types/node': 20.14.10
       chalk: 4.1.2
       emittery: 0.8.1
       graceful-fs: 4.2.11
@@ -7522,7 +7533,7 @@ packages:
     resolution: {integrity: sha512-jZCyo6iIxO1aqUxpuBlwTDMkzOAJS4a3eYz3YzgxxVQFwLeSA7Jfq5cbqCY+JLvTDrWirgusI/0KwxKMgrdf7w==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
-      '@types/node': 20.14.9
+      '@types/node': 20.14.10
       graceful-fs: 4.2.11
     dev: true
 
@@ -7561,7 +7572,7 @@ packages:
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
       '@jest/types': 27.5.1
-      '@types/node': 20.14.9
+      '@types/node': 20.14.10
       chalk: 4.1.2
       ci-info: 3.9.0
       graceful-fs: 4.2.11
@@ -7586,7 +7597,7 @@ packages:
     dependencies:
       '@jest/test-result': 27.5.1
       '@jest/types': 27.5.1
-      '@types/node': 20.14.9
+      '@types/node': 20.14.10
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       jest-util: 27.5.1
@@ -7597,7 +7608,7 @@ packages:
     resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
     engines: {node: '>= 10.13.0'}
     dependencies:
-      '@types/node': 20.14.9
+      '@types/node': 20.14.10
       merge-stream: 2.0.0
       supports-color: 8.1.1
     dev: true
@@ -7664,7 +7675,7 @@ packages:
       http-proxy-agent: 4.0.1
       https-proxy-agent: 5.0.1
       is-potential-custom-element-name: 1.0.1
-      nwsapi: 2.2.10
+      nwsapi: 2.2.12
       parse5: 6.0.1
       saxes: 5.0.1
       symbol-tree: 3.2.4
@@ -8007,7 +8018,7 @@ packages:
     hasBin: true
     dev: true
 
-  /material-react-table@2.13.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/icons-material@5.15.21)(@mui/material@5.15.21)(@mui/x-date-pickers@7.8.0)(react-dom@18.3.1)(react@18.3.1):
+  /material-react-table@2.13.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/icons-material@5.16.0)(@mui/material@5.16.0)(@mui/x-date-pickers@7.9.0)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-ds4/cupDsXvoz8K8OpM3UqUyqKoAMkVdvmvP/+ovuWA23fPcjYvFFkUpBxtnZq5GKWM0+SZWzr14KQ1DgKCaFQ==}
     engines: {node: '>=16'}
     peerDependencies:
@@ -8021,9 +8032,9 @@ packages:
     dependencies:
       '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1)
       '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(@types/react@18.3.3)(react@18.3.1)
-      '@mui/icons-material': 5.15.21(@mui/material@5.15.21)(@types/react@18.3.3)(react@18.3.1)
-      '@mui/material': 5.15.21(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
-      '@mui/x-date-pickers': 7.8.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@5.15.21)(@types/react@18.3.3)(dayjs@1.11.11)(react-dom@18.3.1)(react@18.3.1)
+      '@mui/icons-material': 5.16.0(@mui/material@5.16.0)(@types/react@18.3.3)(react@18.3.1)
+      '@mui/material': 5.16.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
+      '@mui/x-date-pickers': 7.9.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@5.16.0)(@types/react@18.3.3)(dayjs@1.11.11)(react-dom@18.3.1)(react@18.3.1)
       '@tanstack/match-sorter-utils': 8.15.1
       '@tanstack/react-table': 8.16.0(react-dom@18.3.1)(react@18.3.1)
       '@tanstack/react-virtual': 3.3.0(react-dom@18.3.1)(react@18.3.1)
@@ -8218,8 +8229,8 @@ packages:
       boolbase: 1.0.0
     dev: true
 
-  /nwsapi@2.2.10:
-    resolution: {integrity: sha512-QK0sRs7MKv0tKe1+5uZIQk/C8XGza4DAnztJG8iD+TpJIORARrCxczA738awHrZoHeTjSSoHqao2teO0dC/gFQ==}
+  /nwsapi@2.2.12:
+    resolution: {integrity: sha512-qXDmcVlZV4XRtKFzddidpfVP4oMSGhga+xdMc25mv8kaLUHtgzCDhUxkrN8exkGdTlLNaXj7CV3GtON7zuGZ+w==}
     dev: true
 
   /object-assign@4.1.1:
@@ -9147,7 +9158,7 @@ packages:
       postcss: 8.4.39
     dev: false
 
-  /sass-loader@12.6.0(sass@1.77.6)(webpack@5.92.1):
+  /sass-loader@12.6.0(sass@1.77.7)(webpack@5.92.1):
     resolution: {integrity: sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==}
     engines: {node: '>= 12.13.0'}
     peerDependencies:
@@ -9168,12 +9179,12 @@ packages:
     dependencies:
       klona: 2.0.6
       neo-async: 2.6.2
-      sass: 1.77.6
+      sass: 1.77.7
       webpack: 5.92.1(webpack-cli@4.10.0)
     dev: true
 
-  /sass@1.77.6:
-    resolution: {integrity: sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==}
+  /sass@1.77.7:
+    resolution: {integrity: sha512-9ywH75cO+rLjbrZ6en3Gp8qAMwPGBapFtlsMJoDTkcMU/bSe5a6cjKVUn5Jr4Gzg5GbP3HE8cm+02pLCgcoMow==}
     engines: {node: '>=14.0.0'}
     hasBin: true
     dependencies:
@@ -9751,12 +9762,12 @@ packages:
       jest-worker: 27.5.1
       schema-utils: 3.3.0
       serialize-javascript: 6.0.2
-      terser: 5.31.1
+      terser: 5.31.2
       webpack: 5.92.1(webpack-cli@4.10.0)
     dev: true
 
-  /terser@5.31.1:
-    resolution: {integrity: sha512-37upzU1+viGvuFtBo9NPufCb9dwM0+l9hMxYyWfBA+fbwrPqNJAhbZ6W47bBFnZHKHTUBnMvi87434qq+qnxOg==}
+  /terser@5.31.2:
+    resolution: {integrity: sha512-LGyRZVFm/QElZHy/CPr/O4eNZOZIzsrQ92y4v9UJe/pFJjypje2yI3C2FmPtvUEnhadlSbmG2nXtdcjHOjCfxw==}
     engines: {node: '>=10'}
     hasBin: true
     dependencies:
@@ -10031,13 +10042,13 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
-  /update-browserslist-db@1.1.0(browserslist@4.23.1):
+  /update-browserslist-db@1.1.0(browserslist@4.23.2):
     resolution: {integrity: sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
     dependencies:
-      browserslist: 4.23.1
+      browserslist: 4.23.2
       escalade: 3.1.2
       picocolors: 1.0.1
     dev: true
@@ -10323,7 +10334,7 @@ packages:
       '@webassemblyjs/wasm-parser': 1.12.1
       acorn: 8.12.1
       acorn-import-attributes: 1.9.5(acorn@8.12.1)
-      browserslist: 4.23.1
+      browserslist: 4.23.2
       chrome-trace-event: 1.0.4
       enhanced-resolve: 5.17.0
       es-module-lexer: 1.5.4
@@ -10549,8 +10560,8 @@ packages:
       yargs-parser: 20.2.9
     dev: true
 
-  /yet-another-react-lightbox@3.21.0(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-mBDnQ4dttseCxCUz1ECnnlbnD5+HfYB9LUmAd9mXyL91CwP+GYiSxk4pTMCfl6MLGyJ6aLvJKrbRP26Fbg6UrA==}
+  /yet-another-react-lightbox@3.21.1(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-/+5YyPg61BDGsMzUkBluxjoi6eU1EXwztRugU31iCj1aaPImvofgewsOAifY0HzYelXmKZgRWkbRtleSy6Cviw==}
     engines: {node: '>=14'}
     peerDependencies:
       react: '>=16.8.0'
@@ -10596,8 +10607,8 @@ packages:
     dependencies:
       '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1)
       '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(@types/react@18.3.3)(react@18.3.1)
-      '@mui/icons-material': 5.15.21(@mui/material@5.15.21)(@types/react@18.3.3)(react@18.3.1)
-      '@mui/material': 5.15.21(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
+      '@mui/icons-material': 5.16.0(@mui/material@5.16.0)(@types/react@18.3.3)(react@18.3.1)
+      '@mui/material': 5.16.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
       ajv: 8.16.0
       ajv-formats: 2.1.1
       chart.js: 4.4.3
diff --git a/packages/geoview-core/package.json b/packages/geoview-core/package.json
index e759fea870e..b6a692ccd32 100644
--- a/packages/geoview-core/package.json
+++ b/packages/geoview-core/package.json
@@ -57,7 +57,8 @@
     "@nieuwlandgeo/sldreader": "^0.3.1",
     "@mui/x-date-pickers": "^7.6.1",
     "@react-spring/web": "^9.7.3",
-    "ajv": "^8.12.0",
+    "ajv": "^8.16.0",
+    "ajv-errors": "^3.0.0",
     "axios": "^1.3.4",
     "dayjs": "^1.11.9",
     "domhandler": "^4.3.0",
diff --git a/packages/geoview-core/public/configs/validator/05-metadata-group.json b/packages/geoview-core/public/configs/validator/05-metadata-group.json
new file mode 100644
index 00000000000..3d17be71a8f
--- /dev/null
+++ b/packages/geoview-core/public/configs/validator/05-metadata-group.json
@@ -0,0 +1,64 @@
+{
+  "map": {
+    "interaction": "dynamic",
+    "viewSettings": {
+      "minZoom": 5,
+      "projection": 3978
+    },
+    "basemapOptions": {
+      "basemapId": "transport",
+      "shaded": false,
+      "labeled": true
+    },
+    "listOfGeoviewLayerConfig": [
+      {
+        "geoviewLayerId": "LYR1",
+        "geoviewLayerName": {
+          "en": "Temporal Test Bed",
+          "fr": "Banc d\\'essai temporel"
+        },
+        "metadataAccessPath": {
+          "en": "https://maps-cartes.services.geo.ca/server_serveur/rest/services/NRCan/Temporal_Test_Bed_en/MapServer/",
+          "fr": "https://maps-cartes.services.geo.ca/server_serveur/rest/services/NRCan/Temporal_Test_Bed_fr/MapServer/"
+        },
+        "geoviewLayerType": "esriFeature",
+        "listOfLayerEntryConfig": [
+          {
+            "layerId": "0"
+          }
+        ]
+      },
+      {
+        "geoviewLayerId": "LYR2",
+        "geoviewLayerName": {
+          "en": "Metadata Group",
+          "fr": "Groupe défini dans les métadonnées"
+        },
+        "metadataAccessPath": {
+          "en": "https://maps-cartes.ec.gc.ca/arcgis/rest/services/CESI/MapServer/",
+          "fr": "https://maps-cartes.ec.gc.ca/arcgis/rest/services/CESI/MapServer/"
+        },
+        "geoviewLayerType": "esriDynamic",
+        "listOfLayerEntryConfig": [
+          {
+            "layerId": "0"
+          },
+          {
+            "layerId": "8"
+          },
+          {
+            "layerId": "50"
+          }
+        ]
+      }
+    ]
+  },
+  "components": ["overview-map"],
+  "footerBar": {
+    "tabs": {
+      "core": ["legend", "layers", "details", "data-table"]
+    }
+  },
+  "corePackages": [],
+  "theme": "geo.ca"
+}
diff --git a/packages/geoview-core/public/templates/config-sandbox.html b/packages/geoview-core/public/templates/config-sandbox.html
index 0fcda7d0afe..e214fbefc9a 100644
--- a/packages/geoview-core/public/templates/config-sandbox.html
+++ b/packages/geoview-core/public/templates/config-sandbox.html
@@ -13,6 +13,42 @@
     <link rel="stylesheet" href="css/style.css" />
 
     <style>
+      .tab-container {
+          width: 100%;
+          margin: 0 auto;
+      }
+
+      .tabs {
+          display: flex;
+          border-bottom: 1px solid #ccc;
+      }
+
+      .tab-link {
+          background-color: #f1f1f1;
+          border: 1px solid #ccc;
+          border-bottom: none;
+          outline: none;
+          cursor: pointer;
+          padding: 8px 10px;
+          transition: background-color 0.3s;
+          flex: none;
+          text-align: center;
+      }
+
+      .tab-link:hover {
+          background-color: #ddd;
+      }
+
+      .tab-link.active {
+          background-color: #ccc;
+      }
+
+      .tab-content {
+          padding: 16px;
+          border: 1px solid #ccc;
+          border-top: none;
+      }
+
       .editor {
         display: inline-flex;
         gap: 10px;
@@ -107,82 +143,125 @@ <h1><strong>Sandbox Configuration</strong></h1>
               <textarea id="configOutput" name="configuration" cols="110">
               </textarea>
             </div>
+            <div>
+              Element Displayed:
+              <select name="Element Selector" id="elementSelector">
+              </select>
+            </div>
           </td>
         </tr>
       </tbody>
     </table>
   </div>
-  <div>
-  <div class="selector-container">
-    <p>This section lets you select and edit a complete map configuration.<br />
-    The validate button calls the <b>ConfigApi.createMapConfig</b> method and displays the internal map configuration.</p>
-    <div class="selector">
-      Configuration to load:
-      <select name="Config Loader" id="configLoader">
-        <option value="">--select--</option>
-        <option value="./configs/validator/01-simple.json">Simple</option>
-        <option value="./configs/validator/02-unique-value.json">Unique Value</option>
-        <option value="./configs/validator/03-class-breaks.json">Class Breaks</option>
-        <option value="./configs/validator/04-geocore.json">Geocore</option>
-      </select>
+  <div class="tab-container">
+    <div class="tabs">
+      <button class="tab-link active" onclick="openTab(event, 'tab1')">Map Config</button>
+      <button class="tab-link" onclick="openTab(event, 'tab2')">GeoView Config</button>
+      <button class="tab-link" onclick="openTab(event, 'tab3')">URL Config</button>
+      <button class="tab-link" onclick="openTab(event, 'tab4')">Metadata Layer Tree</button>
     </div>
-  </div>
-  <button id="validateConfig" style="margin-top:10px;">Validate</button>
-    <select id="language">
-      <option value="en">English</option>
-      <option value="fr">Français</option>
-    </select>
-    <button id="createMap" style="margin:10px;">Create Map</button>
-    <button id="deleteMap" style="margin:10px;">Delete map</button>
-  </div>
-  <hr />
-  <div class="selector">
-    <p>This section lets you select and edit a GeoView service URL or a GeoCore identifier.<br />
-      The validate button calls the <b>ConfigApi.createLayerConfig</b> method and displays the resulting internal map configuration.</p>
-      Service URL:
-    <select name="Service Config" id="serviceConfig">
-      <option value="">--select--</option>
-      <option value="esriDynamic">EsriDynamic</option>
-      <option value="esriFeature">EsriFeature</option>
-      <option value="geoCore">GeoCore</option>
-    </select>
-  </div>
-  <br />
-  </div>
-  <div class="editor" style="height:20px">
-    <div class="line-numbers" id="inputLineNumbers">
-      <span></span>
+
+    <div id="tab1" class="tab-content">
+      <div>
+        <p>This section lets you select and edit a complete map configuration.<br />
+        The button calls the <b>ConfigApi.createMapConfig</b> method and displays the internal map configuration.</p>
+        <div>
+          Configuration to load:
+          <select name="Config Loader" id="configLoader">
+            <option value="">--select--</option>
+            <option value="./configs/validator/01-simple.json">Simple</option>
+            <option value="./configs/validator/02-unique-value.json">Unique Value</option>
+            <option value="./configs/validator/03-class-breaks.json">Class Breaks</option>
+            <option value="./configs/validator/04-geocore.json">Geocore</option>
+            <option value="./configs/validator/05-metadata-group.json">Metadata Group</option>
+          </select>
+        </div>
+      </div>
+      <div>
+        <select id="language1">
+          <option value="en">English</option>
+          <option value="fr">Français</option>
+        </select>
+        <button id="validateConfig" style="margin-top:10px;">Create Map Config</button>
+        <button id="createMap" style="margin:10px;">Create Map</button>
+        <button id="deleteMap" style="margin:10px;">Delete map</button>
+      </div>
     </div>
-    <div>
-      <textarea id="serviceUrlGeoview" name="ServiceUrlconfiguration" cols="210">
-      </textarea>
+    <div id="tab2" class="tab-content" style="display:none">
+      <div>
+        <p>This section lets you enter and edit a GeoView service URL or a GeoCore identifier.<br />
+          If the GeoView layer type selected is wrong or unknown, you can select the right value using the drop down. <br />
+          The button calls the <b>ConfigApi.createLayerConfig</b> method and displays the resulting internal map configuration.
+        </p>
+        GeoView Layer Type:
+        <select name="Layer Type" id="geoviewLayerType">
+          <option value="unknown">unknown</option>
+          <option value="esriDynamic">EsriDynamic</option>
+          <option value="esriFeature">EsriFeature</option>
+          <option value="geoCore">GeoCore</option>
+        </select>
+      </div>
+      <input type="text" id="serviceUrlGeoview" name="ServiceUrlconfiguration" style="width: 100%;" />
+      <div>
+        <select id="language2">
+          <option value="en">English</option>
+          <option value="fr">Français</option>
+        </select>
+        <button id="validateServiceUrlConfig" style="margin-top:10px;">Create Layer Config</button>
+        <p></p>
+        Sample URL:
+        <select name="Sample Selector" id="sampleUrlSelector">
+          <option value="">--select--</option>
+          <option value="esriDynamic">EsriDynamic</option>
+          <option value="esriFeature">EsriFeature</option>
+          <option value="geoCore">GeoCore</option>
+        </select>
+      </div>
     </div>
-  </div>
-  <div>
-    <button id="validateServiceUrlConfig" style="margin-top:10px;">Validate</button>
-    <br />
-  </div>
-  <hr />
-  <p>This section allows you to enter a string of parameters that would be written at the end of a GeoView URL.<br />
-    The validation button calls the <b>ConfigApi.getConfigFromUrl</b> method and displays the resulting internal map configuration.</p>
-  <span>Parameters following the service URL:</span>
-  <br />
-  </div>
-  <div class="editor" style="height:20px">
-    <div class="line-numbers" id="inputLineNumbers">
-      <span></span>
+    <div id="tab3" class="tab-content" style="display:none">
+      <p>This section allows you to enter a string of parameters that would be written at the end of a GeoView URL.<br />
+        The button calls the <b>ConfigApi.getConfigFromUrl</b> method and displays the resulting internal map configuration.</p>
+      <span>Parameters following the service URL:</span>
+      <br />
+      <input type="text" id="configUrlGeoview" name="Urlconfiguration" style="width: 100%;"
+             value="p=3857&z=4&c=-100,40&l=en&t=dark&b=basemapId:transport,shaded:false,labeled:true&i=dynamic&cc=overview-map&keys=12acd145-626a-49eb-b850-0a59c9bc7506,ccc75c12-5acc-4a6a-959f-ef6f621147b9">
+      </input>
+      <div>
+        <button id="validateUrlConfig" style="margin-top:10px;">Get Config From URL</button>
+      </div>
     </div>
-    <div>
-      <textarea id="configUrlGeoview" name="Urlconfiguration" cols="210">
-        p=3857&z=4&c=-100,40&l=en&t=dark&b=basemapId:transport,shaded:false,labeled:true&i=dynamic&cc=overview-map&keys=12acd145-626a-49eb-b850-0a59c9bc7506,ccc75c12-5acc-4a6a-959f-ef6f621147b9
-      </textarea>
+    <div id="tab4" class="tab-content" style="display:none">
+      <div>
+        <p>This section lets you enter and edit a GeoView service URL or a GeoCore identifier.<br />
+          If the GeoView layer type selected is wrong or unknown, you can select the right value using the drop down. <br />
+          The button calls the <b>ConfigApi.createMetadataLayerTree</b> method and displays the resulting layer tree.
+        </p>
+        GeoView Layer Type:
+        <select name="Layer Type" id="geoviewLayerType2">
+          <option value="unknown">unknown</option>
+          <option value="esriDynamic">EsriDynamic</option>
+          <option value="esriFeature">EsriFeature</option>
+          <option value="geoCore">GeoCore</option>
+        </select>
+      </div>
+      <input type="text" id="serviceUrlGeoview2" name="ServiceUrlconfiguration" style="width: 100%;" />
+      <div>
+        <select id="language3">
+          <option value="en">English</option>
+          <option value="fr">Français</option>
+        </select>
+        <button id="validateServiceUrlConfig2" style="margin-top:10px;">Create Metadata Layer Tree</button>
+        <p></p>
+        Sample URL:
+        <select name="Sample Selector" id="sampleUrlSelector2">
+          <option value="">--select--</option>
+          <option value="esriDynamic">EsriDynamic</option>
+          <option value="esriFeature">EsriFeature</option>
+          <option value="geoCore">GeoCore</option>
+        </select>
+      </div>
     </div>
   </div>
-  <div>
-    <button id="validateUrlConfig" style="margin-top:10px;">Validate</button>
-    <br />
-  </div>
-  <hr />
   <div class="map-title-holder">
     <h4 id="HLCONF1">Sanbox Map</h4>
     <a class="ref-link" href="#top">Top</a>
@@ -199,18 +278,70 @@ <h4 id="HLCONF1">Sanbox Map</h4>
   <script src="codedoc.js"></script>
 
   <script>
-    const configUrlArea = document.getElementById('configUrlGeoview');
-    configUrlArea.value = configUrlArea.value.trim();
+    // Utility functions ========================================================================================================
+
+    function openTab(evt, tabName) {
+      var i, tabContent, tabLinks;
+
+      // Hide all tab contents
+      tabContent = document.getElementsByClassName("tab-content");
+      for (i = 0; i < tabContent.length; i++) {
+          tabContent[i].style.display = "none";
+      }
+
+      // Remove "active" class from all tab links
+      tabLinks = document.getElementsByClassName("tab-link");
+      for (i = 0; i < tabLinks.length; i++) {
+          tabLinks[i].className = tabLinks[i].className.replace(" active", "");
+      }
+
+      // Mount the current tab content and add the "active" class to the current tab link
+      document.getElementById(tabName).style.display = "block";
+      evt.currentTarget.className += " active";
+      switch (tabName) {
+        case 'tab1':
+          document.getElementById('configLoader').dispatchEvent(new Event('change'));
+          break;
+        case 'tab2':
+          const sampleUrlSelector = document.getElementById('sampleUrlSelector');
+          sampleUrlSelector.value = document.getElementById('geoviewLayerType').value;
+          sampleUrlSelector.dispatchEvent(new Event('change'));
+          break;
+      }
+    }
+
+    // Element selector
+    let mapConfigString, geoviewLayerString, metadataLayerTreeString, layerPathErrorFlag;
+    const elementSelector = document.getElementById('elementSelector');
+    const configOutput = document.getElementById('configOutput');
+      elementSelector.addEventListener('change', (e) => {
+        if (e.target.value === 'mapConfig') configOutput.value = mapConfigString;
+        else if (e.target.value === 'geoviewLayer') configOutput.value = geoviewLayerString;
+        else if (e.target.value === 'layerTree') configOutput.value = metadataLayerTreeString;
+        else configOutput.value = layerPathErrorFlag;
+        generateLineNumbers('configOutput', 'outputLineNumbers');
+      });
 
+    // Function used to generate line numbers in the input and output containers.
     generateLineNumbers = (textContainerId, lineNumbersContainerId) => {
-            const textarea = document.getElementById(textContainerId);
-            const lineNumbersContainer = document.getElementById(lineNumbersContainerId);
-            const lines = textarea.value.split('\n').length+1;
-            const lineNumbers = Array.from({ length: lines }, (_, index) => '').join('<span />');
-            lineNumbersContainer.innerHTML = lineNumbers;
-          };
+      const textarea = document.getElementById(textContainerId);
+      const lineNumbersContainer = document.getElementById(lineNumbersContainerId);
+      const lines = textarea.value.split('\n').length+1;
+      const lineNumbers = Array.from({ length: lines }, (_, index) => '').join('<span />');
+      lineNumbersContainer.innerHTML = lineNumbers;
+    };
+
+    // Function used to create the string that is used to display the error status of the different layerPath.
+    generateLayerPathErrorFlag = (listOfLayerEntryConfig, buffer = '', prefix = '') => {
+      listOfLayerEntryConfig.forEach((layer) => {
+        buffer = buffer ? `${buffer}\n` : '';
+        buffer = `${buffer}${layer.layerPath}: ${layer.errorDetected ? 'ERROR' : 'Ok'}`;
+        if (layer.isLayerGroup) buffer = generateLayerPathErrorFlag(layer.listOfLayerEntryConfig, buffer, prefix ? `${prefix}.${layer.layerId}` : layer.layerId);
+      });
+      return buffer;
+    }
 
-    // Config Snippet Selection Button ==================================================================================================
+    // Config Snippet Selection Button ==========================================================================================
 
     const configLoader = document.getElementById('configLoader');
     configLoader.addEventListener('change', (e) => {
@@ -236,37 +367,45 @@ <h4 id="HLCONF1">Sanbox Map</h4>
     });
     configLoader.value = './configs/validator/01-simple.json';
     configLoader.dispatchEvent(new Event('change'));
-    
-    // Config Validate Button ===========================================================================================================
+
+    // Map Config Validate Button ===============================================================================================
     const validateJSONButton = document.getElementById('validateConfig');
 
       // add an event listener when a button is clicked
       validateJSONButton.addEventListener('click', function (e) {
         // get message element
         const message = document.getElementById('validationMessage');
-        const langue = document.getElementById('language').value;
+        const language = document.getElementById('language1').value;
         const configArea = document.getElementById('configGeoview');
         const configOutput = document.getElementById('configOutput');
 
         // get config and test if JSON is valid
-        cgpv.api.configApi.createMapConfig(configArea.value.replaceAll('"', "'").replaceAll("\\'", "\'"), langue).then((mapConfig) => {
+        cgpv.api.configApi.createMapConfig(configArea.value.replaceAll('"', "'").replaceAll("\\'", "\'"), language).then((mapConfig) => {
+          mapConfigString = mapConfig.serialize();
           configOutput.value = mapConfig.serialize();
-
           generateLineNumbers('configOutput', 'outputLineNumbers');
-
           // set class and message
           message.classList.add('config-json-valid');
           message.classList.remove('config-error');
           if (!mapConfig.errorDetected) {
             message.innerHTML = 'Config is valid, waiting for all service metadata to be read...';
-
-            // TODO: Change the code below using the schema provided during our last meating. This change must be done in the next PR
-            // Start reading the metadata
             mapConfig.fetchAllServiceMetadata().then(() => {
+              geoviewLayerString = mapConfig.map.listOfGeoviewLayerConfig.reduce((accumulator, geoviewLayer) => {
+                return `${accumulator}== ${geoviewLayer.geoviewLayerId} ===============================================================================================\n${geoviewLayer.serialize()}\n`;
+              }, '');
+              listOfLayerEntryConfig = mapConfig.map.listOfGeoviewLayerConfig.reduce((accumulator, geoviewLayer) => {
+                return `${accumulator}== ${geoviewLayer.geoviewLayerId} ===============================================================================================\n${JSON.stringify(geoviewLayer.listOfLayerEntryConfig, undefined, 2)}\n`;
+              }, '');
+              layerPathErrorFlag = mapConfig.map.listOfGeoviewLayerConfig.reduce((accumulator, geoviewLayer) => {
+                return `${accumulator}\n${generateLayerPathErrorFlag(geoviewLayer.listOfLayerEntryConfig, `${geoviewLayer.geoviewLayerId}: ${geoviewLayer.errorDetected? 'ERROR' : 'Ok'}`)}`;
+              }, '');
               configOutput.value = mapConfig?.serialize();
               generateLineNumbers('configOutput', 'outputLineNumbers');
               message.innerHTML = 'Config is valid, reading of all service metadata is complete';
               document.getElementById('createMap').disabled = true;
+              elementSelector.innerHTML = '<option value="mapConfig">Map Config</option><option value="geoviewLayer">GeoView Layer</option><option value="errorFlags">Error Flags</option>';
+              elementSelector.value = 'mapConfig';
+              elementSelector.dispatchEvent(new Event('change'));
             }).catch((error) => {
               throw new Error('Error while reading metadata.');
             });
@@ -276,7 +415,7 @@ <h4 id="HLCONF1">Sanbox Map</h4>
         });
       });
 
-    // Service Url Validate Button =======================================================================================================
+    // GeoView Layer Validate Button ==============================================================================================
 
     const serviceUrlChoices = {
       geoCore: '12acd145-626a-49eb-b850-0a59c9bc7506',
@@ -284,52 +423,67 @@ <h4 id="HLCONF1">Sanbox Map</h4>
       esriFeature: 'https://maps-cartes.services.geo.ca/server_serveur/rest/services/NRCan/Temporal_Test_Bed_en/MapServer/',
     };
 
-    const serviceConfigDropDown = document.getElementById('serviceConfig');
-    serviceConfigDropDown.addEventListener('change', (e) => {
-      const serviceUrlArea = document.getElementById('serviceUrlGeoview');
+    const GeoviewLayerTypeDropDown = document.getElementById('geoviewLayerType');
+    const sampleUrlDropDown = document.getElementById('sampleUrlSelector');
+    const serviceUrlArea = document.getElementById('serviceUrlGeoview');
+
+    sampleUrlDropDown.addEventListener('change', (e) => {
       serviceUrlArea.value = serviceUrlChoices[e.target.value];
+      sampleUrlDropDown.value = '';
+      serviceUrlArea.dispatchEvent(new Event('keyup'));
     });
-    serviceConfigDropDown.value = 'geoCore';
-    serviceConfigDropDown.dispatchEvent(new Event('change'));
-    
-    const validateServiceURLButton = document.getElementById('validateServiceUrlConfig');
-
-      // add an event listener when the button is clicked
-      validateServiceURLButton.addEventListener('click', function (e) {
-        // get message element
-        const message = document.getElementById('validationMessage');
-        const configArea = document.getElementById('configGeoview');
-        const serviceUrlArea = document.getElementById('serviceUrlGeoview');
-        const configOutput = document.getElementById('configOutput');
 
-        configArea.value = serviceUrlArea.value;
-        // get config and test if URL Config is valid
-        const returnedValue = cgpv.api.configApi.createLayerConfig(serviceUrlArea.value.trim(), document.getElementById('serviceConfig').value);
-        returnedValue.then((mapConfig) => {
-          configOutput.value = mapConfig?.serialize();
+    serviceUrlArea.addEventListener('keyup', (e) => {
+      GeoviewLayerTypeDropDown.value = cgpv.api.configApi.guessLayerType(serviceUrlArea.value);
+      if (!GeoviewLayerTypeDropDown.value) GeoviewLayerTypeDropDown.value = 'unknown';
+    });
 
-          generateLineNumbers('configOutput', 'outputLineNumbers');
+    serviceUrlArea.value = serviceUrlChoices['geoCore'];
+    serviceUrlArea.dispatchEvent(new Event('keyup'));
 
-          // set class and message
-          message.classList.add('config-json-valid');
-          message.classList.remove('config-error');
-          if (mapConfig && !mapConfig.errorDetected) {
-            message.innerHTML = 'URL is valid, waiting for service metadata to be read...';
+    const validateServiceURLButton = document.getElementById('validateServiceUrlConfig');
 
-            mapConfig.fetchServiceMetadata().then(() => {
-              mapConfig.listOfLayerEntryConfig = mapConfig.metadataLayerTree;
-              configOutput.value = mapConfig?.serialize();
-              generateLineNumbers('configOutput', 'outputLineNumbers');
-              message.innerHTML = 'URL is valid, reading of service metadata is complete';
-              document.getElementById('createMap').disabled = true;
-            });
-          } else {
-            message.innerHTML = 'URL is invalid, see console for details...';
-          }
-        });
+    // add an event listener when the button is clicked
+    validateServiceURLButton.addEventListener('click', function (e) {
+      // get message element
+      const layerType = document.getElementById('geoviewLayerType').value;
+      const message = document.getElementById('validationMessage');
+      const language = document.getElementById('language2').value;
+      const configArea = document.getElementById('configGeoview');
+      const serviceUrlArea = document.getElementById('serviceUrlGeoview');
+      const configOutput = document.getElementById('configOutput');
+
+      configArea.value = serviceUrlArea.value;
+      // get config and test if URL Config is valid
+      const returnedValue = cgpv.api.configApi.createLayerConfig(serviceUrlArea.value.trim(), layerType, [], language);
+      returnedValue.then((geoviewLayerConfig) => {
+        configOutput.value = geoviewLayerConfig?.serialize();
+        generateLineNumbers('configOutput', 'outputLineNumbers');
+
+        // set class and message
+        message.classList.add('config-json-valid');
+        message.classList.remove('config-error');
+        if (geoviewLayerConfig && !geoviewLayerConfig.errorDetected) {
+          message.innerHTML = 'URL is valid, waiting for service metadata to be read...';
+
+          geoviewLayerConfig.fetchServiceMetadata().then(() => {
+            geoviewLayerString = geoviewLayerConfig?.serialize();
+            layerPathErrorFlag = generateLayerPathErrorFlag(geoviewLayerConfig.listOfLayerEntryConfig, `${geoviewLayerConfig.geoviewLayerId}: ${geoviewLayerConfig.errorDetected? 'ERROR' : 'Ok'}`);
+            message.innerHTML = 'URL is valid, reading of service metadata is complete';
+            document.getElementById('createMap').disabled = true;
+            elementSelector.innerHTML = '<option value="geoviewLayer">GeoView Layer</option><option value="errorFlags">Error Flags</option>';
+            elementSelector.value = 'geoviewLayer';
+            elementSelector.dispatchEvent(new Event('change'));
+          });
+        } else {
+          message.innerHTML = 'URL is invalid, see console for details...';
+        }
       });
+    });
 
     // Config Url Validate Button =======================================================================================================
+    const configUrlArea = document.getElementById('configUrlGeoview');
+    configUrlArea.value = configUrlArea.value.trim();
     const validateURLButton = document.getElementById('validateUrlConfig');
 
       // add an event listener when the button is clicked
@@ -344,22 +498,90 @@ <h4 id="HLCONF1">Sanbox Map</h4>
         // get config and test if URL Config is valid
         const returnedValue = cgpv.api.configApi.getConfigFromUrl(configUrlArea.value.trim());
         returnedValue.then((mapConfig) => {
-          configOutput.value = mapConfig.serialize();
-
-          generateLineNumbers('configOutput', 'outputLineNumbers');
-
-          // set class and message
-          message.classList.add('config-json-valid');
-          message.classList.remove('config-error');
           if (!mapConfig.errorDetected) {
-            message.innerHTML = 'File is valid, see console for details...';
-            document.getElementById('createMap').disabled = true;
+            mapConfig.fetchAllServiceMetadata().then(() => {
+              configOutput.value = mapConfig.serialize();
+              mapConfigString = mapConfig.serialize();
+              geoviewLayerString = mapConfig.map.listOfGeoviewLayerConfig.reduce((accumulator, geoviewLayer) => {
+                return `${accumulator}== ${geoviewLayer.geoviewLayerId} ===============================================================================================\n${geoviewLayer.serialize()}\n`;
+              }, '');
+              layerPathErrorFlag = mapConfig.map.listOfGeoviewLayerConfig.reduce((accumulator, geoviewLayer) => {
+                return `${accumulator}\n${generateLayerPathErrorFlag(geoviewLayer.listOfLayerEntryConfig, `${geoviewLayer.geoviewLayerId}: ${geoviewLayer.errorDetected? 'ERROR' : 'Ok'}`)}`;
+              }, '');
+              generateLineNumbers('configOutput', 'outputLineNumbers');
+
+              // set class and message
+              message.classList.add('config-json-valid');
+              message.classList.remove('config-error');
+              message.innerHTML = 'File is valid, see console for details...';
+              document.getElementById('createMap').disabled = true;
+              elementSelector.innerHTML = '<option value="mapConfig">Map Config</option><option value="geoviewLayer">GeoView Layer</option><option value="errorFlags">Error Flags</option>';
+              elementSelector.value = 'mapConfig';
+              elementSelector.dispatchEvent(new Event('change'));
+            });
           } else {
             message.innerHTML = 'File is invalid, see console for details...';
           }
         });
       });
 
+    // Metadata Layer Tree Button ===============================================================================================
+
+    const GeoviewLayerTypeDropDown2 = document.getElementById('geoviewLayerType2');
+    const sampleUrlDropDown2 = document.getElementById('sampleUrlSelector2');
+    const serviceUrlArea2 = document.getElementById('serviceUrlGeoview2');
+
+    sampleUrlDropDown2.addEventListener('change', (e) => {
+      serviceUrlArea2.value = serviceUrlChoices[e.target.value];
+      sampleUrlDropDown2.value = '';
+      serviceUrlArea2.dispatchEvent(new Event('keyup'));
+    });
+
+    serviceUrlArea2.addEventListener('keyup', (e) => {
+      GeoviewLayerTypeDropDown2.value = cgpv.api.configApi.guessLayerType(serviceUrlArea2.value);
+      if (!GeoviewLayerTypeDropDown2.value) GeoviewLayerTypeDropDown2.value = 'unknown';
+    });
+
+    serviceUrlArea2.value = serviceUrlChoices['geoCore'];
+    serviceUrlArea2.dispatchEvent(new Event('keyup'));
+
+    const validateServiceURLButton2 = document.getElementById('validateServiceUrlConfig2');
+
+    // add an event listener when the button is clicked
+    validateServiceURLButton2.addEventListener('click', function (e) {
+      // get message element
+      const layerType = document.getElementById('geoviewLayerType2').value;
+      const message = document.getElementById('validationMessage');
+      const language = document.getElementById('language3').value;
+      const configArea = document.getElementById('configGeoview');
+      const serviceUrlArea2 = document.getElementById('serviceUrlGeoview2');
+      const configOutput = document.getElementById('configOutput');
+
+      configArea.value = serviceUrlArea2.value;
+      // get config and test if URL Config is valid
+      const returnedValue = cgpv.api.configApi.createMetadataLayerTree(serviceUrlArea2.value.trim(), layerType, [], language);
+      returnedValue.then((metadataLayerTree) => {
+        configOutput.value = `${JSON.stringify(metadataLayerTree, undefined, 2)}\n`;
+        generateLineNumbers('configOutput', 'outputLineNumbers');
+
+        // set class and message
+        if (metadataLayerTree) {
+          message.classList.add('config-json-valid');
+          message.classList.remove('config-error');
+          message.innerHTML = 'URL is valid';
+          metadataLayerTreeString = `${JSON.stringify(metadataLayerTree, undefined, 2)}\n`;
+          document.getElementById('createMap').disabled = true;
+          elementSelector.innerHTML = '<option value="layerTree">Metadata Layer Tree</option>';
+          elementSelector.value = 'layerTree';
+          elementSelector.dispatchEvent(new Event('change'));
+        } else {
+          message.classList.remove('config-json-valid');
+          message.classList.add('config-error');
+          message.innerHTML = 'URL is invalid, see console for details...';
+        }
+      });
+    });
+
     // Create Button ====================================================================================================================
     const createMapButton = document.getElementById('createMap');
     createMapButton.disabled = true;
diff --git a/packages/geoview-core/src/api/config/config-api.ts b/packages/geoview-core/src/api/config/config-api.ts
index 273da05a6a7..0e7ebf85d3c 100644
--- a/packages/geoview-core/src/api/config/config-api.ts
+++ b/packages/geoview-core/src/api/config/config-api.ts
@@ -1,10 +1,15 @@
 import cloneDeep from 'lodash/cloneDeep';
 
-import { CV_DEFAULT_MAP_FEATURE_CONFIG, CV_CONFIG_GEOCORE_TYPE } from '@config/types/config-constants';
+import { CV_DEFAULT_MAP_FEATURE_CONFIG, CV_CONFIG_GEOCORE_TYPE, CV_CONST_LAYER_TYPES } from '@config/types/config-constants';
 import { Cast, TypeJsonValue, TypeJsonObject, toJsonObject, TypeJsonArray } from '@config/types/config-types';
 import { MapFeatureConfig } from '@config/types/classes/map-feature-config';
 import { UUIDmapConfigReader } from '@config/uuid-config-reader';
-import { AbstractGeoviewLayerConfig, TypeDisplayLanguage, TypeGeoviewLayerType } from '@config/types/map-schema-types';
+import {
+  AbstractGeoviewLayerConfig,
+  EntryConfigBaseClass,
+  TypeDisplayLanguage,
+  TypeGeoviewLayerType,
+} from '@config/types/map-schema-types';
 import { MapConfigError } from '@config/types/classes/config-exceptions';
 
 import { generateId, isJsonString, removeCommentsFromJSON } from '@/core/utils/utilities';
@@ -24,7 +29,10 @@ export class ConfigApi {
   /** Static property that contains the last object instanciated by the ConfigApi.createMapConfig call */
   static lastMapConfigCreated?: MapFeatureConfig;
 
-  /**
+  // TODO: Temporary property that will be deleted when the ConfigApi development is done. Set it to true for normal execution. */
+  static devMode = false;
+
+  /** ***************************************************************************************************************************
    * Function used to validate the GeoCore UUIDs.
    *
    * @param {string} uuid The UUID to validate.
@@ -37,7 +45,46 @@ export class ConfigApi {
     return regex.test(uuid);
   }
 
-  /**
+  /** ***************************************************************************************************************************
+   * Attempt to determine the layer type based on the URL format.
+   *
+   * @param {string} url The URL of the service for which we want to guess the GeoView layer type.
+   *
+   * @returns {string | undefined} The GeoView layer type or undefined if it cannot be guessed.
+   */
+  static guessLayerType(url: string): string | undefined {
+    const upperUrl = url.toUpperCase();
+    const urlTokens = upperUrl.split('/');
+    const layerIdString = urlTokens[urlTokens.length - 1];
+    // GV: Important - Testing for NaN after parseInt is not a good way to check whether a string is a number, as parseInt('1a2', 10)
+    // GV: returns 1 instead of NaN. To be detected as NaN, the string passed to parseInt must not begin with a number.
+    // GV: Regex /^\d+$/ is used instead to check whether a string is a number.
+    const layerId = /^\d+$/.test(layerIdString) ? parseInt(layerIdString, 10) : Number.NaN;
+    if (upperUrl.endsWith('MAPSERVER') || upperUrl.endsWith('MAPSERVER/')) return CV_CONST_LAYER_TYPES.ESRI_DYNAMIC;
+
+    if (upperUrl.indexOf('FEATURESERVER') !== -1 || (upperUrl.indexOf('MAPSERVER') !== -1 && !Number.isNaN(layerId)))
+      return CV_CONST_LAYER_TYPES.ESRI_FEATURE;
+
+    if (upperUrl.indexOf('IMAGESERVER') !== -1) return CV_CONST_LAYER_TYPES.ESRI_IMAGE;
+
+    if (urlTokens.indexOf('WFS') !== -1) return CV_CONST_LAYER_TYPES.WFS;
+
+    if (upperUrl.endsWith('.JSON') || upperUrl.endsWith('.GEOJSON')) return CV_CONST_LAYER_TYPES.GEOJSON;
+
+    if (upperUrl.endsWith('.GPKG')) return CV_CONST_LAYER_TYPES.GEOPACKAGE;
+
+    if (upperUrl.indexOf('{Z}/{X}/{Y}') !== -1 || upperUrl.indexOf('{Z}/{Y}/{X}') !== -1) return CV_CONST_LAYER_TYPES.XYZ_TILES;
+
+    if (ConfigApi.isValidUUID(url)) return CV_CONFIG_GEOCORE_TYPE;
+
+    if (upperUrl.indexOf('WMS') !== -1) return CV_CONST_LAYER_TYPES.WMS;
+
+    if (upperUrl.endsWith('.CSV')) return CV_CONST_LAYER_TYPES.CSV;
+
+    return undefined;
+  }
+
+  /** ***************************************************************************************************************************
    * Parse the parameters obtained from a url.
    *
    * @param {string} urlParams The parameters found on the url after the ?.
@@ -179,7 +226,11 @@ export class ConfigApi {
             displayLanguage.split('-')[0],
             urlParams.keys.toString().split(',')
           );
-          (jsonConfig.map.listOfGeoviewLayerConfig as TypeJsonObject[]) = await promise;
+          const listOfGeoviewLayerConfig = await promise;
+          listOfGeoviewLayerConfig.forEach((layerConfig, i) => {
+            (listOfGeoviewLayerConfig[i].geoviewLayerId as string) = (layerConfig.geoviewLayerId as string).slice(4, -3);
+          });
+          (jsonConfig.map.listOfGeoviewLayerConfig as TypeJsonObject[]) = listOfGeoviewLayerConfig;
         } catch (error) {
           // Log
           logger.logError('Failed to get the GeoView layers from url keys', urlParams.keys, error);
@@ -339,8 +390,8 @@ export class ConfigApi {
   }
 
   /**
-   * Create the map feature configuration instance using the json string or the json object provided by the user. When the user
-   * doesn't provide a value for a field that is covered by a default value, the default is used.
+   * Create the map feature configuration instance using the json string or the json object provided by the user.
+   * All GeoCore entries found in the config are translated to their corresponding Geoview configuration.
    *
    * @param {string | TypeJsonObject} mapConfig The map feature configuration to instanciate.
    * @param {TypeDisplayLanguage} language The language of the map feature config we want to produce.
@@ -396,6 +447,8 @@ export class ConfigApi {
    *
    * @param {string} serviceAccessString The service access string (a URL or a layer identifier).
    * @param {TypeGeoviewLayerType | CV_CONFIG_GEOCORE_TYPE} layerType The GeoView layer type or 'geoCore'.
+   * @param {TypeJsonArray} listOfLayerId Optionnal list of layer ids (default []).
+   * @param {TypeDisplayLanguage} language Optional display language (default: en).
    *
    * @returns {AbstractGeoviewLayerConfig | undefined} The layer configuration or undefined if there is an error.
    * @static
@@ -405,13 +458,18 @@ export class ConfigApi {
   static async createLayerConfig(
     serviceAccessString: string,
     layerType: TypeGeoviewLayerType | typeof CV_CONFIG_GEOCORE_TYPE,
+    listOfLayerId: TypeJsonArray = [],
     language: TypeDisplayLanguage = 'en'
   ): Promise<AbstractGeoviewLayerConfig | undefined> {
     let geoviewLayerConfig: TypeJsonObject | undefined;
+    const listOfLayerEntryConfig = listOfLayerId.map((layerId) => {
+      return { layerId };
+    });
     if (layerType === CV_CONFIG_GEOCORE_TYPE) {
       try {
         const layerConfig = { geoviewLayerId: serviceAccessString, geoviewLayerType: layerType };
         geoviewLayerConfig = (await ConfigApi.convertGeocoreToGeoview(language, Cast<TypeJsonObject>(layerConfig))) as TypeJsonObject;
+        if (!geoviewLayerConfig) return undefined;
       } catch (error) {
         logger.logError(`Unable to convert GeoCore layer (Id=${serviceAccessString}).`);
         return undefined;
@@ -421,8 +479,8 @@ export class ConfigApi {
         geoviewLayerId: generateId(),
         geoviewLayerName: { en: 'unknown', fr: 'inconnu' },
         geoviewLayerType: layerType,
-        metadataAccessPath: { en: serviceAccessString },
-        listOfLayerEntryConfig: [],
+        metadataAccessPath: { en: serviceAccessString, fr: serviceAccessString },
+        listOfLayerEntryConfig,
       });
     }
 
@@ -430,4 +488,31 @@ export class ConfigApi {
     ConfigApi.lastLayerConfigCreated = MapFeatureConfig.nodeFactory(geoviewLayerConfig, language);
     return ConfigApi.lastLayerConfigCreated;
   }
+
+  /**
+   * Create the layer tree from the service metadata.
+   *
+   * @param {string} serviceAccessString The service access string (a URL or a layer identifier).
+   * @param {TypeGeoviewLayerType | CV_CONFIG_GEOCORE_TYPE} layerType The GeoView layer type or 'geoCore'.
+   * @param {TypeJsonArray} listOfLayerId Optionnal list of layer ids (default []).
+   * @param {TypeDisplayLanguage} language Optional display language (default: en).
+   *
+   * @returns {EntryConfigBaseClass[]} The metadata layer tree.
+   * @static
+   */
+  // GV: GeoCore layers are processed here, well before the schema validation. The aim is to get rid of these layers in
+  // GV: favor of their GeoView equivalent as soon as possible.
+  static async createMetadataLayerTree(
+    serviceAccessString: string,
+    layerType: TypeGeoviewLayerType | typeof CV_CONFIG_GEOCORE_TYPE,
+    listOfLayerId: TypeJsonArray = [],
+    language: TypeDisplayLanguage = 'en'
+  ): Promise<EntryConfigBaseClass[]> {
+    const geoviewLayerConfig = await ConfigApi.createLayerConfig(serviceAccessString, layerType, listOfLayerId, language);
+    if (geoviewLayerConfig && !geoviewLayerConfig.errorDetected) {
+      await geoviewLayerConfig.fetchServiceMetadata();
+      if (!geoviewLayerConfig.errorDetected) return geoviewLayerConfig?.metadataLayerTree;
+    }
+    return [];
+  }
 }
diff --git a/packages/geoview-core/src/api/config/types/classes/config-exceptions.ts b/packages/geoview-core/src/api/config/types/classes/config-exceptions.ts
index 5005d59f749..9c52b98105f 100644
--- a/packages/geoview-core/src/api/config/types/classes/config-exceptions.ts
+++ b/packages/geoview-core/src/api/config/types/classes/config-exceptions.ts
@@ -39,7 +39,6 @@ export class GeoviewLayerConfigError extends ConfigError {
 export class GeoviewLayerMandatoryError extends ConfigError {
   messageList: Record<string, string> = {
     LayerTypeMandatory: 'Property geoviewLayerType is mandatory for GeoView layer <=> of type <=>.',
-    LayerIdMandatory: 'Property geoviewLayerId is mandatory for GeoView layer of type <=>.',
     LayerNameMandatory: 'Property geoviewLayerName is mandatory for GeoView layer',
     MetadataAccessPathMandatory: 'Property metadataAccessPath is mandatory for GeoView layer',
   };
diff --git a/packages/geoview-core/src/api/config/types/classes/geoview-config/abstract-geoview-esri-layer-config.ts b/packages/geoview-core/src/api/config/types/classes/geoview-config/abstract-geoview-esri-layer-config.ts
index c3963869a3c..6cbf486ef96 100644
--- a/packages/geoview-core/src/api/config/types/classes/geoview-config/abstract-geoview-esri-layer-config.ts
+++ b/packages/geoview-core/src/api/config/types/classes/geoview-config/abstract-geoview-esri-layer-config.ts
@@ -3,17 +3,44 @@ import axios from 'axios';
 import { Cast, TypeJsonObject } from '@config/types/config-types';
 import { AbstractBaseLayerEntryConfig } from '@config/types/classes/sub-layer-config/abstract-base-layer-entry-config';
 import { AbstractGeoviewLayerConfig } from '@config/types/classes/geoview-config/abstract-geoview-layer-config';
-import { TypeStyleGeometry } from '@config/types/map-schema-types';
+import { TypeDisplayLanguage, TypeStyleGeometry } from '@config/types/map-schema-types';
 import { layerEntryIsAbstractBaseLayerEntryConfig, layerEntryIsGroupLayer } from '@config/types/type-guards';
 import { GroupLayerEntryConfig } from '@config/types/classes/sub-layer-config/group-layer-entry-config';
-import { GeoviewLayerInvalidParameterError } from '@config/types/classes/config-exceptions';
+import { ConfigError, GeoviewLayerInvalidParameterError } from '@config/types/classes/config-exceptions';
 import { EntryConfigBaseClass } from '@/api/config/types/classes/sub-layer-config/entry-config-base-class';
 
 import { getXMLHttpRequest } from '@/core/utils/utilities';
 import { logger } from '@/core/utils/logger';
+import { TypeJsonArray } from '@/app';
 
 /** The ESRI dynamic geoview layer class. */
 export abstract class AbstractGeoviewEsriLayerConfig extends AbstractGeoviewLayerConfig {
+  /**
+   * The class constructor.
+   *
+   * @param {TypeJsonObject} geoviewLayerConfig The layer configuration we want to instanciate.
+   * @param {TypeDisplayLanguage} language The initial language to use when interacting with the map feature configuration.
+   */
+  constructor(geoviewLayerConfig: TypeJsonObject, language: TypeDisplayLanguage) {
+    super(geoviewLayerConfig, language);
+    const metadataAccessPathItems = this.metadataAccessPath.split('/');
+    const pathItemLength = metadataAccessPathItems.length;
+    const lastPathItem = metadataAccessPathItems[pathItemLength - 1];
+    // GV: Important - Testing for NaN after parseInt is not a good way to check whether a string is a number, as parseInt('1a2', 10)
+    // GV: returns 1 instead of NaN. To be detected as NaN, the string passed to parseInt must not begin with a number.
+    // GV: Regex /^\d+$/ is used instead to check whether a string is a number.
+    if (/^\d+$/.test(lastPathItem)) {
+      // The metadataAccessPath ends with a layer index. It is therefore a path to a data layer rather than a path to service metadata.
+      // We therefore need to correct the configuration by separating the layer index and the path to the service metadata.
+      this.metadataAccessPath = metadataAccessPathItems.slice(0, -1).join('/');
+      if (this.listOfLayerEntryConfig.length) {
+        this.setErrorDetectedFlag();
+        logger.logError('When an ESRI metadataAccessPath ends with a layer index, the listOfLayerEntryConfig must be  empty.');
+      }
+      this.listOfLayerEntryConfig = [this.createLeafNode(Cast<TypeJsonObject>({ layerId: lastPathItem }), language, this)!];
+    }
+  }
+
   /**
    * Sets the error flag for all layers in the provided list of layer entries.
    *
@@ -31,13 +58,7 @@ export abstract class AbstractGeoviewEsriLayerConfig extends AbstractGeoviewLaye
    * Get the service metadata from the metadataAccessPath and store it in a protected property of the geoview layer.
    */
   override async fetchServiceMetadata(): Promise<void> {
-    const serviceUrlFragments = this.metadataAccessPath.split('/');
-    // The test convert to number and back to string because parseInt('10a', 10) returns 10, but '10a' is not a number
-    const endingIsNumeric = parseInt(serviceUrlFragments.slice(-1)[0], 10).toString() === serviceUrlFragments.slice(-1)[0];
-    const serviceUrl = endingIsNumeric ? `${serviceUrlFragments.slice(0, -1).join('/')}/` : this.metadataAccessPath;
-    const layerId = endingIsNumeric ? parseInt(serviceUrlFragments.slice(-1)[0], 10) : undefined;
-
-    const metadataString = await getXMLHttpRequest(`${serviceUrl}?f=json`);
+    const metadataString = await getXMLHttpRequest(`${this.metadataAccessPath}?f=json`);
     if (metadataString !== '{}') {
       const jsonMetadata = JSON.parse(metadataString) as TypeJsonObject;
       if ('error' in jsonMetadata) {
@@ -45,11 +66,25 @@ export abstract class AbstractGeoviewEsriLayerConfig extends AbstractGeoviewLaye
         logger.logError(`Error detected while reading ESRI metadata for geoview layer ${this.geoviewLayerId}.`, jsonMetadata.error);
       } else {
         this.metadata = jsonMetadata;
-        // this.#validateListOfLayerEntryConfig(this.listOfLayerEntryConfig);
-        this.metadataLayerTree = this.createLayerTree(this.metadata.layers as TypeJsonObject[], layerId);
-        logger.logInfo(this.metadataLayerTree);
+        const processListOfLayerEntryConfig = (listOfLayerEntryConfig: EntryConfigBaseClass[]): void => {
+          listOfLayerEntryConfig.forEach((subLayer, i) => {
+            if (!subLayer.errorDetected) {
+              if (layerEntryIsGroupLayer(subLayer)) processListOfLayerEntryConfig(subLayer.listOfLayerEntryConfig);
+              else {
+                try {
+                  // eslint-disable-next-line no-param-reassign
+                  listOfLayerEntryConfig[i] = this.#createLayerEntryNode(parseInt(subLayer.layerId, 10), subLayer.parentNode);
+                } catch (error) {
+                  listOfLayerEntryConfig[i].setErrorDetectedFlag();
+                  logger.logError((error as ConfigError).message, error);
+                }
+              }
+            }
+          });
+        };
+        processListOfLayerEntryConfig(this.listOfLayerEntryConfig);
         await this.#fetchListOfLayerMetadata(this.metadataLayerTree);
-        logger.logInfo(this.metadata);
+        this.metadataLayerTree = this.createLayerTree();
       }
     } else {
       this.setErrorDetectedFlag();
@@ -58,64 +93,82 @@ export abstract class AbstractGeoviewEsriLayerConfig extends AbstractGeoviewLaye
   }
 
   /**
-   * Create the layer tree from the service metadata.
+   * Create the layer tree using the service metadata.
    *
-   * @param {TypeJsonObject[]} layersFromMetadata The layers found in the metadata.
-   * @param {number} layerId An optional layer id to use for the tree creation.
-   *
-   * @returns {EntryConfigBaseClass[]} The layer tree created from the metadata.
+   * @returns {TypeJsonObject[]} The layer tree created from the metadata.
    * @protected
    */
-  protected createLayerTree(layers: TypeJsonObject[], layerId?: number): EntryConfigBaseClass[] {
-    let layerFound = layerId !== undefined && layers.find((layer) => layer.id === layerId);
-    if (layerId !== undefined && !layerFound) {
-      this.setErrorDetectedFlag();
-      throw new GeoviewLayerInvalidParameterError('LayerIdNotFound', [layerId?.toString()]);
+  protected createLayerTree(): EntryConfigBaseClass[] {
+    const layers = this.metadata.layers as TypeJsonArray;
+    if (layers.length > 1) {
+      const groupName = this.metadata.mapName as string;
+      return [new GroupLayerEntryConfig(this.#createGroupNode(-1, groupName), this.language, this)];
     }
 
-    // if there is only one layer in the array, it must be a leaf node.
-    if (layers.length === 1) [layerFound] = layers;
+    if (layers.length === 1)
+      return [
+        this.createLeafNode(
+          Cast<TypeJsonObject>({
+            layerId: layers[0].id.toString(),
+            layerName: { en: layers[0].name, fr: layers[0].name },
+            geometryType: AbstractGeoviewEsriLayerConfig.convertEsriGeometryTypeToOLGeometryType(layers[0].geometryType as string),
+          }),
+          this.language,
+          this
+        )!,
+      ];
+
+    return [];
+  }
+
+  /**
+   * Create a layer entry node for a specific layerId using the service metadata.
+   *
+   * @param {number} layerId The layer id to use for the subLayer creation.
+   *
+   * @returns {EntryConfigBaseClass[]} The subLayer created from the metadata.
+   */
+  #createLayerEntryNode(layerId: number, parentNode: EntryConfigBaseClass | undefined): EntryConfigBaseClass {
+    const layers = this.metadata.layers as TypeJsonObject[];
+    const layerFound = layerId !== undefined && layers.find((layer) => layer.id === layerId);
+    if (!layerFound) {
+      throw new GeoviewLayerInvalidParameterError('LayerIdNotFound', [layerId?.toString()]);
+    }
 
     // if the layerFound is not a group layer, create a leaf.
     if (layerFound && layerFound.type !== 'Group Layer') {
       const layerConfig = Cast<TypeJsonObject>({
         layerId: layerFound.id.toString(),
-        layerName: { en: layerFound.name },
+        layerName: { en: layerFound.name, fr: layerFound.name },
         geometryType: AbstractGeoviewEsriLayerConfig.convertEsriGeometryTypeToOLGeometryType(layerFound.geometryType as string),
       });
-      return [this.createLeafNode(layerConfig, this.initialSettings, this.language, this)!];
+      return this.createLeafNode(layerConfig, this.language, this, parentNode)!;
     }
 
-    // Create the layer tree from the array of layers
-    let jsonConfig = this.#createGroupNode(
-      layers,
-      layerFound ? parseInt(layerFound.id as string, 10) : -1,
-      (layerFound ? layerFound?.name : this.metadata.mapName) as string
-    );
-    // If the list of layer config of the root node contains only one node, use it as the root node
-    if (jsonConfig?.listOfLayerEntryConfig?.length === 1) [jsonConfig] = jsonConfig.listOfLayerEntryConfig as TypeJsonObject[];
-    return [new GroupLayerEntryConfig(jsonConfig, this.initialSettings, this.language, this)];
+    // Create the layer group from the array of layers
+    const jsonConfig = this.#createGroupNode(parseInt(layerFound.id as string, 10), layerFound?.name as string);
+    return new GroupLayerEntryConfig(jsonConfig, this.language, this, parentNode);
   }
 
   /**
    * Create a group node for a specific layer id.
    *
-   * @param {TypeJsonObject[]} layers The layers found in the metadata.
    * @param {number} parentId The layer id of the parent node.
    * @param {string} groupName The name to assign to the group node.
    *
    * @returns {TypeJsonObject} A json configuration that can be used to create the group node.
    * @private
    */
-  #createGroupNode = (layers: TypeJsonObject[], parentId: number, groupName: string): TypeJsonObject => {
+  #createGroupNode = (parentId: number, groupName: string): TypeJsonObject => {
+    const layers = this.metadata.layers as TypeJsonObject[];
     const listOfLayerEntryConfig = layers.reduce((accumulator, layer) => {
       if (layer.parentLayerId === parentId) {
-        if (layer.type === 'Group Layer') accumulator.push(this.#createGroupNode(layers, layer.id as number, layer.name as string));
+        if (layer.type === 'Group Layer') accumulator.push(this.#createGroupNode(layer.id as number, layer.name as string));
         else {
           accumulator.push(
             Cast<TypeJsonObject>({
               layerId: layer.id.toString(),
-              layerName: { en: layer.name },
+              layerName: { en: layer.name, fr: layer.name },
               geometryType: AbstractGeoviewEsriLayerConfig.convertEsriGeometryTypeToOLGeometryType(layer.geometryType as string),
             })
           );
@@ -125,9 +178,9 @@ export abstract class AbstractGeoviewEsriLayerConfig extends AbstractGeoviewLaye
     }, [] as TypeJsonObject[]);
 
     return Cast<TypeJsonObject>({
-      layerId: parentId === -1 ? groupName : parentId,
+      layerId: parentId === -1 ? groupName : `${parentId}`,
       initialSettings: this.initialSettings,
-      layerName: { en: groupName },
+      layerName: { en: groupName, fr: groupName },
       isLayerGroup: true,
       listOfLayerEntryConfig,
     });
@@ -143,19 +196,16 @@ export abstract class AbstractGeoviewEsriLayerConfig extends AbstractGeoviewLaye
    */
   async #fetchListOfLayerMetadata(listOfLayerEntryConfig: EntryConfigBaseClass[]): Promise<void> {
     const listOfLayerMetadata: Promise<TypeJsonObject | void>[] = [];
-    const listOfGroupFlag: boolean[] = [];
     listOfLayerEntryConfig.forEach((subLayerConfig) => {
       if (layerEntryIsGroupLayer(subLayerConfig)) {
-        listOfGroupFlag.push(true);
         listOfLayerMetadata.push(this.#fetchListOfLayerMetadata(subLayerConfig.listOfLayerEntryConfig));
       } else if (layerEntryIsAbstractBaseLayerEntryConfig(subLayerConfig)) {
-        listOfGroupFlag.push(false);
         listOfLayerMetadata.push(subLayerConfig.fetchLayerMetadata());
       }
     });
 
     const result = await Promise.allSettled(listOfLayerMetadata);
-    logger.logInfo('listOfLayerMetadata', result);
+    logger.logInfo('fetchListOfLayerMetadata done', result);
   }
 
   /** ***************************************************************************************************************************
diff --git a/packages/geoview-core/src/api/config/types/classes/geoview-config/abstract-geoview-layer-config.ts b/packages/geoview-core/src/api/config/types/classes/geoview-config/abstract-geoview-layer-config.ts
index a63324aeb92..b3cb5fec698 100644
--- a/packages/geoview-core/src/api/config/types/classes/geoview-config/abstract-geoview-layer-config.ts
+++ b/packages/geoview-core/src/api/config/types/classes/geoview-config/abstract-geoview-layer-config.ts
@@ -1,10 +1,9 @@
 import defaultsDeep from 'lodash/defaultsDeep';
 import cloneDeep from 'lodash/cloneDeep';
 
-import { MapFeatureConfig } from '@config/types/classes/map-feature-config';
 import { Cast, TypeJsonObject, TypeJsonArray } from '@config/types/config-types';
 import { TypeGeoviewLayerType, TypeDisplayLanguage, TypeLayerInitialSettings } from '@config/types/map-schema-types';
-import { normalizeLocalizedString } from '@config/utils';
+import { isvalidComparedToInputSchema, normalizeLocalizedString } from '@config/utils';
 import { CV_DEFAULT_LAYER_INITIAL_SETTINGS } from '@config/types/config-constants';
 import { GroupLayerEntryConfig } from '@config/types/classes/sub-layer-config/group-layer-entry-config';
 import { layerEntryIsGroupLayer } from '@config/types/type-guards';
@@ -20,8 +19,8 @@ export abstract class AbstractGeoviewLayerConfig {
   /** The language used when interacting with this instance of MapFeatureConfig. */
   #language: TypeDisplayLanguage;
 
-  /** If the geoview layer is linked to a map config, we keep a reference to the map for message propagation */
-  #mapFeatureConfig?: MapFeatureConfig;
+  /** Cloned copy of the configuration as provided by the user when the constructor was called. */
+  #geoviewLayerConfig: TypeJsonObject;
 
   /** Flag used to indicate that errors were detected in the config provided. */
   #errorDetected = false;
@@ -39,7 +38,7 @@ export abstract class AbstractGeoviewLayerConfig {
    * The display name of the layer (English/French). If it is not present the viewer will make an attempt to scrape this
    * information.
    */
-  geoviewLayerName: string;
+  geoviewLayerName!: string;
 
   /** A flag used to indicate that the layer is a GeoCore layer (default: false). When true, geoviewLayerId must be a geocoreId. */
   isGeocore: boolean;
@@ -58,51 +57,61 @@ export abstract class AbstractGeoviewLayerConfig {
 
   /**
    * Initial settings to apply to the GeoView layer at creation time.
-   * This attribute is allowed only if listOfLayerEntryConfig.length > 1.
    */
-  initialSettings: TypeLayerInitialSettings;
+  initialSettings!: TypeLayerInitialSettings;
 
   /** The layer entries to use from the GeoView layer. */
   listOfLayerEntryConfig: EntryConfigBaseClass[] = [];
 
   /**
-   * The class constructor.
+   * The class constructor saves a cloned copy of the Geoview configuration supplied by the user and runs a validation on it to
+   * find any errors that may have been made. It only initalizes the properties needed to query the service and layer metadata.
+   *
    * @param {TypeJsonObject} geoviewLayerConfig The layer configuration we want to instanciate.
    * @param {TypeDisplayLanguage} language The initial language to use when interacting with the map feature configuration.
-   * @param {MapFeatureConfig} mapFeatureConfig An optional mapFeatureConfig instance if the layer is part of it.
    */
-  constructor(geoviewLayerConfig: TypeJsonObject, language: TypeDisplayLanguage, mapFeatureConfig?: MapFeatureConfig) {
-    this.#mapFeatureConfig = mapFeatureConfig;
+  constructor(geoviewLayerConfig: TypeJsonObject, language: TypeDisplayLanguage) {
+    // Keep a copy of the configuration. It will be used later in the execution flow to overwrite values obtained from the metadata.
+    this.#geoviewLayerConfig = cloneDeep(geoviewLayerConfig);
+    this.#validateGeoviewConfig();
+
     this.#language = language;
 
+    // GV: GeoCore layers are processed by the configApi. GeoView layer instances do not recognize them as a valid geoView layer Type.
+    // GV: However, whe have the isGeocore flag to keep track of geocore layers that were converted to geoview layers.
     this.isGeocore = (geoviewLayerConfig.isGeocore as boolean) || false;
-    this.initialSettings = Cast<TypeLayerInitialSettings>(
-      defaultsDeep(geoviewLayerConfig.initialSettings, CV_DEFAULT_LAYER_INITIAL_SETTINGS)
-    );
     this.geoviewLayerId = (geoviewLayerConfig.geoviewLayerId || generateId()) as string;
-    this.geoviewLayerName = normalizeLocalizedString(geoviewLayerConfig?.geoviewLayerName)![this.#language]!;
     this.metadataAccessPath = normalizeLocalizedString(geoviewLayerConfig.metadataAccessPath)![this.#language]!;
-    this.serviceDateFormat = (geoviewLayerConfig.serviceDateFormat || 'DD/MM/YYYY HH:MM:SSZ') as string;
-    this.externalDateFormat = (geoviewLayerConfig.externalDateFormat || 'DD/MM/YYYY HH:MM:SSZ') as string;
-    // The top layer must be a layer group or a single leaf node.
-    const listOfLayerEntryConfig =
-      (geoviewLayerConfig?.listOfLayerEntryConfig as TypeJsonArray)?.length > 1
-        ? (this.listOfLayerEntryConfig = [
-            Cast<EntryConfigBaseClass>({
-              layerId: geoviewLayerConfig.geoviewLayerId,
-              initialSettings: this.initialSettings,
-              layerName: { ...(geoviewLayerConfig.geoviewLayerName as object) },
-              isLayerGroup: true,
-              listOfLayerEntryConfig: cloneDeep(geoviewLayerConfig.listOfLayerEntryConfig),
-            }),
-          ])
-        : cloneDeep(geoviewLayerConfig.listOfLayerEntryConfig);
-
-    this.isTimeAware = (geoviewLayerConfig.isTimeAware === undefined ? true : geoviewLayerConfig.isTimeAware) as boolean;
-    this.listOfLayerEntryConfig = (listOfLayerEntryConfig as TypeJsonArray)
+
+    // Validate the structure of the sublayer list and correct it if needed.
+    let jsonListOfLayerEntryConfig: TypeJsonArray;
+    switch ((geoviewLayerConfig?.listOfLayerEntryConfig as TypeJsonArray)?.length) {
+      case undefined:
+      case 0:
+        jsonListOfLayerEntryConfig = [];
+        break;
+      case 1:
+        // The top layer is a single leaf node.
+        jsonListOfLayerEntryConfig = geoviewLayerConfig.listOfLayerEntryConfig as TypeJsonArray;
+        break;
+      default:
+        // We create a group because the node at the top of the layer tree cannot be an array.
+        jsonListOfLayerEntryConfig = [
+          Cast<TypeJsonObject>({
+            layerId: geoviewLayerConfig.geoviewLayerId,
+            layerName: { ...(geoviewLayerConfig.geoviewLayerName as object) },
+            isLayerGroup: true,
+            listOfLayerEntryConfig: geoviewLayerConfig.listOfLayerEntryConfig as TypeJsonArray,
+          }),
+        ];
+        break;
+    }
+
+    // Instanciate the sublayer list.
+    this.listOfLayerEntryConfig = jsonListOfLayerEntryConfig
       ?.map((subLayerConfig) => {
-        if (layerEntryIsGroupLayer(subLayerConfig)) return new GroupLayerEntryConfig(subLayerConfig, this.initialSettings, language, this);
-        return this.createLeafNode(subLayerConfig, this.initialSettings, language, this);
+        if (layerEntryIsGroupLayer(subLayerConfig)) return new GroupLayerEntryConfig(subLayerConfig, language, this);
+        return this.createLeafNode(subLayerConfig, language, this);
       })
       // When a sublayer cannot be created, the value returned is undefined. These values will be filtered.
       ?.filter((subLayerConfig) => {
@@ -111,19 +120,38 @@ export abstract class AbstractGeoviewLayerConfig {
   }
 
   /**
-   * Validate the object properties. Layer name and type must be set.
-   * @private
+   * Validate the geoview configuration using the schema associated to its layer type. The validation performed doesn't
+   * cover the content of the listOfLayerEntryConfig. This validation will be done by the sublayer instances.
    */
-  protected validate(): void {
-    this.#errorDetected =
-      this.#errorDetected || !this.geoviewLayerType || !this.geoviewLayerId || !this.geoviewLayerName || !this.metadataAccessPath;
-    if (!this.geoviewLayerType) throw new GeoviewLayerMandatoryError('LayerTypeMandatory', [this.geoviewLayerId, this.geoviewLayerType]);
-    if (!this.geoviewLayerId) throw new GeoviewLayerMandatoryError('LayerIdMandatory', [this.geoviewLayerType]);
-    if (!this.geoviewLayerName) throw new GeoviewLayerMandatoryError('LayerNameMandatory', [this.geoviewLayerId, this.geoviewLayerType]);
-    if (!this.metadataAccessPath)
+  #validateGeoviewConfig(): void {
+    if (
+      !isvalidComparedToInputSchema(this.geoviewLayerSchema, this.#geoviewLayerConfig) ||
+      !this.#geoviewLayerConfig.geoviewLayerType ||
+      !this.#geoviewLayerConfig.metadataAccessPath
+    )
+      this.setErrorDetectedFlag();
+
+    if (!this.#geoviewLayerConfig.geoviewLayerType)
+      throw new GeoviewLayerMandatoryError('LayerTypeMandatory', [this.geoviewLayerId, this.geoviewLayerType]);
+    if (!this.#geoviewLayerConfig.metadataAccessPath)
       throw new GeoviewLayerMandatoryError('MetadataAccessPathMandatory', [this.geoviewLayerId, this.geoviewLayerType]);
   }
 
+  /**
+   * Apply default value to undefined fields.
+   *
+   */
+  applyDefaultValueToUndefinedFields(): void {
+    this.serviceDateFormat = this.serviceDateFormat || 'DD/MM/YYYY HH:MM:SSZ';
+    this.externalDateFormat = this.externalDateFormat || 'DD/MM/YYYY HH:MM:SSZ';
+    this.isTimeAware = this.isTimeAware !== undefined ? this.isTimeAware : true;
+
+    this.initialSettings = defaultsDeep(this.initialSettings, CV_DEFAULT_LAYER_INITIAL_SETTINGS);
+    this.listOfLayerEntryConfig.forEach((subLayer) => {
+      subLayer.applyDefaultValueToUndefinedFields(this.initialSettings);
+    });
+  }
+
   /**
    * Get the service metadata from the metadataAccessPath and store it in a private variable of the geoview layer.
    * The benifit of using a private #metadata is that it is invisible to the schema validation and JSON serialization.
@@ -215,19 +243,16 @@ export abstract class AbstractGeoviewLayerConfig {
    */
   abstract createLeafNode(
     layerConfig: TypeJsonObject,
-    initialSettings: TypeLayerInitialSettings | TypeJsonObject,
     language: TypeDisplayLanguage,
     geoviewConfig: AbstractGeoviewLayerConfig,
     parentNode?: EntryConfigBaseClass
   ): EntryConfigBaseClass | undefined;
 
   /**
-   * Methode used to set the AbstractGeoviewLayerConfig error flag to true and the MapFeatureConfig error flag if the
-   * instance exists.
+   * Methode used to set the AbstractGeoviewLayerConfig error flag to true.
    */
   setErrorDetectedFlag(): void {
     this.#errorDetected = true;
-    this.#mapFeatureConfig?.setErrorDetectedFlag();
   }
 
   /**
diff --git a/packages/geoview-core/src/api/config/types/classes/geoview-config/raster-config/esri-dynamic-config.ts b/packages/geoview-core/src/api/config/types/classes/geoview-config/raster-config/esri-dynamic-config.ts
index 33e6aa3314d..bda9f902e5b 100644
--- a/packages/geoview-core/src/api/config/types/classes/geoview-config/raster-config/esri-dynamic-config.ts
+++ b/packages/geoview-core/src/api/config/types/classes/geoview-config/raster-config/esri-dynamic-config.ts
@@ -3,9 +3,7 @@ import { AbstractGeoviewLayerConfig } from '@config/types/classes/geoview-config
 import { EsriDynamicLayerEntryConfig } from '@config/types/classes/sub-layer-config/raster-leaf/esri-dynamic-layer-entry-config';
 import { GroupLayerEntryConfig } from '@config/types/classes/sub-layer-config/group-layer-entry-config';
 import { TypeJsonObject } from '@config/types/config-types';
-import { TypeDisplayLanguage, TypeLayerInitialSettings } from '@config/types/map-schema-types';
-import { isvalidComparedToInputSchema, isvalidComparedToInternalSchema } from '@config/utils';
-import { MapFeatureConfig } from '@config/types/classes/map-feature-config';
+import { TypeDisplayLanguage } from '@config/types/map-schema-types';
 import { AbstractGeoviewEsriLayerConfig } from '@config/types/classes/geoview-config/abstract-geoview-esri-layer-config';
 import { EntryConfigBaseClass } from '@/api/config/types/classes/sub-layer-config/entry-config-base-class';
 
@@ -19,23 +17,6 @@ export class EsriDynamicLayerConfig extends AbstractGeoviewEsriLayerConfig {
   /** The layer entries to use from the GeoView layer. */
   declare listOfLayerEntryConfig: TypeEsriDynamicLayerNode[];
 
-  /**
-   * The class constructor.
-   * @param {TypeJsonObject} layerConfig The layer configuration we want to instanciate.
-   * @param {TypeDisplayLanguage} language The initial language to use when interacting with the geoview layer.
-   * @param {MapFeatureConfig} mapFeatureConfig An optional mapFeatureConfig instance if the layer is part of it.
-   * @constructor
-   */
-  constructor(layerConfig: TypeJsonObject, language: TypeDisplayLanguage, mapFeatureConfig?: MapFeatureConfig) {
-    super(layerConfig, language, mapFeatureConfig);
-
-    // validate the structure
-    if (!isvalidComparedToInputSchema(this.geoviewLayerSchema, layerConfig)) this.setErrorDetectedFlag();
-    if (!isvalidComparedToInternalSchema(this.geoviewLayerSchema, this, true)) this.setErrorDetectedFlag();
-    // validate the values.
-    this.validate();
-  }
-
   /**
    * The getter method that returns the geoview layer schema to use for the validation. Each geoview layer type knows what
    * section of the schema must be used to do its validation.
@@ -53,7 +34,6 @@ export class EsriDynamicLayerConfig extends AbstractGeoviewEsriLayerConfig {
    * type needed.
    *
    * @param {TypeJsonObject} layerConfig The sublayer configuration.
-   * @param {TypeLayerInitialSettings} initialSettings The initial settings inherited.
    * @param {TypeDisplayLanguage} language The initial language to use when interacting with the geoview layer.
    * @param {AbstractGeoviewLayerConfig} geoviewConfig The GeoView instance that owns the sublayer.
    * @param {EntryConfigBaseClass} parentNode The The parent node that owns this layer or undefined if it is the root layer..
@@ -62,11 +42,10 @@ export class EsriDynamicLayerConfig extends AbstractGeoviewEsriLayerConfig {
    */
   override createLeafNode(
     layerConfig: TypeJsonObject,
-    initialSettings: TypeLayerInitialSettings,
     language: TypeDisplayLanguage,
     geoviewConfig: AbstractGeoviewLayerConfig,
     parentNode?: EntryConfigBaseClass
   ): EntryConfigBaseClass {
-    return new EsriDynamicLayerEntryConfig(layerConfig, initialSettings, language, geoviewConfig, parentNode);
+    return new EsriDynamicLayerEntryConfig(layerConfig, language, geoviewConfig, parentNode);
   }
 }
diff --git a/packages/geoview-core/src/api/config/types/classes/geoview-config/vector-config/esri-feature-config.ts b/packages/geoview-core/src/api/config/types/classes/geoview-config/vector-config/esri-feature-config.ts
index c27323eb36f..d636e883a1a 100644
--- a/packages/geoview-core/src/api/config/types/classes/geoview-config/vector-config/esri-feature-config.ts
+++ b/packages/geoview-core/src/api/config/types/classes/geoview-config/vector-config/esri-feature-config.ts
@@ -3,9 +3,7 @@ import { AbstractGeoviewLayerConfig } from '@config/types/classes/geoview-config
 import { EsriFeatureLayerEntryConfig } from '@config/types/classes/sub-layer-config/vector-leaf/esri-feature-layer-entry-config';
 import { GroupLayerEntryConfig } from '@config/types/classes/sub-layer-config/group-layer-entry-config';
 import { TypeJsonObject } from '@config/types/config-types';
-import { TypeDisplayLanguage, TypeLayerInitialSettings } from '@config/types/map-schema-types';
-import { isvalidComparedToInputSchema, isvalidComparedToInternalSchema } from '@config/utils';
-import { MapFeatureConfig } from '@config/types/classes/map-feature-config';
+import { TypeDisplayLanguage } from '@config/types/map-schema-types';
 import { AbstractGeoviewEsriLayerConfig } from '@config/types/classes/geoview-config/abstract-geoview-esri-layer-config';
 import { EntryConfigBaseClass } from '@/api/config/types/classes/sub-layer-config/entry-config-base-class';
 
@@ -19,23 +17,6 @@ export class EsriFeatureLayerConfig extends AbstractGeoviewEsriLayerConfig {
   /** The layer entries to use from the GeoView layer. */
   declare listOfLayerEntryConfig: TypeEsriFeatureLayerNode[];
 
-  /**
-   * The class constructor.
-   * @param {TypeJsonObject} layerConfig The layer configuration we want to instanciate.
-   * @param {TypeDisplayLanguage} language The initial language to use when interacting with the map feature configuration.
-   * @param {MapFeatureConfig} mapFeatureConfig An optional mapFeatureConfig instance if the layer is part of it.
-   * @constructor
-   */
-  constructor(layerConfig: TypeJsonObject, language: TypeDisplayLanguage, mapFeatureConfig?: MapFeatureConfig) {
-    super(layerConfig, language, mapFeatureConfig);
-
-    // validate the structure
-    if (!isvalidComparedToInputSchema(this.geoviewLayerSchema, layerConfig)) this.setErrorDetectedFlag();
-    if (!isvalidComparedToInternalSchema(this.geoviewLayerSchema, this, true)) this.setErrorDetectedFlag();
-    // validate the values.
-    this.validate();
-  }
-
   /**
    * The getter method that returns the geoview layer schema to use for the validation. Each geoview layer type knows what
    * section of the schema must be used to do its validation.
@@ -53,7 +34,6 @@ export class EsriFeatureLayerConfig extends AbstractGeoviewEsriLayerConfig {
    * type needed.
    *
    * @param {TypeJsonObject} layerConfig The lsub ayer configuration.
-   * @param {TypeLayerInitialSettings} initialSettings The initial settings inherited.
    * @param {TypeDisplayLanguage} language The initial language to use when interacting with the geoview layer.
    * @param {AbstractGeoviewLayerConfig} geoviewConfig The GeoView instance that owns the sublayer.
    * @param {EntryConfigBaseClass} parentNode The The parent node that owns this layer or undefined if it is the root layer..
@@ -62,11 +42,10 @@ export class EsriFeatureLayerConfig extends AbstractGeoviewEsriLayerConfig {
    */
   override createLeafNode(
     layerConfig: TypeJsonObject,
-    initialSettings: TypeLayerInitialSettings,
     language: TypeDisplayLanguage,
     geoviewConfig: AbstractGeoviewLayerConfig,
     parentNode?: EntryConfigBaseClass
   ): EntryConfigBaseClass {
-    return new EsriFeatureLayerEntryConfig(layerConfig, initialSettings, language, geoviewConfig, parentNode);
+    return new EsriFeatureLayerEntryConfig(layerConfig, language, geoviewConfig, parentNode);
   }
 }
diff --git a/packages/geoview-core/src/api/config/types/classes/map-feature-config.ts b/packages/geoview-core/src/api/config/types/classes/map-feature-config.ts
index 839a1ef06ec..b988a93a5f7 100644
--- a/packages/geoview-core/src/api/config/types/classes/map-feature-config.ts
+++ b/packages/geoview-core/src/api/config/types/classes/map-feature-config.ts
@@ -37,6 +37,7 @@ import {
 } from '@config/types/map-schema-types';
 
 import { logger } from '@/core//utils/logger';
+import { ConfigApi } from '../../config-api';
 
 /**
  * The map feature configuration class.
@@ -107,7 +108,7 @@ export class MapFeatureConfig {
     );
     this.map.listOfGeoviewLayerConfig = (gvMap.listOfGeoviewLayerConfig as TypeJsonArray)
       .map((geoviewLayerConfig) => {
-        const returnValue = MapFeatureConfig.nodeFactory(geoviewLayerConfig, this.#language, this);
+        const returnValue = MapFeatureConfig.nodeFactory(geoviewLayerConfig, this.#language);
         if (returnValue === undefined) this.#errorDetected = true;
         return returnValue;
       })
@@ -187,18 +188,14 @@ export class MapFeatureConfig {
    * @returns {AbstractGeoviewLayerConfig | undefined} The GeoView layer instance or undefined if there is an error.
    * @static
    */
-  static nodeFactory(
-    layerConfig: TypeJsonObject,
-    language: TypeDisplayLanguage,
-    mapFeatureConfig?: MapFeatureConfig
-  ): AbstractGeoviewLayerConfig | undefined {
+  static nodeFactory(layerConfig: TypeJsonObject, language: TypeDisplayLanguage): AbstractGeoviewLayerConfig | undefined {
     switch (layerConfig.geoviewLayerType) {
       // case CONST_LAYER_TYPES.CSV:
       //   return new CsvLayerConfig(layerConfig);
       case CV_CONST_LAYER_TYPES.ESRI_DYNAMIC:
-        return new EsriDynamicLayerConfig(layerConfig, language, mapFeatureConfig);
+        return new EsriDynamicLayerConfig(layerConfig, language);
       case CV_CONST_LAYER_TYPES.ESRI_FEATURE:
-        return new EsriFeatureLayerConfig(layerConfig, language, mapFeatureConfig);
+        return new EsriFeatureLayerConfig(layerConfig, language);
       // case CONST_LAYER_TYPES.ESRI_IMAGE:
       //   return new EsriImageLayerConfig(layerConfig);
       // case CONST_LAYER_TYPES.GEOJSON:
@@ -216,8 +213,9 @@ export class MapFeatureConfig {
       // case CONST_LAYER_TYPES.WMS:
       //   return new WmsLayerConfig(layerConfig);
       default:
-      // TODO: Restore this error message when we have converted our code to the new framework.
-      // logger.logError(`Invalid GeoView layerType (${layerConfig.geoviewLayerType}).`);
+        // TODO: Restore the commented line and remove the next line when we have converted our code to the new framework.
+        // logger.logError(`Invalid GeoView layerType (${layerConfig.geoviewLayerType}).`);
+        if (ConfigApi.devMode) logger.logError(`Invalid GeoView layerType (${layerConfig.geoviewLayerType}).`);
     }
     return undefined;
   }
diff --git a/packages/geoview-core/src/api/config/types/classes/sub-layer-config/abstract-base-esri-layer-entry-config.ts b/packages/geoview-core/src/api/config/types/classes/sub-layer-config/abstract-base-esri-layer-entry-config.ts
index cee6a1115e7..37b762ce043 100644
--- a/packages/geoview-core/src/api/config/types/classes/sub-layer-config/abstract-base-esri-layer-entry-config.ts
+++ b/packages/geoview-core/src/api/config/types/classes/sub-layer-config/abstract-base-esri-layer-entry-config.ts
@@ -1,6 +1,8 @@
-import { AbstractBaseLayerEntryConfig } from '@config/types/classes/sub-layer-config/abstract-base-layer-entry-config';
 import axios from 'axios';
-import { TypeJsonObject } from '../../config-types';
+
+import { AbstractBaseLayerEntryConfig } from '@config/types/classes/sub-layer-config/abstract-base-layer-entry-config';
+import { TypeJsonObject } from '@config/types/config-types';
+
 import { logger } from '@/core/utils/logger';
 
 /**
diff --git a/packages/geoview-core/src/api/config/types/classes/sub-layer-config/abstract-base-layer-entry-config.ts b/packages/geoview-core/src/api/config/types/classes/sub-layer-config/abstract-base-layer-entry-config.ts
index 86ec359e41d..ff1d9cf695f 100644
--- a/packages/geoview-core/src/api/config/types/classes/sub-layer-config/abstract-base-layer-entry-config.ts
+++ b/packages/geoview-core/src/api/config/types/classes/sub-layer-config/abstract-base-layer-entry-config.ts
@@ -1,16 +1,13 @@
-import cloneDeep from 'lodash/cloneDeep';
+import defaultsDeep from 'lodash/defaultsDeep';
 
-import { Cast, TypeJsonObject } from '@config/types/config-types';
-import { AbstractGeoviewLayerConfig } from '@config/types/classes/geoview-config/abstract-geoview-layer-config';
+import { TypeJsonObject } from '@config/types/config-types';
 import {
-  TypeDisplayLanguage,
-  TypeLayerInitialSettings,
   TypeBaseSourceInitialConfig,
   TypeTemporalDimension,
   TypeStyleGeometry,
+  TypeLayerInitialSettings,
 } from '@config/types/map-schema-types';
 import { EntryConfigBaseClass } from '@/api/config/types/classes/sub-layer-config/entry-config-base-class';
-import { CV_DEFAULT_MAP_FEATURE_CONFIG } from '../../config-constants';
 
 /**
  * Base type used to define a GeoView sublayer to display on the map.
@@ -20,7 +17,7 @@ export abstract class AbstractBaseLayerEntryConfig extends EntryConfigBaseClass
   #metadata: TypeJsonObject = {};
 
   /** The geometry type of the leaf node. */
-  geometryType: TypeStyleGeometry;
+  geometryType!: TypeStyleGeometry;
 
   /** Source settings to apply to the GeoView vector layer source at creation time. */
   source?: TypeBaseSourceInitialConfig;
@@ -29,28 +26,10 @@ export abstract class AbstractBaseLayerEntryConfig extends EntryConfigBaseClass
   temporalDimension?: TypeTemporalDimension;
 
   /**
-   * The class constructor.
-   * @param {TypeJsonObject} layerConfig The sublayer configuration we want to instanciate.
-   * @param {TypeLayerInitialSettings} initialSettings The initial settings inherited.
-   * @param {TypeDisplayLanguage} language The initial language to use when interacting with the map features configuration.
-   * @param {AbstractGeoviewLayerConfig} geoviewLayerConfig The GeoView instance that owns the sublayer.
-   * @param {EntryConfigBaseClass} parentNode The The parent node that owns this layer or undefined if it is the root layer.
-   * @constructor
+   * Apply default value to undefined fields.
    */
-  constructor(
-    layerConfig: TypeJsonObject,
-    initialSettings: TypeLayerInitialSettings,
-    language: TypeDisplayLanguage,
-    geoviewLayerConfig: AbstractGeoviewLayerConfig,
-    parentNode?: EntryConfigBaseClass
-  ) {
-    super(layerConfig, initialSettings, language, geoviewLayerConfig, parentNode);
-    this.geometryType = layerConfig.geometryType as TypeStyleGeometry;
-    // If the user has provided a source then keep it, else create one using default values.
-    // GV: This Cast operation uses a cloned version of the entire configuration, it covers even the child properties.
-    if (layerConfig.source) this.source = Cast<TypeBaseSourceInitialConfig>(cloneDeep(layerConfig.source));
-    else this.source = Cast<TypeBaseSourceInitialConfig>({ projection: CV_DEFAULT_MAP_FEATURE_CONFIG.map.viewSettings.projection });
-    if (layerConfig.temporalDimension) this.temporalDimension = Cast<TypeTemporalDimension>(cloneDeep(layerConfig.temporalDimension));
+  override applyDefaultValueToUndefinedFields(initialSettings: TypeLayerInitialSettings): void {
+    this.initialSettings = defaultsDeep(this.initialSettings, initialSettings);
   }
 
   /**
diff --git a/packages/geoview-core/src/api/config/types/classes/sub-layer-config/entry-config-base-class.ts b/packages/geoview-core/src/api/config/types/classes/sub-layer-config/entry-config-base-class.ts
index 9bb247ddad2..beaf3f1eaba 100644
--- a/packages/geoview-core/src/api/config/types/classes/sub-layer-config/entry-config-base-class.ts
+++ b/packages/geoview-core/src/api/config/types/classes/sub-layer-config/entry-config-base-class.ts
@@ -1,8 +1,5 @@
-import defaultsDeep from 'lodash/defaultsDeep';
-
 import { TypeJsonObject } from '@config/types/config-types';
 import { AbstractGeoviewLayerConfig } from '@config/types/classes/geoview-config/abstract-geoview-layer-config';
-import { normalizeLocalizedString } from '@config/utils';
 import {
   TypeGeoviewLayerType,
   TypeLayerEntryType,
@@ -10,7 +7,7 @@ import {
   TypeDisplayLanguage,
   Extent,
 } from '@config/types/map-schema-types';
-import { validateExtentWhenDefined } from '@/geo/utils/utilities';
+import { isvalidComparedToInputSchema } from '@/api/config/utils';
 
 /**
  * Base type used to define a GeoView sublayer to display on the map. The sublayer can be a group or an abstract sublayer.
@@ -18,7 +15,7 @@ import { validateExtentWhenDefined } from '@/geo/utils/utilities';
 export abstract class EntryConfigBaseClass {
   // GV: Only the public properties are serialized.
   /** The language used when interacting with this instance of MapFeatureConfig. */
-  #language;
+  // #language;
 
   /** The GeoView configuration that owns the configuration tree that contains this node. */
   #geoviewLayerConfigInstance: AbstractGeoviewLayerConfig;
@@ -39,16 +36,16 @@ export abstract class EntryConfigBaseClass {
   layerName?: string;
 
   /** Attributions obtained from the configuration or the metadata. */
-  attributions: string[];
+  attributions!: string[];
 
   /** Bounds (in lat long) obtained from the metadata or calculated from the layers */
   bounds: Extent | undefined;
 
   /** The min scale that can be reach by the layer. */
-  minScale: number;
+  minScale!: number;
 
   /** The max scale that can be reach by the layer. */
-  maxScale: number;
+  maxScale!: number;
 
   /** Layer entry data type. */
   entryType: TypeLayerEntryType;
@@ -57,12 +54,14 @@ export abstract class EntryConfigBaseClass {
    * Initial settings to apply to the GeoView layer entry at creation time. Initial settings are inherited from the parent in the
    * configuration tree.
    */
-  initialSettings: TypeLayerInitialSettings;
+  initialSettings!: TypeLayerInitialSettings;
 
   /**
-   * The class constructor.
+   * The class constructor use the sublayer configuration supplied by the user and runs a validation on it to find any errors that
+   * may have been made. It only initalizes the properties needed to query the layer metadata for leaf nodes or to create a the
+   * layer group.
+   *
    * @param {TypeJsonObject} layerConfig The sublayer configuration we want to instanciate.
-   * @param {TypeLayerInitialSettings | TypeJsonObject} initialSettings The initial settings inherited.
    * @param {TypeDisplayLanguage} language The initial language to use when interacting with the map feature configuration.
    * @param {AbstractGeoviewLayerConfig} geoviewLayerConfig The GeoView instance that owns the sublayer.
    * @param {EntryConfigBaseClass} parentNode The The parent node that owns this layer or undefined if it is the root layer.
@@ -70,26 +69,35 @@ export abstract class EntryConfigBaseClass {
    */
   constructor(
     layerConfig: TypeJsonObject,
-    initialSettings: TypeLayerInitialSettings | TypeJsonObject,
     language: TypeDisplayLanguage,
     geoviewLayerConfig: AbstractGeoviewLayerConfig,
     parentNode?: EntryConfigBaseClass
   ) {
-    this.#language = language;
+    this.validateLayerConfig(layerConfig);
+    // this.#language = language;
     this.#geoviewLayerConfigInstance = geoviewLayerConfig;
     this.#parentNode = parentNode;
 
     this.layerId = layerConfig.layerId as string;
-    this.layerName = layerConfig.layerName ? normalizeLocalizedString(layerConfig.layerName)![this.#language]! : undefined;
+    this.layerName = layerConfig?.layerName?.[language] as string;
     this.isLayerGroup = (layerConfig.isLayerGroup as boolean) || false;
-    this.attributions = (layerConfig.attributions as string[]) || [];
-    this.bounds = validateExtentWhenDefined(layerConfig.bounds as Extent);
-    this.minScale = (layerConfig.minScale as number) || 0;
-    this.maxScale = (layerConfig.minScale as number) || 0;
     this.entryType = this.getEntryType();
-    this.initialSettings = defaultsDeep(layerConfig.initialSettings, initialSettings);
   }
 
+  /**
+   * Validate the node configuration using the schema associated to its layer type.
+   * @protected
+   */
+  protected validateLayerConfig(layerConfig: TypeJsonObject): void {
+    if (!isvalidComparedToInputSchema(this.schemaPath, layerConfig)) this.setErrorDetectedFlag();
+  }
+
+  /**
+   * Apply default value to undefined fields.
+   * @abstract
+   */
+  abstract applyDefaultValueToUndefinedFields(initialSettings: TypeLayerInitialSettings): void;
+
   /**
    * The getter method that returns the schemaPath property. Each geoview sublayer type knows what section of the schema must be
    * used to do its validation.
@@ -137,7 +145,6 @@ export abstract class EntryConfigBaseClass {
    */
   setErrorDetectedFlag(): void {
     this.#errorDetected = true;
-    this.#geoviewLayerConfigInstance.setErrorDetectedFlag();
   }
 
   /**
@@ -149,6 +156,15 @@ export abstract class EntryConfigBaseClass {
     return this.#errorDetected;
   }
 
+  /**
+   * The getter method that returns the parentNode.
+   *
+   * @returns {EntryConfigBaseClass | undefined} The parentNode property associated to the entry config.
+   */
+  get parentNode(): EntryConfigBaseClass | undefined {
+    return this.#parentNode;
+  }
+
   /**
    * This method returns the json string of the layer entry configuration. The output representation is not a multi-line indented
    * string. Private variables and pseudo-properties are not serialized.
diff --git a/packages/geoview-core/src/api/config/types/classes/sub-layer-config/group-layer-entry-config.ts b/packages/geoview-core/src/api/config/types/classes/sub-layer-config/group-layer-entry-config.ts
index 1f865a8299a..4efafcd9c72 100644
--- a/packages/geoview-core/src/api/config/types/classes/sub-layer-config/group-layer-entry-config.ts
+++ b/packages/geoview-core/src/api/config/types/classes/sub-layer-config/group-layer-entry-config.ts
@@ -1,3 +1,5 @@
+import defaultsDeep from 'lodash/defaultsDeep';
+
 import { CV_CONST_SUB_LAYER_TYPES, CV_LAYER_GROUP_SCHEMA_PATH } from '@config/types/config-constants';
 import { TypeJsonArray, TypeJsonObject } from '@config/types/config-types';
 import { AbstractGeoviewLayerConfig } from '@config/types/classes/geoview-config/abstract-geoview-layer-config';
@@ -18,7 +20,6 @@ export class GroupLayerEntryConfig extends EntryConfigBaseClass {
   /**
    * The class constructor.
    * @param {TypeJsonObject} layerConfig The sublayer configuration we want to instanciate.
-   * @param {TypeLayerInitialSettings | TypeJsonObject} initialSettings The initial settings inherited.
    * @param {TypeDisplayLanguage} language The initial language to use when interacting with the geoview layer.
    * @param {AbstractGeoviewLayerConfig} geoviewLayerConfig The GeoView instance that owns the sublayer.
    * @param {EntryConfigBaseClass} parentNode The The parent node that owns this layer or undefined if it is the root layer.
@@ -26,23 +27,31 @@ export class GroupLayerEntryConfig extends EntryConfigBaseClass {
    */
   constructor(
     layerConfig: TypeJsonObject,
-    initialSettings: TypeLayerInitialSettings | TypeJsonObject,
     language: TypeDisplayLanguage,
     geoviewLayerConfig: AbstractGeoviewLayerConfig,
     parentNode?: EntryConfigBaseClass
   ) {
-    super(layerConfig, initialSettings, language, geoviewLayerConfig, parentNode);
+    super(layerConfig, language, geoviewLayerConfig, parentNode);
     this.listOfLayerEntryConfig = (layerConfig.listOfLayerEntryConfig as TypeJsonArray)
       .map((subLayerConfig) => {
-        if (layerEntryIsGroupLayer(subLayerConfig))
-          return new GroupLayerEntryConfig(subLayerConfig, initialSettings, language, geoviewLayerConfig, this);
-        return geoviewLayerConfig.createLeafNode(subLayerConfig, initialSettings, language, geoviewLayerConfig, this);
+        if (layerEntryIsGroupLayer(subLayerConfig)) return new GroupLayerEntryConfig(subLayerConfig, language, geoviewLayerConfig, this);
+        return geoviewLayerConfig.createLeafNode(subLayerConfig, language, geoviewLayerConfig, this);
       })
       .filter((subLayerConfig) => {
         return subLayerConfig;
       }) as EntryConfigBaseClass[];
   }
 
+  /**
+   * Apply default value to undefined fields.
+   */
+  override applyDefaultValueToUndefinedFields(initialSettings: TypeLayerInitialSettings): void {
+    this.initialSettings = defaultsDeep(this.initialSettings, initialSettings);
+    this.listOfLayerEntryConfig.forEach((subLayer) => {
+      subLayer.applyDefaultValueToUndefinedFields(this.initialSettings);
+    });
+  }
+
   /**
    * @protected
    * The getter method that returns the schemaPath property. Each geoview sublayer type knows what section of the schema must be
diff --git a/packages/geoview-core/src/api/config/types/classes/sub-layer-config/raster-leaf/esri-dynamic-layer-entry-config.ts b/packages/geoview-core/src/api/config/types/classes/sub-layer-config/raster-leaf/esri-dynamic-layer-entry-config.ts
index 28104e4e713..6d8fbfef681 100644
--- a/packages/geoview-core/src/api/config/types/classes/sub-layer-config/raster-leaf/esri-dynamic-layer-entry-config.ts
+++ b/packages/geoview-core/src/api/config/types/classes/sub-layer-config/raster-leaf/esri-dynamic-layer-entry-config.ts
@@ -1,19 +1,8 @@
 import { defaultsDeep } from 'lodash';
 
 import { CV_CONST_SUB_LAYER_TYPES, CV_CONST_LEAF_LAYER_SCHEMA_PATH } from '@config/types/config-constants';
-import { Cast, TypeJsonObject } from '@config/types/config-types';
-import { AbstractGeoviewLayerConfig } from '@config/types/classes/geoview-config/abstract-geoview-layer-config';
 import { AbstractBaseEsriLayerEntryConfig } from '@config/types/classes/sub-layer-config/abstract-base-esri-layer-entry-config';
-import { isvalidComparedToInputSchema, isvalidComparedToInternalSchema } from '@config/utils';
-import {
-  TypeStyleConfig,
-  TypeLayerEntryType,
-  TypeLayerInitialSettings,
-  TypeDisplayLanguage,
-  TypeSourceEsriDynamicInitialConfig,
-} from '@config/types/map-schema-types';
-import { GeoviewLayerInvalidParameterError } from '@config/types/classes/config-exceptions';
-import { EntryConfigBaseClass } from '@/api/config/types/classes/sub-layer-config/entry-config-base-class';
+import { TypeStyleConfig, TypeLayerEntryType, TypeSourceEsriDynamicInitialConfig } from '@config/types/map-schema-types';
 
 /**
  * The ESRI dynamic geoview sublayer class.
@@ -25,34 +14,6 @@ export class EsriDynamicLayerEntryConfig extends AbstractBaseEsriLayerEntryConfi
   /** Style to apply to the raster layer. */
   style?: TypeStyleConfig;
 
-  /**
-   * The class constructor.
-   * @param {TypeJsonObject} layerConfig The sublayer configuration we want to instanciate.
-   * @param {TypeLayerInitialSettings} initialSettings The initial settings inherited.
-   * @param {TypeDisplayLanguage} language The initial language to use when interacting with the geoview layer.
-   * @param {AbstractGeoviewLayerConfig} geoviewLayerConfig The GeoView instance that owns the sublayer.
-   * @param {EntryConfigBaseClass} parentNode The The parent node that owns this layer or undefined if it is the root layer.
-   * @constructor
-   */
-  constructor(
-    layerConfig: TypeJsonObject,
-    initialSettings: TypeLayerInitialSettings,
-    language: TypeDisplayLanguage,
-    geoviewLayerConfig: AbstractGeoviewLayerConfig,
-    parentNode?: EntryConfigBaseClass
-  ) {
-    super(layerConfig, initialSettings, language, geoviewLayerConfig, parentNode);
-    // Apply user config to the instance variables.
-    this.style = layerConfig.style ? { ...Cast<TypeStyleConfig>(layerConfig.style) } : undefined;
-    if (Number.isNaN(this.layerId)) {
-      this.setErrorDetectedFlag();
-      throw new GeoviewLayerInvalidParameterError('LayerIdInvalidType', [this.layerPath]);
-    }
-    // Validate the structure
-    if (!isvalidComparedToInputSchema(this.schemaPath, layerConfig)) this.setErrorDetectedFlag();
-    if (!isvalidComparedToInternalSchema(this.schemaPath, this, true)) this.setErrorDetectedFlag();
-  }
-
   /**
    * This method is the last to be called in the sequence of configuration parameter assignment according to the preceding rules,
    * the first being the assignment of user parameters and the second the assignment of metadata. Configuration parameters that
diff --git a/packages/geoview-core/src/api/config/types/classes/sub-layer-config/vector-leaf/esri-feature-layer-entry-config.ts b/packages/geoview-core/src/api/config/types/classes/sub-layer-config/vector-leaf/esri-feature-layer-entry-config.ts
index a3ff554fd61..5f51256d158 100644
--- a/packages/geoview-core/src/api/config/types/classes/sub-layer-config/vector-leaf/esri-feature-layer-entry-config.ts
+++ b/packages/geoview-core/src/api/config/types/classes/sub-layer-config/vector-leaf/esri-feature-layer-entry-config.ts
@@ -1,19 +1,8 @@
 import { defaultsDeep } from 'lodash';
 
 import { CV_CONST_SUB_LAYER_TYPES, CV_CONST_LEAF_LAYER_SCHEMA_PATH } from '@config/types/config-constants';
-import { Cast, TypeJsonObject } from '@config/types/config-types';
-import { AbstractGeoviewLayerConfig } from '@config/types/classes/geoview-config/abstract-geoview-layer-config';
 import { AbstractBaseEsriLayerEntryConfig } from '@config/types/classes/sub-layer-config/abstract-base-esri-layer-entry-config';
-import { isvalidComparedToInputSchema, isvalidComparedToInternalSchema } from '@config/utils';
-import {
-  TypeStyleConfig,
-  TypeLayerEntryType,
-  TypeLayerInitialSettings,
-  TypeDisplayLanguage,
-  TypeSourceEsriFeatureInitialConfig,
-} from '@config/types/map-schema-types';
-import { GeoviewLayerInvalidParameterError } from '@config/types/classes/config-exceptions';
-import { EntryConfigBaseClass } from '@/api/config/types/classes/sub-layer-config/entry-config-base-class';
+import { TypeStyleConfig, TypeLayerEntryType, TypeSourceEsriFeatureInitialConfig } from '@config/types/map-schema-types';
 
 /**
  * The ESRI feature geoview sublayer class.
@@ -26,31 +15,12 @@ export class EsriFeatureLayerEntryConfig extends AbstractBaseEsriLayerEntryConfi
   style?: TypeStyleConfig;
 
   /**
-   * The class constructor.
-   * @param {TypeJsonObject} layerConfig The sublayer configuration we want to instanciate.
-   * @param {TypeLayerInitialSettings} initialSettings The initial settings inherited.
-   * @param {TypeDisplayLanguage} language The initial language to use when interacting with the geoview layer.
-   * @param {AbstractGeoviewLayerConfig} geoviewLayerConfig The GeoView instance that owns the sublayer.
-   * @param {EntryConfigBaseClass} parentNode The The parent node that owns this layer or undefined if it is the root layer.
-   * @constructor
-   */
-  constructor(
-    layerConfig: TypeJsonObject,
-    initialSettings: TypeLayerInitialSettings,
-    language: TypeDisplayLanguage,
-    geoviewLayerConfig: AbstractGeoviewLayerConfig,
-    parentNode?: EntryConfigBaseClass
-  ) {
-    super(layerConfig, initialSettings, language, geoviewLayerConfig, parentNode);
-    // Apply user config to the instance variables.
-    this.style = layerConfig.style ? { ...Cast<TypeStyleConfig>(layerConfig.style) } : undefined;
-    if (Number.isNaN(this.layerId)) {
-      this.setErrorDetectedFlag();
-      throw new GeoviewLayerInvalidParameterError('LayerIdInvalidType', [this.layerPath]);
-    }
-    // Validate the structure
+   * Validate the node configuration using the schema associated to its layer type.
+   * @protected
+   * /
+  protected override validateLayerConfig(layerConfig: TypeJsonObject): void {
+    super.validateLayerConfig(layerConfig);
     if (!isvalidComparedToInputSchema(this.schemaPath, layerConfig)) this.setErrorDetectedFlag();
-    if (!isvalidComparedToInternalSchema(this.schemaPath, this, true)) this.setErrorDetectedFlag();
   }
 
   /**
diff --git a/packages/geoview-core/src/api/config/types/config-constants.ts b/packages/geoview-core/src/api/config/types/config-constants.ts
index 7c7e6ab745c..8f55f12d04d 100644
--- a/packages/geoview-core/src/api/config/types/config-constants.ts
+++ b/packages/geoview-core/src/api/config/types/config-constants.ts
@@ -85,7 +85,7 @@ export const CV_GEOVIEW_SCHEMA_PATH: Record<LayerTypesKey, string> = {
   WMS: '',
 };
 export const CV_MAP_CONFIG_SCHEMA_PATH = 'https://cgpv/schema#/definitions/MapFeatureConfig';
-export const CV_LAYER_GROUP_SCHEMA_PATH = 'https://cgpv/schema#/definitions/TypeLayerGroupEntryConfig';
+export const CV_LAYER_GROUP_SCHEMA_PATH = 'https://cgpv/schema#/definitions/GroupLayerEntryConfig';
 
 /** Array of schema versions accepted by the viewer. */
 export const ACCEPTED_SCHEMA_VERSIONS: TypeValidVersions[] = ['1.0'];
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
index abc6d106229..9b536a5ddda 100644
--- a/packages/geoview-core/src/api/config/types/config-validation-schema.json
+++ b/packages/geoview-core/src/api/config/types/config-validation-schema.json
@@ -375,7 +375,7 @@
         },
         "isTimeAware": {
           "type": "boolean",
-          "description": "Flag to mention if layer will use its time dimension if provided. Used to remove a layer from time enabled functions like time slider."
+          "description": "Flag to mention if layer will use its time dimension if provided (default: true). Used to remove a layer from time enabled functions like time slider."
         },
         "initialSettings": {
           "description": "Initial settings to apply to the GeoView layer at creation time.",
@@ -435,7 +435,7 @@
           }
         }
       },
-      "required": ["geoviewLayerId", "geoviewLayerName", "geoviewLayerType", "listOfLayerEntryConfig"]
+      "required": ["geoviewLayerType", "listOfLayerEntryConfig"]
     },
     "TypeListOfLayerEntryConfig": {
       "description": "The list of layer configurations. The AbstractGeoviewLayerConfig validation ends here. The only thing we need to verify for the moment is it must be an array of at least one element.",
@@ -751,6 +751,10 @@
       "description": "Base class from which we derive all the nodes (group and leaves) in the layer tree.",
       "type": "object",
       "properties": {
+        "isLayerGroup": {
+          "description": "Flag used to distinguish layer group nodes.",
+          "type": "boolean"
+        },
         "layerId": {
           "description": "The id of the layer to display on the map.",
           "type": "string"
@@ -799,34 +803,55 @@
         "initialSettings": {
           "description": "Initial settings to apply to the layer entry at creation time. Initial settings are inherited from the parent in the configuration tree.",
           "$ref": "#/definitions/TypeLayerInitialSettings"
+        },
+        "entryType": {
+          "description": "The node data type.",
+          "$ref": "#/definitions/TypeLayerEntryType"
         }
       },
       "if": {
         "properties": {
           "useInternalSchema": {
-            "description": "The useInternalSchema property is not defined by the user but by the viewer when we want to use the internal schema.",
+            "description": "The useInternalSchema property is not defined by the user but programmatically by the viewer when we want to use the internal schema.",
             "const": true
           }
         },
         "required": ["useInternalSchema"]
       },
       "then": {
+        "description": "Use Internal Schema",
         "properties": {
           "layerName": {
-            "description": "Used by the internal schema.",
+            "description": "The display name of the layer.",
             "type": "string"
+          },
+          "entryType": {
+            "description": "The node data type.",
+            "$ref": "#/definitions/TypeLayerEntryType"
           }
-        }
+        },
+        "required": ["entryType", "layerId", "layerName"]
       },
       "else": {
+        "description": "Use Input Schema",
         "properties": {
           "layerName": {
             "description": "Used by the input schema. The display name of the layer (English/French). If it is not present the viewer will make an attempt to scrape this information.",
             "$ref": "#/definitions/TypeLocalizedString"
+          },
+          "entryType": {
+            "description": "Input schema does not allow the user to specify the entryType property.",
+            "not": {},
+            "errorMessage": {
+              "not": "Property entryType is not allowed in user data."
+            }
           }
-        }
+        },
+        "required": ["layerId"]
       },
-      "required": ["layerId"]
+      "errorMessage": {
+        "if": "The data does not respect the EntryConfigBaseClass schema definition."
+      }
     },
     "AbstractBaseLayerEntryConfig": {
       "description": "Base class from which we derive all the leaf nodes in the layer tree.",
@@ -853,6 +878,28 @@
         }
       ]
     },
+    "GroupLayerEntryConfig": {
+      "description": "Class from which we derive all the layer group nodes in the layer tree.",
+      "type": "object",
+      "allOf": [
+        {
+          "description": "The parent class.",
+          "$ref": "#/definitions/EntryConfigBaseClass"
+        },
+        {
+          "type": "object",
+          "properties": {
+            "entryType": {
+              "enum": ["group"]
+            },
+            "listOfLayerEntryConfig": {
+              "description": "The list of layer entry configurations to use from the GeoView layer group.",
+              "$ref": "#/definitions/TypeListOfLayerEntryConfig"
+            }
+          }
+        }
+      ]
+    },
     "EsriDynamicLayerEntryConfig": {
       "description": "Class from which we derive all the ESRI Dynamic leaf nodes in the layer tree.",
       "type": "object",
@@ -864,6 +911,16 @@
         {
           "type": "object",
           "properties": {
+            "layerId": {
+              "type": "string",
+              "pattern": "^[0-9]+$",
+              "errorMessage": {
+                "pattern": "The layer identifier (layerId) must be a numeric string."
+              }
+            },
+            "entryType": {
+              "enum": ["raster-tile"]
+            },
             "source": {
               "$ref": "#/definitions/TypeSourceEsriDynamicInitialConfig"
             },
@@ -885,6 +942,13 @@
         {
           "type": "object",
           "properties": {
+            "layerId": {
+              "type": "string",
+              "pattern": "^[0-9]+$",
+              "errorMessage": {
+                "pattern": "The layer identifier (layerId) must be a numeric string."
+              }
+            },
             "source": {
               "$ref": "#/definitions/TypeSourceEsriFeatureInitialConfig"
             },
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
index 550f64b3eac..0a3f864b308 100644
--- a/packages/geoview-core/src/api/config/types/map-schema-types.ts
+++ b/packages/geoview-core/src/api/config/types/map-schema-types.ts
@@ -297,6 +297,7 @@ export type TypeLayerStates = {
 export { EntryConfigBaseClass } from '@/api/config/types/classes/sub-layer-config/entry-config-base-class';
 
 export { AbstractBaseLayerEntryConfig } from '@config/types/classes/sub-layer-config/abstract-base-layer-entry-config';
+export { GroupLayerEntryConfig } from '@config/types/classes/sub-layer-config/group-layer-entry-config';
 /** Child classes derived from the AbstractBaseLayerEntryConfig. */
 export { EsriDynamicLayerEntryConfig } from '@config/types/classes/sub-layer-config/raster-leaf/esri-dynamic-layer-entry-config';
 export { EsriFeatureLayerEntryConfig } from '@config/types/classes/sub-layer-config/vector-leaf/esri-feature-layer-entry-config';
diff --git a/packages/geoview-core/src/api/config/utils.ts b/packages/geoview-core/src/api/config/utils.ts
index 49c9f527440..12edc4199bd 100644
--- a/packages/geoview-core/src/api/config/utils.ts
+++ b/packages/geoview-core/src/api/config/utils.ts
@@ -1,4 +1,5 @@
 import Ajv from 'ajv';
+import addErrors from 'ajv-errors';
 import cloneDeep from 'lodash/cloneDeep';
 
 import { CV_CONST_SUB_LAYER_TYPES, CV_CONST_LAYER_TYPES } from '@config/types/config-constants';
@@ -51,8 +52,9 @@ export function isvalidComparedToInputSchema(schemaPath: string, targetObject: o
   // create a validator object
   const validator = new Ajv({
     strict: false,
-    allErrors: false,
+    allErrors: true,
   });
+  addErrors(validator);
 
   // initialize validator with schema file
   validator.compile(schema);
@@ -73,7 +75,7 @@ export function isvalidComparedToInputSchema(schemaPath: string, targetObject: o
         for (let j = 1; j < path.length; j++) {
           node = node[path[j]] as Record<string, unknown>;
         }
-        logger.logWarning('='.repeat(200), '\nSchema error: ', error, '\nObject affected: ', node);
+        logger.logWarning('='.repeat(200), `\nSchemaPath: ${schemaPath}`, '\nSchema error: ', error, '\nObject affected: ', node);
       }
       return false;
     }
diff --git a/packages/geoview-core/src/api/config/uuid-config-reader.ts b/packages/geoview-core/src/api/config/uuid-config-reader.ts
index b129391f248..55bd868ee0a 100644
--- a/packages/geoview-core/src/api/config/uuid-config-reader.ts
+++ b/packages/geoview-core/src/api/config/uuid-config-reader.ts
@@ -1,7 +1,7 @@
 import axios, { AxiosResponse } from 'axios';
 
 import { TypeJsonObject, TypeJsonArray, Cast } from '@config/types/config-types';
-import { CV_CONST_LAYER_TYPES, CV_CONST_SUB_LAYER_TYPES } from '@config/types/config-constants';
+import { CV_CONST_LAYER_TYPES } from '@config/types/config-constants';
 import { createLocalizedString } from '@/core/utils/utilities';
 import { logger } from '@/core/utils/logger';
 
@@ -42,8 +42,10 @@ export class UUIDmapConfigReader {
    */
   static #getLayerConfigFromResponse(result: AxiosResponse<TypeJsonObject>, lang: string): TypeJsonObject[] {
     // If invalid response
-    if (!result?.data || !result.data.reponse || !result.data.reponse.rcs || !result.data.reponse.rcs[lang])
-      throw new Error('Invalid response from GeoCore service');
+    if (!result?.data || !result.data.reponse || !result.data.reponse.rcs || !result.data.reponse.rcs[lang]) {
+      const errorMessage = result?.data?.errorMessage || '';
+      throw new Error(`Invalid response from GeoCore service\n${errorMessage}\n`);
+    }
     if (result.data.reponse.rcs[lang].length === 0) throw new Error('No layers returned by GeoCore service');
 
     const listOfGeoviewLayerConfig: TypeJsonObject[] = [];
@@ -70,7 +72,6 @@ export class UUIDmapConfigReader {
             (geoviewLayerConfig.listOfLayerEntryConfig as TypeJsonObject[]) = (layerEntries as TypeJsonArray).map(
               (item): TypeJsonObject => {
                 return Cast<TypeJsonObject>({
-                  entryType: CV_CONST_SUB_LAYER_TYPES.RASTER_IMAGE,
                   layerId: `${item.index}`,
                 });
               }
@@ -93,7 +94,6 @@ export class UUIDmapConfigReader {
             });
             (geoviewLayerConfig.listOfLayerEntryConfig as TypeJsonObject[]) = [
               Cast<TypeJsonObject>({
-                entryType: CV_CONST_SUB_LAYER_TYPES.VECTOR,
                 layerId,
               }),
             ];
@@ -110,7 +110,6 @@ export class UUIDmapConfigReader {
             (geoviewLayerConfig.listOfLayerEntryConfig as TypeJsonObject[]) = (layerEntries as TypeJsonArray).map(
               (item): TypeJsonObject => {
                 return Cast<TypeJsonObject>({
-                  entryType: CV_CONST_SUB_LAYER_TYPES.VECTOR,
                   layerId: `${item.index}`,
                 });
               }
@@ -128,7 +127,6 @@ export class UUIDmapConfigReader {
             (geoviewLayerConfig.listOfLayerEntryConfig as TypeJsonObject[]) = (layerEntries as TypeJsonArray).map(
               (item): TypeJsonObject => {
                 return Cast<TypeJsonObject>({
-                  entryType: CV_CONST_SUB_LAYER_TYPES.RASTER_IMAGE,
                   layerId: `${item.id}`,
                   source: {
                     serverType: serverType === undefined ? 'mapserver' : serverType,
@@ -149,7 +147,6 @@ export class UUIDmapConfigReader {
             (geoviewLayerConfig.listOfLayerEntryConfig as TypeJsonObject[]) = (layerEntries as TypeJsonArray).map(
               (item): TypeJsonObject => {
                 return Cast<TypeJsonObject>({
-                  entryType: CV_CONST_SUB_LAYER_TYPES.VECTOR,
                   layerId: `${item.id}`,
                   source: {
                     format: 'WFS',
@@ -171,7 +168,6 @@ export class UUIDmapConfigReader {
             (geoviewLayerConfig.listOfLayerEntryConfig as TypeJsonObject[]) = (layerEntries as TypeJsonArray).map(
               (item): TypeJsonObject => {
                 return Cast<TypeJsonObject>({
-                  entryType: CV_CONST_SUB_LAYER_TYPES.VECTOR,
                   layerId: `${item.id}`,
                   source: {
                     format: 'featureAPI',
@@ -192,7 +188,6 @@ export class UUIDmapConfigReader {
             (geoviewLayerConfig.listOfLayerEntryConfig as TypeJsonObject[]) = (layerEntries as TypeJsonArray).map(
               (item): TypeJsonObject => {
                 return Cast<TypeJsonObject>({
-                  entryType: CV_CONST_SUB_LAYER_TYPES.VECTOR,
                   layerId: `${item.id}`,
                   source: {
                     format: 'GeoJSON',
@@ -213,7 +208,6 @@ export class UUIDmapConfigReader {
             (geoviewLayerConfig.listOfLayerEntryConfig as TypeJsonObject[]) = (layerEntries as TypeJsonArray).map(
               (item): TypeJsonObject => {
                 return Cast<TypeJsonObject>({
-                  entryType: CV_CONST_SUB_LAYER_TYPES.RASTER_TILE,
                   layerId: `${item.id}`,
                 });
               }
@@ -231,7 +225,6 @@ export class UUIDmapConfigReader {
             (geoviewLayerConfig.listOfLayerEntryConfig as TypeJsonObject[]) = (layerEntries as TypeJsonArray).map(
               (item): TypeJsonObject => {
                 return Cast<TypeJsonObject>({
-                  entryType: CV_CONST_SUB_LAYER_TYPES.RASTER_TILE,
                   layerId: `${item.id}`,
                   tileGrid: item.tileGrid,
                   source: {
@@ -253,7 +246,6 @@ export class UUIDmapConfigReader {
             (geoviewLayerConfig.listOfLayerEntryConfig as TypeJsonObject[]) = (layerEntries as TypeJsonArray).map(
               (item): TypeJsonObject => {
                 return Cast<TypeJsonObject>({
-                  entryType: CV_CONST_SUB_LAYER_TYPES.VECTOR,
                   layerId: `${item.id}`,
                   source: {
                     format: 'GeoPackage',
@@ -273,7 +265,6 @@ export class UUIDmapConfigReader {
             (geoviewLayerConfig.listOfLayerEntryConfig as TypeJsonObject[]) = (layerEntries as TypeJsonArray).map(
               (item): TypeJsonObject => {
                 return Cast<TypeJsonObject>({
-                  entryType: CV_CONST_SUB_LAYER_TYPES.RASTER_IMAGE,
                   layerId: `${item.id}`,
                 });
               }
@@ -293,7 +284,6 @@ export class UUIDmapConfigReader {
             });
             (geoviewLayerConfig.listOfLayerEntryConfig as TypeJsonObject[]) = [
               Cast<TypeJsonObject>({
-                entryType: CV_CONST_SUB_LAYER_TYPES.RASTER_IMAGE,
                 layerId: (url as string).split('/').slice(-2, -1)[0],
               }),
             ];

From e2a0715fa3b7dc3f601dda7bd641a605b7ca76f0 Mon Sep 17 00:00:00 2001
From: Yves Choquette <yves.choquette@icloud.com>
Date: Thu, 18 Jul 2024 23:36:08 -0400
Subject: [PATCH 2/3] First round of comments

---
 .../public/templates/config-sandbox.html      | 625 +++++++++---------
 .../geoview-core/src/api/config/config-api.ts |  34 +-
 .../abstract-geoview-esri-layer-config.ts     |  35 +-
 .../abstract-geoview-layer-config.ts          |  18 +-
 .../types/classes/map-feature-config.ts       |   4 +-
 .../abstract-base-layer-entry-config.ts       |  18 +-
 .../entry-config-base-class.ts                |  31 +-
 .../esri-dynamic-layer-entry-config.ts        |  19 +-
 .../esri-feature-layer-entry-config.ts        |  19 +-
 .../types/config-validation-schema.json       |   2 +-
 10 files changed, 440 insertions(+), 365 deletions(-)

diff --git a/packages/geoview-core/public/templates/config-sandbox.html b/packages/geoview-core/public/templates/config-sandbox.html
index e214fbefc9a..3b7a5cd5b36 100644
--- a/packages/geoview-core/public/templates/config-sandbox.html
+++ b/packages/geoview-core/public/templates/config-sandbox.html
@@ -120,38 +120,6 @@ <h1><strong>Sandbox Configuration</strong></h1>
         </tr>
       </tbody>
     </table>
-    <table>
-      <tbody>
-        <tr>
-          <td>
-            <span>Input Configuration</span>
-            <div class="editor">
-              <div class="line-numbers" id="inputLineNumbers">
-                <span></span>
-              </div>
-              <textarea id="configGeoview" name="configuration" cols="110">
-              </textarea>
-            </div>
-          </td>
-          <td>
-            <span>Internal configuration:</span>
-            <span id="validationMessage" >File not validated...</span>
-            <div class="editor">
-              <div class="line-numbers" id="outputLineNumbers">
-                <span></span>
-              </div>
-              <textarea id="configOutput" name="configuration" cols="110">
-              </textarea>
-            </div>
-            <div>
-              Element Displayed:
-              <select name="Element Selector" id="elementSelector">
-              </select>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
   </div>
   <div class="tab-container">
     <div class="tabs">
@@ -167,7 +135,7 @@ <h1><strong>Sandbox Configuration</strong></h1>
         The button calls the <b>ConfigApi.createMapConfig</b> method and displays the internal map configuration.</p>
         <div>
           Configuration to load:
-          <select name="Config Loader" id="configLoader">
+          <select id="configLoaderTab1">
             <option value="">--select--</option>
             <option value="./configs/validator/01-simple.json">Simple</option>
             <option value="./configs/validator/02-unique-value.json">Unique Value</option>
@@ -178,87 +146,172 @@ <h1><strong>Sandbox Configuration</strong></h1>
         </div>
       </div>
       <div>
-        <select id="language1">
+        <select id="languageTab1">
           <option value="en">English</option>
           <option value="fr">Français</option>
         </select>
-        <button id="validateConfig" style="margin-top:10px;">Create Map Config</button>
-        <button id="createMap" style="margin:10px;">Create Map</button>
-        <button id="deleteMap" style="margin:10px;">Delete map</button>
+        <button id="createMapConfigTab1" style="margin-top:10px;">Create Map Config</button>
+      </div>
+      <div>
+        <table>
+          <tbody>
+            <tr>
+              <td>
+                <span>Input Configuration</span>
+                <div class="editor">
+                  <div class="line-numbers" id="inputLineNumbersTab1">
+                    <span></span>
+                  </div>
+                  <textarea id="inputTextAreaTab1" cols="110">
+                  </textarea>
+                </div>
+                <div>
+                  &nbsp;
+                </div>
+              </td>
+              <td>
+                <span>Map configuration:</span>
+                <span id="messageTab1" >File not validated...</span>
+                <div class="editor">
+                  <div class="line-numbers" id="outputLineNumbersTab1">
+                    <span></span>
+                  </div>
+                  <textarea id="outputTextAreaTab1" cols="110">
+                  </textarea>
+                </div>
+                <div>
+                  Element Displayed:
+                  <select id="elementSelectorTab1">
+                    <option value="mapConfig">Map Config</option>
+                    <option value="geoviewLayer">GeoView Layer</option>
+                    <option value="errorFlags">Error Flags</option>
+                  </select>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
     </div>
+
     <div id="tab2" class="tab-content" style="display:none">
       <div>
-        <p>This section lets you enter and edit a GeoView service URL or a GeoCore identifier.<br />
-          If the GeoView layer type selected is wrong or unknown, you can select the right value using the drop down. <br />
-          The button calls the <b>ConfigApi.createLayerConfig</b> method and displays the resulting internal map configuration.
+        <p>This section lets you enter and edit a GeoView service URL or a GeoCore identifier. Each time the URL input changes. The <b>ConfigApi.guessLayerType</b> is called to see if the URL meets a known patern.<br />
+          If the GeoView layer type selected is wrong or unknown, you can force its value to the one you want using the drop down.<br />
+          You can also select a layer type and click the <b>Get a Sample URL</b> button to assign a value to the URL input box<br />
+          When you are ready, click the <b>Create Layer Config</b> button to call the <b>ConfigApi.createLayerConfig</b> method and displays the resulting GeoView layer configuration.
         </p>
         GeoView Layer Type:
-        <select name="Layer Type" id="geoviewLayerType">
+        <select id="geoviewLayerTypeTab2">
           <option value="unknown">unknown</option>
           <option value="esriDynamic">EsriDynamic</option>
           <option value="esriFeature">EsriFeature</option>
           <option value="geoCore">GeoCore</option>
         </select>
+        <button id="sampleUrlButtonTab2" style="margin-top:10px;">Get a Sample URL</button>
       </div>
-      <input type="text" id="serviceUrlGeoview" name="ServiceUrlconfiguration" style="width: 100%;" />
+      URL:&nbsp;
+      <input type="text" id="serviceUrlTab2" style="width: 90%;" />
       <div>
-        <select id="language2">
+        <select id="languageTab2">
           <option value="en">English</option>
           <option value="fr">Français</option>
         </select>
-        <button id="validateServiceUrlConfig" style="margin-top:10px;">Create Layer Config</button>
+        <button id="createLayerConfigTab2" style="margin-top:10px;">Create Layer Config</button>
         <p></p>
-        Sample URL:
-        <select name="Sample Selector" id="sampleUrlSelector">
-          <option value="">--select--</option>
-          <option value="esriDynamic">EsriDynamic</option>
-          <option value="esriFeature">EsriFeature</option>
-          <option value="geoCore">GeoCore</option>
-        </select>
+      </div>
+      <div style="width: 50%; margin: 0 auto; padding: 10px;">
+        <span>GeoView Layer configuration:</span>
+        <span id="messageTab2" >File not validated...</span><br/>
+        <div class="editor">
+          <div class="line-numbers" id="outputLineNumbersTab2">
+            <span></span>
+          </div>
+          <textarea id="outputTextAreaTab2" cols="110">
+          </textarea>
+        </div>
+        <div>
+          Element Displayed:
+          <select id="elementSelectorTab2">
+            <option value="geoviewLayer">GeoView Layer</option>
+            <option value="errorFlags">Error Flags</option>
+          </select>
+        </div>
       </div>
     </div>
+
     <div id="tab3" class="tab-content" style="display:none">
       <p>This section allows you to enter a string of parameters that would be written at the end of a GeoView URL.<br />
-        The button calls the <b>ConfigApi.getConfigFromUrl</b> method and displays the resulting internal map configuration.</p>
-      <span>Parameters following the service URL:</span>
-      <br />
-      <input type="text" id="configUrlGeoview" name="Urlconfiguration" style="width: 100%;"
+        The Get Config From Url button calls the <b>ConfigApi.getConfigFromUrl</b> method and displays the resulting map configuration.</p>
+      <span>Parameters following the URL:</span>
+      <input type="text" id="inputTextAreaTab3" style="width: 85%;"
              value="p=3857&z=4&c=-100,40&l=en&t=dark&b=basemapId:transport,shaded:false,labeled:true&i=dynamic&cc=overview-map&keys=12acd145-626a-49eb-b850-0a59c9bc7506,ccc75c12-5acc-4a6a-959f-ef6f621147b9">
       </input>
       <div>
-        <button id="validateUrlConfig" style="margin-top:10px;">Get Config From URL</button>
+        <button id="getConfigButtonTab3" style="margin-top:10px;">Get Config From URL</button>
+      </div>
+      <div style="width: 50%; margin: 0 auto; padding: 10px;">
+        <span>Map configuration:</span>
+        <span id="messageTab3" >File not validated...</span><br/>
+        <div class="editor">
+          <div class="line-numbers" id="outputLineNumbersTab3">
+            <span></span>
+          </div>
+          <textarea id="outputTextAreaTab3" cols="110">
+          </textarea>
+        </div>
+        <div>
+          Element Displayed:
+          <select id="elementSelectorTab3">
+            <option value="mapConfig">Map Config</option>
+            <option value="geoviewLayer">GeoView Layer</option>
+            <option value="errorFlags">Error Flags</option>
+          </select>
+        </div>
       </div>
     </div>
     <div id="tab4" class="tab-content" style="display:none">
       <div>
-        <p>This section lets you enter and edit a GeoView service URL or a GeoCore identifier.<br />
-          If the GeoView layer type selected is wrong or unknown, you can select the right value using the drop down. <br />
-          The button calls the <b>ConfigApi.createMetadataLayerTree</b> method and displays the resulting layer tree.
+        <p>This section lets you enter and edit a GeoView service URL or a GeoCore identifier. Each time the URL input changes. The <b>ConfigApi.guessLayerType</b> is called to see if the URL meets a known patern.<br />
+          If the GeoView layer type selected is wrong or unknown, you can force its value to the one you want using the drop down.<br />
+          You can also select a layer type and click the <b>Get a Sample URL</b> button to assign a value to the URL input box<br />
+          When you are ready, click the <b>Create Layer Tree</b> button to call the <b>ConfigApi.createMetadataLayerTree</b> method and displays the resulting layer tree.
         </p>
         GeoView Layer Type:
-        <select name="Layer Type" id="geoviewLayerType2">
+        <select id="geoviewLayerTypeTab4">
           <option value="unknown">unknown</option>
           <option value="esriDynamic">EsriDynamic</option>
           <option value="esriFeature">EsriFeature</option>
           <option value="geoCore">GeoCore</option>
         </select>
+        <button id="sampleUrlButtonTab4" style="margin-top:10px;">Get a Sample URL</button>
       </div>
-      <input type="text" id="serviceUrlGeoview2" name="ServiceUrlconfiguration" style="width: 100%;" />
+      URL:&nbsp;
+      <input type="text" id="serviceUrlTab4" style="width: 90%;" />
       <div>
-        <select id="language3">
+        <select id="languageTab4">
           <option value="en">English</option>
           <option value="fr">Français</option>
         </select>
-        <button id="validateServiceUrlConfig2" style="margin-top:10px;">Create Metadata Layer Tree</button>
+        <button id="createLayerConfigTab4" style="margin-top:10px;">Create Layer Tree</button>
         <p></p>
-        Sample URL:
-        <select name="Sample Selector" id="sampleUrlSelector2">
-          <option value="">--select--</option>
-          <option value="esriDynamic">EsriDynamic</option>
-          <option value="esriFeature">EsriFeature</option>
-          <option value="geoCore">GeoCore</option>
-        </select>
+      </div>
+      <div style="width: 50%; margin: 0 auto; padding: 10px;">
+        <span>GeoView Layer configuration:</span>
+        <span id="messageTab4" >File not validated...</span><br/>
+        <div class="editor">
+          <div class="line-numbers" id="outputLineNumbersTab4">
+            <span></span>
+          </div>
+          <textarea id="outputTextAreaTab4" cols="110">
+          </textarea>
+        </div>
+        <div>
+          Element Displayed:
+          <select id="elementSelectorTab4">
+            <option value="layerTree">Metadata Layer Tree</option>
+          </select>
+        </div>
       </div>
     </div>
   </div>
@@ -280,6 +333,7 @@ <h4 id="HLCONF1">Sanbox Map</h4>
   <script>
     // Utility functions ========================================================================================================
 
+    // Tab selection function
     function openTab(evt, tabName) {
       var i, tabContent, tabLinks;
 
@@ -300,27 +354,24 @@ <h4 id="HLCONF1">Sanbox Map</h4>
       evt.currentTarget.className += " active";
       switch (tabName) {
         case 'tab1':
-          document.getElementById('configLoader').dispatchEvent(new Event('change'));
-          break;
-        case 'tab2':
-          const sampleUrlSelector = document.getElementById('sampleUrlSelector');
-          sampleUrlSelector.value = document.getElementById('geoviewLayerType').value;
-          sampleUrlSelector.dispatchEvent(new Event('change'));
+          document.getElementById('configLoaderTab1').dispatchEvent(new Event('change'));
           break;
       }
     }
 
     // Element selector
     let mapConfigString, geoviewLayerString, metadataLayerTreeString, layerPathErrorFlag;
-    const elementSelector = document.getElementById('elementSelector');
-    const configOutput = document.getElementById('configOutput');
+    createElementSelector = (elementSelectorId, outputId, outputLineId) => {
+      const elementSelector = document.getElementById(elementSelectorId);
+      const configOutput = document.getElementById(outputId);
       elementSelector.addEventListener('change', (e) => {
         if (e.target.value === 'mapConfig') configOutput.value = mapConfigString;
         else if (e.target.value === 'geoviewLayer') configOutput.value = geoviewLayerString;
         else if (e.target.value === 'layerTree') configOutput.value = metadataLayerTreeString;
         else configOutput.value = layerPathErrorFlag;
-        generateLineNumbers('configOutput', 'outputLineNumbers');
+        generateLineNumbers(outputId, outputLineId);
       });
+    }
 
     // Function used to generate line numbers in the input and output containers.
     generateLineNumbers = (textContainerId, lineNumbersContainerId) => {
@@ -331,7 +382,7 @@ <h4 id="HLCONF1">Sanbox Map</h4>
       lineNumbersContainer.innerHTML = lineNumbers;
     };
 
-    // Function used to create the string that is used to display the error status of the different layerPath.
+    // Function used to create the string needed to display the error status of the different layerPath.
     generateLayerPathErrorFlag = (listOfLayerEntryConfig, buffer = '', prefix = '') => {
       listOfLayerEntryConfig.forEach((layer) => {
         buffer = buffer ? `${buffer}\n` : '';
@@ -341,10 +392,13 @@ <h4 id="HLCONF1">Sanbox Map</h4>
       return buffer;
     }
 
+    // ==========================================================================================================================
+    // Map Config Button (tab1) =================================================================================================
+
     // Config Snippet Selection Button ==========================================================================================
 
-    const configLoader = document.getElementById('configLoader');
-    configLoader.addEventListener('change', (e) => {
+    const configLoaderTab1 = document.getElementById('configLoaderTab1');
+    configLoaderTab1.addEventListener('change', (e) => {
       // fetch JSON config file to show in the text are section
       function fetchJSONData() {
         fetch(e.target.value)
@@ -356,66 +410,80 @@ <h4 id="HLCONF1">Sanbox Map</h4>
             return res.text();
           })
           .then((data) => {
-            document.getElementById('configGeoview').value = data;
-
-            generateLineNumbers('configGeoview', 'inputLineNumbers');
+            document.getElementById('inputTextAreaTab1').value = data;
+            generateLineNumbers('inputTextAreaTab1', 'inputLineNumbersTab1');
           })
           .catch((error) =>
             console.error('Unable to fetch data:', error));
       }
       fetchJSONData();
     });
-    configLoader.value = './configs/validator/01-simple.json';
-    configLoader.dispatchEvent(new Event('change'));
-
-    // Map Config Validate Button ===============================================================================================
-    const validateJSONButton = document.getElementById('validateConfig');
-
-      // add an event listener when a button is clicked
-      validateJSONButton.addEventListener('click', function (e) {
-        // get message element
-        const message = document.getElementById('validationMessage');
-        const language = document.getElementById('language1').value;
-        const configArea = document.getElementById('configGeoview');
-        const configOutput = document.getElementById('configOutput');
-
-        // get config and test if JSON is valid
-        cgpv.api.configApi.createMapConfig(configArea.value.replaceAll('"', "'").replaceAll("\\'", "\'"), language).then((mapConfig) => {
-          mapConfigString = mapConfig.serialize();
-          configOutput.value = mapConfig.serialize();
-          generateLineNumbers('configOutput', 'outputLineNumbers');
-          // set class and message
-          message.classList.add('config-json-valid');
-          message.classList.remove('config-error');
-          if (!mapConfig.errorDetected) {
-            message.innerHTML = 'Config is valid, waiting for all service metadata to be read...';
-            mapConfig.fetchAllServiceMetadata().then(() => {
-              geoviewLayerString = mapConfig.map.listOfGeoviewLayerConfig.reduce((accumulator, geoviewLayer) => {
-                return `${accumulator}== ${geoviewLayer.geoviewLayerId} ===============================================================================================\n${geoviewLayer.serialize()}\n`;
-              }, '');
-              listOfLayerEntryConfig = mapConfig.map.listOfGeoviewLayerConfig.reduce((accumulator, geoviewLayer) => {
-                return `${accumulator}== ${geoviewLayer.geoviewLayerId} ===============================================================================================\n${JSON.stringify(geoviewLayer.listOfLayerEntryConfig, undefined, 2)}\n`;
-              }, '');
-              layerPathErrorFlag = mapConfig.map.listOfGeoviewLayerConfig.reduce((accumulator, geoviewLayer) => {
-                return `${accumulator}\n${generateLayerPathErrorFlag(geoviewLayer.listOfLayerEntryConfig, `${geoviewLayer.geoviewLayerId}: ${geoviewLayer.errorDetected? 'ERROR' : 'Ok'}`)}`;
-              }, '');
-              configOutput.value = mapConfig?.serialize();
-              generateLineNumbers('configOutput', 'outputLineNumbers');
-              message.innerHTML = 'Config is valid, reading of all service metadata is complete';
-              document.getElementById('createMap').disabled = true;
-              elementSelector.innerHTML = '<option value="mapConfig">Map Config</option><option value="geoviewLayer">GeoView Layer</option><option value="errorFlags">Error Flags</option>';
-              elementSelector.value = 'mapConfig';
-              elementSelector.dispatchEvent(new Event('change'));
-            }).catch((error) => {
-              throw new Error('Error while reading metadata.');
-            });
+    configLoaderTab1.value = './configs/validator/01-simple.json';
+    configLoaderTab1.dispatchEvent(new Event('change'));
+
+    const createMapConfigButtonTab1 = document.getElementById('createMapConfigTab1');
+
+    createElementSelector('elementSelectorTab1', 'outputTextAreaTab1', 'outputLineNumbersTab1');
+    // add an event listener when a button is clicked
+    createMapConfigButtonTab1.addEventListener('click', function (e) {
+      const messageTab1 = document.getElementById('messageTab1');
+      const languageTab1 = document.getElementById('languageTab1').value;
+      const inputTextAreaTab1 = document.getElementById('inputTextAreaTab1');
+      const outputTextAreaTab1 = document.getElementById('outputTextAreaTab1');
+
+      // get config and test if JSON is valid
+      cgpv.api.configApi.createMapConfig(inputTextAreaTab1.value.replaceAll('"', "'").replaceAll("\\'", "\'"), languageTab1).then((mapConfig) => {
+        // Output instanciation result
+        mapConfigString = mapConfig.serialize();
+        outputTextAreaTab1.value = mapConfigString;
+        generateLineNumbers('outputTextAreaTab1', 'outputLineNumbersTab1');
+        messageTab1.classList.add('config-json-valid');
+        messageTab1.classList.remove('config-error');
+        messageTab1.innerHTML = 'Map Config instance is valid, waiting for all service metadata to be read...';
+        mapConfig.fetchAllServiceMetadata().then(() => {
+          const noErrorDetected = !mapConfig.map.listOfGeoviewLayerConfig.reduce((accumulator, geoviewLayer) => {
+            const subLayerError = (listOfLayerEntryConfig) => {
+              return listOfLayerEntryConfig.reduce((accumulator, subLayer) => {
+                if (subLayer.isLayerGroup) return accumulator || subLayer.errorDetected || subLayerError(subLayer.listOfLayerEntryConfig);
+                return accumulator || subLayer.errorDetected;
+              }, false);
+            }
+            return accumulator || geoviewLayer.errorDetected || subLayerError(geoviewLayer.listOfLayerEntryConfig);
+          }, false);
+          // If no geoview and sub layer error was detected
+          if (noErrorDetected) {
+            messageTab1.classList.add('config-json-valid');
+            messageTab1.classList.remove('config-error');
+            messageTab1.innerHTML = 'Map Config is valid, reading of all service metadata is complete';
           } else {
-            message.innerHTML = 'File is invalid, see console for details...';
+            messageTab1.classList.remove('config-json-valid');
+            messageTab1.classList.add('config-error');
+            messageTab1.innerHTML = 'All service metadata have been read, but the map configuration contains invalid layers.';
           }
+          mapConfigString = mapConfig.serialize();
+          geoviewLayerString = mapConfig.map.listOfGeoviewLayerConfig.reduce((accumulator, geoviewLayer) => {
+            return `${accumulator}== ${geoviewLayer.geoviewLayerId} ===============================================================================================\n${geoviewLayer.serialize()}\n`;
+          }, '');
+          layerPathErrorFlag = mapConfig.map.listOfGeoviewLayerConfig.reduce((accumulator, geoviewLayer) => {
+            return `${accumulator}${generateLayerPathErrorFlag(geoviewLayer.listOfLayerEntryConfig, `geoviewLayerId ${geoviewLayer.geoviewLayerId}: ${geoviewLayer.errorDetected? 'ERROR' : 'Ok'}\nlistOfLayerEntryConfig:`)}\n\n`;
+          }, '');
+          // Output updated instance state
+          outputTextAreaTab1.value = mapConfigString;
+          generateLineNumbers('outputTextAreaTab1', 'outputLineNumbersTab1');
+          elementSelectorTab1.value = 'mapConfig';
+          elementSelectorTab1.dispatchEvent(new Event('change'));
+        }).catch((error) => {
+          throw new Error('Error while reading metadata. We should never get this message. Errors should be traped and resolve earlyer.', error);
         });
       });
+    });
+
+      document.getElementById('inputTextAreaTab1').addEventListener('keyup', (event) => {
+        const numberOfLines = event.target.value.split('\n').length;
+        document.getElementById('inputLineNumbersTab1').innerHTML = Array(numberOfLines).fill('<span></span>').join('');
+      });
 
-    // GeoView Layer Validate Button ==============================================================================================
+    // GeoView Config Button (tab2) =============================================================================================
 
     const serviceUrlChoices = {
       geoCore: '12acd145-626a-49eb-b850-0a59c9bc7506',
@@ -423,211 +491,178 @@ <h4 id="HLCONF1">Sanbox Map</h4>
       esriFeature: 'https://maps-cartes.services.geo.ca/server_serveur/rest/services/NRCan/Temporal_Test_Bed_en/MapServer/',
     };
 
-    const GeoviewLayerTypeDropDown = document.getElementById('geoviewLayerType');
-    const sampleUrlDropDown = document.getElementById('sampleUrlSelector');
-    const serviceUrlArea = document.getElementById('serviceUrlGeoview');
+    const GeoviewLayerTypeDropDownTab2 = document.getElementById('geoviewLayerTypeTab2');
+    const sampleUrlButtonTab2 = document.getElementById('sampleUrlButtonTab2');
+    const serviceUrlAreaTab2 = document.getElementById('serviceUrlTab2');
 
-    sampleUrlDropDown.addEventListener('change', (e) => {
-      serviceUrlArea.value = serviceUrlChoices[e.target.value];
-      sampleUrlDropDown.value = '';
-      serviceUrlArea.dispatchEvent(new Event('keyup'));
+    sampleUrlButtonTab2.addEventListener('click', (e) => {
+      serviceUrlAreaTab2.value = serviceUrlChoices[GeoviewLayerTypeDropDownTab2.value];
     });
 
-    serviceUrlArea.addEventListener('keyup', (e) => {
-      GeoviewLayerTypeDropDown.value = cgpv.api.configApi.guessLayerType(serviceUrlArea.value);
-      if (!GeoviewLayerTypeDropDown.value) GeoviewLayerTypeDropDown.value = 'unknown';
+    serviceUrlAreaTab2.addEventListener('keyup', (e) => {
+      GeoviewLayerTypeDropDownTab2.value = cgpv.api.configApi.guessLayerType(serviceUrlAreaTab2.value);
+      if (!GeoviewLayerTypeDropDownTab2.value) GeoviewLayerTypeDropDownTab2.value = 'unknown';
     });
 
-    serviceUrlArea.value = serviceUrlChoices['geoCore'];
-    serviceUrlArea.dispatchEvent(new Event('keyup'));
+    serviceUrlAreaTab2.value = serviceUrlChoices['geoCore'];
+    serviceUrlAreaTab2.dispatchEvent(new Event('keyup'));
 
-    const validateServiceURLButton = document.getElementById('validateServiceUrlConfig');
+    const createLayerConfigButtonTab2 = document.getElementById('createLayerConfigTab2');
 
+    createElementSelector('elementSelectorTab2', 'outputTextAreaTab2', 'outputLineNumbersTab2');
     // add an event listener when the button is clicked
-    validateServiceURLButton.addEventListener('click', function (e) {
-      // get message element
-      const layerType = document.getElementById('geoviewLayerType').value;
-      const message = document.getElementById('validationMessage');
-      const language = document.getElementById('language2').value;
-      const configArea = document.getElementById('configGeoview');
-      const serviceUrlArea = document.getElementById('serviceUrlGeoview');
-      const configOutput = document.getElementById('configOutput');
-
-      configArea.value = serviceUrlArea.value;
+    createLayerConfigButtonTab2.addEventListener('click', function (e) {
+      const layerTypeTab2 = document.getElementById('geoviewLayerTypeTab2').value;
+      const messageTab2 = document.getElementById('messageTab2');
+      const languageTab2 = document.getElementById('languageTab2').value;
+      const serviceUrlAreaTab2 = document.getElementById('serviceUrlTab2');
+      const outputTextAreaTab2 = document.getElementById('outputTextAreaTab2');
+
       // get config and test if URL Config is valid
-      const returnedValue = cgpv.api.configApi.createLayerConfig(serviceUrlArea.value.trim(), layerType, [], language);
-      returnedValue.then((geoviewLayerConfig) => {
-        configOutput.value = geoviewLayerConfig?.serialize();
-        generateLineNumbers('configOutput', 'outputLineNumbers');
-
-        // set class and message
-        message.classList.add('config-json-valid');
-        message.classList.remove('config-error');
+      cgpv.api.configApi.createLayerConfig(serviceUrlAreaTab2.value.trim(), layerTypeTab2, [], languageTab2).then((geoviewLayerConfig) => {
         if (geoviewLayerConfig && !geoviewLayerConfig.errorDetected) {
-          message.innerHTML = 'URL is valid, waiting for service metadata to be read...';
+          messageTab2.classList.add('config-json-valid');
+          messageTab2.classList.remove('config-error');
+          messageTab2.innerHTML = 'GeoView Instance is valid, waiting for service metadata to be read...';
+          outputTextAreaTab2.value = geoviewLayerConfig?.serialize();
+          generateLineNumbers('outputTextAreaTab2', 'outputLineNumbersTab2');
 
           geoviewLayerConfig.fetchServiceMetadata().then(() => {
+            const subLayerError = (listOfLayerEntryConfig) => {
+              return listOfLayerEntryConfig.reduce((accumulator, subLayer) => {
+                if (subLayer.isLayerGroup) return accumulator || subLayer.errorDetected || subLayerError(subLayer.listOfLayerEntryConfig);
+                return accumulator || subLayer.errorDetected;
+              }, false);
+            }
+            if  (geoviewLayerConfig.errorDetected || subLayerError(geoviewLayerConfig.listOfLayerEntryConfig)) {
+              messageTab2.classList.remove('config-json-valid');
+              messageTab2.classList.add('config-error');
+              messageTab2.innerHTML = 'All service metadata have been read, but the GeoView configuration contains invalid layers.';
+            } else {
+              messageTab2.classList.add('config-json-valid');
+              messageTab2.classList.remove('config-error');
+              messageTab2.innerHTML = 'GeoView configuration is valid, reading of all service metadata is complete';
+            }
             geoviewLayerString = geoviewLayerConfig?.serialize();
-            layerPathErrorFlag = generateLayerPathErrorFlag(geoviewLayerConfig.listOfLayerEntryConfig, `${geoviewLayerConfig.geoviewLayerId}: ${geoviewLayerConfig.errorDetected? 'ERROR' : 'Ok'}`);
-            message.innerHTML = 'URL is valid, reading of service metadata is complete';
-            document.getElementById('createMap').disabled = true;
-            elementSelector.innerHTML = '<option value="geoviewLayer">GeoView Layer</option><option value="errorFlags">Error Flags</option>';
-            elementSelector.value = 'geoviewLayer';
-            elementSelector.dispatchEvent(new Event('change'));
+            layerPathErrorFlag = generateLayerPathErrorFlag(geoviewLayerConfig.listOfLayerEntryConfig, `geoviewLayerId ${geoviewLayerConfig.geoviewLayerId}: ${geoviewLayerConfig.errorDetected? 'ERROR' : 'Ok'}\nlistOfLayerEntryConfig:`);
+            elementSelectorTab2.value = 'geoviewLayer';
+            elementSelectorTab2.dispatchEvent(new Event('change'));
           });
         } else {
-          message.innerHTML = 'URL is invalid, see console for details...';
+          messageTab2.classList.remove('config-json-valid');
+          messageTab2.classList.add('config-error');
+          messageTab2.innerHTML = 'URL is invalid, see console for details...';
         }
       });
     });
 
-    // Config Url Validate Button =======================================================================================================
-    const configUrlArea = document.getElementById('configUrlGeoview');
-    configUrlArea.value = configUrlArea.value.trim();
-    const validateURLButton = document.getElementById('validateUrlConfig');
-
-      // add an event listener when the button is clicked
-      validateURLButton.addEventListener('click', function (e) {
-        // get message element
-        const message = document.getElementById('validationMessage');
-        const configArea = document.getElementById('configGeoview');
-        const configUrlArea = document.getElementById('configUrlGeoview');
-        const configOutput = document.getElementById('configOutput');
-
-        configArea.value = configUrlArea.value;
-        // get config and test if URL Config is valid
-        const returnedValue = cgpv.api.configApi.getConfigFromUrl(configUrlArea.value.trim());
-        returnedValue.then((mapConfig) => {
-          if (!mapConfig.errorDetected) {
-            mapConfig.fetchAllServiceMetadata().then(() => {
-              configOutput.value = mapConfig.serialize();
-              mapConfigString = mapConfig.serialize();
-              geoviewLayerString = mapConfig.map.listOfGeoviewLayerConfig.reduce((accumulator, geoviewLayer) => {
-                return `${accumulator}== ${geoviewLayer.geoviewLayerId} ===============================================================================================\n${geoviewLayer.serialize()}\n`;
-              }, '');
-              layerPathErrorFlag = mapConfig.map.listOfGeoviewLayerConfig.reduce((accumulator, geoviewLayer) => {
-                return `${accumulator}\n${generateLayerPathErrorFlag(geoviewLayer.listOfLayerEntryConfig, `${geoviewLayer.geoviewLayerId}: ${geoviewLayer.errorDetected? 'ERROR' : 'Ok'}`)}`;
-              }, '');
-              generateLineNumbers('configOutput', 'outputLineNumbers');
-
-              // set class and message
-              message.classList.add('config-json-valid');
-              message.classList.remove('config-error');
-              message.innerHTML = 'File is valid, see console for details...';
-              document.getElementById('createMap').disabled = true;
-              elementSelector.innerHTML = '<option value="mapConfig">Map Config</option><option value="geoviewLayer">GeoView Layer</option><option value="errorFlags">Error Flags</option>';
-              elementSelector.value = 'mapConfig';
-              elementSelector.dispatchEvent(new Event('change'));
-            });
+    // Config Url Validate Button (tab3) ========================================================================================
+    const inputTextAreaTab3 = document.getElementById('inputTextAreaTab3');
+    inputTextAreaTab3.value = inputTextAreaTab3.value.trim();
+    const getConfigButtonTab3 = document.getElementById('getConfigButtonTab3');
+
+    getConfigButtonTab3.addEventListener('click', function (e) {
+      const messageTab3 = document.getElementById('messageTab3');
+      const outputTextAreaTab3 = document.getElementById('outputTextAreaTab3');
+
+      createElementSelector('elementSelectorTab3', 'outputTextAreaTab3', 'outputLineNumbersTab3');
+      // get config and test if URL Config is valid
+      cgpv.api.configApi.getConfigFromUrl(inputTextAreaTab3.value.trim()).then((mapConfig) => {
+        // Output instanciation result
+        mapConfigString = mapConfig.serialize();
+        outputTextAreaTab3.value = mapConfigString;
+        generateLineNumbers('outputTextAreaTab3', 'outputLineNumbersTab3');
+        messageTab3.classList.add('config-json-valid');
+        messageTab3.classList.remove('config-error');
+        messageTab3.innerHTML = 'Map Config instance is valid, waiting for all service metadata to be read...';
+        mapConfig.fetchAllServiceMetadata().then(() => {
+          const noErrorDetected = !mapConfig.map.listOfGeoviewLayerConfig.reduce((accumulator, geoviewLayer) => {
+            const subLayerError = (listOfLayerEntryConfig) => {
+              return listOfLayerEntryConfig.reduce((accumulator, subLayer) => {
+                if (subLayer.isLayerGroup) return accumulator || subLayer.errorDetected || subLayerError(subLayer.listOfLayerEntryConfig);
+                return accumulator || subLayer.errorDetected;
+              }, false);
+            }
+            return accumulator || geoviewLayer.errorDetected || subLayerError(geoviewLayer.listOfLayerEntryConfig);
+          }, false);
+          // If no geoview and sub layer error was detected
+          if (noErrorDetected) {
+            messageTab3.classList.add('config-json-valid');
+            messageTab3.classList.remove('config-error');
+            messageTab3.innerHTML = 'Map Config is valid, reading of all service metadata is complete';
           } else {
-            message.innerHTML = 'File is invalid, see console for details...';
+            messageTab3.classList.remove('config-json-valid');
+            messageTab3.classList.add('config-error');
+            messageTab3.innerHTML = 'All service metadata have been read, but the map configuration contains invalid layers.';
           }
+          mapConfigString = mapConfig.serialize();
+          geoviewLayerString = mapConfig.map.listOfGeoviewLayerConfig.reduce((accumulator, geoviewLayer) => {
+            return `${accumulator}== ${geoviewLayer.geoviewLayerId} ===============================================================================================\n${geoviewLayer.serialize()}\n`;
+          }, '');
+          layerPathErrorFlag = mapConfig.map.listOfGeoviewLayerConfig.reduce((accumulator, geoviewLayer) => {
+            return `${accumulator}${generateLayerPathErrorFlag(geoviewLayer.listOfLayerEntryConfig, `geoviewLayerId ${geoviewLayer.geoviewLayerId}: ${geoviewLayer.errorDetected? 'ERROR' : 'Ok'}\nlistOfLayerEntryConfig:`)}\n\n`;
+          }, '');
+          // Output updated instance state
+          outputTextAreaTab3.value = mapConfigString;
+          generateLineNumbers('outputTextAreaTab3', 'outputLineNumbersTab3');
+          elementSelectorTab3.value = 'mapConfig';
+          elementSelectorTab3.dispatchEvent(new Event('change'));
+        }).catch((error) => {
+          throw new Error('Error while reading metadata. We should never get this message. Errors should be traped and resolve earlyer.', error);
         });
       });
+    });
 
-    // Metadata Layer Tree Button ===============================================================================================
+    // Metadata Layer Tree Button (tab4) ========================================================================================
 
-    const GeoviewLayerTypeDropDown2 = document.getElementById('geoviewLayerType2');
-    const sampleUrlDropDown2 = document.getElementById('sampleUrlSelector2');
-    const serviceUrlArea2 = document.getElementById('serviceUrlGeoview2');
+    const GeoviewLayerTypeDropDownTab4 = document.getElementById('geoviewLayerTypeTab4');
+    const sampleUrlButtonTab4 = document.getElementById('sampleUrlButtonTab4');
+    const serviceUrlAreaTab4 = document.getElementById('serviceUrlTab4');
 
-    sampleUrlDropDown2.addEventListener('change', (e) => {
-      serviceUrlArea2.value = serviceUrlChoices[e.target.value];
-      sampleUrlDropDown2.value = '';
-      serviceUrlArea2.dispatchEvent(new Event('keyup'));
+    sampleUrlButtonTab4.addEventListener('click', (e) => {
+      serviceUrlAreaTab4.value = serviceUrlChoices[GeoviewLayerTypeDropDownTab4.value];
     });
 
-    serviceUrlArea2.addEventListener('keyup', (e) => {
-      GeoviewLayerTypeDropDown2.value = cgpv.api.configApi.guessLayerType(serviceUrlArea2.value);
-      if (!GeoviewLayerTypeDropDown2.value) GeoviewLayerTypeDropDown2.value = 'unknown';
+    serviceUrlAreaTab4.addEventListener('keyup', (e) => {
+      GeoviewLayerTypeDropDownTab4.value = cgpv.api.configApi.guessLayerType(serviceUrlAreaTab4.value);
+      if (!GeoviewLayerTypeDropDownTab4.value) GeoviewLayerTypeDropDownTab4.value = 'unknown';
     });
 
-    serviceUrlArea2.value = serviceUrlChoices['geoCore'];
-    serviceUrlArea2.dispatchEvent(new Event('keyup'));
+    serviceUrlAreaTab4.value = serviceUrlChoices['geoCore'];
+    serviceUrlAreaTab4.dispatchEvent(new Event('keyup'));
 
-    const validateServiceURLButton2 = document.getElementById('validateServiceUrlConfig2');
+    const createLayerConfigButtonTab4 = document.getElementById('createLayerConfigTab4');
 
+    createElementSelector('elementSelectorTab4', 'outputTextAreaTab4', 'outputLineNumbersTab4');
     // add an event listener when the button is clicked
-    validateServiceURLButton2.addEventListener('click', function (e) {
-      // get message element
-      const layerType = document.getElementById('geoviewLayerType2').value;
-      const message = document.getElementById('validationMessage');
-      const language = document.getElementById('language3').value;
-      const configArea = document.getElementById('configGeoview');
-      const serviceUrlArea2 = document.getElementById('serviceUrlGeoview2');
-      const configOutput = document.getElementById('configOutput');
-
-      configArea.value = serviceUrlArea2.value;
-      // get config and test if URL Config is valid
-      const returnedValue = cgpv.api.configApi.createMetadataLayerTree(serviceUrlArea2.value.trim(), layerType, [], language);
-      returnedValue.then((metadataLayerTree) => {
-        configOutput.value = `${JSON.stringify(metadataLayerTree, undefined, 2)}\n`;
-        generateLineNumbers('configOutput', 'outputLineNumbers');
+    createLayerConfigButtonTab4.addEventListener('click', function (e) {
+      const layerTypeTab4 = document.getElementById('geoviewLayerTypeTab4').value;
+      const messageTab4 = document.getElementById('messageTab4');
+      const languageTab4 = document.getElementById('languageTab4').value;
+      const inputTextAreaTab4 = document.getElementById('configGeoview');
+      const serviceUrlAreaTab4 = document.getElementById('serviceUrlTab4');
+      const outputTextAreaTab4 = document.getElementById('outputTextAreaTab4');
+
+      // get layer tree
+      cgpv.api.configApi.createMetadataLayerTree(serviceUrlAreaTab4.value.trim(), layerTypeTab4, [], languageTab4).then((metadataLayerTree) => {
+        outputTextAreaTab4.value = `${JSON.stringify(metadataLayerTree, undefined, 2)}\n`;
+        generateLineNumbers('outputTextAreaTab4', 'outputLineNumbersTab4');
 
-        // set class and message
         if (metadataLayerTree) {
-          message.classList.add('config-json-valid');
-          message.classList.remove('config-error');
-          message.innerHTML = 'URL is valid';
+          messageTab4.classList.add('config-json-valid');
+          messageTab4.classList.remove('config-error');
+          messageTab4.innerHTML = 'URL is valid';
           metadataLayerTreeString = `${JSON.stringify(metadataLayerTree, undefined, 2)}\n`;
-          document.getElementById('createMap').disabled = true;
-          elementSelector.innerHTML = '<option value="layerTree">Metadata Layer Tree</option>';
-          elementSelector.value = 'layerTree';
-          elementSelector.dispatchEvent(new Event('change'));
+          elementSelectorTab4.value = 'layerTree';
+          elementSelectorTab4.dispatchEvent(new Event('change'));
         } else {
-          message.classList.remove('config-json-valid');
-          message.classList.add('config-error');
-          message.innerHTML = 'URL is invalid, see console for details...';
+          messageTab4.classList.remove('config-json-valid');
+          messageTab4.classList.add('config-error');
+          messageTab4.innerHTML = 'URL is invalid, see console for details...';
         }
       });
     });
 
-    // Create Button ====================================================================================================================
-    const createMapButton = document.getElementById('createMap');
-    createMapButton.disabled = true;
-
-      // add an event listener when a button is clicked
-      createMapButton.addEventListener('click', function (e) {
-        // delete old map
-        cgpv.api.maps['sandboxMap']?.remove(true);
-
-        // create new map in a new dom node
-        const newDiv = document.createElement('div');
-        const a = document.createAttribute('id');
-        a.value = 'sandboxMap';
-        newDiv.setAttributeNode(a);
-        document.getElementById('mapSection').appendChild(newDiv);
-
-        // create map
-        cgpv.api.createMapFromConfig('sandboxMap', document.getElementById('configOutput').value);
-      });
-
-      const deleteMapButton = document.getElementById('deleteMap');
-      deleteMapButton.disabled = true;
-
-      // add an event listener when a button is clicked
-      deleteMapButton.addEventListener('click', function (e) {
-        // Delete the map
-        cgpv.api.maps['sandboxMap'].remove(true);
-      });
-
-    // Editor script section ============================================================================================================
-    const textarea = document.querySelector('textarea');
-    const lineNumbers = document.querySelector('.line-numbers');
-
-      // set default number of lines
-      const numberOfLines = textarea.value.split('\n').length;
-      lineNumbers.innerHTML = Array(numberOfLines).fill('<span></span>').join('');
-
-      textarea.addEventListener('keyup', (event) => {
-        const numberOfLines = event.target.value.split('\n').length;
-        lineNumbers.innerHTML = Array(numberOfLines).fill('<span></span>').join('');
-      });
-
-      textarea.addEventListener('input', (event) => {
-        document.getElementById('createMap').disabled = true;
-      });
-
       // create snippets
       window.addEventListener('load', () => {
         createCodeSnippet();
diff --git a/packages/geoview-core/src/api/config/config-api.ts b/packages/geoview-core/src/api/config/config-api.ts
index 0e7ebf85d3c..2411effb6c2 100644
--- a/packages/geoview-core/src/api/config/config-api.ts
+++ b/packages/geoview-core/src/api/config/config-api.ts
@@ -218,21 +218,26 @@ export class ConfigApi {
       };
 
       // get layer information from catalog using their uuid's if any passed from url params
+      // and store it in the listOfGeoviewLayerConfig of the map.
       if (urlParams.keys) {
         try {
-          // Get the layers config
-          const promise = UUIDmapConfigReader.getGVConfigFromUUIDs(
+          // Get the GeoView layer configurations from the GeoCore UUIDs provided (urlParams.keys is a CSV string of UUIDs).
+          const listOfGeoviewLayerConfig = await UUIDmapConfigReader.getGVConfigFromUUIDs(
             CV_DEFAULT_MAP_FEATURE_CONFIG.serviceUrls.geocoreUrl,
-            displayLanguage.split('-')[0],
+            displayLanguage,
             urlParams.keys.toString().split(',')
           );
-          const listOfGeoviewLayerConfig = await promise;
+
+          // The listOfGeoviewLayerConfig returned by the previous call appended 'rcs.' at the beginning and
+          // '.en' or '.fr' at the end of the UUIDs. We want to restore the ids as they were before.
           listOfGeoviewLayerConfig.forEach((layerConfig, i) => {
             (listOfGeoviewLayerConfig[i].geoviewLayerId as string) = (layerConfig.geoviewLayerId as string).slice(4, -3);
           });
+
+          // Store the new computed listOfGeoviewLayerConfig in the map.
           (jsonConfig.map.listOfGeoviewLayerConfig as TypeJsonObject[]) = listOfGeoviewLayerConfig;
         } catch (error) {
-          // Log
+          // Log the error. The listOfGeoviewLayerConfig returned will be [].
           logger.logError('Failed to get the GeoView layers from url keys', urlParams.keys, error);
         }
       }
@@ -429,12 +434,13 @@ export class ConfigApi {
       // will be executed to try to correct the problem in the best possible way.
       ConfigApi.lastMapConfigCreated = new MapFeatureConfig(providedMapFeatureConfig!, language);
       if (errorDetected) ConfigApi.lastMapConfigCreated.setErrorDetectedFlag();
+      await ConfigApi.lastMapConfigCreated.fetchAllServiceMetadata();
     } catch (error) {
       // If we get here, it is because the user provided a string config that cannot be translated to a json object,
       // or the config doesn't have the mandatory map property or the listOfGeoviewLayerConfig is defined but is not
       // an array.
       if (error instanceof MapConfigError) logger.logError(error.message);
-      else logger.logError('ConfigApi.validateMapConfig - An error occured', error);
+      else logger.logError('ConfigApi.createMapConfig - An error occured', error);
       const defaultMapConfig = ConfigApi.getDefaultMapFeatureConfig(language);
       defaultMapConfig.setErrorDetectedFlag();
       ConfigApi.lastMapConfigCreated = defaultMapConfig;
@@ -462,29 +468,33 @@ export class ConfigApi {
     language: TypeDisplayLanguage = 'en'
   ): Promise<AbstractGeoviewLayerConfig | undefined> {
     let geoviewLayerConfig: TypeJsonObject | undefined;
-    const listOfLayerEntryConfig = listOfLayerId.map((layerId) => {
-      return { layerId };
-    });
+
+    // If the lyerType is a GeoCore, we translate it to its GeoView configuration.
     if (layerType === CV_CONFIG_GEOCORE_TYPE) {
       try {
         const layerConfig = { geoviewLayerId: serviceAccessString, geoviewLayerType: layerType };
         geoviewLayerConfig = (await ConfigApi.convertGeocoreToGeoview(language, Cast<TypeJsonObject>(layerConfig))) as TypeJsonObject;
+        // if the conversion returned an undefined GeoView configuration or throw an error,
+        // we return undefined to signal that we cannot create the GeoView layer.
         if (!geoviewLayerConfig) return undefined;
       } catch (error) {
         logger.logError(`Unable to convert GeoCore layer (Id=${serviceAccessString}).`);
         return undefined;
       }
     } else {
+      // Create a GeoView Json configuration object.
       geoviewLayerConfig = Cast<TypeJsonObject>({
         geoviewLayerId: generateId(),
         geoviewLayerName: { en: 'unknown', fr: 'inconnu' },
         geoviewLayerType: layerType,
         metadataAccessPath: { en: serviceAccessString, fr: serviceAccessString },
-        listOfLayerEntryConfig,
+        listOfLayerEntryConfig: listOfLayerId.map((layerId) => {
+          return { layerId };
+        }),
       });
     }
 
-    // Create a layer configuration instance and validate it against the schema.
+    // Create the GeoView layer configuration instance and validate it against the schema.
     ConfigApi.lastLayerConfigCreated = MapFeatureConfig.nodeFactory(geoviewLayerConfig, language);
     return ConfigApi.lastLayerConfigCreated;
   }
@@ -500,8 +510,6 @@ export class ConfigApi {
    * @returns {EntryConfigBaseClass[]} The metadata layer tree.
    * @static
    */
-  // GV: GeoCore layers are processed here, well before the schema validation. The aim is to get rid of these layers in
-  // GV: favor of their GeoView equivalent as soon as possible.
   static async createMetadataLayerTree(
     serviceAccessString: string,
     layerType: TypeGeoviewLayerType | typeof CV_CONFIG_GEOCORE_TYPE,
diff --git a/packages/geoview-core/src/api/config/types/classes/geoview-config/abstract-geoview-esri-layer-config.ts b/packages/geoview-core/src/api/config/types/classes/geoview-config/abstract-geoview-esri-layer-config.ts
index 6cbf486ef96..ac741ee5f8f 100644
--- a/packages/geoview-core/src/api/config/types/classes/geoview-config/abstract-geoview-esri-layer-config.ts
+++ b/packages/geoview-core/src/api/config/types/classes/geoview-config/abstract-geoview-esri-layer-config.ts
@@ -1,6 +1,6 @@
 import axios from 'axios';
 
-import { Cast, TypeJsonObject } from '@config/types/config-types';
+import { Cast, toJsonObject, TypeJsonObject, TypeJsonArray } from '@config/types/config-types';
 import { AbstractBaseLayerEntryConfig } from '@config/types/classes/sub-layer-config/abstract-base-layer-entry-config';
 import { AbstractGeoviewLayerConfig } from '@config/types/classes/geoview-config/abstract-geoview-layer-config';
 import { TypeDisplayLanguage, TypeStyleGeometry } from '@config/types/map-schema-types';
@@ -11,7 +11,6 @@ import { EntryConfigBaseClass } from '@/api/config/types/classes/sub-layer-confi
 
 import { getXMLHttpRequest } from '@/core/utils/utilities';
 import { logger } from '@/core/utils/logger';
-import { TypeJsonArray } from '@/app';
 
 /** The ESRI dynamic geoview layer class. */
 export abstract class AbstractGeoviewEsriLayerConfig extends AbstractGeoviewLayerConfig {
@@ -60,12 +59,25 @@ export abstract class AbstractGeoviewEsriLayerConfig extends AbstractGeoviewLaye
   override async fetchServiceMetadata(): Promise<void> {
     const metadataString = await getXMLHttpRequest(`${this.metadataAccessPath}?f=json`);
     if (metadataString !== '{}') {
-      const jsonMetadata = JSON.parse(metadataString) as TypeJsonObject;
+      let jsonMetadata: TypeJsonObject;
+      try {
+        // On rare occasions, the value returned is not a JSON string, but rather an HTML string, which is an error.
+        jsonMetadata = JSON.parse(metadataString);
+      } catch (error) {
+        jsonMetadata = toJsonObject({ error });
+      }
+      // Other than the error generated above, if the returned JSON object is valid and contains the error property, something went wrong
       if ('error' in jsonMetadata) {
+        // In the event of a service metadata reading error, we report the geoview layer and all its sublayers as being in error.
         this.setErrorDetectedFlag();
+        this.#setErrorDetectedFlagForAllLayers(this.listOfLayerEntryConfig);
         logger.logError(`Error detected while reading ESRI metadata for geoview layer ${this.geoviewLayerId}.`, jsonMetadata.error);
       } else {
         this.metadata = jsonMetadata;
+
+        // Define a recursive function to process the listOfLayerEntryConfig. The goal is to process each valid sublayer, searching the
+        // service's metadata to verify the layer's existence and determine whether it is a layer group, in order to determine the node's
+        // final structure. If it is a layer group, it will be created.
         const processListOfLayerEntryConfig = (listOfLayerEntryConfig: EntryConfigBaseClass[]): void => {
           listOfLayerEntryConfig.forEach((subLayer, i) => {
             if (!subLayer.errorDetected) {
@@ -82,12 +94,14 @@ export abstract class AbstractGeoviewEsriLayerConfig extends AbstractGeoviewLaye
             }
           });
         };
+
+        // Call the function defined above.
         processListOfLayerEntryConfig(this.listOfLayerEntryConfig);
-        await this.#fetchListOfLayerMetadata(this.metadataLayerTree);
         this.metadataLayerTree = this.createLayerTree();
       }
     } else {
       this.setErrorDetectedFlag();
+      this.#setErrorDetectedFlagForAllLayers(this.listOfLayerEntryConfig);
       logger.logError(`Error detected while reading ESRI metadata for geoview layer ${this.geoviewLayerId}. An empty object was returned.`);
     }
   }
@@ -197,15 +211,16 @@ export abstract class AbstractGeoviewEsriLayerConfig extends AbstractGeoviewLaye
   async #fetchListOfLayerMetadata(listOfLayerEntryConfig: EntryConfigBaseClass[]): Promise<void> {
     const listOfLayerMetadata: Promise<TypeJsonObject | void>[] = [];
     listOfLayerEntryConfig.forEach((subLayerConfig) => {
-      if (layerEntryIsGroupLayer(subLayerConfig)) {
-        listOfLayerMetadata.push(this.#fetchListOfLayerMetadata(subLayerConfig.listOfLayerEntryConfig));
-      } else if (layerEntryIsAbstractBaseLayerEntryConfig(subLayerConfig)) {
-        listOfLayerMetadata.push(subLayerConfig.fetchLayerMetadata());
+      if (!subLayerConfig.errorDetected) {
+        if (layerEntryIsGroupLayer(subLayerConfig)) {
+          listOfLayerMetadata.push(this.#fetchListOfLayerMetadata(subLayerConfig.listOfLayerEntryConfig));
+        } else if (layerEntryIsAbstractBaseLayerEntryConfig(subLayerConfig)) {
+          listOfLayerMetadata.push(subLayerConfig.fetchLayerMetadata());
+        }
       }
     });
 
-    const result = await Promise.allSettled(listOfLayerMetadata);
-    logger.logInfo('fetchListOfLayerMetadata done', result);
+    await Promise.allSettled(listOfLayerMetadata);
   }
 
   /** ***************************************************************************************************************************
diff --git a/packages/geoview-core/src/api/config/types/classes/geoview-config/abstract-geoview-layer-config.ts b/packages/geoview-core/src/api/config/types/classes/geoview-config/abstract-geoview-layer-config.ts
index b3cb5fec698..686206926bc 100644
--- a/packages/geoview-core/src/api/config/types/classes/geoview-config/abstract-geoview-layer-config.ts
+++ b/packages/geoview-core/src/api/config/types/classes/geoview-config/abstract-geoview-layer-config.ts
@@ -55,14 +55,21 @@ export abstract class AbstractGeoviewLayerConfig {
   /** Boolean indicating if the layer should be included in time awareness functions such as the Time Slider. True by default. */
   isTimeAware: boolean | undefined;
 
-  /**
-   * Initial settings to apply to the GeoView layer at creation time.
-   */
-  initialSettings!: TypeLayerInitialSettings;
-
   /** The layer entries to use from the GeoView layer. */
   listOfLayerEntryConfig: EntryConfigBaseClass[] = [];
 
+  // GV NOTE START ****************************************************************************************************
+  // The following attribute uses the 'definite assignment assertion' (! after the property name) to indicate that
+  // it will not be null or undefined when used. It is not initialized by the constructor but rather by the metadata
+  // processing methods or ultimately by the applyDefaultValueToUndefinedFields method executed following metadata
+  // processing. I'm writing it here, simply, explicitly, to make it clear that this AbstractGeoviewLayerConfig class
+  // owns (and expects) this attribute.
+
+  /** Initial settings to apply to the GeoView layer at creation time. */
+  initialSettings!: TypeLayerInitialSettings;
+
+  // GV NOTE END *****************************************************************************************************
+
   /**
    * The class constructor saves a cloned copy of the Geoview configuration supplied by the user and runs a validation on it to
    * find any errors that may have been made. It only initalizes the properties needed to query the service and layer metadata.
@@ -139,7 +146,6 @@ export abstract class AbstractGeoviewLayerConfig {
 
   /**
    * Apply default value to undefined fields.
-   *
    */
   applyDefaultValueToUndefinedFields(): void {
     this.serviceDateFormat = this.serviceDateFormat || 'DD/MM/YYYY HH:MM:SSZ';
diff --git a/packages/geoview-core/src/api/config/types/classes/map-feature-config.ts b/packages/geoview-core/src/api/config/types/classes/map-feature-config.ts
index b988a93a5f7..503f0472e24 100644
--- a/packages/geoview-core/src/api/config/types/classes/map-feature-config.ts
+++ b/packages/geoview-core/src/api/config/types/classes/map-feature-config.ts
@@ -108,9 +108,7 @@ export class MapFeatureConfig {
     );
     this.map.listOfGeoviewLayerConfig = (gvMap.listOfGeoviewLayerConfig as TypeJsonArray)
       .map((geoviewLayerConfig) => {
-        const returnValue = MapFeatureConfig.nodeFactory(geoviewLayerConfig, this.#language);
-        if (returnValue === undefined) this.#errorDetected = true;
-        return returnValue;
+        return MapFeatureConfig.nodeFactory(geoviewLayerConfig, this.#language);
       })
       .filter((layerConfig) => {
         return layerConfig;
diff --git a/packages/geoview-core/src/api/config/types/classes/sub-layer-config/abstract-base-layer-entry-config.ts b/packages/geoview-core/src/api/config/types/classes/sub-layer-config/abstract-base-layer-entry-config.ts
index ff1d9cf695f..2563ba9eb7f 100644
--- a/packages/geoview-core/src/api/config/types/classes/sub-layer-config/abstract-base-layer-entry-config.ts
+++ b/packages/geoview-core/src/api/config/types/classes/sub-layer-config/abstract-base-layer-entry-config.ts
@@ -1,12 +1,5 @@
-import defaultsDeep from 'lodash/defaultsDeep';
-
 import { TypeJsonObject } from '@config/types/config-types';
-import {
-  TypeBaseSourceInitialConfig,
-  TypeTemporalDimension,
-  TypeStyleGeometry,
-  TypeLayerInitialSettings,
-} from '@config/types/map-schema-types';
+import { TypeBaseSourceInitialConfig, TypeTemporalDimension, TypeStyleGeometry } from '@config/types/map-schema-types';
 import { EntryConfigBaseClass } from '@/api/config/types/classes/sub-layer-config/entry-config-base-class';
 
 /**
@@ -17,7 +10,7 @@ export abstract class AbstractBaseLayerEntryConfig extends EntryConfigBaseClass
   #metadata: TypeJsonObject = {};
 
   /** The geometry type of the leaf node. */
-  geometryType!: TypeStyleGeometry;
+  geometryType?: TypeStyleGeometry;
 
   /** Source settings to apply to the GeoView vector layer source at creation time. */
   source?: TypeBaseSourceInitialConfig;
@@ -25,13 +18,6 @@ export abstract class AbstractBaseLayerEntryConfig extends EntryConfigBaseClass
   /** Optional temporal dimension. */
   temporalDimension?: TypeTemporalDimension;
 
-  /**
-   * Apply default value to undefined fields.
-   */
-  override applyDefaultValueToUndefinedFields(initialSettings: TypeLayerInitialSettings): void {
-    this.initialSettings = defaultsDeep(this.initialSettings, initialSettings);
-  }
-
   /**
    * Fetch the layer metadata from the metadataAccessPath and store it in a private variable of the sub-layer.
    *
diff --git a/packages/geoview-core/src/api/config/types/classes/sub-layer-config/entry-config-base-class.ts b/packages/geoview-core/src/api/config/types/classes/sub-layer-config/entry-config-base-class.ts
index beaf3f1eaba..c6db0339dc5 100644
--- a/packages/geoview-core/src/api/config/types/classes/sub-layer-config/entry-config-base-class.ts
+++ b/packages/geoview-core/src/api/config/types/classes/sub-layer-config/entry-config-base-class.ts
@@ -1,3 +1,5 @@
+import defaultsDeep from 'lodash/defaultsDeep';
+
 import { TypeJsonObject } from '@config/types/config-types';
 import { AbstractGeoviewLayerConfig } from '@config/types/classes/geoview-config/abstract-geoview-layer-config';
 import {
@@ -36,26 +38,35 @@ export abstract class EntryConfigBaseClass {
   layerName?: string;
 
   /** Attributions obtained from the configuration or the metadata. */
-  attributions!: string[];
+  attributions: string[] = [];
 
   /** Bounds (in lat long) obtained from the metadata or calculated from the layers */
   bounds: Extent | undefined;
 
+  /** Layer entry data type. */
+  entryType: TypeLayerEntryType;
+
+  // GV NOTE START ****************************************************************************************************
+  // The following attributes use the 'definite assignment assertion' (! after the property name) to indicate that
+  // these properties will not be null or undefined when used. They are not initialized by the constructor but rather
+  // by the metadata processing methods or ultimately by the applyDefaultValueToUndefinedFields method executed
+  // following metadata processing. I'm writing them here, simply, explicitly, to make it clear that this
+  // EntryConfigBaseClass class owns (and expects) these attributes.
+
   /** The min scale that can be reach by the layer. */
   minScale!: number;
 
   /** The max scale that can be reach by the layer. */
   maxScale!: number;
 
-  /** Layer entry data type. */
-  entryType: TypeLayerEntryType;
-
   /**
    * Initial settings to apply to the GeoView layer entry at creation time. Initial settings are inherited from the parent in the
    * configuration tree.
    */
   initialSettings!: TypeLayerInitialSettings;
 
+  // GV NOTE END *****************************************************************************************************
+
   /**
    * The class constructor use the sublayer configuration supplied by the user and runs a validation on it to find any errors that
    * may have been made. It only initalizes the properties needed to query the layer metadata for leaf nodes or to create a the
@@ -93,10 +104,16 @@ export abstract class EntryConfigBaseClass {
   }
 
   /**
-   * Apply default value to undefined fields.
-   * @abstract
+   * Apply default value to undefined fields. The default values to be used for the initialSettings are
+   * inherited from the object that owns this sublayer instance.
+   *
+   * @param {TypeLayerInitialSettings} initialSettings The initial settings inherited by the parent container.
    */
-  abstract applyDefaultValueToUndefinedFields(initialSettings: TypeLayerInitialSettings): void;
+  applyDefaultValueToUndefinedFields(initialSettings: TypeLayerInitialSettings): void {
+    this.initialSettings = defaultsDeep(this.initialSettings, initialSettings);
+    this.minScale = this.minScale || 0;
+    this.maxScale = this.maxScale || 0;
+  }
 
   /**
    * The getter method that returns the schemaPath property. Each geoview sublayer type knows what section of the schema must be
diff --git a/packages/geoview-core/src/api/config/types/classes/sub-layer-config/raster-leaf/esri-dynamic-layer-entry-config.ts b/packages/geoview-core/src/api/config/types/classes/sub-layer-config/raster-leaf/esri-dynamic-layer-entry-config.ts
index 6d8fbfef681..723062b4e91 100644
--- a/packages/geoview-core/src/api/config/types/classes/sub-layer-config/raster-leaf/esri-dynamic-layer-entry-config.ts
+++ b/packages/geoview-core/src/api/config/types/classes/sub-layer-config/raster-leaf/esri-dynamic-layer-entry-config.ts
@@ -2,7 +2,12 @@ import { defaultsDeep } from 'lodash';
 
 import { CV_CONST_SUB_LAYER_TYPES, CV_CONST_LEAF_LAYER_SCHEMA_PATH } from '@config/types/config-constants';
 import { AbstractBaseEsriLayerEntryConfig } from '@config/types/classes/sub-layer-config/abstract-base-esri-layer-entry-config';
-import { TypeStyleConfig, TypeLayerEntryType, TypeSourceEsriDynamicInitialConfig } from '@config/types/map-schema-types';
+import {
+  TypeStyleConfig,
+  TypeLayerEntryType,
+  TypeSourceEsriDynamicInitialConfig,
+  TypeLayerInitialSettings,
+} from '@config/types/map-schema-types';
 
 /**
  * The ESRI dynamic geoview sublayer class.
@@ -15,13 +20,13 @@ export class EsriDynamicLayerEntryConfig extends AbstractBaseEsriLayerEntryConfi
   style?: TypeStyleConfig;
 
   /**
-   * This method is the last to be called in the sequence of configuration parameter assignment according to the preceding rules,
-   * the first being the assignment of user parameters and the second the assignment of metadata. Configuration parameters that
-   * already have a value are not changed when a subsequent assignment phase takes place. In other words, default value assignment
-   * does not change an already initialized metadata parameter, and metadata assignment does not change the value of a user-supplied
-   * parameter.
+   * Apply default value to undefined fields. The default values to be used for the initialSettings are
+   * inherited from the object that owns this sublayer instance.
+   *
+   * @param {TypeLayerInitialSettings} initialSettings The initial settings inherited by the parent container.
    */
-  protected applyDefaultsValues(): void {
+  override applyDefaultValueToUndefinedFields(initialSettings: TypeLayerInitialSettings): void {
+    super.applyDefaultValueToUndefinedFields(initialSettings);
     this.source = defaultsDeep(this.source, { maxRecordCount: 0, format: 'png', featureInfo: { queryable: false } });
   }
 
diff --git a/packages/geoview-core/src/api/config/types/classes/sub-layer-config/vector-leaf/esri-feature-layer-entry-config.ts b/packages/geoview-core/src/api/config/types/classes/sub-layer-config/vector-leaf/esri-feature-layer-entry-config.ts
index 5f51256d158..890188146f2 100644
--- a/packages/geoview-core/src/api/config/types/classes/sub-layer-config/vector-leaf/esri-feature-layer-entry-config.ts
+++ b/packages/geoview-core/src/api/config/types/classes/sub-layer-config/vector-leaf/esri-feature-layer-entry-config.ts
@@ -2,7 +2,12 @@ import { defaultsDeep } from 'lodash';
 
 import { CV_CONST_SUB_LAYER_TYPES, CV_CONST_LEAF_LAYER_SCHEMA_PATH } from '@config/types/config-constants';
 import { AbstractBaseEsriLayerEntryConfig } from '@config/types/classes/sub-layer-config/abstract-base-esri-layer-entry-config';
-import { TypeStyleConfig, TypeLayerEntryType, TypeSourceEsriFeatureInitialConfig } from '@config/types/map-schema-types';
+import {
+  TypeStyleConfig,
+  TypeLayerEntryType,
+  TypeSourceEsriFeatureInitialConfig,
+  TypeLayerInitialSettings,
+} from '@config/types/map-schema-types';
 
 /**
  * The ESRI feature geoview sublayer class.
@@ -24,13 +29,13 @@ export class EsriFeatureLayerEntryConfig extends AbstractBaseEsriLayerEntryConfi
   }
 
   /**
-   * This method is the last to be called in the sequence of configuration parameter assignment according to the preceding rules,
-   * the first being the assignment of user parameters and the second the assignment of metadata. Configuration parameters that
-   * already have a value are not changed when a subsequent assignment phase takes place. In other words, default value assignment
-   * does not change an already initialized metadata parameter, and metadata assignment does not change the value of a user-supplied
-   * parameter.
+   * Apply default value to undefined fields. The default values to be used for the initialSettings are
+   * inherited from the object that owns this sublayer instance.
+   *
+   * @param {TypeLayerInitialSettings} initialSettings The initial settings inherited by the parent container.
    */
-  protected applyDefaultsValues(): void {
+  override applyDefaultValueToUndefinedFields(initialSettings: TypeLayerInitialSettings): void {
+    super.applyDefaultValueToUndefinedFields(initialSettings);
     this.source = defaultsDeep(this.source, { maxRecordCount: 0, format: 'EsriJSON', featureInfo: { queryable: false } });
   }
 
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
index 9b536a5ddda..84afa234153 100644
--- a/packages/geoview-core/src/api/config/types/config-validation-schema.json
+++ b/packages/geoview-core/src/api/config/types/config-validation-schema.json
@@ -435,7 +435,7 @@
           }
         }
       },
-      "required": ["geoviewLayerType", "listOfLayerEntryConfig"]
+      "required": ["geoviewLayerType", "metadataAccessPath", "listOfLayerEntryConfig"]
     },
     "TypeListOfLayerEntryConfig": {
       "description": "The list of layer configurations. The AbstractGeoviewLayerConfig validation ends here. The only thing we need to verify for the moment is it must be an array of at least one element.",

From 25fcf9e4a408b0359e78de9ce8cd043478d5aa18 Mon Sep 17 00:00:00 2001
From: Yves Choquette <yves.choquette@icloud.com>
Date: Fri, 19 Jul 2024 14:34:40 -0400
Subject: [PATCH 3/3] Adding comments in config-sandbox.html

---
 .../public/templates/config-sandbox.html      | 234 +++++++++++-------
 1 file changed, 143 insertions(+), 91 deletions(-)

diff --git a/packages/geoview-core/public/templates/config-sandbox.html b/packages/geoview-core/public/templates/config-sandbox.html
index 3b7a5cd5b36..fb8be7a98c5 100644
--- a/packages/geoview-core/public/templates/config-sandbox.html
+++ b/packages/geoview-core/public/templates/config-sandbox.html
@@ -116,7 +116,7 @@ <h1><strong>Sandbox Configuration</strong></h1>
     <table>
       <tbody>
         <tr>
-          <td>This page is used to test map configuration.</td>
+          <td>This page is used to test the ConfigApi.</td>
         </tr>
       </tbody>
     </table>
@@ -197,7 +197,7 @@ <h1><strong>Sandbox Configuration</strong></h1>
     <div id="tab2" class="tab-content" style="display:none">
       <div>
         <p>This section lets you enter and edit a GeoView service URL or a GeoCore identifier. Each time the URL input changes. The <b>ConfigApi.guessLayerType</b> is called to see if the URL meets a known patern.<br />
-          If the GeoView layer type selected is wrong or unknown, you can force its value to the one you want using the drop down.<br />
+          If the GeoView layer type selected is wrong or unknown, you can force its value to the one you want using the drop-down.<br />
           You can also select a layer type and click the <b>Get a Sample URL</b> button to assign a value to the URL input box<br />
           When you are ready, click the <b>Create Layer Config</b> button to call the <b>ConfigApi.createLayerConfig</b> method and displays the resulting GeoView layer configuration.
         </p>
@@ -273,7 +273,7 @@ <h1><strong>Sandbox Configuration</strong></h1>
     <div id="tab4" class="tab-content" style="display:none">
       <div>
         <p>This section lets you enter and edit a GeoView service URL or a GeoCore identifier. Each time the URL input changes. The <b>ConfigApi.guessLayerType</b> is called to see if the URL meets a known patern.<br />
-          If the GeoView layer type selected is wrong or unknown, you can force its value to the one you want using the drop down.<br />
+          If the GeoView layer type selected is wrong or unknown, you can force its value to the one you want using the drop-down.<br />
           You can also select a layer type and click the <b>Get a Sample URL</b> button to assign a value to the URL input box<br />
           When you are ready, click the <b>Create Layer Tree</b> button to call the <b>ConfigApi.createMetadataLayerTree</b> method and displays the resulting layer tree.
         </p>
@@ -282,7 +282,6 @@ <h1><strong>Sandbox Configuration</strong></h1>
           <option value="unknown">unknown</option>
           <option value="esriDynamic">EsriDynamic</option>
           <option value="esriFeature">EsriFeature</option>
-          <option value="geoCore">GeoCore</option>
         </select>
         <button id="sampleUrlButtonTab4" style="margin-top:10px;">Get a Sample URL</button>
       </div>
@@ -333,7 +332,7 @@ <h4 id="HLCONF1">Sanbox Map</h4>
   <script>
     // Utility functions ========================================================================================================
 
-    // Tab selection function
+    // Tab selection function. This function is called when you clickmon a tab to select and display its content.
     function openTab(evt, tabName) {
       var i, tabContent, tabLinks;
 
@@ -359,8 +358,11 @@ <h4 id="HLCONF1">Sanbox Map</h4>
       }
     }
 
-    // Element selector
+    // Element selector. ========================================================================================================
+    //global variables used by all tabs to keep the information to display for each type of item managed by the selector.
     let mapConfigString, geoviewLayerString, metadataLayerTreeString, layerPathErrorFlag;
+
+    // This function creates the listener callback used when the selector drop-down at the bottom of the output zone changes.
     createElementSelector = (elementSelectorId, outputId, outputLineId) => {
       const elementSelector = document.getElementById(elementSelectorId);
       const configOutput = document.getElementById(outputId);
@@ -382,6 +384,18 @@ <h4 id="HLCONF1">Sanbox Map</h4>
       lineNumbersContainer.innerHTML = lineNumbers;
     };
 
+    // Function used to display messages to report progression of the process.
+    printMessage = (messageObject, messageString, status) => {
+      if (status === 'error') {
+        messageObject.classList.remove('config-json-valid');
+        messageObject.classList.add('config-error');
+      } else {
+        messageObject.classList.add('config-json-valid');
+        messageObject.classList.remove('config-error');
+      }
+      messageObject.innerHTML = messageString;
+    }
+
     // Function used to create the string needed to display the error status of the different layerPath.
     generateLayerPathErrorFlag = (listOfLayerEntryConfig, buffer = '', prefix = '') => {
       listOfLayerEntryConfig.forEach((layer) => {
@@ -397,6 +411,7 @@ <h4 id="HLCONF1">Sanbox Map</h4>
 
     // Config Snippet Selection Button ==========================================================================================
 
+    // This listener is attached to the drop-down box that allow the users to select the configuration to test.
     const configLoaderTab1 = document.getElementById('configLoaderTab1');
     configLoaderTab1.addEventListener('change', (e) => {
       // fetch JSON config file to show in the text are section
@@ -418,30 +433,39 @@ <h4 id="HLCONF1">Sanbox Map</h4>
       }
       fetchJSONData();
     });
+
+    // Set the initial configuration of the drop-down to 'Simple' and load it
     configLoaderTab1.value = './configs/validator/01-simple.json';
     configLoaderTab1.dispatchEvent(new Event('change'));
 
-    const createMapConfigButtonTab1 = document.getElementById('createMapConfigTab1');
-
+    // Create the listener for the Element Displayed drop-down located at the bottom of the output zone.
     createElementSelector('elementSelectorTab1', 'outputTextAreaTab1', 'outputLineNumbersTab1');
-    // add an event listener when a button is clicked
+
+    // Create the listener for the 'Create Map Config' button
+    const createMapConfigButtonTab1 = document.getElementById('createMapConfigTab1');
     createMapConfigButtonTab1.addEventListener('click', function (e) {
+      // Get the message field located at the top of the output zone.
       const messageTab1 = document.getElementById('messageTab1');
+      // Get the value of the language button.
       const languageTab1 = document.getElementById('languageTab1').value;
+      // Get the textarea used to input the configuration.
       const inputTextAreaTab1 = document.getElementById('inputTextAreaTab1');
+      // Get the textarea used to output the resulting json object.
       const outputTextAreaTab1 = document.getElementById('outputTextAreaTab1');
 
-      // get config and test if JSON is valid
+      // Call the ConfigApi to get the mapFeatureConfig
       cgpv.api.configApi.createMapConfig(inputTextAreaTab1.value.replaceAll('"', "'").replaceAll("\\'", "\'"), languageTab1).then((mapConfig) => {
         // Output instanciation result
         mapConfigString = mapConfig.serialize();
         outputTextAreaTab1.value = mapConfigString;
         generateLineNumbers('outputTextAreaTab1', 'outputLineNumbersTab1');
-        messageTab1.classList.add('config-json-valid');
-        messageTab1.classList.remove('config-error');
-        messageTab1.innerHTML = 'Map Config instance is valid, waiting for all service metadata to be read...';
+        printMessage(messageTab1, 'Map Config instance is valid, waiting for all service metadata to be read...');
+
+        // fetch service metadata for all map layers.
         mapConfig.fetchAllServiceMetadata().then(() => {
+          // Scan the layer structure to see if there is an eroneous layer.
           const noErrorDetected = !mapConfig.map.listOfGeoviewLayerConfig.reduce((accumulator, geoviewLayer) => {
+            // Create a recursive function that scans the layer structure for erroneous sublayers. This function is used in the following line.
             const subLayerError = (listOfLayerEntryConfig) => {
               return listOfLayerEntryConfig.reduce((accumulator, subLayer) => {
                 if (subLayer.isLayerGroup) return accumulator || subLayer.errorDetected || subLayerError(subLayer.listOfLayerEntryConfig);
@@ -450,16 +474,12 @@ <h4 id="HLCONF1">Sanbox Map</h4>
             }
             return accumulator || geoviewLayer.errorDetected || subLayerError(geoviewLayer.listOfLayerEntryConfig);
           }, false);
+
           // If no geoview and sub layer error was detected
-          if (noErrorDetected) {
-            messageTab1.classList.add('config-json-valid');
-            messageTab1.classList.remove('config-error');
-            messageTab1.innerHTML = 'Map Config is valid, reading of all service metadata is complete';
-          } else {
-            messageTab1.classList.remove('config-json-valid');
-            messageTab1.classList.add('config-error');
-            messageTab1.innerHTML = 'All service metadata have been read, but the map configuration contains invalid layers.';
-          }
+          if (noErrorDetected) printMessage(messageTab1, 'Map Config is valid, reading of all service metadata is complete');
+          else printMessage(messageTab1, 'All service metadata have been read, but the map configuration contains invalid layers.', 'error');
+
+          // Set the global variables associated to the Element Display zone.
           mapConfigString = mapConfig.serialize();
           geoviewLayerString = mapConfig.map.listOfGeoviewLayerConfig.reduce((accumulator, geoviewLayer) => {
             return `${accumulator}== ${geoviewLayer.geoviewLayerId} ===============================================================================================\n${geoviewLayer.serialize()}\n`;
@@ -467,116 +487,140 @@ <h4 id="HLCONF1">Sanbox Map</h4>
           layerPathErrorFlag = mapConfig.map.listOfGeoviewLayerConfig.reduce((accumulator, geoviewLayer) => {
             return `${accumulator}${generateLayerPathErrorFlag(geoviewLayer.listOfLayerEntryConfig, `geoviewLayerId ${geoviewLayer.geoviewLayerId}: ${geoviewLayer.errorDetected? 'ERROR' : 'Ok'}\nlistOfLayerEntryConfig:`)}\n\n`;
           }, '');
-          // Output updated instance state
+
+          // Output the new map feature config representation.
           outputTextAreaTab1.value = mapConfigString;
           generateLineNumbers('outputTextAreaTab1', 'outputLineNumbersTab1');
+
+          // Initialize the Element Displayed drop-down to display the map feature configuration.
           elementSelectorTab1.value = 'mapConfig';
           elementSelectorTab1.dispatchEvent(new Event('change'));
         }).catch((error) => {
+          printMessage(messageTab1, 'An unexpected error occured, see console for more details.', 'error');
           throw new Error('Error while reading metadata. We should never get this message. Errors should be traped and resolve earlyer.', error);
         });
       });
     });
 
-      document.getElementById('inputTextAreaTab1').addEventListener('keyup', (event) => {
-        const numberOfLines = event.target.value.split('\n').length;
-        document.getElementById('inputLineNumbersTab1').innerHTML = Array(numberOfLines).fill('<span></span>').join('');
-      });
+    // Create the listener that will update the input textarea and its line numbers while you edit it.
+    document.getElementById('inputTextAreaTab1').addEventListener('keyup', (event) => {
+      const numberOfLines = event.target.value.split('\n').length;
+      document.getElementById('inputLineNumbersTab1').innerHTML = Array(numberOfLines).fill('<span></span>').join('');
+    });
 
     // GeoView Config Button (tab2) =============================================================================================
 
-    const serviceUrlChoices = {
+    // Definition of the samples that will be returned when you click on the 'Get a Sample URL' button.
+    const serviceUrlChoicesTab2 = {
       geoCore: '12acd145-626a-49eb-b850-0a59c9bc7506',
       esriDynamic: 'https://maps-cartes.ec.gc.ca/arcgis/rest/services/CESI/MapServer/',
       esriFeature: 'https://maps-cartes.services.geo.ca/server_serveur/rest/services/NRCan/Temporal_Test_Bed_en/MapServer/',
     };
 
+    // Get the GeoView Layer Type drop-down object used to select the type of layer.
     const GeoviewLayerTypeDropDownTab2 = document.getElementById('geoviewLayerTypeTab2');
+    // Get the 'Get a Sample URL' button object used to initialize the URL input field with a sample URL.
     const sampleUrlButtonTab2 = document.getElementById('sampleUrlButtonTab2');
+    // Get the URL input field object used to enter and edit the service URL.
     const serviceUrlAreaTab2 = document.getElementById('serviceUrlTab2');
 
+    // Sample button listener that set the URL based on the GeoView Layer Type drop-down value.
     sampleUrlButtonTab2.addEventListener('click', (e) => {
-      serviceUrlAreaTab2.value = serviceUrlChoices[GeoviewLayerTypeDropDownTab2.value];
+      serviceUrlAreaTab2.value = serviceUrlChoicesTab2[GeoviewLayerTypeDropDownTab2.value];
     });
 
+    // Input field listener that will call the config api guessLayerType service and set the GeoView Layer
+    // Type drop-down with the resulting value.
     serviceUrlAreaTab2.addEventListener('keyup', (e) => {
       GeoviewLayerTypeDropDownTab2.value = cgpv.api.configApi.guessLayerType(serviceUrlAreaTab2.value);
       if (!GeoviewLayerTypeDropDownTab2.value) GeoviewLayerTypeDropDownTab2.value = 'unknown';
     });
 
-    serviceUrlAreaTab2.value = serviceUrlChoices['geoCore'];
+    // Initialise the GeoView Layer Type drop-down value and set input field accordingly
+    serviceUrlAreaTab2.value = serviceUrlChoicesTab2['geoCore'];
     serviceUrlAreaTab2.dispatchEvent(new Event('keyup'));
 
-    const createLayerConfigButtonTab2 = document.getElementById('createLayerConfigTab2');
-
+    // Create the listener for the 'Create Layer Config' button
     createElementSelector('elementSelectorTab2', 'outputTextAreaTab2', 'outputLineNumbersTab2');
-    // add an event listener when the button is clicked
-    createLayerConfigButtonTab2.addEventListener('click', function (e) {
+
+    // Get the Create Layer Config button object and attach to it a to trigger the service call
+    document.getElementById('createLayerConfigTab2').addEventListener('click', function (e) {
+      // Get the Geoview layer Type value.
       const layerTypeTab2 = document.getElementById('geoviewLayerTypeTab2').value;
+      // Get the message field located at the top of the output zone.
       const messageTab2 = document.getElementById('messageTab2');
+      // Get the value of the language button.
       const languageTab2 = document.getElementById('languageTab2').value;
+      // Get the input field object used to input the URL.
       const serviceUrlAreaTab2 = document.getElementById('serviceUrlTab2');
+      // Get the output textarea object used to display the GeoView Layer Config.
       const outputTextAreaTab2 = document.getElementById('outputTextAreaTab2');
 
-      // get config and test if URL Config is valid
+      // Call the ConfigApi to get the GeoView Layer Config
       cgpv.api.configApi.createLayerConfig(serviceUrlAreaTab2.value.trim(), layerTypeTab2, [], languageTab2).then((geoviewLayerConfig) => {
         if (geoviewLayerConfig && !geoviewLayerConfig.errorDetected) {
-          messageTab2.classList.add('config-json-valid');
-          messageTab2.classList.remove('config-error');
-          messageTab2.innerHTML = 'GeoView Instance is valid, waiting for service metadata to be read...';
+          printMessage(messageTab2, 'GeoView Instance is valid, waiting for service metadata to be read...');
+
+          // Output instanciation result
           outputTextAreaTab2.value = geoviewLayerConfig?.serialize();
           generateLineNumbers('outputTextAreaTab2', 'outputLineNumbersTab2');
 
+          // Fetch service metadata
           geoviewLayerConfig.fetchServiceMetadata().then(() => {
+            // Create a recursive function that scans the layer structure for erroneous sublayers. This function is used in the following line.
             const subLayerError = (listOfLayerEntryConfig) => {
               return listOfLayerEntryConfig.reduce((accumulator, subLayer) => {
                 if (subLayer.isLayerGroup) return accumulator || subLayer.errorDetected || subLayerError(subLayer.listOfLayerEntryConfig);
                 return accumulator || subLayer.errorDetected;
               }, false);
             }
-            if  (geoviewLayerConfig.errorDetected || subLayerError(geoviewLayerConfig.listOfLayerEntryConfig)) {
-              messageTab2.classList.remove('config-json-valid');
-              messageTab2.classList.add('config-error');
-              messageTab2.innerHTML = 'All service metadata have been read, but the GeoView configuration contains invalid layers.';
-            } else {
-              messageTab2.classList.add('config-json-valid');
-              messageTab2.classList.remove('config-error');
-              messageTab2.innerHTML = 'GeoView configuration is valid, reading of all service metadata is complete';
-            }
+
+            // If an error is detected
+            if  (geoviewLayerConfig.errorDetected || subLayerError(geoviewLayerConfig.listOfLayerEntryConfig))
+              printMessage(messageTab2, 'All service metadata have been read, but the GeoView configuration contains invalid layers.', 'error');
+            else printMessage(messageTab2, 'GeoView configuration is valid, reading of all service metadata is complete');
+
+            // Set the global variables associated to the Element Display zone.
             geoviewLayerString = geoviewLayerConfig?.serialize();
             layerPathErrorFlag = generateLayerPathErrorFlag(geoviewLayerConfig.listOfLayerEntryConfig, `geoviewLayerId ${geoviewLayerConfig.geoviewLayerId}: ${geoviewLayerConfig.errorDetected? 'ERROR' : 'Ok'}\nlistOfLayerEntryConfig:`);
+
+            // Output the new GeoView Layer config representation.
             elementSelectorTab2.value = 'geoviewLayer';
             elementSelectorTab2.dispatchEvent(new Event('change'));
           });
         } else {
-          messageTab2.classList.remove('config-json-valid');
-          messageTab2.classList.add('config-error');
-          messageTab2.innerHTML = 'URL is invalid, see console for details...';
+          printMessage(messageTab2, 'URL is invalid, see console for details...', 'error');
         }
       });
     });
 
     // Config Url Validate Button (tab3) ========================================================================================
+    // Get the input field object used to enter and edit the URL parameter string.
     const inputTextAreaTab3 = document.getElementById('inputTextAreaTab3');
-    inputTextAreaTab3.value = inputTextAreaTab3.value.trim();
-    const getConfigButtonTab3 = document.getElementById('getConfigButtonTab3');
 
-    getConfigButtonTab3.addEventListener('click', function (e) {
+    // Get the 'Get Config From URL' button object and attach a listener to trigger the service call.
+    document.getElementById('getConfigButtonTab3').addEventListener('click', function (e) {
+      // Get the message field located at the top of the output zone.
       const messageTab3 = document.getElementById('messageTab3');
+      // Get the output textarea object used to display the Map Feature Config.
       const outputTextAreaTab3 = document.getElementById('outputTextAreaTab3');
 
+      // Create the listener for the 'Create Layer Config' button
       createElementSelector('elementSelectorTab3', 'outputTextAreaTab3', 'outputLineNumbersTab3');
-      // get config and test if URL Config is valid
+
+      // Call the ConfigApi to get the Map Feature Config using the getConfigFromUrl method.
       cgpv.api.configApi.getConfigFromUrl(inputTextAreaTab3.value.trim()).then((mapConfig) => {
         // Output instanciation result
         mapConfigString = mapConfig.serialize();
         outputTextAreaTab3.value = mapConfigString;
         generateLineNumbers('outputTextAreaTab3', 'outputLineNumbersTab3');
-        messageTab3.classList.add('config-json-valid');
-        messageTab3.classList.remove('config-error');
-        messageTab3.innerHTML = 'Map Config instance is valid, waiting for all service metadata to be read...';
+        printMessage(messageTab3, 'Map Config instance is valid, waiting for all service metadata to be read...');
+
+        // fetch service metadata for all map layers.
         mapConfig.fetchAllServiceMetadata().then(() => {
+          // Scan the layer structure to see if there is an eroneous layer.
           const noErrorDetected = !mapConfig.map.listOfGeoviewLayerConfig.reduce((accumulator, geoviewLayer) => {
+            // Create a recursive function that scans the layer structure for erroneous sublayers. This function is used in the following line.
             const subLayerError = (listOfLayerEntryConfig) => {
               return listOfLayerEntryConfig.reduce((accumulator, subLayer) => {
                 if (subLayer.isLayerGroup) return accumulator || subLayer.errorDetected || subLayerError(subLayer.listOfLayerEntryConfig);
@@ -585,16 +629,12 @@ <h4 id="HLCONF1">Sanbox Map</h4>
             }
             return accumulator || geoviewLayer.errorDetected || subLayerError(geoviewLayer.listOfLayerEntryConfig);
           }, false);
+
           // If no geoview and sub layer error was detected
-          if (noErrorDetected) {
-            messageTab3.classList.add('config-json-valid');
-            messageTab3.classList.remove('config-error');
-            messageTab3.innerHTML = 'Map Config is valid, reading of all service metadata is complete';
-          } else {
-            messageTab3.classList.remove('config-json-valid');
-            messageTab3.classList.add('config-error');
-            messageTab3.innerHTML = 'All service metadata have been read, but the map configuration contains invalid layers.';
-          }
+          if (noErrorDetected) printMessage(messageTab3, 'Map Config is valid, reading of all service metadata is complete');
+          else printMessage(messageTab3, 'All service metadata have been read, but the map configuration contains invalid layers.', 'error');
+
+          // Set the global variables associated to the Element Display zone.
           mapConfigString = mapConfig.serialize();
           geoviewLayerString = mapConfig.map.listOfGeoviewLayerConfig.reduce((accumulator, geoviewLayer) => {
             return `${accumulator}== ${geoviewLayer.geoviewLayerId} ===============================================================================================\n${geoviewLayer.serialize()}\n`;
@@ -602,10 +642,13 @@ <h4 id="HLCONF1">Sanbox Map</h4>
           layerPathErrorFlag = mapConfig.map.listOfGeoviewLayerConfig.reduce((accumulator, geoviewLayer) => {
             return `${accumulator}${generateLayerPathErrorFlag(geoviewLayer.listOfLayerEntryConfig, `geoviewLayerId ${geoviewLayer.geoviewLayerId}: ${geoviewLayer.errorDetected? 'ERROR' : 'Ok'}\nlistOfLayerEntryConfig:`)}\n\n`;
           }, '');
-          // Output updated instance state
+
+          // Output the new map feature config representation.
           outputTextAreaTab3.value = mapConfigString;
           generateLineNumbers('outputTextAreaTab3', 'outputLineNumbersTab3');
           elementSelectorTab3.value = 'mapConfig';
+
+          // Initialize the Element Displayed drop-down to display the map feature configuration.
           elementSelectorTab3.dispatchEvent(new Event('change'));
         }).catch((error) => {
           throw new Error('Error while reading metadata. We should never get this message. Errors should be traped and resolve earlyer.', error);
@@ -615,59 +658,68 @@ <h4 id="HLCONF1">Sanbox Map</h4>
 
     // Metadata Layer Tree Button (tab4) ========================================================================================
 
+    // Definition of the samples that will be returned when you click on the 'Get a Sample URL' button.
+    const serviceUrlChoicesTab4 = {
+      esriDynamic: 'https://maps-cartes.ec.gc.ca/arcgis/rest/services/CESI/MapServer/',
+      esriFeature: 'https://maps-cartes.services.geo.ca/server_serveur/rest/services/NRCan/Temporal_Test_Bed_en/MapServer/',
+    };
+
+    // Get the GeoView Layer Type drop-down object used to select the type of layer.
     const GeoviewLayerTypeDropDownTab4 = document.getElementById('geoviewLayerTypeTab4');
+    // Get the 'Get a Sample URL' button object used to initialize the URL input field with a sample URL.
     const sampleUrlButtonTab4 = document.getElementById('sampleUrlButtonTab4');
+    // Get the URL input field object used to enter and edit the service URL.
     const serviceUrlAreaTab4 = document.getElementById('serviceUrlTab4');
 
+    // Sample button listener that set the URL based on the GeoView Layer Type drop-down value.
     sampleUrlButtonTab4.addEventListener('click', (e) => {
-      serviceUrlAreaTab4.value = serviceUrlChoices[GeoviewLayerTypeDropDownTab4.value];
+      serviceUrlAreaTab4.value = serviceUrlChoicesTab4[GeoviewLayerTypeDropDownTab4.value];
     });
 
+    // Input field listener that will call the config api guessLayerType service and set the GeoView Layer
+    // Type drop-down with the resulting value.
     serviceUrlAreaTab4.addEventListener('keyup', (e) => {
       GeoviewLayerTypeDropDownTab4.value = cgpv.api.configApi.guessLayerType(serviceUrlAreaTab4.value);
       if (!GeoviewLayerTypeDropDownTab4.value) GeoviewLayerTypeDropDownTab4.value = 'unknown';
     });
 
-    serviceUrlAreaTab4.value = serviceUrlChoices['geoCore'];
+    // Initialise the GeoView Layer Type drop-down value and set input field accordingly
+    serviceUrlAreaTab4.value = serviceUrlChoicesTab4['esriDynamic'];
     serviceUrlAreaTab4.dispatchEvent(new Event('keyup'));
 
+    // Create the listener for the Element Displayed drop-down located at the bottom of the output zone.
     const createLayerConfigButtonTab4 = document.getElementById('createLayerConfigTab4');
 
+    // Create the listener for the 'Create Layer Tree' button
     createElementSelector('elementSelectorTab4', 'outputTextAreaTab4', 'outputLineNumbersTab4');
-    // add an event listener when the button is clicked
     createLayerConfigButtonTab4.addEventListener('click', function (e) {
+      // Get the Geoview layer Type value.
       const layerTypeTab4 = document.getElementById('geoviewLayerTypeTab4').value;
+      // Get the message field located at the top of the output zone.
       const messageTab4 = document.getElementById('messageTab4');
+      // Get the value of the language button.
       const languageTab4 = document.getElementById('languageTab4').value;
-      const inputTextAreaTab4 = document.getElementById('configGeoview');
+      // Get the input field object used to input the URL.
       const serviceUrlAreaTab4 = document.getElementById('serviceUrlTab4');
+      // Get the output textarea object used to display the Layer Tree.
       const outputTextAreaTab4 = document.getElementById('outputTextAreaTab4');
 
-      // get layer tree
+      // Call the ConfigApi to get the Layer Tree
       cgpv.api.configApi.createMetadataLayerTree(serviceUrlAreaTab4.value.trim(), layerTypeTab4, [], languageTab4).then((metadataLayerTree) => {
+        // Output instanciation result
         outputTextAreaTab4.value = `${JSON.stringify(metadataLayerTree, undefined, 2)}\n`;
         generateLineNumbers('outputTextAreaTab4', 'outputLineNumbersTab4');
 
-        if (metadataLayerTree) {
-          messageTab4.classList.add('config-json-valid');
-          messageTab4.classList.remove('config-error');
-          messageTab4.innerHTML = 'URL is valid';
-          metadataLayerTreeString = `${JSON.stringify(metadataLayerTree, undefined, 2)}\n`;
-          elementSelectorTab4.value = 'layerTree';
-          elementSelectorTab4.dispatchEvent(new Event('change'));
-        } else {
-          messageTab4.classList.remove('config-json-valid');
-          messageTab4.classList.add('config-error');
-          messageTab4.innerHTML = 'URL is invalid, see console for details...';
-        }
+        if (metadataLayerTree) printMessage(messageTab4, 'URL is valid');
+        else printMessage(messageTab4, 'URL is invalid, see console for details...', 'error')
       });
     });
 
-      // create snippets
-      window.addEventListener('load', () => {
-        createCodeSnippet();
-        createConfigSnippet();
-      });
-    </script>
-  </body>
+    // create snippets
+    window.addEventListener('load', () => {
+      createCodeSnippet();
+      createConfigSnippet();
+    });
+  </script>
+</body>
 </html>