feat(appBar): create new page app bar #closes1280

Canadian-Geospatial-Platform · Feb 16, 2024 · f5a3de0 · f5a3de0
1 parent 4642c6a
commit f5a3de0
Show file tree

Hide file tree

Showing 7 changed files with 772 additions and 168 deletions.
diff --git a/packages/geoview-core/public/configs/raw-app-bar.json 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": "7"
+          }
+        ]
+      },
+      {
+        "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"
+  ]
+}
diff --git a/packages/geoview-core/public/index.html b/packages/geoview-core/public/index.html
@@ -1,70 +1,76 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title><%= htmlWebpackPlugin.options.title %></title>
-    <link rel="shortcut icon" href="./favicon.ico" />
-    <link rel="stylesheet" href="css/style.css" />
-    <link href="https://fonts.googleapis.com/css?family=Roboto|Montserrat:200,300,400,900|Merriweather" rel="stylesheet" type="text/css" />
-  </head>
 
-  <body>
-    <div>
-      <img class="center-logo header-logo" alt="logo" src="./img/Logo.png" />
-      <h1 class="index-header-title"><strong>Plateforme Géospatiale Canadienne (PGC) - Projet GeoView -</strong></h1>
-      <h1 class="index-header-title"><strong>Canadian Geospatial Platform (CGP) - GeoView Project -</strong></h1>
-      <hr />
-      <hr />
-      <br />
-      <br />
-      <h4>Sandbox</h4>
-      <a class="page-link" href="./sandbox.html">Sandbox</a>
-      <h4>Basic Maps</h4>
-      <a class="page-link" href="./use-cases.html">Use Cases</a>
-      <a class="page-link" href="./basemaps.html">Basemaps</a>
-      <a class="page-link" href="./projections.html">Projections</a>
-      <a class="page-link" href="./languages.html">Languages</a>
-      <h4>Basic Raw Components</h4>
-      <a class="page-link" href="./raw-feature-info.html">Basic Details</a>
-      <a class="page-link" href="./raw-data-table.html">Basic Data Table</a>
-      <a class="page-link" href="./raw-add-layers.html">Basic Add Layers</a>
-      <h4>Basic Loading</h4>
-      <a class="page-link" href="./default-config.html">Default Configuration</a>
-      <a class="page-link" href="./api-loads.html?geoms=000183ed-8864-42f0-ae43-c4313a860720,0083baf1-8145-4207-a84f-3d85ef2943a5"
-        >API loads</a
-      >
-      <a class="page-link" href="./type-of-layers.html">Type Of Layers</a>
-      <a class="page-link" href="./pygeoapi-processes.html">pygeoapi process</a>
-      <a class="page-link" href="./layers-temporal.html">Layers - Temporal</a>
-      <h4>Internal Package</h4>
-      <a class="page-link" href="./loading-packages.html">Loading Packages</a>
-      <a class="page-link" href="./package-basemap-panel.html">Package - Basemap Panel</a>
-      <a class="page-link" href="./package-swiper.html">Package - Swiper</a>
-      <a class="page-link" href="./package-time-slider.html">Package - Time Slider</a>
-      <a class="page-link" href="./package-geochart.html">Package - GeoChart</a>
-      <a class="page-link" href="./package-footer-panel-geochart.html">Package - GeoChart (footer)</a>
-      <h4>API and Events</h4>
-      <a class="page-link" href="./api-functions-test.html">API Functions Test</a>
-      <a class="page-link" href="./events.html">Events</a>
-      <a class="page-link" href="./add-panels.html">Add Panels</a>
-      <a class="page-link" href="./geometry.html">Geometry</a>
-      <a class="page-link" href="./footer-bar.html">Footer bar (vanilla JS)</a>
-      <h4>UI Components</h4>
-      <a class="page-link" href="./ui-components.html">UI Components</a>
-      <a class="page-link" href="./theme-switching.html">Theme Switching</a>
-      <h4>Interactions</h4>
-      <a class="page-link" href="./inter-all.html">Interactions (all-in)</a>
-      <a class="page-link" href="./inter-select.html">Select</a>
-      <a class="page-link" href="./inter-draw.html">Draw</a>
-      <a class="page-link" href="./inter-modify.html">Modify</a>
-      <a class="page-link" href="./inter-translate.html">Translate</a>
-      <a class="page-link" href="./inter-snap.html">Snap</a>
-      <a class="page-link" href="./inter-extent.html">Extent</a>
-      <h4>Other</h4>
-      <a class="page-link" href="./responsive_page.html">Responsive Page</a>
-      <a class="page-link" href="./load-test.html">Performance Test</a>
-      <a class="page-link" href="./cgdi-demo.html">CGDI Demo</a>
-    </div>
-  </body>
-</html>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>
+    <%= htmlWebpackPlugin.options.title %>
+  </title>
+  <link rel="shortcut icon" href="./favicon.ico" />
+  <link rel="stylesheet" href="css/style.css" />
+  <link href="https://fonts.googleapis.com/css?family=Roboto|Montserrat:200,300,400,900|Merriweather" rel="stylesheet"
+    type="text/css" />
+</head>
+
+<body>
+  <div>
+    <img class="center-logo header-logo" alt="logo" src="./img/Logo.png" />
+    <h1 class="index-header-title"><strong>Plateforme Géospatiale Canadienne (PGC) - Projet GeoView -</strong></h1>
+    <h1 class="index-header-title"><strong>Canadian Geospatial Platform (CGP) - GeoView Project -</strong></h1>
+    <hr />
+    <hr />
+    <br />
+    <br />
+    <h4>Sandbox</h4>
+    <a class="page-link" href="./sandbox.html">Sandbox</a>
+    <h4>Basic Maps</h4>
+    <a class="page-link" href="./use-cases.html">Use Cases</a>
+    <a class="page-link" href="./basemaps.html">Basemaps</a>
+    <a class="page-link" href="./projections.html">Projections</a>
+    <a class="page-link" href="./languages.html">Languages</a>
+    <h4>Basic Raw Components</h4>
+    <a class="page-link" href="./raw-feature-info.html">Basic Details</a>
+    <a class="page-link" href="./raw-data-table.html">Basic Data Table</a>
+    <a class="page-link" href="./raw-add-layers.html">Basic Add Layers</a>
+    <a class="page-link" href="./raw-app-bar.html">Basic App Bar Tabs</a>
+    <h4>Basic Loading</h4>
+    <a class="page-link" href="./default-config.html">Default Configuration</a>
+    <a class="page-link"
+      href="./api-loads.html?geoms=000183ed-8864-42f0-ae43-c4313a860720,0083baf1-8145-4207-a84f-3d85ef2943a5">API
+      loads</a>
+    <a class="page-link" href="./type-of-layers.html">Type Of Layers</a>
+    <a class="page-link" href="./pygeoapi-processes.html">pygeoapi process</a>
+    <a class="page-link" href="./layers-temporal.html">Layers - Temporal</a>
+    <h4>Internal Package</h4>
+    <a class="page-link" href="./loading-packages.html">Loading Packages</a>
+    <a class="page-link" href="./package-basemap-panel.html">Package - Basemap Panel</a>
+    <a class="page-link" href="./package-swiper.html">Package - Swiper</a>
+    <a class="page-link" href="./package-time-slider.html">Package - Time Slider</a>
+    <a class="page-link" href="./package-geochart.html">Package - GeoChart</a>
+    <a class="page-link" href="./package-footer-panel-geochart.html">Package - GeoChart (footer)</a>
+    <h4>API and Events</h4>
+    <a class="page-link" href="./api-functions-test.html">API Functions Test</a>
+    <a class="page-link" href="./events.html">Events</a>
+    <a class="page-link" href="./add-panels.html">Add Panels</a>
+    <a class="page-link" href="./geometry.html">Geometry</a>
+    <a class="page-link" href="./footer-bar.html">Footer bar (vanilla JS)</a>
+    <h4>UI Components</h4>
+    <a class="page-link" href="./ui-components.html">UI Components</a>
+    <a class="page-link" href="./theme-switching.html">Theme Switching</a>
+    <h4>Interactions</h4>
+    <a class="page-link" href="./inter-all.html">Interactions (all-in)</a>
+    <a class="page-link" href="./inter-select.html">Select</a>
+    <a class="page-link" href="./inter-draw.html">Draw</a>
+    <a class="page-link" href="./inter-modify.html">Modify</a>
+    <a class="page-link" href="./inter-translate.html">Translate</a>
+    <a class="page-link" href="./inter-snap.html">Snap</a>
+    <a class="page-link" href="./inter-extent.html">Extent</a>
+    <h4>Other</h4>
+    <a class="page-link" href="./responsive_page.html">Responsive Page</a>
+    <a class="page-link" href="./load-test.html">Performance Test</a>
+    <a class="page-link" href="./cgdi-demo.html">CGDI Demo</a>
+  </div>
+</body>
+
+</html>