Feature/diplan UI

packages/clients/diplan/example/dev/index.html

@@ -17,17 +17,26 @@ <h1>Testseite <code>@polar/client-diplan</code> (dev)</h1>
         <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>
-          <button id="action-lasso">Lasso-Funktion</button>
-          <label>
-            Adresssuche (erstbestes Ergebnis):
-            <input id="action-address-search-filler"/>
-          </label>
-          <br/>
+          <fieldset>
+            <legend>POLAR-Standardfunktionen</legend>
+            <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>
+          </fieldset>
+          <fieldset>
+            <legend>DiPlan-Funktionen</legend>
+            <button id="action-lasso">Lasso-Funktion</button>
+            <button id="action-cut-polygons">Cut polygons</button>
+            <button id="action-duplicate-polygons">Duplicate polygons</button>
+            <button id="action-merge-polygons">Merge polygons</button>
+          </fieldset>
+          <div>Active extended draw mode: <span id="active-draw-mode"></span></div>
         </div>
         <h3 class="padded-x">Klient</h3>
         <div id="polarstern">

packages/clients/diplan/example/dev/setup.js

@@ -35,11 +35,6 @@ export default (client, layerConf, config) => {
    * However, we're working with a loaded object here, making the
    * masterportalapi's `initializeLayerList` synchronous:
    */
-  client.rawLayerList.initializeLayerList(layerConf)
-
-  // TODO can we encapsulate do the upper statement in the core? people
-  //      don't really need to do that manually, do they?
-
   client
     .createMap({
       // id of div to render in
@@ -60,8 +55,6 @@ export default (client, layerConf, config) => {
        * https://dataport.github.io/polar/docs/diplan/client-diplan.html
        */
 
-      // TODO expand example bindings
-
       const actionPlus = document.getElementById('action-plus')
       const actionMinus = document.getElementById('action-minus')
       const actionToast = document.getElementById('action-toast')
@@ -71,6 +64,12 @@ export default (client, layerConf, config) => {
         'action-address-search-filler'
       )
       const actionLasso = document.getElementById('action-lasso')
+      const actionCut = document.getElementById('action-cut-polygons')
+      const actionDuplicate = document.getElementById(
+        'action-duplicate-polygons'
+      )
+      const actionMerge = document.getElementById('action-merge-polygons')
+      const activeExtendedDrawMode = document.getElementById('active-draw-mode')
 
       actionPlus.onclick = () =>
         mapInstance.$store.dispatch('plugin/zoom/increaseZoomLevel')
@@ -99,6 +98,17 @@ export default (client, layerConf, config) => {
       )
       actionLasso.onclick = () =>
         mapInstance.$store.dispatch('plugin/draw/setMode', 'lasso')
+      actionCut.onclick = () =>
+        mapInstance.$store.dispatch('diplan/cutPolygons')
+      actionDuplicate.onclick = () =>
+        mapInstance.$store.dispatch('diplan/duplicatePolygons')
+      actionMerge.onclick = () =>
+        mapInstance.$store.dispatch('diplan/mergePolygons')
+      mapInstance.$store.watch(
+        (_, getters) => getters['diplan/activeDrawMode'],
+        (activeDrawMode) => (activeExtendedDrawMode.innerHTML = activeDrawMode),
+        { immediate: true }
+      )
 
       const htmlRevisedDrawExport = document.getElementById(
         'subscribed-revised-draw-export'

packages/clients/diplan/example/diplan-ui/config.js

@@ -0,0 +1,193 @@
+// service id map to avoid typos, ease renames
+const basemap = 'basemapde_farbe'
+const xplanwms = 'xplanwms'
+const xplanwfs = 'xplanwfs'
+const flurstuecke = 'flurstuecke'
+const bstgasleitung = 'bst_gasleitung'
+
+export default {
+  // masterportalAPI parameters
+  startResolution: 264.583190458,
+  startCenter: [561210, 5932600],
+  extent: [
+    248651.73157077, 5227198.20287631, 928366.12236557, 6118661.62507136,
+  ],
+  // diplan-specific configuration example (see API.md)
+  diplan: {
+    mergeToMultiGeometries: true,
+    validateGeoJson: true,
+    metaServices: [
+      {
+        id: flurstuecke,
+        propertyNames: ['land', 'gemarkung', 'regbezirk', 'kreis', 'gemeinde'],
+        aggregationMode: 'unequal',
+      },
+    ],
+  },
+  // general POLAR parameters
+  locales: [
+    {
+      type: 'de',
+      resources: {
+        diplan: {
+          layers: {
+            [basemap]: 'BasemapDE',
+            [xplanwms]: 'XPlanWMS',
+            [xplanwfs]: 'XPlanSynWFS',
+            [flurstuecke]: 'Flurstücke',
+            [bstgasleitung]: 'BST Gasleitung',
+          },
+          attributions: {
+            [basemap]: `$t(diplan.layers.${basemap}) © GeoBasis-DE / BKG <YEAR> CC BY 4.0`,
+            [xplanwms]: `$t(diplan.layers.${xplanwms}) © ???`,
+            [xplanwfs]: `$t(diplan.layers.${xplanwfs}) © ???`,
+            [flurstuecke]: `$t(diplan.layers.${flurstuecke}) © ???`,
+            [bstgasleitung]: `$t(diplan.layers.${bstgasleitung}) © ???`,
+          },
+        },
+      },
+    },
+    // TODO should we provide english locales?
+  ],
+  addressSearch: {
+    displayComponent: true,
+    searchMethods: [
+      {
+        queryParameters: {
+          searchAddress: true,
+          searchStreets: true,
+          searchHouseNumbers: true,
+        },
+        type: 'mpapi',
+        url: 'https://geodienste.hamburg.de/HH_WFS_GAGES?service=WFS&request=GetFeature&version=2.0.0',
+      },
+    ],
+    minLength: 3,
+    waitMs: 300,
+  },
+  layers: [
+    {
+      id: basemap,
+      visibility: true,
+      type: 'background',
+      name: `diplan.layers.${basemap}`,
+    },
+    {
+      id: xplanwms,
+      visibility: true,
+      type: 'mask',
+      name: `diplan.layers.${xplanwms}`,
+    },
+    {
+      id: xplanwfs,
+      visibility: false,
+      type: 'mask',
+      name: `diplan.layers.${xplanwfs}`,
+    },
+    {
+      id: flurstuecke,
+      visibility: false,
+      // TODO available from 7, but only starts loading from 8 - bug or skill issue?
+      minZoom: 7,
+      type: 'mask',
+      name: `diplan.layers.${flurstuecke}`,
+    },
+    {
+      id: bstgasleitung,
+      visibility: false,
+      type: 'mask',
+      name: `diplan.layers.${bstgasleitung}`,
+    },
+  ],
+  attributions: {
+    layerAttributions: [
+      {
+        id: basemap,
+        title: `diplan.attributions.${basemap}`,
+      },
+      {
+        id: xplanwms,
+        title: `diplan.attributions.${xplanwms}`,
+      },
+      {
+        id: xplanwfs,
+        title: `diplan.attributions.${xplanwfs}`,
+      },
+      {
+        id: flurstuecke,
+        title: `diplan.attributions.${flurstuecke}`,
+      },
+      {
+        id: bstgasleitung,
+        title: `diplan.attributions.${bstgasleitung}`,
+      },
+    ],
+  },
+  draw: {
+    enableOptions: true,
+    lassos: [
+      {
+        id: flurstuecke,
+      },
+      {
+        id: xplanwfs,
+      },
+    ],
+    measureOptions: {
+      metres: true,
+      kilometres: true,
+      hectares: true,
+    },
+    selectableDrawModes: ['Point', 'LineString', 'Circle', 'Text', 'Polygon'],
+    snapTo: [xplanwfs, flurstuecke],
+    textStyle: {
+      font: {
+        size: [10, 20, 30],
+        family: 'Arial',
+      },
+    },
+    style: {
+      fill: { color: 'rgb(51 117 212 / 50%)' },
+      stroke: {
+        color: '#3375d4',
+        width: 2,
+      },
+      circle: {
+        radius: 7,
+        fillColor: 'rgb(51 117 212 / 50%)',
+      },
+    },
+  },
+  export: {
+    displayComponent: true,
+    showJpg: false,
+    showPdf: false,
+  },
+  gfi: {
+    mode: 'bboxDot',
+    layers: {
+      [xplanwms]: {
+        geometry: true,
+        window: true,
+        properties: ['xpPlanName'],
+      },
+      [xplanwfs]: {
+        geometry: true,
+        window: true,
+        properties: ['name'],
+      },
+    },
+    coordinateSources: [
+      'plugin/pins/transformedCoordinate',
+      'plugin/pins/coordinatesAfterDrag',
+    ],
+  },
+  pins: {
+    toZoomLevel: 9,
+    movable: 'drag',
+    appearOnClick: {
+      show: true,
+      atZoomLevel: 0,
+    },
+  },
+}