2366 aoi UI implementation phase1 (#2367)

* Aoi ui phase 1

* Complete Version of AOI package

* Complete Version of AOI package with zoom fixed

* ready for testing

* correction asked

packages/geoview-aoi-panel/schema.json

@@ -26,6 +26,8 @@
           },
           "extent": {
             "type": "array",
+            "minItems": 4,
+            "maxItems": 4,
             "items": [
               {
                 "type": "number",

packages/geoview-aoi-panel/src/aoi-panel.tsx

@@ -1,39 +1,61 @@
-// import { TypeBasemapProps } from 'geoview-core/src/geo/layer/basemap/basemap-types';
-// import { TypeJsonObject } from 'geoview-core/src/core/types/global-types';
-// import { useMapProjection } from 'geoview-core/src/core/stores/store-interface-and-intial-values/map-state';
-// import { useAppDisplayLanguage } from 'geoview-core/src/core/stores/store-interface-and-intial-values/app-state';
-// import { TypeValidMapProjectionCodes, TypeDisplayLanguage } from 'geoview-core/src/api/config/types/map-schema-types';
-// import { logger } from 'geoview-core/src/core/utils/logger';
-// import { getLocalizedMessage } from 'geoview-core/src/core/utils/utilities';
-// import { getSxClasses } from './area-of-interest-style';
-
-/*
+import { Extent } from 'geoview-core/src/api/config/types/map-schema-types';
+import { getSxClasses } from './area-of-interest-style';
+
 interface AoiPanelProps {
   mapId: string;
-  config: TypeJsonObject;
+  config: TypeAoiProps;
 }
-*/
-
-export function AoiPanel(/* props: AoiPanelProps */): JSX.Element {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // const { mapId, config } = props;
-
-  // const { cgpv } = window;
-  // const myMap = cgpv.api.maps[mapId];
-
-  // const { api, ui, react } = cgpv;
-  //  const { Select, Card, Box } = ui.elements;
 
-  // const { useState } = react;
-
-  // const theme = ui.useTheme();
-  // const sxClasses = getSxClasses(theme);
-
-  // internal state and store values
-  // const language = useAppDisplayLanguage();
-
-  // #region PRIVATE UTILITY FUNCTIONS
-  // #endregion
+interface AoiItem {
+  aoiTitle: string;
+  imageUrl: string;
+  extent: Extent;
+}
 
-  return <div />;
+type AoiListItems = AoiItem[];
+
+type TypeAoiProps = {
+  isOpen: boolean;
+  aoiList: AoiListItems;
+  version: string;
+};
+
+export function AoiPanel(props: AoiPanelProps): JSX.Element {
+  const { mapId, config } = props;
+  const aoiList = config.aoiList as AoiListItems;
+
+  const { cgpv } = window;
+  const { api, ui } = cgpv;
+
+  const myMap = api.maps[mapId];
+  const { Card, Box } = ui.elements;
+
+  const theme = ui.useTheme();
+  const sxClasses = getSxClasses(theme);
+
+  return (
+    <Box sx={sxClasses.aoiCard}>
+      {aoiList.map((aoiItem: AoiItem, index) => {
+        return (
+          <Card
+            tabIndex={0}
+            className="aoiCardThumbnail"
+            onClick={() => myMap.zoomToLngLatExtentOrCoordinate(aoiItem.extent, { maxZoom: 14 })}
+            // eslint-disable-next-line react/no-array-index-key
+            key={index}
+            title={aoiItem.aoiTitle}
+            contentCard={
+              // eslint-disable-next-line react/jsx-no-useless-fragment
+              <>
+                {typeof aoiItem.imageUrl === 'string' && (
+                  // eslint-disable-next-line react/no-array-index-key
+                  <Box component="img" key={index} src={aoiItem.imageUrl} alt="" className="aoiCardThumbnail" />
+                )}
+              </>
+            }
+          />
+        );
+      })}
+    </Box>
+  );
 }

packages/geoview-aoi-panel/src/area-of-interest-style.ts

@@ -49,6 +49,10 @@ export const getSxClasses = (theme): any => ({
         position: 'absolute',
         height: '100%',
         width: '100%',
+        overflow: 'hidden',
+        border: '1px solid theme.palette.geoViewColor.ccc',
+        display: 'flex',
+        align: 'center',
         objectFit: 'cover',
         top: 0,
         left: 0,

packages/geoview-aoi-panel/src/index.tsx

@@ -67,7 +67,7 @@ class AoiPanelPlugin extends AppBarPlugin {
   }
 
   override onCreateContent = (): JSX.Element => {
-    return <AoiPanel /* mapId={this.pluginProps.mapId} config={this.configObj || {}} */ />;
+    return <AoiPanel mapId={this.pluginProps.mapId} config={this.configObj || {}} />;
   };
 
   /**

packages/geoview-core/public/configs/navigator/26-package-area-of-interest-aoi-panel.json

@@ -1,9 +1,15 @@
 {
-    "aoiList": [
+  "isOpen": true,
+  "aoiList": [
     {
-      "imageUrl": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Toronto_-_ON_-_CN_Tower_Turmkorb.jpg/1920px-Toronto_-_ON_-_CN_Tower_Turmkorb.jpg",
+      "imageUrl": "https://encrypted-tbn1.gstatic.com/licensed-image?q=tbn:ANd9GcSbleN5tjC2Dilx77SCBJD9f3CxlnDEEGx5qY786BpVlu4JLzUd1ixjIOfO1WX5mJjUQLmSSg4JFuNWgqGZJZDV7LBH8y3QBz3KrjuHdg",
       "aoiTitle": "CN Tower",
-      "extent": [-88, 54, -86, 55]
+      "extent": [-79.3881, 43.6416, -79.3861, 43.6436]
+    },
+    {
+      "imageUrl": "https://encrypted-tbn0.gstatic.com/licensed-image?q=tbn:ANd9GcTCSU8D4pV4fY9MfYa6NZvpcMrCDhxE-ySOSzbxqSCC67_loNeJ9WI-2Ki7zCfU36M0Iwt7-4aw0y3_Vg8t_8sxo86xS6HVewQdYjOOXA",
+      "aoiTitle": "Parliament Hill",
+      "extent": [-75.7019, 45.4226, -75.6999, 45.4246]
     }
   ],
   "version": "1.0"