diff --git a/packages/geoview-core/public/templates/loading-packages.html b/packages/geoview-core/public/templates/loading-packages.html
index 0fd610a5f2f..ae70e2ddadb 100644
--- a/packages/geoview-core/public/templates/loading-packages.html
+++ b/packages/geoview-core/public/templates/loading-packages.html
@@ -87,6 +87,8 @@
Loading Packages
+
+
@@ -118,6 +120,23 @@
Loading Packages
unloadBasemapPanelBtn.addEventListener('click', function (e) {
cgpv.api.plugin.removePlugin('basemap-panel', 'mapWM');
});
+ // get load aoi panel button element
+ var loadAoiPanelBtn = document.getElementById('load-aoi-panel-btn');
+
+ // add event handler to the load aoi panel button
+ loadAoiPanelBtn.addEventListener('click', function (e) {
+ cgpv.api.plugin.addPlugin('aoi-panel', 'mapWM', window.geoviewPlugins['aoi-panel'], {
+ mapId: 'mapWM',
+ });
+ });
+
+ // get unload aoi panel button element
+ var unloadAoiPanelBtn = document.getElementById('unload-aoi-panel-btn');
+
+ // add event handler to the unload aoi panel button
+ unloadAoiPanelBtn.addEventListener('click', function (e) {
+ cgpv.api.plugin.removePlugin('aoi-panel', 'mapWM');
+ });
}
});
diff --git a/packages/geoview-core/src/api/config/types/config-validation-schema.json b/packages/geoview-core/src/api/config/types/config-validation-schema.json
index 0f3cfb6d2ec..3901e01d65b 100644
--- a/packages/geoview-core/src/api/config/types/config-validation-schema.json
+++ b/packages/geoview-core/src/api/config/types/config-validation-schema.json
@@ -166,7 +166,7 @@
"TypeValidAppBarCoreProps": {
"description": "Valid values for the app bar tabs core array.",
"additionalProperties": false,
- "enum": ["geolocator", "export", "basemap-panel", "geochart", "details", "legend", "guide", "data-table", "layers"]
+ "enum": ["geolocator", "export", "basemap-panel", "geochart", "details", "legend", "guide", "data-table", "layers", "aoi-panel"]
},
"TypeAppBarProps": {
"type": "object",
diff --git a/packages/geoview-core/src/api/config/types/map-schema-types.ts b/packages/geoview-core/src/api/config/types/map-schema-types.ts
index d664616a8a0..95443fa69f5 100644
--- a/packages/geoview-core/src/api/config/types/map-schema-types.ts
+++ b/packages/geoview-core/src/api/config/types/map-schema-types.ts
@@ -60,6 +60,7 @@ export type TypeValidAppBarCoreProps =
| 'geolocator'
| 'export'
| 'basemap-panel'
+ | 'aoi-panel'
| 'geochart'
| 'guide'
| 'legend'
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 6a9d490c5b7..d04e6a23aa1 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
@@ -50,6 +50,7 @@ import { TypeJsonObject, TypeJsonValue, toJsonObject } from '@/core/types/global
import { AbstractPlugin } from '@/api/plugin/abstract-plugin';
import { CV_DEFAULT_APPBAR_CORE, CV_DEFAULT_APPBAR_TABS_ORDER } from '@/api/config/types/config-constants';
import { CONTAINER_TYPE } from '@/core/utils/constant';
+import { TypeValidAppBarCoreProps } from '@/api/config/types/map-schema-types';
interface GroupPanelType {
icon: ReactNode;
@@ -122,7 +123,7 @@ export function AppBar(props: AppBarProps): JSX.Element {
layers: { icon:
, content:
},
'data-table': { icon:
, content:
},
} as unknown as Record
;
- }, []);
+ }, [interaction]);
const closePanelById = useCallback(
(buttonId: string, groupName: string | undefined) => {
@@ -267,28 +268,32 @@ export function AppBar(props: AppBarProps): JSX.Element {
// Log
logger.logTraceUseEffect('APP-BAR - appBarConfig');
- // Packages tab
- if (appBarConfig && appBarConfig.tabs.core.includes('basemap-panel')) {
- // create a new tab by loading the plugin
- Plugin.loadScript('basemap-panel')
- .then((constructor: AbstractPlugin | ((pluginId: string, props: TypeJsonObject) => TypeJsonValue)) => {
- Plugin.addPlugin(
- 'basemap-panel',
- mapId,
- constructor,
- toJsonObject({
+ const processPlugin = (pluginName: TypeValidAppBarCoreProps): void => {
+ // Packages tab
+ if (appBarConfig && appBarConfig.tabs.core.includes(pluginName)) {
+ // create a new tab by loading the plugin
+ Plugin.loadScript(pluginName)
+ .then((constructor: AbstractPlugin | ((pluginId: string, props: TypeJsonObject) => TypeJsonValue)) => {
+ Plugin.addPlugin(
+ pluginName,
mapId,
- })
- ).catch((error) => {
+ constructor,
+ toJsonObject({
+ mapId,
+ })
+ ).catch((error) => {
+ // Log
+ logger.logPromiseFailed(`api.plugin.addPlugin in useEffect in app-bar for ${pluginName}`, error);
+ });
+ })
+ .catch((error) => {
// Log
- logger.logPromiseFailed('api.plugin.addPlugin in useEffect in app-bar', error);
+ logger.logPromiseFailed('api.plugin.loadScript in useEffect in app-bar', error);
});
- })
- .catch((error) => {
- // Log
- logger.logPromiseFailed('api.plugin.loadScript in useEffect in app-bar', error);
- });
- }
+ }
+ };
+ processPlugin('basemap-panel');
+ processPlugin('aoi-panel');
}, [appBarConfig, mapId]);
useEffect(() => {
@@ -325,7 +330,7 @@ export function AppBar(props: AppBarProps): JSX.Element {
return [button, panel, tab];
})
.forEach((footerGroup) => appBarApi.createAppbarPanel(footerGroup[0], footerGroup[1], footerGroup[2]));
- }, [appBarConfig?.tabs.core, appBarApi, t, memoPanels, geoviewElement, getPanelWidth]);
+ }, [footerBarConfig?.tabs.core, appBarConfig?.tabs.core, appBarApi, t, memoPanels, geoviewElement, getPanelWidth]);
// #endregion
diff --git a/packages/geoview-core/src/ui/icons/index.ts b/packages/geoview-core/src/ui/icons/index.ts
index 9e33a183b41..cff7b85ecc0 100644
--- a/packages/geoview-core/src/ui/icons/index.ts
+++ b/packages/geoview-core/src/ui/icons/index.ts
@@ -22,6 +22,7 @@ export {
ChevronLeft as ChevronLeftIcon,
ChevronRight as ChevronRightIcon,
Close as CloseIcon,
+ CropOriginal as AoiIcon,
Delete as DeleteIcon,
DeleteOutline as DeleteOutlineIcon,
Details as DetailsIcon,
diff --git a/packages/geoview-core/webpack.common.js b/packages/geoview-core/webpack.common.js
index ea9f13cc1b3..476472f358d 100644
--- a/packages/geoview-core/webpack.common.js
+++ b/packages/geoview-core/webpack.common.js
@@ -69,6 +69,11 @@ const multipleHtmlPluginsOutliers = glob.sync('./public/templates/outliers/*.htm
const config = {
entry: {
'cgpv-main': './src/app.tsx',
+ 'geoview-aoi-panel': {
+ import: '../geoview-aoi-panel/src/index.tsx',
+ dependOn: 'cgpv-main',
+ filename: 'corePackages/[name].js',
+ },
'geoview-basemap-panel': {
import: '../geoview-basemap-panel/src/index.tsx',
dependOn: 'cgpv-main',
diff --git a/rush.json b/rush.json
index 8ee11e76b3b..22b5518321c 100644
--- a/rush.json
+++ b/rush.json
@@ -19,6 +19,10 @@
"url": "https://github.com/Canadian-Geospatial-Platform/geoview"
},
"projects": [
+ {
+ "packageName": "geoview-aoi-panel",
+ "projectFolder": "packages/geoview-aoi-panel"
+ },
{
"packageName": "geoview-basemap-panel",
"projectFolder": "packages/geoview-basemap-panel"