feat(gfi): migrate plugin

examples/iceberg/App.vue

@@ -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',

examples/iceberg/components/GfiConfig.vue

@@ -0,0 +1,86 @@
+<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: {
+				mode: '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>

examples/iceberg/components/IcebergMap.vue

@@ -49,6 +49,7 @@ 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: {

examples/iceberg/components/TaskMenu.vue

@@ -5,12 +5,12 @@
 		</div>
 		<ul class="kern-task-list__list">
 			<li
-				v-for="(task, idx) of configTasks"
-				:key="idx"
+				v-for="(task, index) of configTasks"
+				:key="index"
 				class="kern-task-list__item"
 			>
-				<span class="kern-number">{{ idx + 1 }}</span>
-				<div :id="`task${idx + 1}-title`" class="kern-task-list__title">
+				<span class="kern-number">{{ index + 1 }}</span>
+				<div :id="`task${index + 1}-title`" class="kern-task-list__title">
 					<a
 						href="#"
 						class="kern-link kern-link--stretched"

examples/iceberg/stores/iceberg.ts

@@ -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: [
 				{

examples/snowbox/debug-assistant.js

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

examples/snowbox/index.html

@@ -8,18 +8,18 @@
 		<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 {
 				--not-quite-white: #f2f3f4;
-				--map-height: 600px;
+				--map-height: 800px;
 			}
 
 			body {
 				font-family: sans-serif;
 				padding: 2em;
 				background: var(--not-quite-white);
-				color: var(--eigengrau);
 			}
 
 			h1 {
@@ -61,6 +61,7 @@ <h1>POLAR map client</h1>
 			</select>
 		</label>
 		<button id="color-scheme-switcher">Switch to dark mode</button>
+		<button id="kiel-teleport">Go to Kiel</button>
 		<div>
 			Coordinates of currently selected feature: <span id="selected-feature-coordinates"></span>
 		</div>
@@ -73,5 +74,7 @@ <h2>Second map</h2>
 		<button id="secondMap">Add a map client</button>
 		<button id="secondMapClean">Remove all map clients below</button>
 		<div id="secondMapContainer"></div>
+		<h2>Spam Zone</h2>
+		<div id="gfi-features"></div>
 	</body>
 </html>