>;
@@ -13,13 +14,28 @@ export function LeftPanel({ setIsLayersListPanelVisible }: LeftPanelProps): JSX.
logger.logTraceRender('components/layers/left-panel/left-panel');
// get from the store
- const legendLayers = useLayersList();
- const displayState = useLayersDisplayState();
+ const legendLayers = useLayerLegendLayers();
+ const displayState = useLayerDisplayState();
+ const orderedLayerInfo = useMapOrderedLayerInfo();
+ const { getIndexFromOrderedLayerInfo } = useMapStoreActions();
+ const [orderedLegendLayers, setOrderedLegendLayers] = useState
([]);
+
+ useEffect(() => {
+ const sortedLayers = legendLayers.sort((a, b) =>
+ getIndexFromOrderedLayerInfo(a.layerPath) > getIndexFromOrderedLayerInfo(b.layerPath) ? 1 : -1
+ );
+ setOrderedLegendLayers(sortedLayers);
+ }, [orderedLayerInfo, legendLayers, getIndexFromOrderedLayerInfo]);
if (displayState === 'add') {
return ;
}
return (
-
+
);
}
diff --git a/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx b/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx
index 58928b98f75..8b222582330 100644
--- a/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx
+++ b/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx
@@ -21,10 +21,11 @@ import {
import { TypeLegendLayer } from '../types';
import {
useLayerStoreActions,
- useLayersDisplayState,
- useSelectedLayerPath,
+ useLayerDisplayState,
+ useLayerSelectedLayerPath,
} from '@/core/stores/store-interface-and-intial-values/layer-state';
import { useDataTableStoreMapFilteredRecord } from '@/core/stores/store-interface-and-intial-values/data-table-state';
+import { useMapStoreActions } from '@/core/stores/store-interface-and-intial-values/map-state';
import { DeleteUndoButton } from './delete-undo-button';
import { LayersList } from './layers-list';
import { LayerIcon } from '../layer-icon';
@@ -43,10 +44,11 @@ export function SingleLayer({ isDragging, depth, layer, setIsLayersListPanelVisi
const { t } = useTranslation();
- const { toggleLayerVisibility, setSelectedLayerPath } = useLayerStoreActions(); // get store actions
-
- const selectedLayerPath = useSelectedLayerPath(); // get store value
- const displayState = useLayersDisplayState();
+ // Get store states
+ const { setSelectedLayerPath } = useLayerStoreActions();
+ const { getVisibilityFromOrderedLayerInfo, setOrToggleLayerVisibility } = useMapStoreActions();
+ const selectedLayerPath = useLayerSelectedLayerPath();
+ const displayState = useLayerDisplayState();
const mapFiltered = useDataTableStoreMapFilteredRecord();
// if any of the chiild layers is selected return true
@@ -69,7 +71,7 @@ export function SingleLayer({ isDragging, depth, layer, setIsLayersListPanelVisi
// returns true if any of the layer children or items has visibility of 'always'
const layerHasAlwaysVisible = (startingLayer: TypeLegendLayer): boolean => {
- if (startingLayer.isVisible === 'always') {
+ if (getVisibilityFromOrderedLayerInfo(startingLayer.layerPath) === 'always') {
return true;
}
let itemsHasAlways = false;
@@ -138,7 +140,7 @@ export function SingleLayer({ isDragging, depth, layer, setIsLayersListPanelVisi
};
const handleToggleVisibility = () => {
- toggleLayerVisibility(layer.layerPath);
+ setOrToggleLayerVisibility(layer.layerPath);
};
const handleReloadLayer = () => {
@@ -194,7 +196,7 @@ export function SingleLayer({ isDragging, depth, layer, setIsLayersListPanelVisi
className="style1"
>
{(() => {
- if (layer.isVisible === 'no') return ;
+ if (getVisibilityFromOrderedLayerInfo(layer.layerPath) === 'no') return ;
return ;
})()}
diff --git a/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx b/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx
index 10bd5808331..794dc814526 100644
--- a/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx
+++ b/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx
@@ -23,8 +23,7 @@ import {
ListItem,
List,
} from '@/ui';
-import { useLayerHighlightedLayer, useLayerStoreActions } from '@/core/stores/store-interface-and-intial-values/layer-state';
-import { useUIStoreActions } from '@/core/stores/store-interface-and-intial-values/ui-state';
+import { useLayerHighlightedLayer, useLayerStoreActions, useUIStoreActions, useMapStoreActions } from '@/core/stores';
import { generateId } from '@/core/utils/utilities';
import { LayerIcon } from '../layer-icon';
import { LayerOpacityControl } from './layer-opacity-control/layer-opacity-control';
@@ -49,6 +48,7 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element {
const highlightedLayer = useLayerHighlightedLayer();
const { setAllItemsVisibility, toggleItemVisibility, setHighlightLayer, zoomToLayerExtent, getLayerBounds } = useLayerStoreActions();
const { openModal } = useUIStoreActions();
+ const { getVisibilityFromOrderedLayerInfo } = useMapStoreActions();
const handleZoomTo = () => {
zoomToLayerExtent(layerDetails.layerPath);
@@ -94,7 +94,7 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element {
) {
return null;
}
- if (item.isVisible === 'always' || layerDetails.isVisible === 'always' || !layerDetails.canToggle) {
+ if (item.isVisible === 'always' || getVisibilityFromOrderedLayerInfo(layerDetails.layerPath) === 'always' || !layerDetails.canToggle) {
return (
{' '}
@@ -112,7 +112,7 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element {
function renderHeaderCheckbox() {
const containsDisabled = _.some(layerDetails.items, (i) => i.isVisible === 'always');
- if (layerDetails.isVisible === 'always' || !layerDetails.canToggle || containsDisabled) {
+ if (getVisibilityFromOrderedLayerInfo(layerDetails.layerPath) === 'always' || !layerDetails.canToggle || containsDisabled) {
return (
{' '}
diff --git a/packages/geoview-core/src/core/components/layers/types.ts b/packages/geoview-core/src/core/components/layers/types.ts
index aa4398fdbe5..0b1078d1055 100644
--- a/packages/geoview-core/src/core/components/layers/types.ts
+++ b/packages/geoview-core/src/core/components/layers/types.ts
@@ -30,15 +30,12 @@ export interface TypeLegendLayer {
layerPath: string;
layerAttribution?: string[];
metadataAccessPath?: string;
- order: number; // useful for ordering layers
layerName: string;
type?: TypeGeoviewLayerType;
styleConfig?: TypeStyleConfig | null;
layerStatus?: TypeLayerStatus;
layerPhase?: string;
querySent?: boolean;
-
- isVisible: TypeVisibilityFlags; // is layer is visible
canToggle?: boolean; // can sublayer visibility be toggled
icons?: TypeLegendLayerIcons;
@@ -49,7 +46,5 @@ export interface TypeLegendLayer {
opacity?: number;
opacityFromParent?: number;
zoom?: number;
-
- isRemovable?: boolean;
canSetOpacity?: boolean;
}
diff --git a/packages/geoview-core/src/core/components/legend/legend-layer.tsx b/packages/geoview-core/src/core/components/legend/legend-layer.tsx
index 22d370859c1..5c8d0240d6c 100644
--- a/packages/geoview-core/src/core/components/legend/legend-layer.tsx
+++ b/packages/geoview-core/src/core/components/legend/legend-layer.tsx
@@ -15,6 +15,7 @@ import {
KeyboardArrowUpIcon,
} from '@/ui';
import { TypeLegendLayer } from '@/core/components/layers/types';
+import { useMapStoreActions } from '@/core/stores/';
import { getSxClasses } from './legend-styles';
import { LayerIcon } from '../layers/layer-icon';
import { logger } from '@/core/utils/logger';
@@ -34,9 +35,12 @@ export function LegendLayer(props: LegendLayerProps): JSX.Element {
const sxClasses = getSxClasses(theme);
const [isGroupOpen, setGroupOpen] = useState(true);
+ const { getVisibilityFromOrderedLayerInfo } = useMapStoreActions();
const getLayerChildren = () => {
- return layer.children?.filter((c) => c.isVisible !== 'no' && ['processed', 'loaded'].includes(c.layerStatus ?? ''));
+ return layer.children?.filter(
+ (c) => getVisibilityFromOrderedLayerInfo(c.layerPath) !== 'no' && ['processed', 'loaded'].includes(c.layerStatus ?? '')
+ );
};
/**
@@ -68,7 +72,7 @@ export function LegendLayer(props: LegendLayerProps): JSX.Element {
return (
{layer.children
- .filter((d) => d.isVisible !== 'no' && !['error', 'processing'].includes(d.layerStatus ?? ''))
+ .filter((d) => getVisibilityFromOrderedLayerInfo(d.layerPath) !== 'no' && !['error', 'processing'].includes(d.layerStatus ?? ''))
.map((item) => (
))}
diff --git a/packages/geoview-core/src/core/components/legend/legend.tsx b/packages/geoview-core/src/core/components/legend/legend.tsx
index 824778265c8..9e7897849da 100644
--- a/packages/geoview-core/src/core/components/legend/legend.tsx
+++ b/packages/geoview-core/src/core/components/legend/legend.tsx
@@ -2,7 +2,7 @@ import { useTheme } from '@mui/material';
import { useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Box, Paper, Typography } from '@/ui';
-import { useMapVisibleLayers, useLayerStoreActions } from '@/core/stores/';
+import { useLayerLegendLayers, useMapOrderedLayerInfo, useLayerStoreActions } from '@/core/stores/';
import { logger } from '@/core/utils/logger';
import { getSxClasses } from './legend-styles';
@@ -28,7 +28,8 @@ export function Legend({ fullWidth }: LegendType): JSX.Element {
const [formattedLegendLayerList, setFormattedLegendLayersList] = useState([]);
// store state
- const visibleLayers = useMapVisibleLayers();
+ const orderedLayerInfo = useMapOrderedLayerInfo();
+ const layersList = useLayerLegendLayers();
const { getLayer } = useLayerStoreActions();
// Custom hook for calculating the height of footer panel
@@ -72,16 +73,24 @@ export function Legend({ fullWidth }: LegendType): JSX.Element {
useEffect(() => {
// Log
- logger.logTraceUseEffect('LEGEND - visiblelayers', visibleLayers.length, visibleLayers);
+ logger.logTraceUseEffect('LEGEND - orderedLayerInfo', orderedLayerInfo.length, orderedLayerInfo);
+
+ const visibleLayers = orderedLayerInfo
+ .map((layerInfo) => {
+ if (layerInfo.visible !== 'no') return layerInfo.layerPath;
+ return undefined;
+ })
+ .filter((layerPath) => layerPath !== undefined);
// Loop on the visible layers to retrieve the valid TypeLegendLayer objects
const parentPaths: string[] = [];
+
const layers = visibleLayers
.map((layerPath) => {
- const pathStart = layerPath.split('/')[0];
+ const pathStart = layerPath!.split('/')[0];
if (!parentPaths.includes(pathStart)) {
parentPaths.push(pathStart);
- return getLayer(layerPath);
+ return getLayer(layerPath!);
}
return undefined;
})
@@ -91,7 +100,7 @@ export function Legend({ fullWidth }: LegendType): JSX.Element {
updateLegendLayerListByWindowSize(layers);
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [getLayer, visibleLayers]);
+ }, [orderedLayerInfo, layersList]);
useEffect(() => {
// Log
diff --git a/packages/geoview-core/src/core/stores/store-interface-and-intial-values/layer-state.ts b/packages/geoview-core/src/core/stores/store-interface-and-intial-values/layer-state.ts
index 3ae53a368d7..1569edc2c89 100644
--- a/packages/geoview-core/src/core/stores/store-interface-and-intial-values/layer-state.ts
+++ b/packages/geoview-core/src/core/stores/store-interface-and-intial-values/layer-state.ts
@@ -20,12 +20,11 @@ import { MapEventProcessor } from '@/api/event-processors/event-processor-childr
export interface ILayerState {
highlightedLayer: string;
- selectedItem?: TypeLegendLayer;
- selectedIsVisible: boolean;
selectedLayer: TypeLegendLayer;
selectedLayerPath: string | undefined | null;
legendLayers: TypeLegendLayer[];
displayState: TypeLayersViewDisplayState;
+
actions: {
setLegendLayers: (legendLayers: TypeLegendLayer[]) => void;
getLayer: (layerPath: string) => TypeLegendLayer | undefined;
@@ -33,9 +32,7 @@ export interface ILayerState {
setDisplayState: (newDisplayState: TypeLayersViewDisplayState) => void;
setHighlightLayer: (layerPath: string) => void;
setLayerOpacity: (layerPath: string, opacity: number) => void;
- reorderLayer: (startIndex: number, endIndex: number, layerPath: string) => void;
setSelectedLayerPath: (layerPath: string) => void;
- toggleLayerVisibility: (layerPath: string) => void;
toggleItemVisibility: (layerPath: string, geometryType: TypeStyleGeometry, itemName: string) => void;
setAllItemsVisibility: (layerPath: string, visibility: 'yes' | 'no') => void;
deleteLayer: (layerPath: string) => void;
@@ -46,7 +43,6 @@ export interface ILayerState {
export function initializeLayerState(set: TypeSetStore, get: TypeGetStore): ILayerState {
const init = {
highlightedLayer: '',
- selectedIsVisible: false,
legendLayers: [] as TypeLegendLayer[],
selectedLayerPath: null,
displayState: 'view',
@@ -133,50 +129,40 @@ export function initializeLayerState(set: TypeSetStore, get: TypeGetStore): ILay
},
});
},
- toggleLayerVisibility: (layerPath: string) => {
- const curLayers = get().layerState.legendLayers;
- const layer = findLayerByPath(curLayers, layerPath);
- setVisibilityInLayerAndItems(layer as TypeLegendLayer, layer?.isVisible === 'no' ? 'yes' : 'no');
- // TODO: keep reference to geoview map instance in the store or keep accessing with api - discussion
- //! may not work with group items ... see if Yves work will make this simplier
- api.maps[get().mapId].layer.geoviewLayer(layerPath).setVisible(layer?.isVisible !== 'no', layerPath);
-
- // now update store
- set({
- layerState: {
- ...get().layerState,
- legendLayers: [...curLayers],
- },
- });
- },
toggleItemVisibility: (layerPath: string, geometryType: TypeStyleGeometry, itemName: string) => {
const curLayers = get().layerState.legendLayers;
const registeredLayer = api.maps[get().mapId].layer.registeredLayers[layerPath] as TypeVectorLayerEntryConfig;
const layer = findLayerByPath(curLayers, layerPath);
if (layer) {
- _.each(layer.items, (item, index) => {
+ _.each(layer.items, (item) => {
if (item.geometryType === geometryType && item.name === itemName && item.isVisible !== 'always') {
item.isVisible = item.isVisible === 'no' ? 'yes' : 'no'; // eslint-disable-line no-param-reassign
- if (item.isVisible === 'yes' && layer.isVisible === 'no') {
- layer.isVisible = 'yes';
+ if (item.isVisible === 'yes' && MapEventProcessor.getMapVisibilityFromOrderedLayerInfo(get().mapId, layerPath) === 'no') {
+ MapEventProcessor.setOrToggleMapVisibilty(get().mapId, layerPath, 'yes');
}
// assign value to registered layer. This is use by applyFilter function to set visibility
// TODO: check if we need to refactor to centralize attribute setting....
// TODO: know issue when we toggle a default visibility item https://github.com/Canadian-Geospatial-Platform/geoview/issues/1564
if (registeredLayer.style![geometryType]?.styleType === 'classBreaks') {
- (registeredLayer.style![geometryType]! as TypeClassBreakStyleConfig).classBreakStyleInfo[index].visible = item.isVisible;
+ const geometryStyleConfig = registeredLayer.style![geometryType]! as TypeClassBreakStyleConfig;
+ const classBreakStyleInfo = geometryStyleConfig.classBreakStyleInfo.find((styleInfo) => styleInfo.label === itemName);
+ if (classBreakStyleInfo) classBreakStyleInfo.visible = item.isVisible;
+ else geometryStyleConfig.defaultVisible = item.isVisible;
} else if (registeredLayer.style![geometryType]?.styleType === 'uniqueValue') {
- (registeredLayer.style![geometryType]! as TypeUniqueValueStyleConfig).uniqueValueStyleInfo[index].visible = item.isVisible;
+ const geometryStyleConfig = registeredLayer.style![geometryType]! as TypeUniqueValueStyleConfig;
+ const uniqueStyleInfo = geometryStyleConfig.uniqueValueStyleInfo.find((styleInfo) => styleInfo.label === itemName);
+ if (uniqueStyleInfo) uniqueStyleInfo.visible = item.isVisible;
+ else geometryStyleConfig.defaultVisible = item.isVisible;
}
}
});
// 'always' is neither 'yes', nor 'no'.
const allItemsUnchecked = _.every(layer.items, (i) => ['no', 'always'].includes(i.isVisible!));
- if (allItemsUnchecked && layer.isVisible !== 'always') {
- layer.isVisible = 'no';
+ if (allItemsUnchecked) {
+ MapEventProcessor.setOrToggleMapVisibilty(get().mapId, layerPath, 'no');
}
// apply filter to layer
@@ -190,30 +176,40 @@ export function initializeLayerState(set: TypeSetStore, get: TypeGetStore): ILay
});
},
setAllItemsVisibility: (layerPath: string, visibility: 'yes' | 'no') => {
+ MapEventProcessor.setOrToggleMapVisibilty(get().mapId, layerPath, visibility);
const curLayers = get().layerState.legendLayers;
const registeredLayer = api.maps[get().mapId].layer.registeredLayers[layerPath] as TypeVectorLayerEntryConfig;
const layer = findLayerByPath(curLayers, layerPath);
if (layer) {
- _.each(layer.items, (item, index) => {
- if (item.isVisible !== 'always') {
- item.isVisible = visibility; // eslint-disable-line no-param-reassign
-
- // assign value to registered layer. This is use by applyFilter function to set visibility
- // TODO: check if we need to refactor to centralize attribute setting....
- if (registeredLayer.style && registeredLayer.style![item.geometryType]?.styleType === 'classBreaks') {
- (registeredLayer.style![item.geometryType]! as TypeClassBreakStyleConfig).classBreakStyleInfo[index].visible =
- item.isVisible;
- } else if (registeredLayer.style![item.geometryType]?.styleType === 'uniqueValue') {
- (registeredLayer.style![item.geometryType]! as TypeUniqueValueStyleConfig).uniqueValueStyleInfo[index].visible =
- item.isVisible;
- }
- }
+ _.each(layer.items, (item) => {
+ // eslint-disable-next-line no-param-reassign
+ if (item.isVisible !== 'always') item.isVisible = visibility;
});
- // TODO: this visibility flag for the store should we use to show/hide icon on the layer item list (if always in child, no toggle visibility)
- // This should be set at init of layer
- if (layer.isVisible !== 'always') {
- layer.isVisible = visibility;
+ // assign value to registered layer. This is use by applyFilter function to set visibility
+ // TODO: check if we need to refactor to centralize attribute setting....
+ if (registeredLayer.style) {
+ ['Point', 'LineString', 'Polygon'].forEach((geometry) => {
+ if (registeredLayer.style![geometry as TypeStyleGeometry]) {
+ if (registeredLayer.style![geometry as TypeStyleGeometry]?.styleType === 'classBreaks') {
+ const geometryStyleConfig = registeredLayer.style![geometry as TypeStyleGeometry]! as TypeClassBreakStyleConfig;
+ if (geometryStyleConfig.defaultVisible && geometryStyleConfig.defaultVisible !== 'always')
+ geometryStyleConfig.defaultVisible = visibility;
+ geometryStyleConfig.classBreakStyleInfo.forEach((styleInfo) => {
+ // eslint-disable-next-line no-param-reassign
+ if (styleInfo.visible !== 'always') styleInfo.visible = visibility;
+ });
+ } else if (registeredLayer.style![geometry as TypeStyleGeometry]?.styleType === 'uniqueValue') {
+ const geometryStyleConfig = registeredLayer.style![geometry as TypeStyleGeometry]! as TypeUniqueValueStyleConfig;
+ if (geometryStyleConfig.defaultVisible && geometryStyleConfig.defaultVisible !== 'always')
+ geometryStyleConfig.defaultVisible = visibility;
+ geometryStyleConfig.uniqueValueStyleInfo.forEach((styleInfo) => {
+ // eslint-disable-next-line no-param-reassign
+ if (styleInfo.visible !== 'always') styleInfo.visible = visibility;
+ });
+ }
+ }
+ });
}
}
@@ -228,7 +224,7 @@ export function initializeLayerState(set: TypeSetStore, get: TypeGetStore): ILay
// ! try to make reusable store actions....
// ! we can have always item.... we cannot set visibility so if present we will need to trap. Need more use case
// ! create a function setItemVisibility called with layer path and this function set the registered layer (from store values) then apply the filter.
- (api.maps[get().mapId].layer.geoviewLayer(layerPath) as AbstractGeoViewVector).applyViewFilter(layerPath);
+ (api.maps[get().mapId].layer.geoviewLayer(layerPath) as AbstractGeoViewVector).applyViewFilter('');
},
deleteLayer: (layerPath: string) => {
const curLayers = get().layerState.legendLayers;
@@ -249,16 +245,6 @@ export function initializeLayerState(set: TypeSetStore, get: TypeGetStore): ILay
const { bounds } = layer as TypeLegendLayer;
if (bounds) MapEventProcessor.zoomToExtent(get().mapId, bounds, options);
},
- reorderLayer: (startIndex: number, endIndex: number, layerPath: string) => {
- const curLayers = get().layerState.legendLayers;
- const reorderedLayers = reorderSingleLayer(curLayers, startIndex, endIndex, layerPath);
- set({
- layerState: {
- ...get().layerState,
- legendLayers: [...reorderedLayers],
- },
- });
- },
},
} as ILayerState;
@@ -267,24 +253,6 @@ export function initializeLayerState(set: TypeSetStore, get: TypeGetStore): ILay
// private functions
-// function set visibility in layer and its items
-function setVisibilityInLayerAndItems(layer: TypeLegendLayer, visibility: 'yes' | 'no') {
- if (layer.isVisible === 'always') {
- return;
- }
- _.set(layer, 'isVisible', visibility);
- _.each(layer.items, (item) => {
- if (item.isVisible !== 'always') {
- _.set(item, 'isVisible', visibility);
- }
- });
- if (layer.children && layer.children.length > 0) {
- _.each(layer.children, (child) => {
- setVisibilityInLayerAndItems(child, visibility);
- });
- }
-}
-
function setOpacityInLayerAndChildren(layer: TypeLegendLayer, opacity: number, mapId: string, isChild = false) {
_.set(layer, 'opacity', opacity);
api.maps[mapId].layer.geoviewLayer(layer.layerPath).setOpacity(opacity, layer.layerPath);
@@ -327,49 +295,14 @@ function deleteSingleLayer(layers: TypeLegendLayer[], layerPath: string) {
}
}
-function reorderSingleLayer(collection: TypeLegendLayer[], startIndex: number, endIndex: number, layerPath: string): TypeLegendLayer[] {
- let layerFound = false;
-
- function findLayerAndSortIt(startingCollection: TypeLegendLayer[]) {
- if (layerFound) {
- return;
- }
- layerFound = startingCollection.find((lyr) => lyr.layerPath === layerPath) !== undefined;
-
- if (layerFound) {
- const [removed] = startingCollection.splice(startIndex, 1);
- startingCollection.splice(endIndex, 0, removed);
-
- /* eslint-disable no-param-reassign */
- for (let i = 0; i < startingCollection.length; i++) {
- startingCollection[i].order = i;
- }
-
- return;
- }
-
- // if not found at this level, lets find it in children
- for (let i = 0; i < startingCollection.length; i++) {
- if (startingCollection[i].children.length > 0) {
- findLayerAndSortIt(startingCollection[i].children);
- }
- }
- }
-
- findLayerAndSortIt(collection);
-
- return collection;
-}
-
// **********************************************************
// Layer state selectors
// **********************************************************
-export const useLayerBounds = () => useStore(useGeoViewStore(), (state) => state.layerState.legendLayers);
export const useLayerHighlightedLayer = () => useStore(useGeoViewStore(), (state) => state.layerState.highlightedLayer);
-export const useLayersList = () => useStore(useGeoViewStore(), (state) => state.layerState.legendLayers);
+export const useLayerLegendLayers = () => useStore(useGeoViewStore(), (state) => state.layerState.legendLayers);
export const useLayerSelectedLayer = () => useStore(useGeoViewStore(), (state) => state.layerState.selectedLayer);
-export const useSelectedLayerPath = () => useStore(useGeoViewStore(), (state) => state.layerState.selectedLayerPath);
-export const useLayersDisplayState = () => useStore(useGeoViewStore(), (state) => state.layerState.displayState);
+export const useLayerSelectedLayerPath = () => useStore(useGeoViewStore(), (state) => state.layerState.selectedLayerPath);
+export const useLayerDisplayState = () => useStore(useGeoViewStore(), (state) => state.layerState.displayState);
export const useLayerStoreActions = () => useStore(useGeoViewStore(), (state) => state.layerState.actions);
diff --git a/packages/geoview-core/src/core/stores/store-interface-and-intial-values/map-state.ts b/packages/geoview-core/src/core/stores/store-interface-and-intial-values/map-state.ts
index a013937b140..0ec051ce221 100644
--- a/packages/geoview-core/src/core/stores/store-interface-and-intial-values/map-state.ts
+++ b/packages/geoview-core/src/core/stores/store-interface-and-intial-values/map-state.ts
@@ -15,7 +15,7 @@ import { TypeSetStore, TypeGetStore } from '@/core/stores/geoview-store';
import { TypeBasemapOptions, TypeMapFeaturesConfig, TypeValidMapProjectionCodes } from '@/core/types/global-types';
import { TypeFeatureInfoEntry, TypeGeometry, TypeMapMouseInfo } from '@/api/events/payloads';
-import { TypeInteraction } from '@/geo/map/map-schema-types';
+import { TypeInteraction, TypeVisibilityFlags } from '@/geo/map/map-schema-types';
import { TypeClickMarker, api } from '@/app';
import { MapEventProcessor } from '@/api/event-processors/event-processor-children/map-event-processor';
@@ -31,6 +31,14 @@ export interface TypeNorthArrow {
isNorthVisible: boolean;
}
+export interface TypeOrderedLayerInfo {
+ layerPath: string;
+ visible: TypeVisibilityFlags;
+ removable: boolean;
+ queryable?: boolean;
+ hoverable?: boolean;
+}
+
export interface IMapState {
attribution: string[];
basemapOptions: TypeBasemapOptions;
@@ -41,12 +49,12 @@ export interface IMapState {
fixNorth: boolean;
highlightedFeatures: Array;
interaction: TypeInteraction;
- layerOrder: string[];
mapElement?: OLMap;
mapExtent: Extent | undefined;
mapLoaded: boolean;
northArrow: boolean;
northArrowElement: TypeNorthArrow;
+ orderedLayerInfo: Array;
overlayClickMarker?: Overlay;
overlayNorthMarker?: Overlay;
overviewMap: boolean;
@@ -56,7 +64,6 @@ export interface IMapState {
scale: TypeScaleInfo;
selectedFeatures: Array;
size: [number, number];
- visibleLayers: string[];
zoom: number;
setDefaultConfigValues: (config: TypeMapFeaturesConfig) => void;
@@ -75,25 +82,31 @@ export interface IMapState {
addSelectedFeature: (feature: TypeFeatureInfoEntry) => void;
createBaseMapFromOptions: () => void;
createEmptyBasemap: () => TileLayer;
+ getIndexFromOrderedLayerInfo: (layerPath: string) => number;
getPixelFromCoordinate: (coord: Coordinate) => [number, number];
+ getRemovableFromOrderedLayerInfo: (layerPath: string) => boolean;
+ getVisibilityFromOrderedLayerInfo: (layerPath: string) => TypeVisibilityFlags;
hideClickMarker: () => void;
highlightBBox: (extent: Extent, isLayerHighlight?: boolean) => void;
removeHighlightedFeature: (feature: TypeFeatureInfoEntry | 'all') => void;
removeSelectedFeature: (feature: TypeFeatureInfoEntry | 'all') => void;
+ reorderLayer: (layerPath: string, move: number) => void;
setAttribution: (attribution: string[]) => void;
setClickCoordinates: () => void;
setFixNorth: (ifFix: boolean) => void;
+ setHoverable: (layerPath: string, hoverable: boolean) => void;
setInteraction: (interaction: TypeInteraction) => void;
- setLayerOrder: (newOrder: string[]) => void;
setMapElement: (mapElem: OLMap) => void;
setMapKeyboardPanInteractions: (panDelta: number) => void;
+ setOrderedLayerInfo: (newOrderedLayerInfo: Array) => void;
+ setOrToggleLayerVisibility: (layerPath: string, newValue?: TypeVisibilityFlags) => void;
setOverlayClickMarker: (overlay: Overlay) => void;
setOverlayClickMarkerRef: (htmlRef: HTMLElement) => void;
setOverlayNorthMarker: (overlay: Overlay) => void;
setOverlayNorthMarkerRef: (htmlRef: HTMLElement) => void;
setProjection: (projectionCode: TypeValidMapProjectionCodes, view: View) => void;
+ setQueryable: (layerPath: string, queryable: boolean) => void;
setRotation: (degree: number) => void;
- setVisibleLayers: (newOrder: string[]) => void;
setZoom: (zoom: number, duration?: number) => void;
showClickMarker: (marker: TypeClickMarker) => void;
transformPoints: (coords: Coordinate[], outputProjection: number) => Coordinate[];
@@ -124,11 +137,11 @@ export function initializeMapState(set: TypeSetStore, get: TypeGetStore): IMapSt
fixNorth: false,
highlightedFeatures: [],
interaction: 'static',
- layerOrder: [],
mapExtent: undefined,
mapLoaded: false,
northArrow: false,
northArrowElement: { degreeRotation: '180.0', isNorthVisible: true } as TypeNorthArrow,
+ orderedLayerInfo: [],
overviewMap: false,
overviewMapHideZoom: 0,
pointerPosition: undefined,
@@ -136,7 +149,6 @@ export function initializeMapState(set: TypeSetStore, get: TypeGetStore): IMapSt
scale: { lineWidth: '', labelGraphic: '', labelNumeric: '' } as TypeScaleInfo,
selectedFeatures: [],
size: [0, 0] as [number, number],
- visibleLayers: [],
zoom: 0,
// initialize default stores section from config information when store receive configuration file
@@ -320,6 +332,21 @@ export function initializeMapState(set: TypeSetStore, get: TypeGetStore): IMapSt
createEmptyBasemap: (): TileLayer => {
return MapEventProcessor.createEmptyBasemap(get().mapId);
},
+ getIndexFromOrderedLayerInfo: (layerPath: string): number => {
+ const info = get().mapState.orderedLayerInfo;
+ for (let i = 0; i < info.length; i++) if (info[i].layerPath === layerPath) return i;
+ return -1;
+ },
+ getRemovableFromOrderedLayerInfo: (layerPath: string): boolean => {
+ const info = get().mapState.orderedLayerInfo;
+ const pathInfo = info.find((item) => item.layerPath === layerPath);
+ return pathInfo!.removable;
+ },
+ getVisibilityFromOrderedLayerInfo: (layerPath: string): string => {
+ const info = get().mapState.orderedLayerInfo;
+ const pathInfo = info.find((item) => item.layerPath === layerPath);
+ return pathInfo?.visible || 'yes';
+ },
getPixelFromCoordinate: (coord: Coordinate): [number, number] => {
return get().mapState.mapElement!.getPixelFromCoordinate(coord) as unknown as [number, number];
},
@@ -363,6 +390,26 @@ export function initializeMapState(set: TypeSetStore, get: TypeGetStore): IMapSt
});
}
},
+ reorderLayer: (layerPath: string, move: number) => {
+ const direction = move < 0 ? -1 : 1;
+ let absoluteMoves = Math.abs(move);
+ const orderedLayers = [...get().mapState.orderedLayerInfo];
+ let startingIndex = -1;
+ for (let i = 0; i < orderedLayers.length; i++) if (orderedLayers[i].layerPath === layerPath) startingIndex = i;
+ const layerInfo = orderedLayers[startingIndex];
+ const movedLayers = orderedLayers.filter((layer) => layer.layerPath.startsWith(layerPath));
+ orderedLayers.splice(startingIndex, movedLayers.length);
+ let nextIndex = startingIndex;
+ const pathLength = layerInfo.layerPath.split('/').length;
+ while (absoluteMoves > 0) {
+ nextIndex += direction;
+ if (nextIndex === orderedLayers.length || nextIndex === 0) {
+ absoluteMoves = 0;
+ } else if (orderedLayers[nextIndex].layerPath.split('/').length === pathLength) absoluteMoves--;
+ }
+ orderedLayers.splice(nextIndex, 0, ...movedLayers);
+ get().mapState.actions.setOrderedLayerInfo(orderedLayers);
+ },
setAttribution: (attribution: string[]) => {
set({
mapState: {
@@ -387,6 +434,19 @@ export function initializeMapState(set: TypeSetStore, get: TypeGetStore): IMapSt
},
});
},
+ setHoverable: (layerPath: string, hoverable: boolean) => {
+ const curLayerInfo = get().mapState.orderedLayerInfo;
+ const layerInfo = curLayerInfo.find((info) => info.layerPath === layerPath);
+ if (layerInfo) {
+ layerInfo.hoverable = hoverable;
+ set({
+ mapState: {
+ ...get().mapState,
+ orderedLayerInfo: [...curLayerInfo],
+ },
+ });
+ }
+ },
setInteraction: (interaction: TypeInteraction) => {
set({
mapState: {
@@ -400,15 +460,6 @@ export function initializeMapState(set: TypeSetStore, get: TypeGetStore): IMapSt
.mapState.mapElement!.getInteractions()
.forEach((x) => x.setActive(interaction === 'dynamic'));
},
- setLayerOrder: (newOrder: string[]) => {
- set({
- mapState: {
- ...get().mapState,
- layerOrder: newOrder,
- },
- });
- MapEventProcessor.setLayerZIndices(get().mapId);
- },
setMapElement: (mapElem: OLMap) => {
set({
mapState: {
@@ -431,6 +482,15 @@ export function initializeMapState(set: TypeSetStore, get: TypeGetStore): IMapSt
},
});
},
+ setOrderedLayerInfo: (newOrderedLayerInfo: Array) => {
+ set({
+ mapState: {
+ ...get().mapState,
+ orderedLayerInfo: newOrderedLayerInfo,
+ },
+ });
+ MapEventProcessor.setLayerZIndices(get().mapId);
+ },
setOverlayClickMarkerRef: (htmlRef: HTMLElement) => {
const overlay = get().mapState.overlayClickMarker;
if (overlay !== undefined) overlay.setElement(htmlRef);
@@ -461,19 +521,25 @@ export function initializeMapState(set: TypeSetStore, get: TypeGetStore): IMapSt
// reload the basemap from new projection
MapEventProcessor.resetBasemap(get().mapId);
},
+ setQueryable: (layerPath: string, queryable: boolean) => {
+ const curLayerInfo = get().mapState.orderedLayerInfo;
+ const layerInfo = curLayerInfo.find((info) => info.layerPath === layerPath);
+ if (layerInfo) {
+ layerInfo.queryable = queryable;
+ if (queryable) layerInfo.hoverable = queryable;
+ set({
+ mapState: {
+ ...get().mapState,
+ orderedLayerInfo: [...curLayerInfo],
+ },
+ });
+ }
+ },
setRotation: (degree: number) => {
// set ol map rotation
// State is set by the map state store event 'onMapRotation'
get().mapState.mapElement!.getView().animate({ rotation: degree });
},
- setVisibleLayers: (newOrder: string[]) => {
- set({
- mapState: {
- ...get().mapState,
- visibleLayers: newOrder,
- },
- });
- },
setZoom: (zoom: number, duration?: number) => {
// set ol map zoom
// State is set by the map state store event 'onMapZoomEnd'
@@ -489,6 +555,21 @@ export function initializeMapState(set: TypeSetStore, get: TypeGetStore): IMapSt
mapState: { ...get().mapState, clickMarker: { lnglat: projectedCoords[0] } },
});
},
+ setOrToggleLayerVisibility: (layerPath: string, newValue?: TypeVisibilityFlags): void => {
+ const curOrderedLayerInfo = get().mapState.orderedLayerInfo;
+ const layerInfo = curOrderedLayerInfo.find((info) => info.layerPath === layerPath);
+ if (layerInfo && layerInfo.visible !== 'always') {
+ if (newValue) layerInfo!.visible = newValue;
+ else layerInfo!.visible = layerInfo?.visible === 'yes' ? 'no' : 'yes';
+ api.maps[get().mapId].layer.geoviewLayer(layerPath).setVisible(layerInfo.visible !== 'no', layerPath);
+ set({
+ mapState: {
+ ...get().mapState,
+ orderedLayerInfo: [...curOrderedLayerInfo],
+ },
+ });
+ }
+ },
transformPoints: (coords: Coordinate[], outputProjection: number): Coordinate[] => {
return api.projection.transformPoints(coords, `EPSG:${get().mapState.currentProjection}`, `EPSG:${outputProjection}`);
},
@@ -521,11 +602,11 @@ export const useMapClickMarker = () => useStore(useGeoViewStore(), (state) => st
export const useMapElement = () => useStore(useGeoViewStore(), (state) => state.mapState.mapElement);
export const useMapExtent = () => useStore(useGeoViewStore(), (state) => state.mapState.mapExtent);
export const useMapFixNorth = () => useStore(useGeoViewStore(), (state) => state.mapState.fixNorth);
-export const useMapLayers = () => useStore(useGeoViewStore(), (state) => state.mapState.layerOrder);
export const useMapInteraction = () => useStore(useGeoViewStore(), (state) => state.mapState.interaction);
export const useMapLoaded = () => useStore(useGeoViewStore(), (state) => state.mapState.mapLoaded);
export const useMapNorthArrow = () => useStore(useGeoViewStore(), (state) => state.mapState.northArrow);
export const useMapNorthArrowElement = () => useStore(useGeoViewStore(), (state) => state.mapState.northArrowElement);
+export const useMapOrderedLayerInfo = () => useStore(useGeoViewStore(), (state) => state.mapState.orderedLayerInfo);
export const useMapOverviewMap = () => useStore(useGeoViewStore(), (state) => state.mapState.overviewMap);
export const useMapOverviewMapHideZoom = () => useStore(useGeoViewStore(), (state) => state.mapState.overviewMapHideZoom);
export const useMapPointerPosition = () => useStore(useGeoViewStore(), (state) => state.mapState.pointerPosition);
@@ -534,7 +615,6 @@ export const useMapRotation = () => useStore(useGeoViewStore(), (state) => state
export const useMapSelectedFeatures = () => useStore(useGeoViewStore(), (state) => state.mapState.selectedFeatures);
export const useMapScale = () => useStore(useGeoViewStore(), (state) => state.mapState.scale);
export const useMapSize = () => useStore(useGeoViewStore(), (state) => state.mapState.size);
-export const useMapVisibleLayers = () => useStore(useGeoViewStore(), (state) => state.mapState.visibleLayers);
export const useMapZoom = () => useStore(useGeoViewStore(), (state) => state.mapState.zoom);
export const useMapStoreActions = () => useStore(useGeoViewStore(), (state) => state.mapState.actions);
diff --git a/packages/geoview-core/src/geo/layer/geoview-layers/esri-layer-common.ts b/packages/geoview-core/src/geo/layer/geoview-layers/esri-layer-common.ts
index 983c8fd8cbc..c6344a66042 100644
--- a/packages/geoview-core/src/geo/layer/geoview-layers/esri-layer-common.ts
+++ b/packages/geoview-core/src/geo/layer/geoview-layers/esri-layer-common.ts
@@ -245,6 +245,7 @@ export function commonProcessFeatureInfoConfig(
layerConfig: TypeEsriFeatureLayerEntryConfig | TypeEsriDynamicLayerEntryConfig | TypeEsriImageLayerEntryConfig
) {
if (!layerConfig.source.featureInfo) layerConfig.source.featureInfo = { queryable: capabilities.includes('Query') };
+ MapEventProcessor.setMapLayerQueryable(this.mapId, layerConfig.layerPath, layerConfig.source.featureInfo.queryable);
// dynamic group layer doesn't have fields definition
if (!layerConfig.isMetadataLayerGroup) {
// Process undefined outfields or aliasFields ('' = false and !'' = true). Also, if en is undefined, then fr is also undefined.
diff --git a/packages/geoview-core/src/geo/layer/geoview-layers/raster/wms.ts b/packages/geoview-core/src/geo/layer/geoview-layers/raster/wms.ts
index f2d5299845f..da769d3ccb5 100644
--- a/packages/geoview-core/src/geo/layer/geoview-layers/raster/wms.ts
+++ b/packages/geoview-core/src/geo/layer/geoview-layers/raster/wms.ts
@@ -581,6 +581,7 @@ export class WMS extends AbstractGeoViewRaster {
if (layerCapabilities) {
if (layerCapabilities.Attribution) this.attributions.push(layerCapabilities.Attribution.Title as string);
if (!layerConfig.source.featureInfo) layerConfig.source.featureInfo = { queryable: !!layerCapabilities.queryable };
+ MapEventProcessor.setMapLayerQueryable(this.mapId, layerConfig.layerPath, layerConfig.source.featureInfo.queryable);
// ! TODO: The solution implemented in the following lines is not right. scale and zoom are not the same things.
// if (layerConfig.initialSettings?.minZoom === undefined && layerCapabilities.MinScaleDenominator !== undefined)
// layerConfig.initialSettings.minZoom = layerCapabilities.MinScaleDenominator as number;
diff --git a/packages/geoview-core/src/geo/layer/geoview-layers/vector/geopackage.ts b/packages/geoview-core/src/geo/layer/geoview-layers/vector/geopackage.ts
index db832f28ed0..5c770f46891 100644
--- a/packages/geoview-core/src/geo/layer/geoview-layers/vector/geopackage.ts
+++ b/packages/geoview-core/src/geo/layer/geoview-layers/vector/geopackage.ts
@@ -257,6 +257,7 @@ export class GeoPackage extends AbstractGeoViewVector {
if (layers) {
layerGroup!.getLayers().push(layers);
this.setLayerStatus('processed', layerPath);
+ MapEventProcessor.replaceOrderedLayerInfo(this.mapId, layerConfig);
} else {
this.layerLoadError.push({
layer: listOfLayerEntryConfig[0].layerPath,
@@ -274,6 +275,7 @@ export class GeoPackage extends AbstractGeoViewVector {
const layerPath0 = listOfLayerEntryConfig[0].layerPath;
if (layer) {
this.setLayerStatus('processed', layerPath0);
+ MapEventProcessor.replaceOrderedLayerInfo(this.mapId, listOfLayerEntryConfig[0]);
resolve(layer);
} else {
this.layerLoadError.push({
diff --git a/packages/geoview-core/src/geo/layer/layer.ts b/packages/geoview-core/src/geo/layer/layer.ts
index 3b1a6ec597c..0a614ae6880 100644
--- a/packages/geoview-core/src/geo/layer/layer.ts
+++ b/packages/geoview-core/src/geo/layer/layer.ts
@@ -4,7 +4,7 @@ import { GeoCore, layerConfigIsGeoCore } from '@/geo/layer/other/geocore';
import { Geometry } from '@/geo/layer/geometry/geometry';
import { FeatureHighlight } from '@/geo/utils/feature-highlight';
-import { api } from '@/app';
+import { TypeOrderedLayerInfo, api } from '@/app';
import { EVENT_NAMES } from '@/api/events/event-types';
import { MapEventProcessor } from '@/api/event-processors/event-processor-children/map-event-processor';
@@ -62,7 +62,7 @@ export class Layer {
geometry: Geometry | undefined;
// order to load layers
- initialLayerOrder: string[] = [];
+ initialLayerOrder: Array = [];
/** used to reference the map id */
private mapId: string;
@@ -197,38 +197,70 @@ export class Layer {
}
/**
- * Loads layers that was passed in with the map config
- *
- * @param {TypeGeoviewLayerConfig[]} geoviewLayerConfigs an optional array containing layers passed within the map config
+ * Generate an array of layer info for the orderedLayerList.
+ * @param {TypeGeoviewLayerConfig} geoviewLayerConfig The config to get the info from.
+ * @returns {TypeOrderedLayerInfo[]} The array of ordered layer info.
*/
- loadListOfGeoviewLayer(geoviewLayerConfigs?: TypeGeoviewLayerConfig[]) {
- const validGeoviewLayerConfigs = this.deleteDuplicatGeoviewLayerConfig(geoviewLayerConfigs);
+ generateArrayOfLayerOrderInfo(geoviewLayerConfig: TypeGeoviewLayerConfig | TypeLayerEntryConfig): TypeOrderedLayerInfo[] {
+ // TODO Add placeholder for geocore and the replacement when the layer is created in geocore.ts
+ if ((geoviewLayerConfig as TypeGeoviewLayerConfig).geoviewLayerType === 'geoCore') return [];
+ const newOrderedLayerInfos = [];
const addSubLayerPathToLayerOrder = (layerEntryConfig: TypeLayerEntryConfig, layerPath: string): void => {
- const subLayerPath = `${layerPath}/${layerEntryConfig.layerId}`;
- this.initialLayerOrder.push(subLayerPath);
+ const subLayerPath = layerPath.endsWith(layerEntryConfig.layerId) ? layerPath : `${layerPath}/${layerEntryConfig.layerId}`;
+ const layerInfo: TypeOrderedLayerInfo = {
+ layerPath: subLayerPath,
+ visible: layerEntryConfig.initialSettings?.visible || 'yes',
+ removable: layerEntryConfig.initialSettings?.removable !== undefined ? layerEntryConfig.initialSettings?.removable : true,
+ queryable: layerEntryConfig.source?.featureInfo?.queryable !== undefined ? layerEntryConfig.source?.featureInfo?.queryable : true,
+ hoverable: layerEntryConfig.initialSettings?.hoverable !== undefined ? layerEntryConfig.initialSettings?.hoverable : true,
+ };
+ newOrderedLayerInfos.push(layerInfo);
if (layerEntryConfig.listOfLayerEntryConfig?.length) {
layerEntryConfig.listOfLayerEntryConfig?.forEach((subLayerEntryConfig) => {
addSubLayerPathToLayerOrder(subLayerEntryConfig, subLayerPath);
});
}
};
-
- // set order for layers to appear on the map according to config
- validGeoviewLayerConfigs.forEach((geoviewLayerConfig) => {
- let layerPath = '';
- if (geoviewLayerConfig.listOfLayerEntryConfig.length > 1) {
- layerPath = `${geoviewLayerConfig.geoviewLayerId}/${geoviewLayerConfig.geoviewLayerId}`;
- this.initialLayerOrder.push(layerPath);
- geoviewLayerConfig.listOfLayerEntryConfig.forEach((layerEntryConfig) => {
+ if ((geoviewLayerConfig as TypeGeoviewLayerConfig).geoviewLayerId) {
+ if ((geoviewLayerConfig as TypeGeoviewLayerConfig).listOfLayerEntryConfig.length > 1) {
+ const layerPath = `${(geoviewLayerConfig as TypeGeoviewLayerConfig).geoviewLayerId}/${
+ (geoviewLayerConfig as TypeGeoviewLayerConfig).geoviewLayerId
+ }`;
+ const layerInfo: TypeOrderedLayerInfo = {
+ layerPath,
+ visible: geoviewLayerConfig.initialSettings?.visible || 'yes',
+ removable: geoviewLayerConfig.initialSettings?.removable !== undefined ? geoviewLayerConfig.initialSettings?.removable : true,
+ };
+ newOrderedLayerInfos.push(layerInfo);
+ (geoviewLayerConfig as TypeGeoviewLayerConfig).listOfLayerEntryConfig.forEach((layerEntryConfig) => {
addSubLayerPathToLayerOrder(layerEntryConfig, layerPath);
});
} else {
- layerPath = `${geoviewLayerConfig.geoviewLayerId}/${geoviewLayerConfig.listOfLayerEntryConfig[0].layerId}`;
- this.initialLayerOrder.push(layerPath);
+ const layerEntryConfig = (geoviewLayerConfig as TypeGeoviewLayerConfig).listOfLayerEntryConfig[0];
+ addSubLayerPathToLayerOrder(layerEntryConfig, layerEntryConfig.layerPath);
}
+ } else addSubLayerPathToLayerOrder(geoviewLayerConfig as TypeLayerEntryConfig, (geoviewLayerConfig as TypeLayerEntryConfig).layerPath);
+
+ return newOrderedLayerInfos;
+ }
+
+ /**
+ * Load layers that was passed in with the map config
+ *
+ * @param {TypeGeoviewLayerConfig[]} geoviewLayerConfigs an optional array containing layers passed within the map config
+ */
+ loadListOfGeoviewLayer(geoviewLayerConfigs?: TypeGeoviewLayerConfig[]) {
+ const validGeoviewLayerConfigs = this.deleteDuplicatGeoviewLayerConfig(geoviewLayerConfigs);
+
+ // set order for layers to appear on the map according to config
+ const orderedLayerInfos: TypeOrderedLayerInfo[] = [];
+ validGeoviewLayerConfigs.forEach((geoviewLayerConfig) => {
+ const layerInfos = this.generateArrayOfLayerOrderInfo(geoviewLayerConfig);
+ orderedLayerInfos.push(...layerInfos);
api.event.emit(layerConfigPayload(EVENT_NAMES.LAYER.EVENT_ADD_LAYER, this.mapId, geoviewLayerConfig));
});
+ MapEventProcessor.setMapOrderedLayerInfo(this.mapId, orderedLayerInfos);
}
/**
diff --git a/packages/geoview-core/src/geo/map/map-schema-types.ts b/packages/geoview-core/src/geo/map/map-schema-types.ts
index 6b59b3aee53..5c9c44bb9f6 100644
--- a/packages/geoview-core/src/geo/map/map-schema-types.ts
+++ b/packages/geoview-core/src/geo/map/map-schema-types.ts
@@ -69,6 +69,12 @@ export type TypeLayerInitialSettings = {
maxZoom?: number;
/** A CSS class name to set to the layer element. */
className?: string;
+ /** Is the layer removable. */
+ removable?: true;
+ /** Is the layer hoverable. */
+ hoverable?: true;
+ /** Is the layer queryable. */
+ queryable?: true;
};
/** ******************************************************************************************************************************
diff --git a/packages/geoview-core/src/geo/utils/layer-set.ts b/packages/geoview-core/src/geo/utils/layer-set.ts
index 011f708b970..4e2aa2bbdd4 100644
--- a/packages/geoview-core/src/geo/utils/layer-set.ts
+++ b/packages/geoview-core/src/geo/utils/layer-set.ts
@@ -1,4 +1,5 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
+import { MapEventProcessor } from '@/api/event-processors/event-processor-children/map-event-processor';
import { EVENT_NAMES } from '@/api/events/event-types';
import {
LayerSetPayload,
@@ -137,6 +138,7 @@ export class LayerSet {
);
} else if (action === 'remove' && layerPath in this.resultsSet) {
delete this.resultsSet[layerPath];
+ MapEventProcessor.removeOrderedLayerInfo(this.mapId, layerPath);
api.event.emit(LayerSetPayload.createLayerSetUpdatedPayload(this.layerSetId, this.resultsSet, layerPath));
}
}
diff --git a/packages/geoview-geochart/src/geochart-panel.tsx b/packages/geoview-geochart/src/geochart-panel.tsx
index 258c00eb4fc..16562c8163e 100644
--- a/packages/geoview-geochart/src/geochart-panel.tsx
+++ b/packages/geoview-geochart/src/geochart-panel.tsx
@@ -1,12 +1,12 @@
import { useTheme } from '@mui/material/styles';
-import { TypeWindow, getLocalizedMessage } from 'geoview-core';
+import { TypeOrderedLayerInfo, TypeWindow, getLocalizedMessage } from 'geoview-core';
import { ChartType, SchemaValidator } from 'geochart';
import { LayerListEntry, Layout } from 'geoview-core/src/core/components/common';
import { TypeLayerData, TypeArrayOfLayerData } from 'geoview-core/src/api/events/payloads/get-feature-info-payload';
import { Typography } from 'geoview-core/src/ui/typography/typography';
import { Paper } from 'geoview-core/src/ui';
import {
- useMapVisibleLayers,
+ useMapOrderedLayerInfo,
useGeochartConfigs,
useGeochartStoreActions,
useGeochartStoreLayerDataArrayBatch,
@@ -42,7 +42,7 @@ export function GeoChartPanel(props: GeoChartPanelProps): JSX.Element {
// Get states and actions from store
const configObj = useGeochartConfigs();
- const visibleLayers = useMapVisibleLayers() as string[];
+ const orderedLayerInfo = useMapOrderedLayerInfo() as TypeOrderedLayerInfo[];
const storeArrayOfLayerData = useGeochartStoreLayerDataArrayBatch() as TypeArrayOfLayerData;
const selectedLayerPath = useGeochartStoreSelectedLayerPath() as string;
const { setSelectedLayerPath, setLayerDataArrayBatchLayerPathBypass } = useGeochartStoreActions();
@@ -102,6 +102,13 @@ export function GeoChartPanel(props: GeoChartPanelProps): JSX.Element {
// Log
logger.logTraceUseMemo('GEOCHART-PANEL - memoLayersList', storeArrayOfLayerData);
+ const visibleLayers = orderedLayerInfo
+ .map((layerInfo) => {
+ if (layerInfo.visible !== 'no') return layerInfo.layerPath;
+ return undefined;
+ })
+ .filter((layerPath) => layerPath !== undefined);
+
// Set the layers list
return visibleLayers
.map((layerPath) => storeArrayOfLayerData.find((layerData) => layerData.layerPath === layerPath))
@@ -118,7 +125,7 @@ export function GeoChartPanel(props: GeoChartPanelProps): JSX.Element {
tooltip: `${layer!.layerName}, ${getNumFeaturesLabel(layer!)}`,
} as LayerListEntry)
);
- }, [visibleLayers, storeArrayOfLayerData, configObj, getNumFeaturesLabel]);
+ }, [orderedLayerInfo, storeArrayOfLayerData, configObj, getNumFeaturesLabel]);
/**
* Memoizes the selected layer for the LayerList component.
diff --git a/packages/geoview-time-slider/src/time-slider-panel.tsx b/packages/geoview-time-slider/src/time-slider-panel.tsx
index f3d6c790c60..8ef23c711f8 100644
--- a/packages/geoview-time-slider/src/time-slider-panel.tsx
+++ b/packages/geoview-time-slider/src/time-slider-panel.tsx
@@ -1,7 +1,7 @@
import { useTheme } from '@mui/material/styles';
-import { TypeWindow, getLocalizedMessage } from 'geoview-core';
+import { TypeOrderedLayerInfo, TypeWindow, getLocalizedMessage } from 'geoview-core';
import { LayerListEntry, Layout } from 'geoview-core/src/core/components/common';
-import { useMapVisibleLayers, useTimeSliderLayers } from 'geoview-core/src/core/stores';
+import { useMapOrderedLayerInfo, useTimeSliderLayers } from 'geoview-core/src/core/stores';
import { Paper, Typography } from 'geoview-core/src/ui';
import { logger } from 'geoview-core/src/core/utils/logger';
@@ -33,7 +33,7 @@ export function TimeSliderPanel(props: TypeTimeSliderProps): JSX.Element {
const [selectedLayerPath, setSelectedLayerPath] = useState();
// get values from store
- const visibleLayers = useMapVisibleLayers() as string[];
+ const orderedLayerInfo = useMapOrderedLayerInfo() as TypeOrderedLayerInfo[];
const timeSliderLayers = useTimeSliderLayers();
/**
@@ -53,10 +53,17 @@ export function TimeSliderPanel(props: TypeTimeSliderProps): JSX.Element {
// Log
logger.logTraceUseMemo('TIME-SLIDER-PANEL - memoLayersList', timeSliderLayers);
+ const visibleLayers = orderedLayerInfo
+ .map((layerInfo) => {
+ if (layerInfo.visible !== 'no') return layerInfo.layerPath;
+ return undefined;
+ })
+ .filter((layerPath) => layerPath !== undefined);
+
// Return the layers
return visibleLayers
.map((layerPath) => {
- return { layerPath, timeSliderLayerInfo: timeSliderLayers[layerPath] };
+ return { layerPath, timeSliderLayerInfo: timeSliderLayers[layerPath!] };
})
.filter((layer) => layer && layer.timeSliderLayerInfo)
.map((layer) => {
@@ -68,7 +75,7 @@ export function TimeSliderPanel(props: TypeTimeSliderProps): JSX.Element {
queryStatus: 'processed',
} as LayerListEntry;
});
- }, [visibleLayers, timeSliderLayers]);
+ }, [orderedLayerInfo, timeSliderLayers]);
useEffect(() => {
// Log