Merge branch 'main' into feature/add-snapTo-mode-to-draw

Dataport · Feb 17, 2025 · 4b651d8 · 4b651d8
2 parents e737296 + ea6f796
commit 4b651d8
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 10 deletions.
diff --git a/packages/clients/diplan/example/config.js b/packages/clients/diplan/example/config.js
@@ -33,6 +33,7 @@ export default {
     // TODO should we provide english locales?
   ],
   addressSearch: {
+    displayComponent: true,
     searchMethods: [
       {
         queryParameters: {

diff --git a/packages/clients/diplan/example/index.html b/packages/clients/diplan/example/index.html
@@ -15,6 +15,20 @@ <h1>Testseite <code>@polar/client-diplan</code> (dev)</h1>
     <main>
       <section>
         <h2 class="padded-x">Beispielinstanz</h2>
+        <div class="padded-x">
+          <h3>Steuerung von außen</h3>
+          <button id="action-plus">+</button>
+          <button id="action-minus">-</button>
+          <button id="action-toast">Toast</button>
+          <button id="action-load-geojson">GeoJSON hinzufügen</button>
+          <button id="action-zoom-to-all">Zoome auf Zeichnung</button>
+          <label>
+            Adresssuche (erstbestes Ergebnis):
+            <input id="action-address-search-filler"/>
+          </label>
+          <br/>
+        </div>
+        <h3 class="padded-x">Klient</h3>
         <div id="polarstern">
           <noscript>Bitte benutzen Sie einen Browser mit aktiviertem JavaScript, um den Kartenklienten zu nutzen.</noscript>
         </div>
@@ -47,9 +61,9 @@ <h2>Informationen aus Kartenklient</h2>
               <td>Wert der aktuellen <code>GetFeatureInformation</code>-Antwort(en) als <code>Record&lt;LayerId, Feature[]&gt;</code></td>
             </tr>
             <tr>
-              <td><code>plugin/...</code></td>
-              <td id="subscribed-a">uninitialized</td>
-              <td>Text</td>
+              <td><code>plugin/draw/featureCollection</code></td>
+              <td id="subscribed-draw">uninitialized</td>
+              <td>Die hergestellte Zeichnung als GeoJSON.</td>
             </tr>
             <tr>
               <td><code>plugin/...</code></td>

diff --git a/packages/clients/diplan/example/prod-example.html b/packages/clients/diplan/example/prod-example.html
@@ -15,6 +15,20 @@ <h1>Testseite <code>@polar/client-diplan</code> (build)</h1>
     <main>
       <section>
         <h2 class="padded-x">Beispielinstanz</h2>
+        <div class="padded-x">
+          <h3>Steuerung von außen</h3>
+          <button id="action-plus">+</button>
+          <button id="action-minus">-</button>
+          <button id="action-toast">Toast</button>
+          <button id="action-load-geojson">GeoJSON hinzufügen</button>
+          <button id="action-zoom-to-all">Zoome auf Zeichnung</button>
+          <label>
+            Adresssuche (erstbestes Ergebnis):
+            <input id="action-address-search-filler"/>
+          </label>
+          <br/>
+        </div>
+        <h3 class="padded-x">Klient</h3>
         <div id="polarstern">
           <noscript>Bitte benutzen Sie einen Browser mit aktiviertem JavaScript, um den Kartenklienten zu nutzen.</noscript>
         </div>
@@ -47,9 +61,9 @@ <h2>Informationen aus Kartenklient</h2>
               <td>Wert der aktuellen <code>GetFeatureInformation</code>-Antwort(en) als <code>Record&lt;LayerId, Feature[]&gt;</code></td>
             </tr>
             <tr>
-              <td><code>plugin/...</code></td>
-              <td id="subscribed-a">uninitialized</td>
-              <td>Text</td>
+              <td><code>plugin/draw/featureCollection</code></td>
+              <td id="subscribed-draw">uninitialized</td>
+              <td>Die hergestellte Zeichnung als GeoJSON.</td>
             </tr>
             <tr>
               <td><code>plugin/...</code></td>
@@ -81,16 +95,16 @@ <h2>Informationen aus Kartenklient</h2>
       </section>
     </main>
     <footer>At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</footer>
-    <!-- Example without build tools. Most frameworks will allow importing this. (Try "* as MapClient".) -->
+    <!-- Example without build tools. Most frameworks will allow importing this. (Try "* as PolarClientDiPlan".) -->
     <script src="../dist/polar-client.js"></script>
-    <!-- → window.MapClient is now available. TODO: Choose a better name.  -->
+    <!-- → window.PolarClientDiPlan is now available. -->
     <link rel="stylesheet" src="../dist/polar-client.css">
     <script type="module">
       import services from './services.js'
       import config from './config.js'
 
       import setup from './setup.js'
-      setup(MapClient, services, config)
+      setup(PolarClientDiPlan, services, config)
     </script>
   </body>
 </html>
diff --git a/packages/clients/diplan/example/setup.js b/packages/clients/diplan/example/setup.js
@@ -1,5 +1,27 @@
 /* eslint-disable max-lines-per-function */
 
+const geoJSON = {
+  type: 'FeatureCollection',
+  features: [
+    {
+      type: 'Feature',
+      properties: {},
+      geometry: {
+        type: 'Polygon',
+        coordinates: [
+          [
+            [553702.4519707427, 5926504.665153537],
+            [549799.849911481, 5938873.929307467],
+            [582674.3113259386, 5942313.510783426],
+            [572421.7126956752, 5930142.68402234],
+            [553702.4519707427, 5926504.665153537],
+          ],
+        ],
+      },
+    },
+  ],
+}
+
 /* this is an example setup function displaying how POLAR is instantiated
  * you may do this in any other format as long as all required contents arrive
  * in `initializeLayerList` and `createMap` */
@@ -40,10 +62,46 @@ export default (client, layerConf, config) => {
 
       // TODO expand example bindings
 
+      const actionPlus = document.getElementById('action-plus')
+      const actionMinus = document.getElementById('action-minus')
+      const actionToast = document.getElementById('action-toast')
+      const actionLoadGeoJson = document.getElementById('action-load-geojson')
+      const actionZoomToAll = document.getElementById('action-zoom-to-all')
+      const actionFillAddressSearch = document.getElementById(
+        'action-address-search-filler'
+      )
+
+      actionPlus.onclick = () =>
+        mapInstance.$store.dispatch('plugin/zoom/increaseZoomLevel')
+      actionMinus.onclick = () =>
+        mapInstance.$store.dispatch('plugin/zoom/decreaseZoomLevel')
+      actionToast.onclick = () =>
+        mapInstance.$store.dispatch('plugin/toast/addToast', {
+          type: 'success',
+          text: 'Dies ist eine Beispielnachricht.',
+          timeout: 3000,
+        })
+      actionLoadGeoJson.onclick = () => {
+        mapInstance.$store.dispatch('plugin/draw/addFeatures', {
+          geoJSON,
+        })
+      }
+      actionZoomToAll.onclick = () =>
+        mapInstance.$store.dispatch('plugin/draw/zoomToAllFeatures', {
+          margin: 10, // defaults to 20
+        })
+      actionFillAddressSearch.addEventListener('input', (e) =>
+        mapInstance.$store.dispatch('plugin/addressSearch/search', {
+          input: e.target.value,
+          autoselect: 'first',
+        })
+      )
+
       const htmlZoom = document.getElementById('subscribed-zoom')
       const htmlGfi = document.getElementById('subscribed-gfi')
       const htmlExportA = document.getElementById('subscribed-export-a')
       const htmlExportImg = document.getElementById('subscribed-export-img')
+      const htmlDraw = document.getElementById('subscribed-draw')
 
       mapInstance.subscribe(
         'plugin/zoom/zoomLevel',
@@ -64,6 +122,9 @@ export default (client, layerConf, config) => {
           htmlExportA.setAttribute('href', screenshot)
         }
       })
+      mapInstance.subscribe('plugin/draw/featureCollection', (geojson) => {
+        htmlDraw.innerHTML = JSON.stringify(geojson, null, 2)
+      })
 
       window.mapInstance = mapInstance
     })

diff --git a/packages/clients/diplan/example/style.css b/packages/clients/diplan/example/style.css
@@ -92,6 +92,14 @@ h2 {
   border-bottom: 2px solid #2b3980;
 }
 
+#subscribed-draw, #subscribed-gfi {
+  display: block;
+  max-width: 600px;
+  max-height: 400px;
+  white-space: pre-wrap;
+  overflow-y: auto;
+}
+
 footer {
   color: #ecf4ff;
   background: #2b3980;

diff --git a/packages/clients/diplan/src/polar-client.ts b/packages/clients/diplan/src/polar-client.ts
@@ -68,6 +68,7 @@ polarCore.addPlugins([
   AddressSearch({
     addLoading: 'plugin/loadingIndicator/addLoadingKey',
     removeLoading: 'plugin/loadingIndicator/removeLoadingKey',
+    layoutTag: NineLayoutTag.TOP_LEFT,
     // must be overridden by client-specific configuration
     searchMethods: [],
   }),

diff --git a/packages/clients/diplan/vite.config.js b/packages/clients/diplan/vite.config.js
@@ -4,7 +4,7 @@ export default getClientConfig({
   root: 'example',
   build: {
     lib: {
-      name: 'MapClient',
+      name: 'PolarClientDiPlan',
       entry: '../src/polar-client.ts',
       fileName: () => 'polar-client.js',
     },