Merge pull request #213 from Dataport/feature/stadtwald-layer-for-clerks

add stadtwald layer for Meldemichel clerks

Author: warm-coolguy

packages/clients/meldemichel/API.md

@@ -16,6 +16,7 @@ The method expects a single object with the following parameters.
 | - | - | - |
 | containerId | string | ID of the container the map is supposed to render itself to. |
 | mode | enum["REPORT", "SINGLE", "COMPLETE"] | See chapters below for an overview of the modes. |
+| stadtwaldActive | boolean? | This layer only works in 'SINGLE' mode and should not be activated in the others. If not set, any existing previous state is kept; off by default. |
 | afmUrl | string? | `COMPLETE` mode only. The URL used here is the URL of the AfM service to open to create a new damage report. |
 | reportServiceId | string? | `COMPLETE` mode only. ID of the report layer to display. Both the Filter and the Feature List will work with this layer. The client will also provide tooltips and cluster the features. |
 | configOverride  | object? | This can be used to override the configuration of any installed plugin; see full documentation. It is also used to set initial pins in `SINGLE` mode. See documentation of `SINGLE` further below. |
@@ -77,6 +78,8 @@ A document rendering the map client could e.g. look like this:
       const meldemichelMapInstance = await meldemichelMapClient.createMap({
         containerId: 'meldemichel-map-client',
         mode: 'REPORT', // or 'SINGLE',
+        // This layer only works in 'SINGLE' mode and should not be activated in the others
+        stadtwaldActive: true, // or `false`; if not set, previous state is kept; off by default
         // For 'SINGLE' mode where a singular coordinate is inspected/worked on
         configOverride: {
           pins: {
@@ -104,6 +107,12 @@ A document rendering the map client could e.g. look like this:
         // NOTE: vendor_maps_distance_to and -_plz are not read
       })
 
+      /* To change the stadtwald layer's visibility in 'SINGLE' mode, use this;
+       * this key can be used standalone or within the call seen above */
+      meldemichelMapInstance.$store.dispatch('meldemichel/setMapState', {
+        stadtwaldActive: true, // or false
+      })
+
       // to retrieve map state updates, use this snippet:
       const unwatch = mapInstance.$store.watch(
         (_, getters) => getters["meldemichel/mapState"],

packages/clients/meldemichel/CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## unpublished
 
+- Feature: Add `stadtwaldActive` as startup parameter for `createMap` object and `meldemichel/setMapState` action. Refer to the API.md regarding further details.
 - Fix: Import type `MpApiParameters` from correct position.
 - Chore: Change value of `pins.movable` configuration to `'drag'` as using a boolean has been deprecated in a future release.
 - Chore: Update `@polar`-dependencies to the latest versions.

packages/clients/meldemichel/src/index.html

@@ -43,6 +43,7 @@
           stage ? 'stage.' : ''
         }afm.hamburg.de/intelliform/forms/mml_melde_michel/standard/mml_melde_michel/index`,
         reportServiceId: stage ? '6061' : '6059',
+        // stadtwaldActive: true, // false
         /*
         configOverride: {
           pins: {

packages/clients/meldemichel/src/language.ts

@@ -54,6 +54,8 @@ const language: LanguageOption[] = [
         attributions: {
           stadtplan:
             'Kartografie Stadtplan: <a target="_blank" href="https://www.hamburg.de/bsw/landesbetrieb-geoinformation-und-vermessung/">Landesbetrieb Geoinformation und Vermessung</a>',
+          stadtwald:
+            'Kartografie Stadtwald: <a target="_blank" href="https://www.hamburg.de/politik-und-verwaltung/behoerden/bukea">Freie und Hansestadt Hamburg, Behörde für Umwelt, Klima, Energie und Agrarwirtschaft (BUKEA)</a>',
           luftbilder:
             'Kartografie Luftbilder: <a target="_blank" href="https://www.hamburg.de/bsw/landesbetrieb-geoinformation-und-vermessung/">Landesbetrieb Geoinformation und Vermessung</a>',
           reports: 'Meldungen durch Bürger',
@@ -73,6 +75,7 @@ const language: LanguageOption[] = [
         },
         layers: {
           stadtplan: 'Stadtplan',
+          stadtwald: 'Stadtwald',
           luftbilder: 'Luftbildansicht',
           reports: 'Meldungen',
           hamburgBorder: 'Stadtgrenze Hamburg',

packages/clients/meldemichel/src/mapConfigurations.ts

@@ -15,6 +15,7 @@ import language from './language'
 import { MeldemichelCreateMapParams } from './types'
 import { showTooltip } from './utils/showTooltip'
 
+export const stadtwald = '18746'
 const stadtplan = '453'
 const luftbilder = '452'
 export const hamburgBorder = '1693' // boundary layer for pins / geolocalization
@@ -237,9 +238,24 @@ const mapConfigurations: Record<
   [MODE.SINGLE]: () => ({
     ...commonMapConfiguration,
     addressSearch,
-    layers: commonLayers,
+    layers: [
+      ...commonLayers,
+      {
+        id: stadtwald,
+        visibility: false,
+        type: 'mask',
+        name: 'meldemichel.layers.stadtwald',
+      } as LayerConfiguration,
+    ],
     attributions: {
       ...commonAttributions,
+      layerAttributions: [
+        ...(commonAttributions.layerAttributions as Attribution[]),
+        {
+          id: stadtwald,
+          title: 'meldemichel.attributions.stadtwald',
+        },
+      ],
     },
     pins: commonPins,
     reverseGeocoder,

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

@@ -48,7 +48,7 @@ const memory: {
   client: null,
 }
 
-const rerender = (containerId, configOverride) => {
+const rerender = (containerId, configOverride, stadtwaldActive) => {
   document
     .getElementById(containerId)
     ?.replaceWith(memory.wrapper as HTMLElement)
@@ -61,6 +61,11 @@ const rerender = (containerId, configOverride) => {
     })
     client.$store.dispatch('plugin/pins/setupInitial')
   }
+  if (typeof stadtwaldActive === 'boolean' && memory.client) {
+    memory.client.$store.dispatch('meldemichel/setMapState', {
+      stadtwaldActive,
+    })
+  }
   return memory.client
 }
 
@@ -69,29 +74,26 @@ export default {
     containerId,
     mode,
     afmUrl,
+    stadtwaldActive,
     reportServiceId,
     configOverride,
   }: MeldemichelCreateMapParams) =>
     new Promise((resolve) => {
       if (memory.wrapper) {
-        return resolve(rerender(containerId, configOverride))
+        return resolve(rerender(containerId, configOverride, stadtwaldActive))
       }
-
       if (!Object.keys(MODE).includes(mode)) {
         console.error(
           `@polar/client-meldemichel: Critical error. Unknown mode "${mode}" configured. Please use 'COMPLETE', 'REPORT', or 'SINGLE'.`
         )
       }
-
       const meldemichelCore = { ...core }
       addPlugins(meldemichelCore, mode)
-
       // NOTE initializeLayerList is async in this scenario
       meldemichelCore.rawLayerList.initializeLayerList(
         serviceRegister,
         async (layerConf) => {
           enableClustering(layerConf, reportServiceId)
-
           const client = await meldemichelCore.createMap({
             containerId,
             mapConfiguration: merge(
@@ -102,15 +104,17 @@ export default {
               configOverride || {}
             ),
           })
-
           client.$store.registerModule('meldemichel', meldemichelModule)
           registerAfmButton(client, mode)
           hideHamburgBorder(client.$store.getters.map)
           setBackgroundImage(containerId)
-
+          if (typeof stadtwaldActive === 'boolean') {
+            client.$store.dispatch('meldemichel/setMapState', {
+              stadtwaldActive,
+            })
+          }
           memory.wrapper = document.getElementById(`${containerId}-wrapper`)
           memory.client = client
-
           resolve(client)
         }
       )

packages/clients/meldemichel/src/store/module.ts

@@ -2,11 +2,13 @@
 /* eslint-disable camelcase */
 
 import { PolarModule } from '@polar/lib-custom-types'
+import { stadtwald } from '../mapConfigurations'
 
 interface SetMapStatePayload {
   mapCenter?: string // resembling 'number,number'
   mapZoomLevel?: number | string
   mapBaseLayer?: number | string
+  stadtwaldActive?: boolean
   vendor_maps_position?: string // resembling 'number,number'
   vendor_maps_address_str?: string
   vendor_maps_address_hnr?: number | string
@@ -35,26 +37,32 @@ const meldemichelModule: PolarModule<
   namespaced: true,
   state: {},
   actions: {
-    // setupModule({ getters }): void {},
+    // length deemed acceptable due to function simplicity (forwarder)
+    // eslint-disable-next-line max-lines-per-function
     setMapState: (
-      { commit, dispatch, rootGetters: { map } },
+      { commit, dispatch, rootGetters },
       {
         mapCenter,
         mapZoomLevel,
         mapBaseLayer,
+        stadtwaldActive,
         vendor_maps_position,
         vendor_maps_address_str,
         vendor_maps_address_hnr,
       }: SetMapStatePayload
     ) => {
+      const { map } = rootGetters
+
       if (mapCenter) {
         map.getView().setCenter(readAfmCoordinate(mapCenter))
       }
+
       if (mapZoomLevel) {
         dispatch('plugin/zoom/setZoomLevel', Number(mapZoomLevel), {
           root: true,
         })
       }
+
       if (mapBaseLayer) {
         dispatch(
           'plugin/layerChooser/setActiveBackgroundId',
@@ -64,13 +72,26 @@ const meldemichelModule: PolarModule<
           }
         )
       }
+
+      if (typeof stadtwaldActive === 'boolean') {
+        const oldActiveMasks = rootGetters['plugin/layerChooser/activeMaskIds']
+        const newActiveMasks = stadtwaldActive
+          ? [...new Set([...oldActiveMasks, stadtwald])]
+          : oldActiveMasks.filter((id) => id !== stadtwald)
+
+        dispatch('plugin/layerChooser/setActiveMaskIds', newActiveMasks, {
+          root: true,
+        })
+      }
+
       if (vendor_maps_address_str && vendor_maps_address_hnr) {
         commit(
           'plugin/addressSearch/setInputValue',
           `${vendor_maps_address_str} ${vendor_maps_address_hnr}`,
           { root: true }
         )
       }
+
       if (vendor_maps_position) {
         dispatch(
           'plugin/pins/showMarker',

packages/clients/meldemichel/src/types.ts

@@ -4,6 +4,7 @@ export interface MeldemichelCreateMapParams {
   containerId: string
   mode: keyof typeof MODE
   afmUrl?: string
+  stadtwaldActive?: boolean
   reportServiceId?: string
   configOverride?: object
 }