feat(plugins/layerChooser): migrate plugin

examples/snowbox/index.js

@@ -8,17 +8,19 @@
 } from '@polar/polar'
 import pluginFullscreen from '@polar/polar/plugins/fullscreen'
 import pluginIconMenu from '@polar/polar/plugins/iconMenu'
+import pluginLayerChooser from '@polar/polar/plugins/layerChooser'
 import pluginToast from '@polar/polar/plugins/toast'
 import EmptyComponent from './EmptyComponent.vue'
 import styleJsonUrl from './style.json?url'
-import AnotherEmptyComponent from './AnotherEmptyComponent.vue'
+import services from './services.js'
 import YetAnotherEmptyComponent from './YetAnotherEmptyComponent.vue'
 import GeoLocationMockCe from './GeoLocationMock.ce.vue'
 
 const basemapId = '23420'
 const basemapGreyId = '23421'
 const ausgleichsflaechen = '1454'
 const reports = '6059'
+const denkmal = 'denkmaelerWMS'
 
 // eslint-disable-next-line no-unused-vars
 const dataportTheme = {
@@ -53,7 +55,7 @@
 	},
 }
 
 // TODO: Re-enable with isSelectable
 /*
 // arbitrary condition for testing
 const isEvenId = (mmlid) => Number(mmlid.slice(-1)) % 2 === 0
@@ -71,30 +73,54 @@
 	'snowbox',
 	{
 		layers: [
+			// TODO: Add internalization to snowbox
 			{
 				id: basemapId,
 				visibility: true,
 				type: 'background',
-				name: 'snowbox.layers.basemap',
+				name: 'Basemap.de (Farbe)',
 			},
 			{
 				id: basemapGreyId,
 				type: 'background',
-				name: 'snowbox.layers.basemapGrey',
+				name: 'Basemap.de (Grau)',
+				maxZoom: 6,
 			},
 			{
 				id: reports,
 				type: 'mask',
-				name: 'snowbox.layers.reports',
-				visibility: true,
-				styleId: 'panda',
+				name: 'Anliegen (MML)',
+				visibility: false,
 			},
 			{
 				id: ausgleichsflaechen,
 				type: 'mask',
-				name: 'snowbox.layers.ausgleichsflaechen',
+				name: 'Ausgleichsflächen',
 				styleId: 'panda',
 				visibility: true,
+				minZoom: 5,
+			},
+			{
+				id: denkmal,
+				type: 'mask',
+				name: 'Kulturdenkmale',
+				visibility: true,
+				options: {
+					layers: {
+						order: '6,24,25,4,3,2,1,0',
+						title: {
+							6: 'Denkmalbereich',
+							24: 'Mehrheit von baulichen Anlagen',
+							25: 'Sachgesamtheit',
+							4: 'Baudenkmal',
+							3: 'Gründenkmal',
+							2: 'Gewässer',
+							1: 'Baudenkmal (Fläche)',
+							0: 'Gründenkmal (Fläche)',
+						},
+						legend: true,
+					},
+				},
 			},
 		],
 		layout: 'standard',
@@ -120,14 +146,14 @@
 						stroke: '#FFFFFF',
 						fill: '#333333',
 					},
 					// TODO(dopenguin): Has some HMR issues, needs to be fixed
 					// isSelectable: isReportSelectable,
 				},
 			],
 			clusterClickZoom: true,
 		},
 		// theme: dataportTheme,
 		/*
 			TODO(dopenguin): Surrounding application should be able give information about dark or light mode via update of a state parameter; light mode by default
 		 */
 		locales: [
@@ -150,7 +176,7 @@
 			},
 		],
 	},
-	'https://geodienste.hamburg.de/services-internet.json'
+	services
 )
 
 document.getElementById('secondMap').addEventListener('click', async () => {
@@ -192,7 +218,7 @@
 	pluginIconMenu({
 		displayComponent: true,
 		layoutTag: 'TOP_RIGHT',
-		initiallyOpen: 'kewl',
+		initiallyOpen: 'layerChooser',
 		focusMenus: [
 			{
 				plugin: {
@@ -204,7 +230,7 @@
 			},
 		],
 		menus: [
 			// TODO: Delete the mock plugins including the components once the correct plugins have been implemented
 			[
 				{
 					plugin: {
@@ -217,7 +243,7 @@
 			[
 				{
 					plugin: {
-						component: AnotherEmptyComponent,
+						component: EmptyComponent,
 						id: 'realKewl',
 						locales: [],
 					},
@@ -226,12 +252,8 @@
 			],
 			[
 				{
-					plugin: {
-						component: EmptyComponent,
-						id: 'kewl',
-						locales: [],
-					},
-					icon: 'kern-icon-fill--layers',
+					plugin: pluginLayerChooser({}),
+					icon: 'kern-icon--layers',
 				},
 				{
 					plugin: pluginFullscreen({}),

examples/snowbox/services.js

@@ -0,0 +1,77 @@
+export default [
+	{
+		id: '23420',
+		name: 'basemap.de Web Raster Farbe',
+		url: 'https://sgx.geodatenzentrum.de/wms_basemapde',
+		typ: 'WMS',
+		layers: 'de_basemapde_web_raster_farbe',
+		format: 'image/png',
+		version: '1.3.0',
+		singleTile: false,
+		transparent: true,
+		transparency: 0,
+		urlIsVisible: true,
+		tilesize: 512,
+		gutter: 0,
+		minScale: '0',
+		maxScale: '2500000',
+		legendURL: '',
+		cache: false,
+		featureCount: 5,
+	},
+	{
+		id: '23421',
+		name: 'basemap.de Web Raster Grau',
+		url: 'https://sgx.geodatenzentrum.de/wms_basemapde',
+		typ: 'WMS',
+		layers: 'de_basemapde_web_raster_grau',
+		format: 'image/png',
+		version: '1.3.0',
+		singleTile: false,
+		transparent: true,
+		transparency: 0,
+		urlIsVisible: true,
+		tilesize: 512,
+		gutter: 0,
+		minScale: '0',
+		maxScale: '2500000',
+		legendURL: '',
+		cache: false,
+		featureCount: 5,
+	},
+	{
+		id: '1454',
+		name: 'Ausgleichsflächen',
+		url: 'https://geodienste.hamburg.de/HH_WFS_Ausgleichsflaechen',
+		typ: 'WFS',
+		featureType: 'ausgleichsflaechen',
+		outputFormat: 'XML',
+		version: '1.1.0',
+		featureNS: 'https://registry.gdi-de.org/id/de.hh.up',
+		featurePrefix: 'de.hh.up',
+		legendURL: '',
+	},
+	{
+		id: '6059',
+		name: 'MML Anliegen',
+		url: 'https://geodienste.hamburg.de/lgv-config/anliegen_extern.json',
+		typ: 'GeoJSON',
+		format: 'XML',
+		version: '1.0',
+		minScale: '0',
+		maxScale: '2500000',
+		legendURL: '',
+		urlIsVisible: true,
+	},
+	{
+		id: 'denkmaelerWMS',
+		name: 'Denkmal WMS',
+		url: 'https://efi2-deegree.schleswig-holstein.de/dish-deegree/services/wms_shp',
+		typ: 'WMS',
+		layers: '0,1,2,3,4,6,24,25',
+		legendURL: 'ignore',
+		format: 'image/png',
+		version: '1.3.0',
+		transparent: true,
+	},
+]

src/components/PolarCard.ce.vue

@@ -0,0 +1,28 @@
+<template>
+	<article class="kern-card kern-card--small">
+		<div class="kern-card__container">
+			<slot />
+		</div>
+	</article>
+</template>
+
+<script setup lang="ts">
+// NOTE: This comment is needed to have the <script>-tag not empty
+</script>
+
+<style scoped>
+.kern-card {
+	height: inherit;
+	min-width: 25rem;
+	border-radius: 0.5rem;
+	box-shadow:
+		0 1px 1px 0 rgba(53, 57, 86, 0.16),
+		0 1px 2px 0 rgba(53, 57, 86, 0.25),
+		0 1px 6px 0 rgba(110, 117, 151, 0.25);
+
+	.kern-card__container {
+		padding: var(--kern-metric-space-small);
+		padding-bottom: 0.625rem;
+	}
+}
+</style>

src/components/PolarInput.ce.vue

@@ -0,0 +1,54 @@
+<template>
+	<div class="kern-form-check">
+		<input
+			:id="`polar-${type}-${value}-${idSuffix}`"
+			v-model="model"
+			:class="`polar-input kern-form-check__${type}`"
+			:name="value"
+			:value="value"
+			:type="type"
+			:disabled="disabled"
+		/>
+		<label
+			class="polar-input kern-label"
+			:for="`polar-${type}-${value}-${idSuffix}`"
+		>
+			{{ label }}
+		</label>
+	</div>
+</template>
+
+<script setup lang="ts" generic="T extends 'checkbox' | 'radio'">
+// NOTE: It is fine here that props is only used as a type in the script.
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const props = defineProps<{
+	idSuffix: string
+	label: string
+	type: T
+	value: string
+	disabled?: boolean
+}>()
+const model = defineModel<
+	typeof props.type extends 'checkbox' ? string[] : string
+>({ required: true })
+</script>
+
+<style scoped>
+.polar-input {
+	pointer-events: all;
+}
+
+.kern-form-check__radio[disabled],
+.kern-form-check__checkbox[disabled] {
+	&:hover {
+		border: var(--kern-metric-border-width-default) solid
+			var(--kern-color-form-input-border);
+	}
+}
+
+.kern-form-check__checkbox[disabled] {
+	&:checked:hover::before {
+		margin: 0.25rem;
+	}
+}
+</style>

src/components/PolarInputGroup.ce.vue

@@ -0,0 +1,41 @@
+<template>
+	<fieldset class="kern-fieldset">
+		<legend class="kern-label">
+			{{ legend }}
+		</legend>
+		<div class="kern-fieldset__body">
+			<slot />
+		</div>
+	</fieldset>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+	legend: string
+}>()
+</script>
+
+<style scoped>
+.kern-fieldset {
+	width: 100%;
+}
+
+.kern-fieldset__body {
+	width: 100%;
+	padding: var(--kern-metric-space-small) 0;
+	gap: var(--kern-metric-space-small);
+	border-radius: var(--kern-metric-border-radius-default, 0.25rem);
+	background-color: var(--kern-color-layout-background-hued);
+}
+
+.kern-label {
+	padding-left: 0.75rem;
+}
+
+:deep(.kern-form-check) {
+	align-items: center;
+	gap: var(--kern-metric-space-large, 1.5rem);
+	margin-left: 0.75rem;
+	padding-right: 0;
+}
+</style>

src/core/components/PolarMap.ce.vue

@@ -22,10 +22,9 @@ import { easeOut } from 'ol/easing'
 import { t } from 'i18next'
 import { useMainStore } from '../stores/main'
 
+import { checkServiceAvailability } from '../utils/checkServiceAvailability'
 import { updateDragAndZoomInteractions } from '../utils/map/updateDragAndZoomInteractions'
 import { setupStyling } from '../utils/map/setupStyling'
-
-import { checkServiceAvailability } from '../utils/checkServiceAvailability'
 import { setupMarkers } from '../utils/map/setupMarkers'
 import { useT } from '../composables/useT'
 import PolarMapOverlay from './PolarMapOverlay.ce.vue'

src/core/components/PolarMapOverlay.ce.vue

@@ -72,7 +72,7 @@ defineExpose({
 	width: inherit;
 	height: inherit;
 	z-index: 42;
-	font-size: 22px;
+	font-size: var(--kern-typography-font-size-static-large);
 	text-align: center;
 	color: white;
 	background-color: rgba(0, 0, 0, 0.45);

src/core/components/layouts/NineLayout.ce.vue

@@ -16,9 +16,9 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
-import { useMainStore } from '@/core/stores/main'
-import { usePluginStore } from '@/core/stores/plugin'
-import { NineLayoutTag } from '@/core/utils/NineLayoutTag'
+import { useMainStore } from '../../stores/main'
+import { usePluginStore } from '../../stores/plugin'
+import { NineLayoutTag } from '../../utils/NineLayoutTag'
 
 const tags = Object.entries(NineLayoutTag)
 

src/core/components/layouts/StandardLayout.ce.vue

@@ -9,7 +9,7 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { usePluginStore } from '@/core/stores/plugin'
+import { usePluginStore } from '../../stores/plugin'
 
 const pluginStore = usePluginStore()