add export and example

Author: warm-coolguy

packages/clients/diplan/example/config.js

@@ -80,6 +80,11 @@ export default {
       },
     ],
   },
+  export: {
+    displayComponent: true,
+    showJpg: false,
+    showPdf: false,
+  },
   gfi: {
     mode: 'bboxDot',
     layers: {

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>

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>

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
     })

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;

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",

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,