Dataport · oeninghe-dataport · Jan 13, 2026 · Jan 13, 2026 · Jan 16, 2026 · Jan 13, 2026
diff --git a/.husky/prepareConfig.js b/.husky/prepareConfig.js
@@ -1,4 +1,4 @@
-import { readFileSync, existsSync } from 'node:fs'
+import { existsSync, readFileSync } from 'node:fs'
 
 let config = JSON.parse(readFileSync('.husky/defaults.json').toString())
 if (existsSync('git-hooks.config.json')) {

diff --git a/eslint.config.ts b/eslint.config.ts
@@ -43,6 +43,7 @@ const polarConfig = defineConfig({
 		],
 		'import-x/order': 'off',
 		'perfectionist/sort-imports': 'error',
+		'perfectionist/sort-named-imports': 'error',
 		'vue/html-self-closing': [
 			'error',
 			{

diff --git a/examples/github-io/components/DevExSection.vue b/examples/github-io/components/DevExSection.vue
@@ -100,7 +100,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 
-import { tabs, rawCode } from './devexContent'
+import { rawCode, tabs } from './devexContent'
 import TheBadge from './TheBadge.vue'
 
 const activeTab = ref<(typeof tabs)[number]['id']>('install')

@@ -45,6 +45,7 @@
 import kernExtraIcons from 'virtual:kern-extra-icons'
 import { computed, ref } from 'vue'
 
+import GfiConfig from './components/GfiConfig.vue'
 import IcebergMap from './components/IcebergMap.vue'
 import LayoutChooser from './components/LayoutChooser.vue'
 import TaskMenu from './components/TaskMenu.vue'
@@ -55,6 +56,11 @@ const configTasks = [
 		label: 'Layout wählen',
 		component: LayoutChooser,
 	},
+	{
+		id: 'configure-gfi',
+		label: 'GFI konfigurieren',
+		component: GfiConfig,
+	},
 ]
 const tasks = computed(() => [
 	'menu',

@@ -0,0 +1,84 @@
+<template>
+	<fieldset class="kern-fieldset">
+		<legend class="kern-label">
+			Wie soll die Auswahl für das GFI-Plugin ablaufen?
+		</legend>
+		<div class="kern-fieldset__body">
+			<div
+				v-for="mode of selectionModes"
+				:key="mode.value"
+				class="kern-form-check"
+			>
+				<input
+					:id="`${id}-${mode.value}`"
+					v-model="selectionMode"
+					class="kern-form-check__radio"
+					:name="`${id}-layout`"
+					type="radio"
+					:value="mode.value"
+				/>
+				<label :for="`${id}-${mode.value}`" class="kern-label">
+					{{ mode.label }}
+				</label>
+			</div>
+		</div>
+	</fieldset>
+</template>
+
+<script setup lang="ts">
+import type { MapConfiguration } from '@polar/polar'
+
+import { isEqual } from 'es-toolkit'
+import { computed, useId } from 'vue'
+
+import { useIcebergStore } from '../stores/iceberg'
+
+const id = useId()
+const store = useIcebergStore()
+
+const selectionModes = [
+	{
+		value: 'direct',
+		label: 'Direkte Auswahl',
+		config: {
+			directSelect: true,
+		},
+	},
+	{
+		value: 'multi',
+		label: 'Mehrfachauswahl',
+		config: {
+			directSelect: true,
+			multiSelect: 'box',
+		},
+	},
+	{
+		value: 'pins',
+		label: 'Auswahl über das Pins-Plugin',
+		config: {
+			coordinateSources: [
+				{
+					plugin: 'pins',
+					key: 'coordinate',
+				},
+			],
+		},
+	},
+] satisfies {
+	value: 'direct' | 'multi' | 'pins'
+	label: string
+	config: Partial<MapConfiguration['gfi']>
+}[]
+
+const selectionMode = computed({
+	get: () =>
+		selectionModes.find((mode) =>
+			isEqual(mode.config, store.mapConfiguration.gfi)
+		)?.value || 'direct',
+	set: (value) => {
+		store.mapConfiguration.gfi = selectionModes.find(
+			(mode) => mode.value === value
+		)?.config as MapConfiguration['gfi']
+	},
+})
+</script>
@@ -43,12 +43,13 @@
 <script setup lang="ts">
 import type { PolarContainer } from '@polar/polar'
 
-import { addPlugins, removePlugin, getStore, subscribe } from '@polar/polar'
+import { addPlugins, getStore, removePlugin, subscribe } from '@polar/polar'
 import pluginAddressSearch from '@polar/polar/plugins/addressSearch'
 import pluginAttributions from '@polar/polar/plugins/attributions'
 import pluginExport from '@polar/polar/plugins/export'
 import pluginFilter from '@polar/polar/plugins/filter'
 import pluginFullscreen from '@polar/polar/plugins/fullscreen'
+import pluginGfi from '@polar/polar/plugins/gfi'
 import pluginIconMenu from '@polar/polar/plugins/iconMenu'
 import pluginLayerChooser from '@polar/polar/plugins/layerChooser'
 import pluginPins from '@polar/polar/plugins/pins'
@@ -130,6 +131,16 @@ watch(map, (map) => {
 			layoutTag: 'TOP_LEFT',
 			searchMethods: [],
 		}),
+		pluginGfi({
+			displayComponent: true,
+			layoutTag: 'TOP_LEFT',
+			layers: {
+				'1454': {
+					window: true,
+					geometry: true,
+				},
+			},
+		}),
 		pluginPins({
 			coordinateSources: [{ plugin: 'addressSearch', key: 'chosenAddress' }],
 			boundary: {

@@ -3,7 +3,7 @@ import {
 	type MasterportalApiServiceRegister,
 } from '@polar/polar'
 import { defineStore } from 'pinia'
-import { ref, reactive } from 'vue'
+import { reactive, ref } from 'vue'
 
 import type { MpapiParameters } from '@/lib/getFeatures/types'
 
@@ -31,7 +31,6 @@ export const useIcebergStore = defineStore('iceberg', () => {
 				name: 'Ausgleichsflächen',
 				styleId: 'panda',
 				visibility: true,
-				minZoom: 5,
 			},
 			{
 				id: '1693',
@@ -69,6 +68,7 @@ export const useIcebergStore = defineStore('iceberg', () => {
 				visibility: true,
 				type: 'mask',
 				name: 'snowbox.layers.mml',
+				minZoom: 5,
 			},
 		],
 		startCenter: [565874, 5934140],
@@ -132,6 +132,9 @@ export const useIcebergStore = defineStore('iceberg', () => {
 			displayComponent: true,
 			layoutTag: 'TOP_RIGHT',
 		},
+		gfi: {
+			directSelect: true,
+		} as MapConfiguration['gfi'],
 		markers: {
 			layers: [
 				{

@@ -0,0 +1,25 @@
+import { getStore } from '@polar/polar'
+
+function initializeDebugAssistant() {
+	const map = document.getElementById('snowbox')
+	const coreStore = getStore(map, 'core')
+	const activePluginIds = coreStore.activePluginIds
+
+	window.map = map
+	window.olMap = coreStore.map
+	window.coreStore = coreStore
+	window.activePluginIds = activePluginIds
+	for (const pluginId of activePluginIds) {
+		window[`${pluginId}Store`] = coreStore.getPluginStore(pluginId)
+	}
+}
+
+// We want to load as late as possible.
+// Especially, the timeout stuff from snowbox code should be done when doing this.
+setTimeout(() => {
+	initializeDebugAssistant()
+
+	// 7 seconds may be long sometimes, inform the developer about it.
+	// eslint-disable-next-line no-console
+	console.info('POLAR debug assistant was successfully initialized')
+}, 7000)
@@ -8,6 +8,7 @@
 		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate, max-age=0" />
 		<link rel="stylesheet" href="@polar/polar/polar.css" />
 		<script type="module" defer src="index.js"></script>
+		<script type="module" defer src="debug-assistant.js"></script>
 		<style>
 			/* style just for example page, not directly related to POLAR */
 			:root {
@@ -19,7 +20,6 @@
 				font-family: sans-serif;
 				padding: 2em;
 				background: var(--not-quite-white);
-				color: var(--eigengrau);
 			}
 
 			h1 {
@@ -71,4 +71,4 @@ <h2>Second map</h2>
 		<button id="secondMapClean">Remove all map clients below</button>
 		<div id="secondMapContainer"></div>
 	</body>
-</html>
+</html>
@@ -13,6 +13,7 @@
 import pluginFilter from '@polar/polar/plugins/filter'
 import pluginFullscreen from '@polar/polar/plugins/fullscreen'
 import pluginGeoLocation from '@polar/polar/plugins/geoLocation'
+import pluginGfi from '@polar/polar/plugins/gfi'
 import pluginIconMenu from '@polar/polar/plugins/iconMenu'
 import pluginLayerChooser from '@polar/polar/plugins/layerChooser'
 import pluginLoadingIndicator from '@polar/polar/plugins/loadingIndicator'
@@ -31,6 +32,7 @@
 const ausgleichsflaechen = '1454'
 const reports = '6059'
 const denkmal = 'denkmaelerWMS'
+const kielPolygon = 'kiel_polygon'
 const hamburgBorder = '6074'
 
 let colorScheme = 'light'
@@ -92,7 +94,7 @@
 		colorScheme,
 		startCenter: [565874, 5934140],
 		layers: [
 			// TODO: Add internalization to snowbox
 			{
 				id: basemapId,
 				visibility: true,
@@ -148,6 +150,12 @@
 					},
 				},
 			},
+			{
+				id: kielPolygon,
+				type: 'mask',
+				name: 'Kiel Polygone',
+				visibility: true,
+			},
 		],
 		layout: 'nineRegions',
 		checkServiceAvailability: true,
@@ -212,6 +220,18 @@
 							label_off: 'Mach klein',
 						},
 					},
+					gfi: {
+						layer: {
+							[reports]: {
+								property: {
+									addr: 'Adresse',
+									statu: 'Status',
+									beschr: 'Beschr.',
+									kat_text: 'Kat.',
+								},
+							},
+						},
+					},
 					iconMenu: {
 						hints: {
 							attributions: 'LMAO',
@@ -409,6 +429,68 @@
 					plugin: pluginLayerChooser({}),
 				},
 			],
+			[
+				{
+					plugin: pluginGfi({
+						layers: {
+							[reports]: {
+								window: true,
+								geometry: false,
+								properties: [
+									'addr',
+									'statu',
+									'beschr',
+									'pic',
+									'kat_text',
+									'skat_text',
+								],
+								exportProperty: 'pic',
+								showTooltip: (feature) => [
+									[
+										'span',
+										`Coordinates: ${feature.getGeometry().getCoordinates().join(', ')}`,
+									],
+								],
+								isSelectable: (feature) => isEvenId(feature.properties.mmlid),
+							},
+							[kielPolygon]: {
+								window: true,
+							},
+						},
+						afterLoadFunction: (featuresByLayerId) => {
+							Object.values(featuresByLayerId).forEach((featureList) => {
+								featureList.forEach((feature) => {
+									if (feature.properties) {
+										feature.properties = {
+											addr: [
+												feature.properties.str,
+												feature.properties.hsnr,
+											].join(' '),
+											...feature.properties,
+										}
+									}
+								})
+							})
+							return featuresByLayerId
+						},
+						featureList: {
+							activeLayers: {
+								plugin: 'layerChooser',
+								key: 'activeMaskIds',
+							},
+							mode: 'visible',
+							bindWithCoreHoverSelect: true,
+							pageLength: 5,
+							text: {
+								title: (feature) =>
+									feature.get('str') + ' ' + feature.get('hsnr'),
+								subtitle: 'Michels Meldung',
+								subSubtitle: (feature) => feature.get('skat_text'),
+							},
+						},
+					}),
+				},
+			],
 			[
 				{
 					plugin: pluginFilter({

@@ -86,4 +86,14 @@ export default [
 		featureNS: 'http://www.deegree.org/app',
 		featurePrefix: 'app',
 	},
+	{
+		id: 'kiel_polygon',
+		name: 'Kiel Polygon',
+		url: 'https://polar.dataport.de/qgisserver?MAP=/home/qgis/projects/dev_services.qgz',
+		typ: 'WFS',
+		featureType: 'polygon_kiel',
+		outputFormat: 'XML',
+		version: '1.1.0',
+		legendURL: '',
+	},
 ]
diff --git a/scripts/create-github-release.ts b/scripts/create-github-release.ts
@@ -1,4 +1,4 @@
-import { getOctokit, context } from '@actions/github'
+import { context, getOctokit } from '@actions/github'
 import { readFileSync } from 'node:fs'
 if (!process.env.GITHUB_TOKEN) {
 	process.stderr.write('fatal: No GitHub token provided')

diff --git a/scripts/typedoc-install-vue-tsc.ts b/scripts/typedoc-install-vue-tsc.ts
@@ -2,7 +2,7 @@
 // It requires that dev mode was started at least once with vite-plugin-checker enabled.
 
 import { cpSync, existsSync, mkdirSync } from 'node:fs'
-import { resolve, dirname } from 'node:path'
+import { dirname, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 const __dirname = dirname(fileURLToPath(import.meta.url))
 const basePath = resolve(__dirname, '..')

diff --git a/src/architecture.spec.ts b/src/architecture.spec.ts
@@ -33,7 +33,7 @@ describe('Architectural checks', () => {
 			.matchingPattern('^plugins/.*$')
 			.should()
 			.matchPattern(
-				'^plugins/[^/]+/((index|locales|store|types)\\.ts|utils/.*\\.ts|components/.*\\.spec\\.ts|stores/.*\\.ts)$'
+				'^plugins/[^/]+/((index|locales|store|types)\\.ts|utils/.*\\.ts|components/.*\\.spec\\.ts|stores/.*\\.ts|composables/.*\\.ts)$'
 			)
 			.check()
 		expect(violations).toEqual([])