diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index fb5e7ce802a..dba073a6695 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -893,7 +893,7 @@ packages: dependencies: '@babel/compat-data': 7.23.5 '@babel/helper-validator-option': 7.23.5 - browserslist: 4.22.3 + browserslist: 4.23.0 lru-cache: 5.1.1 semver: 6.3.1 dev: true @@ -2700,8 +2700,8 @@ packages: '@jridgewell/trace-mapping': 0.3.22 dev: true - /@jridgewell/resolve-uri@3.1.1: - resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==} + /@jridgewell/resolve-uri@3.1.2: + resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==} engines: {node: '>=6.0.0'} dev: true @@ -2724,7 +2724,7 @@ packages: /@jridgewell/trace-mapping@0.3.22: resolution: {integrity: sha512-Wf963MzWtA2sjrNt+g18IAln9lKnlRp+K2eH4jjIoF1wYeq3aMREpG09xhlhdzS0EjwU7qmUJYangWa+151vZw==} dependencies: - '@jridgewell/resolve-uri': 3.1.1 + '@jridgewell/resolve-uri': 3.1.2 '@jridgewell/sourcemap-codec': 1.4.15 dev: true @@ -4381,15 +4381,15 @@ packages: resolution: {integrity: sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==} dev: true - /browserslist@4.22.3: - resolution: {integrity: sha512-UAp55yfwNv0klWNapjs/ktHoguxuQNGnOzxYmfnXIS+8AsRDZkSDxg7R1AX3GKzn078SBI5dzwzj/Yx0Or0e3A==} + /browserslist@4.23.0: + resolution: {integrity: sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==} engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} hasBin: true dependencies: caniuse-lite: 1.0.30001587 - electron-to-chromium: 1.4.668 + electron-to-chromium: 1.4.669 node-releases: 2.0.14 - update-browserslist-db: 1.0.13(browserslist@4.22.3) + update-browserslist-db: 1.0.13(browserslist@4.23.0) dev: true /bser@2.1.1: @@ -4721,7 +4721,7 @@ packages: /core-js-compat@3.36.0: resolution: {integrity: sha512-iV9Pd/PsgjNWBXeq8XRtWVSgz2tKAfhfvBs7qxYty+RlRd+OCksaWmOnc4JKrTc1cToXL1N0s3l/vwlxPtdElw==} dependencies: - browserslist: 4.22.3 + browserslist: 4.23.0 dev: true /core-js-pure@3.36.0: @@ -5085,8 +5085,8 @@ packages: resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==} dev: true - /electron-to-chromium@1.4.668: - resolution: {integrity: sha512-ZOBocMYCehr9W31+GpMclR+KBaDZOoAEabLdhpZ8oU1JFDwIaFY0UDbpXVEUFc0BIP2O2Qn3rkfCjQmMR4T/bQ==} + /electron-to-chromium@1.4.669: + resolution: {integrity: sha512-E2SmpffFPrZhBSgf8ibqanRS2mpuk3FIRDzLDwt7WFpfgJMKDHJs0hmacyP0PS1cWsq0dVkwIIzlscNaterkPg==} dev: true /email-addresses@3.1.0: @@ -9713,13 +9713,13 @@ packages: engines: {node: '>= 0.8'} dev: true - /update-browserslist-db@1.0.13(browserslist@4.22.3): + /update-browserslist-db@1.0.13(browserslist@4.23.0): resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==} hasBin: true peerDependencies: browserslist: '>= 4.21.0' dependencies: - browserslist: 4.22.3 + browserslist: 4.23.0 escalade: 3.1.2 picocolors: 1.0.0 dev: true @@ -10014,7 +10014,7 @@ packages: '@webassemblyjs/wasm-parser': 1.11.6 acorn: 8.11.3 acorn-import-assertions: 1.9.0(acorn@8.11.3) - browserslist: 4.22.3 + browserslist: 4.23.0 chrome-trace-event: 1.0.3 enhanced-resolve: 5.15.0 es-module-lexer: 1.4.1 diff --git a/packages/geoview-core/public/configs/raw-app-bar.json b/packages/geoview-core/public/configs/raw-app-bar.json new file mode 100644 index 00000000000..d2ccd12b193 --- /dev/null +++ b/packages/geoview-core/public/configs/raw-app-bar.json @@ -0,0 +1,178 @@ +{ + "map": { + "interaction": "dynamic", + "viewSettings": { + "zoom": 3, + "center": [ + -100, + 50 + ], + "projection": 3978 + }, + "basemapOptions": { + "basemapId": "osm", + "shaded": false, + "labeled": false + }, + "listOfGeoviewLayerConfig": [ + { + "geoviewLayerId": "esriFeatureLYR4", + "geoviewLayerName": { + "en": "Water quality at monitoring sites", + "fr": "Qualité eau" + }, + "metadataAccessPath": { + "en": "https://maps-cartes.ec.gc.ca/arcgis/rest/services/DMS/DEU_CSO_Volume/MapServer", + "fr": "https://maps-cartes.ec.gc.ca/arcgis/rest/services/DMS/DEU_CSO_Volume/MapServer" + }, + "geoviewLayerType": "esriFeature", + "initialSettings": { + "visible": "always" + }, + "listOfLayerEntryConfig": [ + { + "layerId": "8" + } + ] + }, + { + "geoviewLayerId": "uniqueValueId", + "geoviewLayerName": { + "en": "uniqueValue", + "fr": "uniqueValue" + }, + "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": "esriFeature", + "listOfLayerEntryConfig": [ + { + "layerId": "1" + } + ] + }, + { + "geoviewLayerId": "esriFeatureLYR5", + "geoviewLayerName": { + "en": "Top Projects", + "fr": "Projets super" + }, + "metadataAccessPath": { + "en": "https://maps-cartes.services.geo.ca/server_serveur/rest/services/NRCan/900A_and_top_100_en/MapServer/", + "fr": "https://maps-cartes.services.geo.ca/server_serveur/rest/services/NRCan/900A_and_top_100_en/MapServer/" + }, + "geoviewLayerType": "esriFeature", + "listOfLayerEntryConfig": [ + { + "layerId": "0" + } + ] + }, + { + "geoviewLayerId": "geojsonLYR1", + "geoviewLayerName": { + "en": "GeoJSON Sample", + "fr": "GeoJSON Échantillon" + }, + "metadataAccessPath": { + "en": "./datasets/geojson/metadata.json", + "fr": "./datasets/geojson/metadata.json" + }, + "geoviewLayerType": "GeoJSON", + "listOfLayerEntryConfig": [ + { + "layerId": "polygons.json", + "layerName": { + "en": "Polygons", + "fr": "Polygones" + } + }, + { + "layerId": "lines.json", + "layerName": { + "en": "Lines", + "fr": "Lignes" + } + }, + { + "entryType": "group", + "layerId": "point-feature-group", + "layerName": { + "en": "point-feature-group", + "fr": "point-feature-group" + }, + "listOfLayerEntryConfig": [ + { + "layerId": "icon_points.json", + "layerName": { + "en": "Icons", + "fr": "Icones" + }, + "initialSettings": { + "visible": "yes" + } + }, + { + "layerId": "points.json", + "layerName": { + "en": "Points", + "fr": "Points" + } + }, + { + "layerId": "points_1.json", + "layerName": { + "en": "Points 1", + "fr": "Points 1" + } + }, + { + "layerId": "points_2.json", + "layerName": { + "en": "Points 2", + "fr": "Points 2" + } + }, + { + "layerId": "points_3.json", + "layerName": { + "en": "Points 3", + "fr": "Points 3" + } + } + ] + } + ] + } + ] + }, + "theme": "geo.ca", + "appBar": { + "tabs": { + "core": [ + "geolocator", + "export", + "guide", + "details", + "legend" + ] + } + }, + "navBar": [ + "zoom", + "fullscreen", + "home", + "location", + "export" + ], + "components": [ + "north-arrow" + ], + "corePackages": [], + "externalPackages": [], + "suportedLanguages": [ + "en", + "fr" + ] +} \ No newline at end of file diff --git a/packages/geoview-core/public/index.html b/packages/geoview-core/public/index.html index e014068bf14..0347aca9621 100644 --- a/packages/geoview-core/public/index.html +++ b/packages/geoview-core/public/index.html @@ -1,70 +1,76 @@ - - - - <%= htmlWebpackPlugin.options.title %> - - - - - -
- -

Plateforme Géospatiale Canadienne (PGC) - Projet GeoView -

-

Canadian Geospatial Platform (CGP) - GeoView Project -

-
-
-
-
-

Sandbox

- Sandbox -

Basic Maps

- Use Cases - Basemaps - Projections - Languages -

Basic Raw Components

- Basic Details - Basic Data Table - Basic Add Layers -

Basic Loading

- Default Configuration - API loads - Type Of Layers - pygeoapi process - Layers - Temporal -

Internal Package

- Loading Packages - Package - Basemap Panel - Package - Swiper - Package - Time Slider - Package - GeoChart - Package - GeoChart (footer) -

API and Events

- API Functions Test - Events - Add Panels - Geometry - Footer bar (vanilla JS) -

UI Components

- UI Components - Theme Switching -

Interactions

- Interactions (all-in) - Select - Draw - Modify - Translate - Snap - Extent -

Other

- Responsive Page - Performance Test - CGDI Demo -
- - + + + + + <%= htmlWebpackPlugin.options.title %> + + + + + + + +
+ +

Plateforme Géospatiale Canadienne (PGC) - Projet GeoView -

+

Canadian Geospatial Platform (CGP) - GeoView Project -

+
+
+
+
+

Sandbox

+ Sandbox +

Basic Maps

+ Use Cases + Basemaps + Projections + Languages +

Basic Raw Components

+ Basic Details + Basic Data Table + Basic Add Layers + Basic App Bar Tabs +

Basic Loading

+ Default Configuration + API + loads + Type Of Layers + pygeoapi process + Layers - Temporal +

Internal Package

+ Loading Packages + Package - Basemap Panel + Package - Swiper + Package - Time Slider + Package - GeoChart + Package - GeoChart (footer) +

API and Events

+ API Functions Test + Events + Add Panels + Geometry + Footer bar (vanilla JS) +

UI Components

+ UI Components + Theme Switching +

Interactions

+ Interactions (all-in) + Select + Draw + Modify + Translate + Snap + Extent +

Other

+ Responsive Page + Performance Test + CGDI Demo +
+ + + \ No newline at end of file diff --git a/packages/geoview-core/public/templates/raw-app-bar.html b/packages/geoview-core/public/templates/raw-app-bar.html new file mode 100644 index 00000000000..f7fb699ddf0 --- /dev/null +++ b/packages/geoview-core/public/templates/raw-app-bar.html @@ -0,0 +1,68 @@ + + + + + + + + <%= htmlWebpackPlugin.options.title %> + + + + + + + + + + + + + +
+ + + + + + + + + + +
+

Panel - Feature Info

+
+ Main
+
+ + + + + + +
This page is used to test the creation and integration of the Feature Info component in a responsive + design.
+
+ +
+

1. Basic Map English Geo.ca theme

+ Top +
+
+ + + + + + \ No newline at end of file diff --git a/packages/geoview-core/public/templates/raw-feature-info.html b/packages/geoview-core/public/templates/raw-feature-info.html index dbf2848ccf5..3e2789ff39b 100644 --- a/packages/geoview-core/public/templates/raw-feature-info.html +++ b/packages/geoview-core/public/templates/raw-feature-info.html @@ -1,58 +1,60 @@ - - - - <%= htmlWebpackPlugin.options.title %> - - - - - - - - - - - -
- - - - - - - - - - -
-

Panel - Feature Info

-
- Main
- 1. Basic map English Geo.ca theme
- 1. Basic map French Dark theme
-
- - - - - - -
This page is used to test the creation and integration of the Feature Info component in a responsive design.
-
- - 

-    

-      
1. Basic Map English Geo.ca theme

-      Top
-    

-    

+  
+  
+    <%= htmlWebpackPlugin.options.title %>
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+
+
+
+  

+    
+      
+        
+          
+          
+        
+        
+          
+        
+      
+    

+            
Panel - Feature Info

+          

+            Main

+            1. Basic map English Geo.ca theme

+            1. Basic map French Dark theme

+          

+    
+      
+        
+          
+        
+      
+    
This page is used to test the creation and integration of the Feature Info component in a responsive
+            design.

+  

+
+  
+  

+  

+    
1. Basic Map English Geo.ca theme

+    Top
+  

+  
1. Basic Map English Geo.ca theme
       'corePackages': [],
       'externalPackages': [],
       'suportedLanguages': ['en', 'fr']
-    }"
-    >

-    

-    
Click on a layer on the map

-    

-    
-    

+    }">

+  

+  
Click on a layer on the map

+  

+  
+  

 
-    

-      
2. Basic Map French Dark theme

-      Top
-    

-    

+    
2. Basic Map French Dark theme

+    Top
+  

+  
2. Basic Map French Dark theme
       'corePackages': [],
       'externalPackages': [],
       'suportedLanguages': ['en', 'fr']
-    }"
-    >

-    

+    }">
+  

 
-    

-      
2. Basic Map English Light theme

-      Top
-    

-    

+    
2. Basic Map English Light theme

+    Top
+  

+  
2. Basic Map English Light theme
       'corePackages': [],
       'externalPackages': [],
       'suportedLanguages': ['en', 'fr']
-    }"
-    >

-    

+    }">
+  

 
-    
-    
+  
-  
-
+
+      //create snippets
+      createConfigSnippet();
+      createCodeSnippet();
+    });
+  
+
+
+
\ No newline at end of file
diff --git a/packages/geoview-core/schema.json b/packages/geoview-core/schema.json
index 8d39f24f89b..b5b220a1393 100644
--- a/packages/geoview-core/schema.json
+++ b/packages/geoview-core/schema.json
@@ -36,7 +36,9 @@
           "description": "A path to an html template (English/French) that will override default identify output."
         }
       },
-      "required": ["template"]
+      "required": [
+        "template"
+      ]
     },
     "TypeFeatureInfoLayerConfig": {
       "additionalProperties": false,
@@ -67,7 +69,9 @@
           "description": "A comma separated list of attribute names (English/French) that should be use for alias. If empty, no alias will be set if not found."
         }
       },
-      "required": ["queryable"]
+      "required": [
+        "queryable"
+      ]
     },
     "TypeFeatureInfoNotQueryable": {
       "additionalProperties": false,
@@ -79,7 +83,9 @@
           "description": "Do not allow querying."
         }
       },
-      "required": ["queryable"]
+      "required": [
+        "queryable"
+      ]
     },
     "TypeStrokeSymbolConfig": {
       "minProperties": 1,
@@ -115,20 +121,27 @@
       "type": "object",
       "properties": {
         "type": {
-          "enum": ["lineString"]
+          "enum": [
+            "lineString"
+          ]
         },
         "stroke": {
           "$ref": "#/definitions/TypeStrokeSymbolConfig"
         }
       },
-      "required": ["type", "stroke"]
+      "required": [
+        "type",
+        "stroke"
+      ]
     },
     "TypePolygonVectorConfig": {
       "additionalProperties": false,
       "type": "object",
       "properties": {
         "type": {
-          "enum": ["filledPolygon"]
+          "enum": [
+            "filledPolygon"
+          ]
         },
         "color": {
           "type": "string"
@@ -145,18 +158,32 @@
           "description": "Patern line width.default = 1."
         },
         "fillStyle": {
-          "enum": ["solid", "backwardDiagonal", "cross", "diagonalCross", "forwardDiagonal", "horizontal", "null", "vertical"],
+          "enum": [
+            "solid",
+            "backwardDiagonal",
+            "cross",
+            "diagonalCross",
+            "forwardDiagonal",
+            "horizontal",
+            "null",
+            "vertical"
+          ],
           "description": "Kind of filling  for vector features. Default = solid. "
         }
       },
-      "required": ["type", "stroke"]
+      "required": [
+        "type",
+        "stroke"
+      ]
     },
     "TypeSimpleSymbolVectorConfig": {
       "additionalProperties": false,
       "type": "object",
       "properties": {
         "type": {
-          "enum": ["simpleSymbol"]
+          "enum": [
+            "simpleSymbol"
+          ]
         },
         "rotation": {
           "type": "number",
@@ -180,17 +207,30 @@
           "maxItems": 2
         },
         "symbol": {
-          "enum": ["circle", "+", "diamond", "square", "triangle", "X", "star"]
+          "enum": [
+            "circle",
+            "+",
+            "diamond",
+            "square",
+            "triangle",
+            "X",
+            "star"
+          ]
         }
       },
-      "required": ["type", "symbol"]
+      "required": [
+        "type",
+        "symbol"
+      ]
     },
     "TypeIconSymbolVectorConfig": {
       "additionalProperties": false,
       "type": "object",
       "properties": {
         "type": {
-          "enum": ["iconSymbol"]
+          "enum": [
+            "iconSymbol"
+          ]
         },
         "mimeType": {
           "type": "string"
@@ -229,7 +269,11 @@
           "description": "The crossOrigin attribute for loaded images. Note that you must provide a crossOrigin value if you want to access pixel data with the Canvas renderer."
         }
       },
-      "required": ["type", "mimeType", "src"]
+      "required": [
+        "type",
+        "mimeType",
+        "src"
+      ]
     },
     "TypeSimpleStyleConfig": {
       "additionalProperties": false,
@@ -239,7 +283,9 @@
           "type": "string"
         },
         "styleType": {
-          "enum": ["simple"]
+          "enum": [
+            "simple"
+          ]
         },
         "label": {
           "type": "string"
@@ -248,7 +294,11 @@
           "$ref": "#/definitions/TypeKindOfVectorSettings"
         }
       },
-      "required": ["styleType", "label", "settings"]
+      "required": [
+        "styleType",
+        "label",
+        "settings"
+      ]
     },
     "TypeUniqueValueStyleConfig": {
       "additionalProperties": false,
@@ -258,14 +308,20 @@
           "type": "string"
         },
         "styleType": {
-          "enum": ["uniqueValue"]
+          "enum": [
+            "uniqueValue"
+          ]
         },
         "defaultLabel": {
           "type": "string",
           "description": "Label used if field/value association is not found."
         },
         "defaultVisible": {
-          "enum": ["yes", "no", "always"],
+          "enum": [
+            "yes",
+            "no",
+            "always"
+          ],
           "description": "Flag used to show/hide features associated to the default label (default: yes)."
         },
         "defaultSettings": {
@@ -283,7 +339,11 @@
           "$ref": "#/definitions/TypeUniqueValueStyleInfo"
         }
       },
-      "required": ["styleType", "fields", "uniqueValueStyleInfo"]
+      "required": [
+        "styleType",
+        "fields",
+        "uniqueValueStyleInfo"
+      ]
     },
     "TypeUniqueValueStyleInfo": {
       "type": "array",
@@ -295,13 +355,24 @@
             "type": "string"
           },
           "visible": {
-            "enum": ["yes", "no", "always"],
+            "enum": [
+              "yes",
+              "no",
+              "always"
+            ],
             "description": "Flag used to show/hide features associated to the label (default: yes)."
           },
           "values": {
             "type": "array",
             "items": {
-              "oneOf": [{ "type": "string" }, { "type": "number" }]
+              "oneOf": [
+                {
+                  "type": "string"
+                },
+                {
+                  "type": "number"
+                }
+              ]
             },
             "minItems": 1
           },
@@ -311,7 +382,11 @@
         }
       },
       "minItems": 1,
-      "required": ["label", "values", "options"]
+      "required": [
+        "label",
+        "values",
+        "options"
+      ]
     },
     "TypeClassBreakStyleConfig": {
       "additionalProperties": false,
@@ -321,14 +396,20 @@
           "type": "string"
         },
         "styleType": {
-          "enum": ["classBreaks"]
+          "enum": [
+            "classBreaks"
+          ]
         },
         "defaultLabel": {
           "type": "string",
           "description": "Label used if field/value association is not found."
         },
         "defaultVisible": {
-          "enum": ["yes", "no", "always"],
+          "enum": [
+            "yes",
+            "no",
+            "always"
+          ],
           "description": "Flag used to show/hide features associated to the default label (default: yes)."
         },
         "defaultSettings": {
@@ -342,7 +423,11 @@
           "$ref": "#/definitions/TypeClassBreakStyleInfo"
         }
       },
-      "required": ["styleType", "field", "classBreakStyleInfo"]
+      "required": [
+        "styleType",
+        "field",
+        "classBreakStyleInfo"
+      ]
     },
     "TypeClassBreakStyleInfo": {
       "additionalProperties": false,
@@ -355,14 +440,32 @@
             "type": "string"
           },
           "visible": {
-            "enum": ["yes", "no", "always"],
+            "enum": [
+              "yes",
+              "no",
+              "always"
+            ],
             "description": "Flag used to show/hide features associated to the label (default: yes)."
           },
           "minValue": {
-            "oneOf": [{ "type": "string" }, { "type": "number" }]
+            "oneOf": [
+              {
+                "type": "string"
+              },
+              {
+                "type": "number"
+              }
+            ]
           },
           "maxValue": {
-            "oneOf": [{ "type": "string" }, { "type": "number" }]
+            "oneOf": [
+              {
+                "type": "string"
+              },
+              {
+                "type": "number"
+              }
+            ]
           },
           "settings": {
             "$ref": "#/definitions/TypeKindOfVectorSettings"
@@ -370,7 +473,12 @@
         }
       },
       "minItems": 1,
-      "required": ["label", "minValue", "maxValue", "settings"]
+      "required": [
+        "label",
+        "minValue",
+        "maxValue",
+        "settings"
+      ]
     },
     "TypeKindOfVectorSettings": {
       "oneOf": [
@@ -429,7 +537,11 @@
           "description": "Initial opacity setting."
         },
         "visible": {
-          "enum": ["yes", "no", "always"],
+          "enum": [
+            "yes",
+            "no",
+            "always"
+          ],
           "default": "yes",
           "description": "Initial visibility setting."
         },
@@ -470,7 +582,15 @@
       }
     },
     "TypeVectorSourceFormats": {
-      "enum": ["GeoJSON", "EsriJSON", "KML", "WFS", "featureAPI", "GeoPackage", "CSV"],
+      "enum": [
+        "GeoJSON",
+        "EsriJSON",
+        "KML",
+        "WFS",
+        "featureAPI",
+        "GeoPackage",
+        "CSV"
+      ],
       "description": "The feature format used by the XHR feature loader when access path is set."
     },
     "TypeVectorSourceInitialConfig": {
@@ -484,8 +604,12 @@
         "postSettings": {
           "type": "object",
           "properties": {
-            "header": { "type": "object" },
-            "data": { "type": "object" }
+            "header": {
+              "type": "object"
+            },
+            "data": {
+              "type": "object"
+            }
           }
         },
         "format": {
@@ -499,7 +623,10 @@
           "$ref": "#/definitions/TypeFeatureInfoLayerConfig"
         },
         "strategy": {
-          "enum": ["all", "bbox"],
+          "enum": [
+            "all",
+            "bbox"
+          ],
           "default": "all",
           "description": "The loading strategy to use. By default an all strategy is used, a one-off strategy which loads all features at once."
         },
@@ -550,7 +677,11 @@
       }
     },
     "TypeOfServer": {
-      "enum": ["mapserver", "geoserver", "qgis"],
+      "enum": [
+        "mapserver",
+        "geoserver",
+        "qgis"
+      ],
       "description": "The type of the remote WMS server. The default value is mapserver."
     },
     "TypeSourceImageStaticInitialConfig": {
@@ -613,7 +744,12 @@
       }
     },
     "TypeEsriFormatParameter": {
-      "enum": ["png", "jpg", "gif", "svg"],
+      "enum": [
+        "png",
+        "jpg",
+        "gif",
+        "svg"
+      ],
       "default": "png",
       "description": "The format of the exported image. The default format is png."
     },
@@ -679,21 +815,31 @@
           "items": {
             "type": "number"
           },
-          "default": [256, 256],
+          "default": [
+            256,
+            256
+          ],
           "description": "The tile grid origin, i.e. where the x and y axes meet ([z, 0, 0]). Tile coordinates increase left to right and downwards. If not specified, extent must be provided."
         }
       },
-      "required": ["origin", "resolutions"]
+      "required": [
+        "origin",
+        "resolutions"
+      ]
     },
     "TypeVectorHeatmapLayerEntryConfig": {
       "additionalProperties": false,
       "type": "object",
       "properties": {
         "schemaTag": {
-          "enum": ["not used yet"]
+          "enum": [
+            "not used yet"
+          ]
         },
         "entryType": {
-          "enum": ["vector-heatmap"]
+          "enum": [
+            "vector-heatmap"
+          ]
         },
         "layerPathEnding": {
           "type": "string",
@@ -721,7 +867,13 @@
           },
           "uniqueItems": true,
           "minItems": 2,
-          "default": ["#00f", "#0ff", "#0f0", "#ff0", "#f00"],
+          "default": [
+            "#00f",
+            "#0ff",
+            "#0f0",
+            "#ff0",
+            "#f00"
+          ],
           "description": "Color gradient of the heatmap, specified as an array of CSS color strings."
         },
         "radius": {
@@ -743,17 +895,30 @@
           }
         }
       },
-      "required": ["schemaTag", "entryType", "layerId"]
+      "required": [
+        "schemaTag",
+        "entryType",
+        "layerId"
+      ]
     },
     "TypeVectorLayerEntryConfig": {
       "additionalProperties": false,
       "type": "object",
       "properties": {
         "schemaTag": {
-          "enum": ["CSV", "GeoJSON", "esriFeature", "ogcWfs", "ogcFeature", "GeoPackage"]
+          "enum": [
+            "CSV",
+            "GeoJSON",
+            "esriFeature",
+            "ogcWfs",
+            "ogcFeature",
+            "GeoPackage"
+          ]
         },
         "entryType": {
-          "enum": ["vector"]
+          "enum": [
+            "vector"
+          ]
         },
         "layerPathEnding": {
           "type": "string",
@@ -788,7 +953,11 @@
           }
         }
       },
-      "required": ["schemaTag", "entryType", "layerId"]
+      "required": [
+        "schemaTag",
+        "entryType",
+        "layerId"
+      ]
     },
     "TypeVectorTileLayerEntryConfig": {
       "additionalProperties": false,
@@ -796,10 +965,14 @@
       "description": "Layer sources providing vector data divided into a tile grid.",
       "properties": {
         "schemaTag": {
-          "enum": ["not used yet"]
+          "enum": [
+            "not used yet"
+          ]
         },
         "entryType": {
-          "enum": ["vector-tile"]
+          "enum": [
+            "vector-tile"
+          ]
         },
         "layerPathEnding": {
           "type": "string",
@@ -835,7 +1008,11 @@
           }
         }
       },
-      "required": ["schemaTag", "entryType", "layerId"]
+      "required": [
+        "schemaTag",
+        "entryType",
+        "layerId"
+      ]
     },
     "TypeVectorTileSourceInitialConfig": {
       "additionalProperties": false,
@@ -847,7 +1024,14 @@
           "description": "The path (English/French) to reach the data to display. If not specified, metadatAccessPath will be assigne dto it."
         },
         "format": {
-          "enum": ["GeoJSON", "EsriJSON", "KML", "WFS", "MVT", "featureAPI"],
+          "enum": [
+            "GeoJSON",
+            "EsriJSON",
+            "KML",
+            "WFS",
+            "MVT",
+            "featureAPI"
+          ],
           "description": "The feature format used by the XHR feature loader when access path is set."
         },
         "dataProjection": {
@@ -867,10 +1051,14 @@
       "type": "object",
       "properties": {
         "schemaTag": {
-          "enum": ["ogcWms"]
+          "enum": [
+            "ogcWms"
+          ]
         },
         "entryType": {
-          "enum": ["raster-image"]
+          "enum": [
+            "raster-image"
+          ]
         },
         "layerId": {
           "type": "string",
@@ -892,8 +1080,12 @@
           "$ref": "#/definitions/TypeLayerInitialSettings",
           "description": "Initial settings to apply to the layer entry at creation time. Initial settings are inherited from the parent in the configuration tree."
         },
-        "source": { "$ref": "#/definitions/TypeSourceImageWmsInitialConfig" },
-        "style": { "$ref": "#/definitions/TypeStyleConfig" },
+        "source": {
+          "$ref": "#/definitions/TypeSourceImageWmsInitialConfig"
+        },
+        "style": {
+          "$ref": "#/definitions/TypeStyleConfig"
+        },
         "not": {
           "listOfLayerEntryConfig": {
             "$ref": "#/definitions/TypeListOfLayerEntryConfig",
@@ -901,17 +1093,25 @@
           }
         }
       },
-      "required": ["schemaTag", "entryType", "layerId"]
+      "required": [
+        "schemaTag",
+        "entryType",
+        "layerId"
+      ]
     },
     "TypeEsriDynamicLayerEntryConfig": {
       "additionalProperties": false,
       "type": "object",
       "properties": {
         "schemaTag": {
-          "enum": ["esriDynamic"]
+          "enum": [
+            "esriDynamic"
+          ]
         },
         "entryType": {
-          "enum": ["raster-image"]
+          "enum": [
+            "raster-image"
+          ]
         },
         "layerId": {
           "type": "string",
@@ -946,17 +1146,25 @@
           }
         }
       },
-      "required": ["schemaTag", "entryType", "layerId"]
+      "required": [
+        "schemaTag",
+        "entryType",
+        "layerId"
+      ]
     },
     "TypeEsriImageLayerEntryConfig": {
       "additionalProperties": false,
       "type": "object",
       "properties": {
         "schemaTag": {
-          "enum": ["esriImage"]
+          "enum": [
+            "esriImage"
+          ]
         },
         "entryType": {
-          "enum": ["raster-image"]
+          "enum": [
+            "raster-image"
+          ]
         },
         "layerId": {
           "type": "string",
@@ -991,17 +1199,25 @@
           }
         }
       },
-      "required": ["schemaTag", "entryType", "layerId"]
+      "required": [
+        "schemaTag",
+        "entryType",
+        "layerId"
+      ]
     },
     "TypeImageStaticLayerEntryConfig": {
       "additionalProperties": false,
       "type": "object",
       "properties": {
         "schemaTag": {
-          "enum": ["imageStatic"]
+          "enum": [
+            "imageStatic"
+          ]
         },
         "entryType": {
-          "enum": ["raster-image"]
+          "enum": [
+            "raster-image"
+          ]
         },
         "layerId": {
           "type": "string",
@@ -1029,17 +1245,27 @@
           }
         }
       },
-      "required": ["schemaTag", "entryType", "layerId"]
+      "required": [
+        "schemaTag",
+        "entryType",
+        "layerId"
+      ]
     },
     "TypeTileLayerEntryConfig": {
       "additionalProperties": false,
       "type": "object",
       "properties": {
         "schemaTag": {
-          "enum": ["ogcWms", "xyzTiles", "vectorTiles"]
+          "enum": [
+            "ogcWms",
+            "xyzTiles",
+            "vectorTiles"
+          ]
         },
         "entryType": {
-          "enum": ["raster-tile"]
+          "enum": [
+            "raster-tile"
+          ]
         },
         "layerPathEnding": {
           "type": "string",
@@ -1067,7 +1293,11 @@
           }
         }
       },
-      "required": ["schemaTag", "entryType", "layerId"]
+      "required": [
+        "schemaTag",
+        "entryType",
+        "layerId"
+      ]
     },
     "TypeGeocoreLayerEntryConfig": {
       "additionalProperties": false,
@@ -1075,10 +1305,14 @@
       "description": "Layer where configration is extracted by a configuration snippet stored on a server. The server configuration will handle bilangual informations.",
       "properties": {
         "schemaTag": {
-          "enum": ["geoCore"]
+          "enum": [
+            "geoCore"
+          ]
         },
         "entryType": {
-          "enum": ["geoCore"]
+          "enum": [
+            "geoCore"
+          ]
         },
         "layerId": {
           "type": "string",
@@ -1100,7 +1334,11 @@
           "description": "The list of layer entry configurations to use from the GeoView layer group."
         }
       },
-      "required": ["schemaTag", "entryType", "layerId"]
+      "required": [
+        "schemaTag",
+        "entryType",
+        "layerId"
+      ]
     },
     "TypeSourceGeocoreConfig": {
       "additionalProperties": false,
@@ -1117,7 +1355,14 @@
       }
     },
     "TypeLayerEntryType": {
-      "enum": ["vector", "vector-tile", "vector-heatmap", "raster-tile", "raster-image", "geoCore"],
+      "enum": [
+        "vector",
+        "vector-tile",
+        "vector-heatmap",
+        "raster-tile",
+        "raster-image",
+        "geoCore"
+      ],
       "description": "Layer entry data type."
     },
     "TypeLayerGroupEntryConfig": {
@@ -1126,7 +1371,9 @@
       "description": "Entry used to define a layer Group.",
       "properties": {
         "entryType": {
-          "enum": ["group"]
+          "enum": [
+            "group"
+          ]
         },
         "layerId": {
           "type": "string",
@@ -1151,7 +1398,11 @@
           "description": "The list of layer entry configurations to use from the GeoView layer group."
         }
       },
-      "required": ["entryType", "layerId", "listOfLayerEntryConfig"]
+      "required": [
+        "entryType",
+        "layerId",
+        "listOfLayerEntryConfig"
+      ]
     },
     "TypeLayerEntryConfig": {
       "oneOf": [
@@ -1401,7 +1652,11 @@
           "description": "Additional options used for OpenLayers map options"
         }
       },
-      "required": ["basemapOptions", "interaction", "viewSettings"]
+      "required": [
+        "basemapOptions",
+        "interaction",
+        "viewSettings"
+      ]
     },
     "TypeBasemapOptions": {
       "additionalProperties": false,
@@ -1421,15 +1676,28 @@
           "description": "Enable or disable basemap labels"
         }
       },
-      "required": ["basemapId", "shaded", "labeled"]
+      "required": [
+        "basemapId",
+        "shaded",
+        "labeled"
+      ]
     },
     "TypeBasemapId": {
-      "enum": ["transport", "osm", "simple", "nogeom", "shaded"],
+      "enum": [
+        "transport",
+        "osm",
+        "simple",
+        "nogeom",
+        "shaded"
+      ],
       "default": "transport",
       "description": "Id of the basemap to use."
     },
     "TypeInteraction": {
-      "enum": ["static", "dynamic"],
+      "enum": [
+        "static",
+        "dynamic"
+      ],
       "default": "dynamic",
       "description": "If map is dynamic (pan/zoom) or static to act as a thumbnail (no nav bar)."
     },
@@ -1478,7 +1746,10 @@
           "description": "The layer entries to use from the GeoView layer."
         }
       },
-      "required": ["geoviewLayerType", "listOfLayerEntryConfig"]
+      "required": [
+        "geoviewLayerType",
+        "listOfLayerEntryConfig"
+      ]
     },
     "TypeGeoviewLayerType": {
       "type": "string",
@@ -1523,7 +1794,10 @@
               "description": "Initial latitude value for map center."
             }
           ],
-          "default": [-106, 60]
+          "default": [
+            -106,
+            60
+          ]
         },
         "enableRotation": {
           "type": "boolean",
@@ -1569,10 +1843,16 @@
           "description": "Initial map zoom level. Zoom level are define by the basemap zoom levels. Levels between whole numbers are supported to fine tune initial view."
         }
       },
-      "required": ["zoom", "center"]
+      "required": [
+        "zoom",
+        "center"
+      ]
     },
     "TypeValidMapProjectionCodes": {
-      "enum": [3978, 3857],
+      "enum": [
+        3978,
+        3857
+      ],
       "default": 3978,
       "description": "Spatial Reference EPSG code supported (https://epsg.io/). We support Web Mercator and Lambert Conical Conform Canada."
     },
@@ -1580,9 +1860,19 @@
       "type": "array",
       "uniqueItems": true,
       "items": {
-        "enum": ["zoom", "fullscreen", "home", "location", "export"]
+        "enum": [
+          "zoom",
+          "fullscreen",
+          "home",
+          "location",
+          "export"
+        ]
       },
-      "default": ["zoom", "fullscreen", "home"],
+      "default": [
+        "zoom",
+        "fullscreen",
+        "home"
+      ],
       "description": "Controls availalbe on the navigation bar.",
       "minItems": 0
     },
@@ -1608,7 +1898,12 @@
                 ]
               },
               "minItems": 1,
-              "default": ["legend", "layers", "details", "data-table"],
+              "default": [
+                "legend",
+                "layers",
+                "details",
+                "data-table"
+              ],
               "uniqueItems": true,
               "description": "Default core tabs of footer bar to use. NOTE: config from packages for time-slider and geochart are in the same loaction as core config (<>-<>.json)."
             },
@@ -1642,7 +1937,9 @@
           "description": "State of footer bar when map is loaded (expanded or collapsed)"
         }
       },
-      "required": ["tabs"]
+      "required": [
+        "tabs"
+      ]
     },
     "TypeAppBarProps": {
       "type": "object",
@@ -1656,10 +1953,20 @@
               "type": "array",
               "items": {
                 "type": "string",
-                "enum": ["geolocator", "export", "basemap-panel", "geochart"]
+                "enum": [
+                  "geolocator",
+                  "export",
+                  "basemap-panel",
+                  "geochart",
+                  "details",
+                  "legend",
+                  "guide"
+                ]
               },
               "minItems": 0,
-              "default": ["geolocator"],
+              "default": [
+                "geolocator"
+              ],
               "uniqueItems": true,
               "description": "Default core tabs of app-bar to use. NOTE: config from packages like geochart are in the same loaction as core config (<>-<>.json)."
             }
@@ -1667,7 +1974,9 @@
           "additionalProperties": false
         }
       },
-      "required": ["tabs"]
+      "required": [
+        "tabs"
+      ]
     },
     "TypeOverviewMapProps": {
       "type": "object",
@@ -1686,9 +1995,15 @@
       "type": "array",
       "uniqueItems": true,
       "items": {
-        "enum": ["overview-map", "north-arrow"]
+        "enum": [
+          "overview-map",
+          "north-arrow"
+        ]
       },
-      "default": ["overview-map", "north-arrow"],
+      "default": [
+        "overview-map",
+        "north-arrow"
+      ],
       "description": "Core components to initialize on viewer load. The schema for those are inside this file.",
       "minItems": 0
     },
@@ -1696,7 +2011,9 @@
       "type": "array",
       "uniqueItems": true,
       "items": {
-        "enum": ["swiper"]
+        "enum": [
+          "swiper"
+        ]
       },
       "default": [],
       "description": "Core map packages to initialize on viewer load. The schema for those are on their own package. NOTE: config from packages are in the same loaction as core config (<>-<>.json).",
@@ -1717,7 +2034,9 @@
             "description": "The url to the external package configuration setting. The core package will read the configuration and pass it inside the package."
           }
         },
-        "required": ["name"]
+        "required": [
+          "name"
+        ]
       },
       "default": [],
       "description": "List of external packages to initialize on viewer load.",
@@ -1742,14 +2061,22 @@
           "description": "Service end point to access geo location of searched value."
         }
       },
-      "required": ["keys"]
+      "required": [
+        "keys"
+      ]
     },
     "TypeDisplayLanguage": {
-      "enum": ["en", "fr"],
+      "enum": [
+        "en",
+        "fr"
+      ],
       "description": "Display languages supported."
     },
     "TypeLocalizedLanguages": {
-      "enum": ["en", "fr"],
+      "enum": [
+        "en",
+        "fr"
+      ],
       "description": "ISO 639-1 code indicating the languages supported by the configuration file."
     },
     "TypeListOfLocalizedLanguages": {
@@ -1758,12 +2085,17 @@
       "items": {
         "$ref": "#/definitions/TypeLocalizedLanguages"
       },
-      "default": ["en", "fr"],
+      "default": [
+        "en",
+        "fr"
+      ],
       "description": "ISO 639-1 code indicating the languages supported by the configuration file. It will use value(s) provided here to access bilangual configuration nodes. For value(s) provided here, each bilingual configuration node MUST provide a value.",
       "minItems": 1
     },
     "TypeValidVersions": {
-      "enum": ["1.0"],
+      "enum": [
+        "1.0"
+      ],
       "description": "The schema version that can be used to validate the configuration file. The schema should enumerate the list of versions accepted by this version of the viewer."
     },
     "TypeMapFeaturesInstance": {
@@ -1771,12 +2103,18 @@
       "additionalProperties": false,
       "type": "object",
       "properties": {
-        "mapId": { "type": "string" },
+        "mapId": {
+          "type": "string"
+        },
         "map": {
           "$ref": "#/definitions/TypeMapConfig"
         },
         "theme": {
-          "enum": ["dark", "light", "geo.ca"],
+          "enum": [
+            "dark",
+            "light",
+            "geo.ca"
+          ],
           "default": "dark",
           "description": "Theme style the viewer."
         },
@@ -1811,7 +2149,10 @@
           "$ref": "#/definitions/TypeValidVersions"
         }
       },
-      "required": ["map", "suportedLanguages"]
+      "required": [
+        "map",
+        "suportedLanguages"
+      ]
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/geoview-core/src/core/components/app-bar/app-bar.tsx b/packages/geoview-core/src/core/components/app-bar/app-bar.tsx
index 1421f9af57f..5feb502d0bc 100644
--- a/packages/geoview-core/src/core/components/app-bar/app-bar.tsx
+++ b/packages/geoview-core/src/core/components/app-bar/app-bar.tsx
@@ -1,30 +1,41 @@
-import { useState, useRef, useEffect, useCallback, Fragment } from 'react';
-
+import { useTranslation } from 'react-i18next';
+import { useState, useRef, useEffect, useCallback, Fragment, useMemo, ReactNode } from 'react';
+import { capitalize } from 'lodash';
 import { useTheme } from '@mui/material/styles';
-import { Box, List, ListItem, Panel, IconButton } from '@/ui';
+import { Box, List, ListItem, Panel, IconButton, TypeIconButtonProps, SchoolIcon, InfoOutlinedIcon, HubOutlinedIcon } from '@/ui';
 
 import { AbstractPlugin, TypeJsonObject, TypeJsonValue, api, toJsonObject, useGeoViewMapId } from '@/app';
 import { EVENT_NAMES } from '@/api/events/event-types';
 
 import { payloadIsAButtonPanel, ButtonPanelPayload, PayloadBaseClass } from '@/api/events/payloads';
-import { TypeButtonPanel } from '@/ui/panel/panel-types';
+import { TypeButtonPanel, TypePanelProps } from '@/ui/panel/panel-types';
 
 import ExportButton from '@/core/components/export/export-modal-button';
 import Geolocator from './buttons/geolocator';
 import Notifications from '@/core/components/notifications/notifications';
 import Version from './buttons/version';
 import { getSxClasses } from './app-bar-style';
-import { useUIActiveFocusItem, useUIAppbarComponents } from '@/core/stores/store-interface-and-intial-values/ui-state';
+import {
+  useUIActiveFocusItem,
+  useUIActiveFooterBarTabId,
+  useUIAppbarComponents,
+} from '@/core/stores/store-interface-and-intial-values/ui-state';
 import { useMapInteraction, useMapStoreActions } from '@/core/stores/store-interface-and-intial-values/map-state';
 import { useGeoViewConfig } from '@/core/stores/geoview-store';
 import { logger } from '@/core/utils/logger';
+import { GuidePanel, Legend, DetailsPanel } from '@/core/components';
 
+interface GroupPanelType {
+  icon: ReactNode;
+  content: ReactNode;
+}
 /**
  * Create an app-bar with buttons that can open a panel
  */
 export function Appbar(): JSX.Element {
   // Log
   logger.logTraceRender('components/app-bar/app-bar');
+  const { t } = useTranslation();
 
   const mapId = useGeoViewMapId();
 
@@ -41,22 +52,36 @@ export function Appbar(): JSX.Element {
   const interaction = useMapInteraction();
   const appBarComponents = useUIAppbarComponents();
   const { hideClickMarker } = useMapStoreActions();
+  // TODO: remove active footerTab Id and create new one for appbar id.
+  const activeFooterTabId = useUIActiveFooterBarTabId();
 
   // get store config for app bar to add (similar logic as in footer-bar)
   const appBarConfig = useGeoViewConfig()?.appBar;
 
   // #region REACT HOOKS
+
+  const panels = useMemo(() => {
+    return {
+      legend: { icon: , content:  },
+      guide: { icon: , content:  },
+      details: { icon: , content:  },
+    } as unknown as Record;
+  }, []);
+
   const addButtonPanel = useCallback(
     (payload: ButtonPanelPayload) => {
       // Log
       logger.logTraceUseCallback('APP-BAR - addButtonPanel');
 
-      setButtonPanelGroups({
-        ...buttonPanelGroups,
-        [payload.appBarGroupName]: {
-          ...buttonPanelGroups[payload.appBarGroupName],
-          [payload.appBarId]: payload.buttonPanel as TypeButtonPanel,
-        },
+      setButtonPanelGroups((prevState) => {
+        return {
+          ...prevState,
+          ...buttonPanelGroups,
+          [payload.appBarGroupName]: {
+            ...buttonPanelGroups[payload.appBarGroupName],
+            [payload.appBarId]: payload.buttonPanel as TypeButtonPanel,
+          },
+        };
       });
     },
     [buttonPanelGroups]
@@ -97,8 +122,6 @@ export function Appbar(): JSX.Element {
 
       if (payloadIsAButtonPanel(payload)) addButtonPanel(payload);
     };
-    // listen to new panel creation
-    api.event.on(EVENT_NAMES.APPBAR.EVENT_APPBAR_PANEL_CREATE, appBarPanelCreateListenerFunction, mapId);
 
     const appBarPanelRemoveListenerFunction = (payload: PayloadBaseClass) => {
       // Log
@@ -107,6 +130,9 @@ export function Appbar(): JSX.Element {
       if (payloadIsAButtonPanel(payload)) removeButtonPanel(payload);
     };
 
+    // listen to new panel creation
+    api.event.on(EVENT_NAMES.APPBAR.EVENT_APPBAR_PANEL_CREATE, appBarPanelCreateListenerFunction, mapId);
+
     // listen on panel removal
     api.event.on(EVENT_NAMES.APPBAR.EVENT_APPBAR_PANEL_REMOVE, appBarPanelRemoveListenerFunction, mapId);
 
@@ -121,6 +147,19 @@ export function Appbar(): JSX.Element {
   }, [addButtonPanel, mapId, removeButtonPanel, selectedAppBarButtonId]);
   // #endregion
 
+  useEffect(() => {
+    // Log
+    logger.logTraceUseEffect('APP-BAR - open detail panel when clicked on map', mapId);
+    // TODO: remove active footerTab Id and create new one for appbar id.
+    // open appbar detail drawer when click on map.
+    if (activeFooterTabId === 'details' && buttonPanelGroups?.details?.AppbarPanelButtonDetails?.panel) {
+      buttonPanelGroups.details.AppbarPanelButtonDetails.panel.open();
+      buttonPanelGroups.details.AppbarPanelButtonDetails.panel.content = panels.details.content;
+      setSelectedAppbarButtonId(buttonPanelGroups.details.AppbarPanelButtonDetails?.button?.id ?? '');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeFooterTabId]);
+
   /**
    * Create default tabs from configuration parameters (similar logic as in footer-bar).
    */
@@ -146,6 +185,38 @@ export function Appbar(): JSX.Element {
     }
   }, [appBarConfig, mapId]);
 
+  useEffect(() => {
+    // Log
+    logger.logTraceUseEffect('APP-BAR - create group of appbar buttons', mapId);
+
+    // render footer bar tabs
+    (appBarConfig?.tabs.core ?? [])
+      .filter((tab) => tab === 'guide' || tab === 'details' || tab === 'legend')
+      .map((tab): [TypeIconButtonProps, TypePanelProps, string] => {
+        const button: TypeIconButtonProps = {
+          id: `AppbarPanelButton${capitalize(tab)}`,
+          tooltip: t(`${tab}.title`)!,
+          tooltipPlacement: 'bottom',
+          children: panels[tab].icon,
+        };
+        const panel: TypePanelProps = {
+          panelId: `Appbar${capitalize(tab)}PanelId`,
+          type: 'app-bar',
+          title: capitalize(tab),
+          icon: panels[tab].icon,
+          content: '',
+          width: 400,
+          panelStyles: {
+            panelCardContent: { padding: '0' },
+          },
+        };
+        return [button, panel, tab];
+      })
+      .forEach((footerGroup) => api.maps[mapId].appBarButtons.createAppbarPanel(footerGroup[0], footerGroup[1], footerGroup[2]));
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [appBarConfig?.tabs.core, mapId]);
+
   return (
     
       
@@ -181,6 +252,9 @@ export function Appbar(): JSX.Element {
                         onClick={() => {
                           if (!buttonPanel.panel?.status) {
                             buttonPanel.panel?.open();
+                            if (buttonPanel.panel && buttonPanel.groupName) {
+                              buttonPanel.panel.content = panels[buttonPanel.groupName].content;
+                            }
                             setSelectedAppbarButtonId(buttonPanel?.button?.id ?? '');
                           } else {
                             buttonPanel.panel?.close();
diff --git a/packages/geoview-core/src/core/components/common/close-button.tsx b/packages/geoview-core/src/core/components/common/close-button.tsx
index d0ec9df3c24..f6466237a8a 100644
--- a/packages/geoview-core/src/core/components/common/close-button.tsx
+++ b/packages/geoview-core/src/core/components/common/close-button.tsx
@@ -7,15 +7,17 @@ import { getSxClasses } from './enlarge-button-style';
 interface CloseButtonProps {
   isLayersPanelVisible: boolean;
   onSetIsLayersPanelVisible: Dispatch>;
+  fullWidth?: boolean;
 }
 
 /**
  * Create close button
  * @param {boolean} isLayersPanelVisible show/hide the list in left panel
  * @param {function} setIsLayersPanelVisible dispatch function to update isLayersPanelVisible
+ * @param {boolean} fullWidth show close button when full width is true
  * @returns JSX.element
  */
-export function CloseButton({ isLayersPanelVisible, onSetIsLayersPanelVisible }: CloseButtonProps) {
+export function CloseButton({ isLayersPanelVisible, onSetIsLayersPanelVisible, fullWidth }: CloseButtonProps) {
   const { t } = useTranslation();
 
   const theme = useTheme();
@@ -28,9 +30,13 @@ export function CloseButton({ isLayersPanelVisible, onSetIsLayersPanelVisible }:
       sx={{
         ...sxClasses.enlargeBtn,
         marginLeft: '1rem',
-        [theme.breakpoints.up('md')]: { display: 'none' },
-        [theme.breakpoints.between('sm', 'md')]: { display: !isLayersPanelVisible ? 'none' : 'block' },
-        [theme.breakpoints.down('md')]: { display: !isLayersPanelVisible ? 'none' : 'block' },
+        ...(fullWidth ? sxClasses.appBarEnlargeButton : sxClasses.footerBarEnlargeButton),
+        ...(fullWidth && { display: !isLayersPanelVisible ? 'none' : 'block' }),
+        ...(!fullWidth && {
+          [theme.breakpoints.up('md')]: { display: 'none' },
+          [theme.breakpoints.between('sm', 'md')]: { display: !isLayersPanelVisible ? 'none' : 'block' },
+          [theme.breakpoints.down('md')]: { display: !isLayersPanelVisible ? 'none' : 'block' },
+        }),
       }}
       onClick={() => onSetIsLayersPanelVisible(false)}
       tooltip={t('dataTable.close') ?? ''}
@@ -40,3 +46,7 @@ export function CloseButton({ isLayersPanelVisible, onSetIsLayersPanelVisible }:
     
   );
 }
+
+CloseButton.defaultProps = {
+  fullWidth: false,
+};
diff --git a/packages/geoview-core/src/core/components/common/enlarge-button-style.tsx b/packages/geoview-core/src/core/components/common/enlarge-button-style.tsx
index 384063e01a3..5abb55701cb 100644
--- a/packages/geoview-core/src/core/components/common/enlarge-button-style.tsx
+++ b/packages/geoview-core/src/core/components/common/enlarge-button-style.tsx
@@ -2,8 +2,8 @@ import { Theme } from '@mui/material';
 
 export const getSxClasses = (theme: Theme) => ({
   enlargeBtn: {
-    width: '7rem !important',
-    height: '2.5rem !important',
+    height: '2rem !important',
+    lineHeight: 1,
     borderRadius: '1.5rem',
     boxShadow: `0px 3px 6px ${theme.palette.geoViewColor.bgColor.dark[600]}`,
     marginTop: '0.25rem',
@@ -23,7 +23,13 @@ export const getSxClasses = (theme: Theme) => ({
         color: `${theme.palette.geoViewColor.white} !important`,
       },
     },
-    [theme.breakpoints.down('md')]: { display: 'none' },
+  },
+  footerBarEnlargeButton: {
+    width: '7rem !important',
+  },
+  appBarEnlargeButton: {
+    width: '5rem !important',
+    padding: '8px !important',
   },
   enlargeBtnIcon: {
     color: theme.palette.geoViewColor.primary.main,
diff --git a/packages/geoview-core/src/core/components/common/enlarge-button.tsx b/packages/geoview-core/src/core/components/common/enlarge-button.tsx
index 5ce3e95220f..43c5e4aeec4 100644
--- a/packages/geoview-core/src/core/components/common/enlarge-button.tsx
+++ b/packages/geoview-core/src/core/components/common/enlarge-button.tsx
@@ -1,4 +1,5 @@
 import { Dispatch } from 'react';
+import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { ArrowBackIcon, ArrowForwardIcon, Button } from '@/ui';
 
@@ -16,6 +17,7 @@ interface EnlargeButtonProps {
 export function EnlargeButton({ isEnlarged, onSetIsEnlarged }: EnlargeButtonProps) {
   const { t } = useTranslation();
 
+  const theme = useTheme();
   return (