From e69b7700b94cc3df0ff8614fac349c7f79f902e5 Mon Sep 17 00:00:00 2001 From: guichoquette <159962452+guichoquette@users.noreply.github.com> Date: Tue, 16 Jul 2024 14:44:45 -0400 Subject: [PATCH] 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 | 2 + packages/geoview-aoi-panel/src/aoi-panel.tsx | 88 ++++++++++++------- .../src/area-of-interest-style.ts | 4 + packages/geoview-aoi-panel/src/index.tsx | 2 +- ...26-package-area-of-interest-aoi-panel.json | 12 ++- 5 files changed, 71 insertions(+), 37 deletions(-) diff --git a/packages/geoview-aoi-panel/schema.json b/packages/geoview-aoi-panel/schema.json index 4412bd3b0e0..87faed7eb06 100644 --- a/packages/geoview-aoi-panel/schema.json +++ b/packages/geoview-aoi-panel/schema.json @@ -26,6 +26,8 @@ }, "extent": { "type": "array", + "minItems": 4, + "maxItems": 4, "items": [ { "type": "number", diff --git a/packages/geoview-aoi-panel/src/aoi-panel.tsx b/packages/geoview-aoi-panel/src/aoi-panel.tsx index 5d0f50de8cd..f54c62a5066 100644 --- a/packages/geoview-aoi-panel/src/aoi-panel.tsx +++ b/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
; +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 ( + + {aoiList.map((aoiItem: AoiItem, index) => { + return ( + 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 + + )} + + } + /> + ); + })} + + ); } diff --git a/packages/geoview-aoi-panel/src/area-of-interest-style.ts b/packages/geoview-aoi-panel/src/area-of-interest-style.ts index a59fc66dd2a..2a3a63d5fe4 100644 --- a/packages/geoview-aoi-panel/src/area-of-interest-style.ts +++ b/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, diff --git a/packages/geoview-aoi-panel/src/index.tsx b/packages/geoview-aoi-panel/src/index.tsx index 4a90b50659f..b95dc66cda9 100644 --- a/packages/geoview-aoi-panel/src/index.tsx +++ b/packages/geoview-aoi-panel/src/index.tsx @@ -67,7 +67,7 @@ class AoiPanelPlugin extends AppBarPlugin { } override onCreateContent = (): JSX.Element => { - return ; + return ; }; /** diff --git a/packages/geoview-core/public/configs/navigator/26-package-area-of-interest-aoi-panel.json b/packages/geoview-core/public/configs/navigator/26-package-area-of-interest-aoi-panel.json index 084ed8d3076..21e3134313f 100644 --- a/packages/geoview-core/public/configs/navigator/26-package-area-of-interest-aoi-panel.json +++ b/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"