Merge branch 'main' into feature/add-measure-tool

warm-coolguy · web-flow · commit 120fb5f87cba · 2025-01-21T13:46:58.000+01:00
diff --git a/packages/clients/meldemichel/API.md b/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"],
@@ -136,8 +145,54 @@ A document rendering the map client could e.g. look like this:
 </html>
 ```
 
-## Rendering COMPLETE mode
+## Rendering COMPLETE mode (full page)
 
 The `index.html` included in the package's `dist` folder has been prepared for this mode and must merely be hosted.
 
 Please see the table in chapter `Basic usage` about configuration options.
+
+## Rendering COMPLETE mode (embedded element)
+
+To embed the COMPLETE mode map on any page, provide a div with an id like `meldemichel-map-client`; you may choose any id you like.
+
+The following script tag can then be used to render the productive services of the Meldemichel map client.
+
+```html
+<script type="module">
+  // adjust path to where the client is
+  import meldemichelMapClient from '../dist/client-meldemichel.js'
+
+  meldemichelMapClient.createMap({
+    containerId: 'meldemichel-map-client', // the id you used
+    mode: 'COMPLETE',
+    afmUrl: `https://afm.hamburg.de/intelliform/forms/mml_melde_michel/standard/mml_melde_michel/index`,
+    reportServiceId: '6059',
+    configOverride: {
+      // adjust path to where the client is
+      stylePath: '../dist/style.css'
+    }
+  })
+</script>
+```
+
+POLAR will rebuild the given div to contain a ShadowDOM that hosts the map. The outer div will change to have the id `meldemichel-map-client-wrapper` (resp. `${yourId}-wrapper`) and can be used to style the map's height and width with, for example:
+
+```css
+#meldemichel-map-client-wrapper {
+  /* "position: relative;" is the minimum required styling */
+  position: relative;
+  height: 400px;
+  width: 100%;
+}
+```
+
+To also serve users with JS disabled some content, this fragment is common:
+
+```html
+<div id="meldemichel-map-client">
+  <!-- Optional, if your page does not have its own <noscript> information -->
+  <noscript>Please use a browser with active JavaScript to use the map client.</noscript>
+</div>
+```
+
+For a complete example, you may also check [the running embedded scenario](https://dataport.github.io/polar/docs/meldemichel/example/complete_embedded.html) or its [source file](https://github.com/Dataport/polar/blob/main/packages/clients/meldemichel/example/complete_embedded.html).
diff --git a/packages/clients/meldemichel/CHANGELOG.md b/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.
diff --git a/packages/clients/meldemichel/example/complete_embedded.html b/packages/clients/meldemichel/example/complete_embedded.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <meta
+      http-equiv="Cache-Control"
+      content="no-cache, no-store, must-revalidate, max-age=0"
+    />
+    <title>MML INTEGRATION TEST</title>
+    <style>
+      /* div with this id is created on `createMap` call to host shadow DOM */
+      #polarstern-wrapper {
+        position: relative;
+        height: 400px;
+        width: 100%;
+      }
+
+      /* the following styling is purely for surrounding example content */
+      html, body {
+        margin: 0;
+        padding: 0;
+        font-family: sans-serif;
+      }
+
+      header {
+        padding: 0 2em;
+      }
+
+      #hh-bug {
+        height: 35px;
+        width: 400px;
+        margin-left: -280px;
+        transform: skew(-35deg);
+        background: #e10019;
+        border-bottom-right-radius: 6px;
+        margin-bottom: 1em;
+      }
+
+      main {
+        display: flex;
+        flex-direction: column;
+        gap: 2em;
+      }
+
+      .blue-content {
+        color: white;
+        background: #1a4573;
+      }
+
+      .padded-x {
+        padding-right: 10vw;
+        padding-left: 10vw;
+      }
+
+      .padded-y {
+        padding-top: 4em;
+        padding-bottom: 4em;
+      }
+
+      h2 {
+        font-size: 38pt;
+      }
+
+      p {
+        font-size: 32px;
+      }
+
+      footer {
+        color: white;
+        background: #003063;
+        padding: 1em 5vw;
+      }
+    </style>
+  </head>
+  <body>
+    <nav></nav>
+    <header>
+      <h1>Meldemichel-Einbindesimulation</h1>
+    </header>
+    <div id="hh-bug"></div>
+    <main>
+      <section class="blue-content padded-x padded-y">
+        <h2>Blindtext</h2>
+        <p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular.</p>
+      </section>
+      <section>
+        <h2 class="padded-x">Aktuell gemeldete Schäden</h2>
+        <!-- ID can be anything as long as it's used in .createMap, too -->
+        <div id="polarstern"></div>
+      </section>
+      <section class="padded-x padded-y">
+        <h2>Blindtext II.</h2>
+        <p>Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores.</p>
+      </section>
+    </main>
+    <footer>At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</footer>
+    <script type="module">
+      import meldemichelMapClient from '../dist/client-meldemichel.js'
+
+      // toggle to switch between stage/prod layer and report system
+      const stage = true
+
+      meldemichelMapClient.createMap({
+        containerId: 'polarstern',
+        mode: 'COMPLETE',
+        afmUrl: `https://${
+          stage ? 'stage.' : ''
+        }afm.hamburg.de/intelliform/forms/mml_melde_michel/standard/mml_melde_michel/index`,
+        reportServiceId: stage ? '6061' : '6059',
+        configOverride: {
+          stylePath: '../dist/style.css',
+          attributions: {
+            staticAttributions: [
+              `<a href="https://github.com/Dataport/polar/blob/main/LEGALNOTICE.md">Legal Notice (Impressum)</a>`
+            ]
+          }
+        }
+      })
+    </script>
+  </body>
+</html>
diff --git a/packages/clients/meldemichel/example/index.html b/packages/clients/meldemichel/example/index.html
@@ -38,6 +38,10 @@ <h1>Meldemichel Example Hub</h1>
         <a href="./complete.html">"COMPLETE" (Übersichtskarte)</a>
       </dt>
       <dd>Meldemichel Map Client rendered fullpage in mode COMPLETE.</dd>
+      <dt>
+        <a href="./complete_embedded.html">"COMPLETE_EMBEDDED" (Übersichtskarte eingebettet)</a>
+      </dt>
+      <dd>Meldemichel Map Client rendered as page element in mode COMPLETE.</dd>
       <dt>
         <a href="../dist/index.html"
           >"COMPLETE" (Übersichtskarte) – Production Mode Test</a
diff --git a/packages/clients/meldemichel/src/index.html b/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: {
diff --git a/packages/clients/meldemichel/src/language.ts b/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',
diff --git a/packages/clients/meldemichel/src/mapConfigurations.ts b/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,
diff --git a/packages/clients/meldemichel/src/polar-client.ts b/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)
         }
       )
diff --git a/packages/clients/meldemichel/src/store/module.ts b/packages/clients/meldemichel/src/store/module.ts
diff --git a/packages/clients/meldemichel/src/types.ts b/packages/clients/meldemichel/src/types.ts
