Merge pull request #454 from Dataport/dish-toggle-label-visibility-with-belonging-geomlayer

Dish toggle label visibility with belonging geomlayer

Author: jedi-of-the-sea

packages/clients/dish/CHANGELOG.md

@@ -1,6 +1,8 @@
 # CHANGELOG
 
 ## unpublished
+
+- Feature: Monumental label layer toggles its visibility depending on visible monumental layer geometries.
 - Fix: Add new configuration parameters for DishExportMap to configure different host (backend host might differ from `internalHost`) and to simplify adjustments for backend changes.
 - Fix: Add terms of use for internal map.
 - Fix: Open links for BKG and their terms of use in new tab.

packages/clients/dish/src/mapConfigurations/layerConfigIntern.ts

@@ -20,7 +20,7 @@ import {
 import { scaleFromZoomLevel } from '../utils/calculateScaleFromResolution'
 
 const alkisMinZoom = 10
-const beschriftungMinZoom = 9
+export const beschriftungMinZoom = 9
 
 const layersIntern: LayerConfiguration[] = [
   {
@@ -155,7 +155,7 @@ const layersIntern: LayerConfiguration[] = [
     name: `Beschriftung (ab 1:${thousandsSeparator(
       scaleFromZoomLevel(beschriftungMinZoom)
     )})`,
-    minZoom: 9,
+    minZoom: beschriftungMinZoom,
   },
 ]
 

packages/clients/dish/src/polar-client.ts

@@ -8,13 +8,15 @@ import { FeatureCollection, Geometry, GeometryCollection } from 'geojson'
 import { GeoJSON } from 'ol/format'
 import packageInfo from '../package.json'
 import { navigateToDenkmal } from './utils/navigateToDenkmal'
+import { watchActiveMaskIds } from './utils/watchActiveMaksIds'
 import { addPlugins } from './addPlugins'
 import { services } from './services'
 import { getMapConfiguration } from './mapConfigurations/mapConfig'
 import { CONTENT_ENUM } from './plugins/Modal/store'
 import './styles.css'
 import selectionLayer from './selectionLayer'
 import { DishUrlParams } from './types'
+
 // eslint-disable-next-line no-console
 console.log(`DISH map client running in version ${packageInfo.version}.`)
 
@@ -40,6 +42,8 @@ export default {
     const objektId = parameters.get('ObjektID')
     if (mode === 'INTERN') {
       subscribeToExportedMap(map)
+      // watch for changes in activeMaskIds to update beschriftung layer
+      watchActiveMaskIds(map)
       map.$store.commit('plugin/selectionObject/setObjectId', objektId)
       if (typeof objektId === 'string') {
         zoomToInternalFeature(map, objektId, urlParams)

packages/clients/dish/src/servicesIntern.ts

@@ -30,7 +30,7 @@ const denkmaelerWmService = {
   layers: '0,1,2,3,4,6,24,25',
 }
 
-const beschriftungService = {
+export const beschriftungService = {
   ...commonConfigDenkmaelWMS,
   id: beschriftung,
   name: 'Beschriftung',
@@ -116,3 +116,30 @@ export const servicesIntern = [
   bddColInternService,
   dop20ColInternService,
 ]
+
+export const labeledLayerServices = [
+  denkmaelerWmService,
+  kontrollbedarfService,
+  verlustService,
+]
+
+// Map of geom layername to label layername of denkmal WMS service
+export const layerLabelMap = new Map([
+  ['0', '9'],
+  ['1', '10'],
+  ['2', '11'],
+  ['3', '12'],
+  ['4', '13'],
+  ['6', '15'],
+  ['7', '16'],
+  ['8', '17'],
+  ['19', '30'],
+  ['20', '31'],
+  ['21', '32'],
+  ['22', '33'],
+  ['23', '34'],
+  ['24', '26'],
+  ['25', '27'],
+  ['28', '35'],
+  ['29', '36'],
+])

packages/clients/dish/src/utils/watchActiveMaksIds.ts

@@ -0,0 +1,100 @@
+import { MapInstance } from '@polar/core'
+import {
+  beschriftungService,
+  labeledLayerServices,
+  layerLabelMap,
+} from '../servicesIntern'
+import { beschriftungMinZoom } from '../mapConfigurations/layerConfigIntern'
+
+function getOlLabelLayer(instance) {
+  const map = instance.$store.getters.map
+  return map
+    .getLayers()
+    .getArray()
+    .find((l) => l.get('id') === beschriftungService.id)
+}
+
+export function watchActiveMaskIds(instance: MapInstance) {
+  let previousLayers = ''
+
+  const updateLabelLayers = () => {
+    const activeLayerIds =
+      instance.$store.getters['plugin/layerChooser/activeLayerIds']
+    const activeMaskIds =
+      instance.$store.getters['plugin/layerChooser/activeMaskIds']
+    const masks = instance.$store.getters['plugin/layerChooser/masks']
+
+    const allActiveLabelLayers = getAllActiveLabelLayers(
+      activeLayerIds,
+      activeMaskIds
+    )
+    const LAYERS = allActiveLabelLayers.join(',')
+
+    if (LAYERS === previousLayers) {
+      return
+    }
+
+    previousLayers = LAYERS
+
+    if (LAYERS !== '') {
+      updateBeschriftungsLayer(instance, LAYERS)
+      setBeschriftungVisibilityInMenu(masks, instance, false)
+    } else {
+      setBeschriftungVisibilityInMenu(masks, instance, true)
+      getOlLabelLayer(instance)?.setVisible(false)
+    }
+  }
+
+  instance.$store.watch(
+    (_, getters) => ({
+      activeLayerIds: getters['plugin/layerChooser/activeLayerIds'],
+      activeMaskIds: getters['plugin/layerChooser/activeMaskIds'],
+    }),
+    updateLabelLayers,
+    { immediate: true }
+  )
+}
+
+function getAllActiveLabelLayers(activeLayerIds, activeMaskIds) {
+  const activeLabeledLayers = Object.entries(activeLayerIds)
+    .filter(
+      ([key]) =>
+        labeledLayerServices.map((service) => service.id).includes(key) &&
+        activeMaskIds.includes(key)
+    )
+    .map(([, value]) => value)
+    .flat()
+  return activeLabeledLayers
+    .map((l) => {
+      return layerLabelMap.get(l as string)
+    })
+    .filter((s) => s)
+}
+
+function updateBeschriftungsLayer(instance: MapInstance, LAYERS: string) {
+  const olLabelLayer = getOlLabelLayer(instance)
+  const olSource = olLabelLayer?.getSource()
+  if (olSource) {
+    const updatedParams = { ...olSource.getParams(), LAYERS }
+    olSource.updateParams(updatedParams)
+  }
+  const currentZoom = instance.$store.getters.map.getView().getZoom()
+  if (currentZoom >= beschriftungMinZoom) {
+    olLabelLayer?.setVisible(true)
+  } else {
+    olLabelLayer?.setVisible(false)
+  }
+}
+
+function setBeschriftungVisibilityInMenu(
+  masks,
+  instance: MapInstance,
+  hiddenInMenu: boolean
+) {
+  const masksArray = masks.map((mask) =>
+    mask.id === beschriftungService.id
+      ? { ...mask, hideInMenu: hiddenInMenu }
+      : mask
+  )
+  instance.$store.commit('plugin/layerChooser/setMasks', masksArray)
+}