feat: introduce background layer chooser (#2385)

* feat: introduce background layer chooser

* fix: apply suggestions

* fix: small fixes

Author: TreffN

src/bootstrap.tsx

@@ -31,9 +31,11 @@ import LanguageDetector from 'i18next-browser-languagedetector';
 
 import Keycloak from 'keycloak-js';
 
+import { Collection } from 'ol';
 import {
   defaults as OlControlDefaults
 } from 'ol/control';
+import BaseLayer from 'ol/layer/Base';
 import OlLayerGroup from 'ol/layer/Group';
 import OlLayerTile from 'ol/layer/Tile';
 import OlMap from 'ol/Map';
@@ -88,6 +90,10 @@ import {
 import {
   setAppInfo
 } from './store/appInfo';
+import {
+  setAllowEmptyBackground as setBackgroundLayerChooserAllowEmptyBackground,
+  setVisible as setBackgroundLayerChooserVisible
+} from './store/backgroundLayerChooser';
 import {
   setDescription
 } from './store/description';
@@ -324,6 +330,11 @@ export const setApplicationToStore = async (application?: Application) => {
       // eslint-disable-next-line camelcase
       user_menu: (config) => {
         store.dispatch(setUserMenuVisible(config?.visible ?? true));
+      },
+      // eslint-disable-next-line camelcase
+      background_layer_chooser: (config) => {
+        store.dispatch(setBackgroundLayerChooserVisible(config?.visible ?? false));
+        store.dispatch(setBackgroundLayerChooserAllowEmptyBackground(config?.allowEmptyBackground ?? false));
       }
     };
 
@@ -469,6 +480,8 @@ const setupSHOGunMap = async (application: Application) => {
 
   const interactions = await parser.parseMapInteractions(application);
 
+  layers = await addBackgroundLayers(application, layers);
+
   return new OlMap({
     view,
     layers,
@@ -479,6 +492,67 @@ const setupSHOGunMap = async (application: Application) => {
   });
 };
 
+const addBackgroundLayers = async (application: Application, layers: OlLayerGroup | undefined): Promise< Collection<BaseLayer> | undefined> => {
+  const blcLayers = application.toolConfig?.find(config => config.name === 'background_layer_chooser')?.config.layers;
+  const initiallySelectedLayerId = application.toolConfig?.find(config => config.name === 'background_layer_chooser')?.config.initiallySelectedLayer;
+  const backgroundMapLayers = [];
+
+  if (blcLayers){
+    let initiallySelectedLayerPresent = false;
+
+    for (const layer of blcLayers) {
+      try {
+        if (!layer.layerId) {
+          continue;
+        }
+
+        const existingLayer = layers?.getLayersArray().find(item => item.get('shogunId')=== layer.layerId);
+        let olLayer;
+        if (existingLayer) {
+          olLayer = existingLayer;
+        } else {
+          const l = await client?.layer().findOne(layer.layerId);
+          if (!l) {
+            continue;
+          }
+          olLayer = await parser.parseLayer(l);
+        }
+
+        if (!olLayer || olLayer instanceof OlLayerGroup) {
+          continue;
+        }
+        olLayer.set('isBackgroundLayer', true);
+        olLayer.setVisible(false);
+
+        if (layer.title) {
+          olLayer.set('name', layer.title);
+        }
+
+        if (layer.layerId === initiallySelectedLayerId) {
+          olLayer.setVisible(true);
+          initiallySelectedLayerPresent = true;
+        }
+        if (!existingLayer) {
+          backgroundMapLayers.push(olLayer);
+        }
+      }
+      catch (error){
+        Logger.error(`Layer ${layer.layerId} could not be loaded successfully: `, error);
+      }
+    }
+
+    // Fallback for when no initiallySelectedLayerId is set. Choose first layer as default.
+    if (!initiallySelectedLayerPresent && backgroundMapLayers.length >= 1) {
+      backgroundMapLayers[0].setVisible(true);
+    }
+
+    for (const backgroundLayerMap of backgroundMapLayers) {
+      layers?.getLayers().insertAt(0, backgroundLayerMap);
+    }
+    return layers?.getLayers();
+  }
+};
+
 // TODO Make default/fallback app configurable?
 const setupDefaultMap = () => {
   const osmLayer = new OlLayerTile({

src/components/BasicMapComponent/index.less

@@ -0,0 +1,12 @@
+.map {
+  .bg-layer-chooser {
+    bottom: 95px;
+    width: 99%;
+    right: 10px;
+
+    .layer-cards {
+      overflow: auto;
+      width: calc(100% - 170px);
+    }
+  }
+}

src/components/BasicMapComponent/index.tsx

@@ -10,18 +10,26 @@ import {
 
 import { MapUtil } from '@terrestris/ol-util/dist/MapUtil/MapUtil';
 
+import {
+  BackgroundLayerChooser
+} from '@terrestris/react-geo/dist/BackgroundLayerChooser/BackgroundLayerChooser';
+
 import {
   MapComponent,
   MapComponentProps
 } from '@terrestris/react-geo/dist/Map/MapComponent/MapComponent';
 import { useMap } from '@terrestris/react-util/dist/Hooks/useMap/useMap';
 
+import useAppSelector from '../../hooks/useAppSelector';
+
 import usePlugins from '../../hooks/usePlugins';
 
 import {
   isMapIntegration
 } from '../../plugin';
 
+import './index.less';
+
 export const BasicMapComponent: React.FC<Partial<MapComponentProps>> = ({
   ...restProps
 }): JSX.Element => {
@@ -33,6 +41,9 @@ export const BasicMapComponent: React.FC<Partial<MapComponentProps>> = ({
     i18n
   } = useTranslation();
 
+  const blcVisible = useAppSelector(state => state.backgroundLayerChooser.visible);
+  const allowEmptyBackground = useAppSelector(state => state.backgroundLayerChooser.allowEmptyBackground);
+
   /**
    * Updates external layer group name when language changes.
    */
@@ -80,6 +91,12 @@ export const BasicMapComponent: React.FC<Partial<MapComponentProps>> = ({
       map={map}
       {...restProps}
     >
+      {blcVisible &&
+        <BackgroundLayerChooser
+          layers={map.getAllLayers().filter(l => l.get('isBackgroundLayer') === true).reverse()}
+          allowEmptyBackground = {allowEmptyBackground}
+        />
+      }
       {
         pluginComponents
       }

src/components/ToolMenu/LayerTree/index.tsx

@@ -251,8 +251,16 @@ export const LayerTree: React.FC<LayerTreeProps> = ({
     if (layer instanceof OlLayerGroup) {
       return true;
     }
-
-    return !(layer instanceof OlVectorLayer) || !_isNil(layer.get('shogunId'));
+    if (layer instanceof OlVectorLayer) {
+      return false;
+    }
+    if (_isNil(layer.get('shogunId'))) {
+      return false;
+    }
+    if (layer.get('isBackgroundLayer')) {
+      return false;
+    }
+    return true;
   };
 
   const treeNodeTitleRenderer = (layer: OlBaseLayer) => {

src/store/backgroundLayerChooser/index.tsx

@@ -0,0 +1,43 @@
+import {
+  createSlice,
+  PayloadAction
+} from '@reduxjs/toolkit';
+
+export type LayerConfig = {
+  layerId: number;
+  title?: string;
+};
+
+export type BackgroundLayerChooserConfig = {
+  visible?: boolean;
+  layers?: LayerConfig[];
+  initiallySelectedLayer?: number | undefined;
+  allowEmptyBackground?: boolean;
+};
+
+const initialState: BackgroundLayerChooserConfig = {
+  visible: false,
+  layers: [],
+  initiallySelectedLayer: undefined,
+  allowEmptyBackground: false
+};
+
+export const slice = createSlice({
+  name: 'backgroundLayerChooser',
+  initialState,
+  reducers: {
+    setVisible: (state, action: PayloadAction<boolean>) => {
+      state.visible = action.payload;
+    },
+    setAllowEmptyBackground: (state, action: PayloadAction<boolean>) => {
+      state.allowEmptyBackground = action.payload;
+    }
+  }
+});
+
+export const {
+  setVisible,
+  setAllowEmptyBackground
+} = slice.actions;
+
+export default slice.reducer;

src/store/store.ts

@@ -9,6 +9,7 @@ import {
 
 import addLayerModal from './addLayerModal';
 import appInfo from './appInfo';
+import backgroundLayerChooser from './backgroundLayerChooser';
 import description from './description';
 import editFeature from './editFeature';
 import editFeatureDrawerOpen from './editFeatureDrawerOpen';
@@ -37,6 +38,7 @@ export const createReducer = (asyncReducers?: AsyncReducer) => {
   return combineReducers({
     addLayerModal,
     appInfo,
+    backgroundLayerChooser,
     description,
     editFeature,
     editFeatureDrawerOpen,