From 4da8db30e740a857ed3feae3bd456aca2443faa7 Mon Sep 17 00:00:00 2001
From: Dennis Sen <dennis.sen@dataport.de>
Date: Tue, 4 Feb 2025 10:08:51 +0100
Subject: [PATCH] add export and example

---
 packages/clients/diplan/example/config.js         | 5 +++++
 packages/clients/diplan/example/index.html        | 5 +++++
 packages/clients/diplan/example/prod-example.html | 5 +++++
 packages/clients/diplan/example/setup.js          | 4 ++++
 packages/clients/diplan/example/style.css         | 6 ++++++
 packages/clients/diplan/package.json              | 1 +
 packages/clients/diplan/src/polar-client.ts       | 9 +++++++++
 7 files changed, 35 insertions(+)

diff --git a/packages/clients/diplan/example/config.js b/packages/clients/diplan/example/config.js
index 27afa3064..4a0f29368 100644
--- a/packages/clients/diplan/example/config.js
+++ b/packages/clients/diplan/example/config.js
@@ -80,6 +80,11 @@ export default {
       },
     ],
   },
+  export: {
+    displayComponent: true,
+    showJpg: false,
+    showPdf: false,
+  },
   gfi: {
     mode: 'bboxDot',
     layers: {
diff --git a/packages/clients/diplan/example/index.html b/packages/clients/diplan/example/index.html
index c040d182d..2152f9501 100644
--- a/packages/clients/diplan/example/index.html
+++ b/packages/clients/diplan/example/index.html
@@ -36,6 +36,11 @@ <h2>Informationen aus Kartenklient</h2>
               <td id="subscribed-zoom">uninitialized</td>
               <td>Zoomstufe der <a target="_blank" href="https://openlayers.org/en/latest/apidoc/module-ol_View-View.html#getZoom">OpenLayers/View</a> als <code>Number</code></td>
             </tr>
+            <tr>
+              <td><code>plugin/export/exportedMap</code></td>
+              <td><img onclick="window.open(this.src, '_blank');" id="subscribed-export" /></td>
+              <td>Screenshot des aktuellen Kartenausschnitts. Produzierbar durch Klick auf den unteren linken "Export"-Button.</td>
+            </tr>
             <tr>
               <td><code>plugin/gfi/featureInformation</code></td>
               <td id="subscribed-gfi">uninitialized</td>
diff --git a/packages/clients/diplan/example/prod-example.html b/packages/clients/diplan/example/prod-example.html
index 5871067ad..c6bb7ef2a 100644
--- a/packages/clients/diplan/example/prod-example.html
+++ b/packages/clients/diplan/example/prod-example.html
@@ -36,6 +36,11 @@ <h2>Informationen aus Kartenklient</h2>
               <td id="subscribed-zoom">uninitialized</td>
               <td>Zoomstufe der <a target="_blank" href="https://openlayers.org/en/latest/apidoc/module-ol_View-View.html#getZoom">OpenLayers/View</a> als <code>Number</code></td>
             </tr>
+            <tr>
+              <td><code>plugin/export/exportedMap</code></td>
+              <td><img onclick="window.open(this.src, '_blank');" id="subscribed-export" /></td>
+              <td>Screenshot des aktuellen Kartenausschnitts. Produzierbar durch Klick auf den unteren linken "Export"-Button.</td>
+            </tr>
             <tr>
               <td><code>plugin/gfi/featureInformation</code></td>
               <td id="subscribed-gfi">uninitialized</td>
diff --git a/packages/clients/diplan/example/setup.js b/packages/clients/diplan/example/setup.js
index 047512dc4..ab6f442b8 100644
--- a/packages/clients/diplan/example/setup.js
+++ b/packages/clients/diplan/example/setup.js
@@ -42,6 +42,7 @@ export default (client, layerConf, config) => {
 
       const htmlZoom = document.getElementById('subscribed-zoom')
       const htmlGfi = document.getElementById('subscribed-gfi')
+      const htmlExport = document.getElementById('subscribed-export')
 
       mapInstance.subscribe(
         'plugin/zoom/zoomLevel',
@@ -51,6 +52,9 @@ export default (client, layerConf, config) => {
         'plugin/gfi/featureInformation',
         (v) => (htmlGfi.innerHTML = JSON.stringify(v, null, 2))
       )
+      mapInstance.subscribe('plugin/export/exportedMap', (screenshot) =>
+        htmlExport.setAttribute('src', screenshot)
+      )
 
       window.mapInstance = mapInstance
     })
diff --git a/packages/clients/diplan/example/style.css b/packages/clients/diplan/example/style.css
index 31aed502e..c5d952959 100644
--- a/packages/clients/diplan/example/style.css
+++ b/packages/clients/diplan/example/style.css
@@ -63,6 +63,12 @@ h2 {
   width: 100%;
 }
 
+.styled-table img {
+  cursor: pointer;
+  width: 400px;
+  height: auto;
+}
+
 .styled-table thead tr {
   background-color: #2b3980;
   color: #ecf4ff;
diff --git a/packages/clients/diplan/package.json b/packages/clients/diplan/package.json
index 02b9eff41..d35fccf1e 100644
--- a/packages/clients/diplan/package.json
+++ b/packages/clients/diplan/package.json
@@ -38,6 +38,7 @@
     "@polar/plugin-address-search": "^2.0.0",
     "@polar/plugin-attributions": "^1.3.0",
     "@polar/plugin-draw": "^2.0.0",
+    "@polar/plugin-export": "^1.2.1",
     "@polar/plugin-gfi": "^2.1.0",
     "@polar/plugin-icon-menu": "^1.3.0",
     "@polar/plugin-layer-chooser": "^1.2.1",
diff --git a/packages/clients/diplan/src/polar-client.ts b/packages/clients/diplan/src/polar-client.ts
index 5be266639..04fb3b613 100644
--- a/packages/clients/diplan/src/polar-client.ts
+++ b/packages/clients/diplan/src/polar-client.ts
@@ -2,6 +2,7 @@ import polarCore, { setLayout, NineLayout, NineLayoutTag } from '@polar/core'
 import AddressSearch from '@polar/plugin-address-search'
 import Attributions from '@polar/plugin-attributions'
 import Draw from '@polar/plugin-draw'
+import Export from '@polar/plugin-export'
 import Gfi from '@polar/plugin-gfi'
 import IconMenu from '@polar/plugin-icon-menu'
 import LayerChooser from '@polar/plugin-layer-chooser'
@@ -91,6 +92,14 @@ polarCore.addPlugins([
     coordinateSources: [],
     layers: {},
   }),
+  Export({
+    layoutTag: NineLayoutTag.BOTTOM_LEFT,
+    /*
+     * icons: Currently not implemented, provided icon set has no fitting icon
+     * atm. Suggestion: Searching for "picture" on icomoon yields nice results.
+     * We should ask implementors of diplanung-style to add them eventually.
+     */
+  }),
   Scale({
     displayComponent: true,
     layoutTag: NineLayoutTag.BOTTOM_RIGHT,