diff --git a/package.json b/package.json index 69883e0f..27ffe519 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "bgw:dev": "nx dev @polar/client-bgw", "generic:build": "nx build @polar/client-generic", "diplan:build": "nx build @polar/client-diplan", - "diplan:build:serve": "http-server ./packages/clients/diplan -o /example/prod-example.html", + "diplan:build:serve": "http-server ./packages/clients/diplan -o /example/overview.html", "diplan:dev": "nx dev @polar/client-diplan", "dish:build": "nx build @polar/client-dish", "dish:build:serve": "http-server ./packages/clients/dish -o /dist/index.html", diff --git a/packages/clients/diplan/API.md b/packages/clients/diplan/API.md index c8a1c8d5..5229ee7b 100644 --- a/packages/clients/diplan/API.md +++ b/packages/clients/diplan/API.md @@ -4,7 +4,7 @@ This document describes the `@polar/client-diplan`-specific configuration option For all additional details, check the [full documentation](https://dataport.github.io/polar/docs/diplan/client-diplan.html) that is also delivered as part of the package within the `./docs` folder. -For our example client, [see here](./example/prod-example.html). +For our example clients, [see here](./example/overview.html). ## Configuration diff --git a/packages/clients/diplan/example/README.md b/packages/clients/diplan/example/README.md new file mode 100644 index 00000000..b78df15c --- /dev/null +++ b/packages/clients/diplan/example/README.md @@ -0,0 +1,13 @@ +# Example structure + +## `.` + +The root folder holds files used in all clients. Modify with care. If you need wildly different files for an example, create new files in the relevant example folder. + +## `dev` + +This folder holds the development example used during development time. You may put anything in here as long as it serves the testing purposes. The client is not required to look good, but is a technical playground. + +## all others + +All other folders are examples used in the documentation deployed on the [GitHub page](https://dataport.github.io/polar/docs/diplan/example/overview.html). They are supposed to display usage variants and should be understandable/clean. These are supposed to be viewn both by the customer and integrators alike so that they can easily lift from the usage scenarios. They're also useful for testing PRs in build mode. diff --git a/packages/clients/diplan/example/dev/config.js b/packages/clients/diplan/example/dev/config.js new file mode 100644 index 00000000..2fe63731 --- /dev/null +++ b/packages/clients/diplan/example/dev/config.js @@ -0,0 +1,178 @@ +// 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 { + startResolution: 264.583190458, + startCenter: [561210, 5932600], + extent: [ + 248651.73157077, 5227198.20287631, 928366.12236557, 6118661.62507136, + ], + 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 CC BY 4.0`, + [xplanwms]: `$t(diplan.layers.${xplanwms}) © ???`, + [xplanwfs]: `$t(diplan.layers.${xplanwfs}) © ???`, + [flurstuecke]: `$t(diplan.layers.${flurstuecke}) © ???`, + [bstgasleitung]: `$t(diplan.layers.${bstgasleitung}) © ???`, + }, + }, + }, + }, + ], + 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, + }, + }, +} diff --git a/packages/clients/diplan/example/index.html b/packages/clients/diplan/example/dev/index.html similarity index 96% rename from packages/clients/diplan/example/index.html rename to packages/clients/diplan/example/dev/index.html index bfc83a62..4e229ff4 100644 --- a/packages/clients/diplan/example/index.html +++ b/packages/clients/diplan/example/dev/index.html @@ -1,10 +1,10 @@ - + @polar/client-diplan - + @@ -102,8 +102,8 @@

Informationen aus Kartenklient

+ - + diff --git a/packages/clients/diplan/example/polar-ui/setup.js b/packages/clients/diplan/example/polar-ui/setup.js new file mode 100644 index 00000000..ce8f7d6b --- /dev/null +++ b/packages/clients/diplan/example/polar-ui/setup.js @@ -0,0 +1,134 @@ +/* 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` */ +export default (client, layerConf, config) => { + /* The parameter may be a URL; in that case, a second parameter is a callback + * function that provides the `layerConf` object as first parameter. + * The code for that would look like this: + * client.rawLayerList.initializeLayerList("url", (layerConf) => { + * client.createMap({...}) + * }) + * 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 + containerId: 'polarstern', + /* see API.md for mapConfiguration options, especially the compiled + * version at https://dataport.github.io/polar/docs/diplan/client-diplan.html */ + mapConfiguration: { + stylePath: '../../dist/polar-client.css', + layerConf, + ...config, + }, + }) + .then((mapInstance) => { + /* + * This is a binding example for the various data POLAR makes accessible. + * The example is not exhaustive and additional fields may be found in + * the API.md and nested documents in the compiled docs: + * 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') + const actionLoadGeoJson = document.getElementById('action-load-geojson') + const actionZoomToAll = document.getElementById('action-zoom-to-all') + const actionFillAddressSearch = document.getElementById( + 'action-address-search-filler' + ) + const actionLasso = document.getElementById('action-lasso') + + 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', + }) + ) + actionLasso.onclick = () => + mapInstance.$store.dispatch('plugin/draw/setMode', 'lasso') + + 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', + (zoomLevel) => (htmlZoom.innerHTML = zoomLevel) + ) + mapInstance.subscribe( + 'plugin/gfi/featureInformation', + (v) => (htmlGfi.innerHTML = JSON.stringify(v, null, 2)) + ) + mapInstance.subscribe('plugin/export/exportedMap', (screenshot) => { + htmlExportImg.setAttribute('src', screenshot) + if (navigator.userAgent.toLowerCase().includes('firefox')) { + htmlExportImg.onclick = function () { + window.open(this.src, '_blank') + } + htmlExportA.onclick = () => false + } else { + 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 index d697a67a..f0db7e9e 100644 --- a/packages/clients/diplan/example/style.css +++ b/packages/clients/diplan/example/style.css @@ -14,12 +14,22 @@ html, body { margin: 0; padding: 0; + min-height: 100vh; font-family: sans-serif; font-size: 16px; color: #04071a; background-color: #f7f8fa; } +body { + display: flex; + flex-direction: column; +} + +main { + flex: 1; +} + header { padding: 0 2em; } @@ -44,6 +54,13 @@ main { padding-left: 10vw; } +.todo { + background: #2b3980; + color: white; + padding: 0 0.2em; + border-radius: 8px; +} + h1 { font-size: 30px; margin-bottom: 0; diff --git a/packages/clients/diplan/vite.config.js b/packages/clients/diplan/vite.config.js index e84d5109..17715de6 100644 --- a/packages/clients/diplan/vite.config.js +++ b/packages/clients/diplan/vite.config.js @@ -1,11 +1,12 @@ import { getClientConfig } from '../../../viteConfigs' export default getClientConfig({ - root: 'example', + root: 'example/dev', build: { + outDir: '../../dist', lib: { name: 'PolarClientDiPlan', - entry: '../src/polar-client.ts', + entry: '../../src/polar-client.ts', fileName: () => 'polar-client.js', }, rollupOptions: {