Aoi ui phase 1

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,73 @@
 // 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 { Extent } 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 { getSxClasses } from './area-of-interest-style';
 
-/*
 interface AoiPanelProps {
-  mapId: string;
-  config: TypeJsonObject;
+  config: TypeAoiProps;
 }
-*/
 
-export function AoiPanel(/* props: AoiPanelProps */): JSX.Element {
+interface AoiItem {
+  aoiTitle: string;
+  imageUrl: string;
+  extent: Extent;
+}
+
+type AoiListItems = AoiItem[];
+
+type TypeAoiProps = {
+  isOpen: boolean;
+  aoiList: AoiListItems;
+  version: string;
+};
+
+export function AoiPanel(props: AoiPanelProps): JSX.Element {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // const { mapId, config } = props;
+  const { config } = props;
+  const aoiList = config.aoiList as AoiListItems;
 
-  // const { cgpv } = window;
+  const { cgpv } = window;
   // const myMap = cgpv.api.maps[mapId];
 
-  // const { api, ui, react } = cgpv;
-  //  const { Select, Card, Box } = ui.elements;
+  const { /* api, */ ui /* , react */ } = cgpv;
+  const { Card, Box } = ui.elements;
 
   // const { useState } = react;
 
-  // const theme = ui.useTheme();
-  // const sxClasses = getSxClasses(theme);
+  const theme = ui.useTheme();
+  const sxClasses = getSxClasses(theme);
 
   // internal state and store values
   // const language = useAppDisplayLanguage();
 
   // #region PRIVATE UTILITY FUNCTIONS
   // #endregion
-
-  return <div />;
+  return (
+    <Box sx={sxClasses.basemapCard}>
+      {aoiList.map((aoiItem: AoiItem, index) => {
+        return (
+          <Card
+            tabIndex={0}
+            // onClick={() => setBasemap(basemap.basemapId as string)}
+            // onKeyPress={() => setBasemap(basemap.basemapId as string)}
+            // 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/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 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]
+    },
+    {
+      "imageUrl": "https://encrypted-tbn1.gstatic.com/licensed-image?q=tbn:ANd9GcSBi4wPb6cqdEkCPXnvIwZT93nShHZ11ftQKG4dnI2VGF00cap2zciuSTlF2OT7m96rvl9QARF7d6kklL-2yCEyrWHPEEd-Ym-7X1jTjw",
+      "aoiTitle": "CN Tower2",
+      "extent": [-88, 54, -86, 55]
     }
   ],
   "version": "1.0"