diff --git a/examples/iceberg/components/IcebergMap.vue b/examples/iceberg/components/IcebergMap.vue
index 0282dab3f6..54917b4dd9 100644
--- a/examples/iceberg/components/IcebergMap.vue
+++ b/examples/iceberg/components/IcebergMap.vue
@@ -30,6 +30,7 @@ import type { PolarContainer } from '@polar/polar'
 
 import { addPlugins, getStore, subscribe } from '@polar/polar'
 import pluginAddressSearch from '@polar/polar/plugins/addressSearch'
+import pluginFilter from '@polar/polar/plugins/filter'
 import pluginFullscreen from '@polar/polar/plugins/fullscreen'
 import pluginIconMenu from '@polar/polar/plugins/iconMenu'
 import pluginLayerChooser from '@polar/polar/plugins/layerChooser'
@@ -56,6 +57,39 @@ watch(map, (map) => {
 			displayComponent: true,
 			layoutTag: 'TOP_RIGHT',
 			menus: [
+				[
+					{
+						plugin: pluginFilter({
+							layers: {
+								6059: {
+									categories: [
+										{
+											targetProperty: 'statu',
+											knownValues: [
+												{
+													key: 'todo',
+													values: ['In Bearbeitung'],
+													icon: 'kern-icon--assignment',
+												},
+												{
+													key: 'done',
+													values: ['abgeschlossen'],
+													icon: 'kern-icon--check',
+												},
+											],
+										},
+									],
+									time: {
+										targetProperty: 'start',
+										freeSelection: 'until',
+										last: [7],
+										pattern: 'YYYYMMDD',
+									},
+								},
+							},
+						}),
+					},
+				],
 				[
 					{
 						plugin: pluginLayerChooser({}),
diff --git a/examples/iceberg/stores/iceberg.ts b/examples/iceberg/stores/iceberg.ts
index b719113108..eb8ce061df 100644
--- a/examples/iceberg/stores/iceberg.ts
+++ b/examples/iceberg/stores/iceberg.ts
@@ -64,6 +64,12 @@ export const useIcebergStore = defineStore('iceberg', () => {
 					},
 				},
 			},
+			{
+				id: '6059',
+				visibility: true,
+				type: 'mask',
+				name: 'snowbox.layers.mml',
+			},
 		],
 		startCenter: [565874, 5934140],
 		layout: 'nineRegions',
@@ -92,6 +98,30 @@ export const useIcebergStore = defineStore('iceberg', () => {
 			displayComponent: true,
 			layoutTag: 'TOP_RIGHT',
 		},
+		markers: {
+			layers: [
+				{
+					id: '6059',
+					defaultStyle: {
+						stroke: '#FFFFFF',
+						fill: '#005CA9',
+					},
+					hoverStyle: {
+						stroke: '#46688E',
+						fill: '#8BA1B8',
+					},
+					selectionStyle: {
+						stroke: '#FFFFFF',
+						fill: '#E10019',
+					},
+					unselectableStyle: {
+						stroke: '#FFFFFF',
+						fill: '#333333',
+					},
+				},
+			],
+			clusterClickZoom: true,
+		},
 		pins: {
 			coordinateSources: [{ plugin: 'addressSearch', key: 'chosenAddress' }],
 			movable: 'drag',
diff --git a/examples/iceberg/tsconfig.json b/examples/iceberg/tsconfig.json
index 5579210965..4d7d536a36 100644
--- a/examples/iceberg/tsconfig.json
+++ b/examples/iceberg/tsconfig.json
@@ -8,6 +8,7 @@
 		"types": [
 			"vitest/importMeta",
 			"vitest/jsdom",
+			"node",
 			"../../src/@types/vite-env.d.ts",
 			"../../src/@types/i18next.d.ts",
 			"../../src/@types/pinia.d.ts",
diff --git a/examples/snowbox/index.js b/examples/snowbox/index.js
index 94510e7bdb..b0ee1be87a 100644
--- a/examples/snowbox/index.js
+++ b/examples/snowbox/index.js
@@ -8,6 +8,7 @@ import {
 	updateState,
 } from '@polar/polar'
 import pluginAddressSearch from '@polar/polar/plugins/addressSearch'
+import pluginFilter from '@polar/polar/plugins/filter'
 import pluginFooter from '@polar/polar/plugins/footer'
 import pluginFullscreen from '@polar/polar/plugins/fullscreen'
 import pluginGeoLocation from '@polar/polar/plugins/geoLocation'
@@ -182,6 +183,30 @@ const map = await createMap(
 			{
 				type: 'de',
 				resources: {
+					filter: {
+						layer: {
+							[reports]: {
+								category: {
+									skat: {
+										title: 'Schadensart',
+										knownValue: {
+											'1xx': 'Alle Wege- und Straßenschäden',
+											100: 'Wege und Straßen',
+											101: 'Schlagloch und Wegeschaden',
+											102: 'Verunreinigung und Vandalismus',
+										},
+									},
+									statu: {
+										title: 'Bearbeitungsstatus',
+										knownValue: {
+											todo: 'In Bearbeitung',
+											done: 'Abgeschlossen',
+										},
+									},
+								},
+							},
+						},
+					},
 					fullscreen: {
 						button: {
 							label_on: 'Mach groß',
@@ -336,7 +361,6 @@ addPlugin(
 			},
 		],
 		menus: [
-			// TODO: Delete the mock plugins including the components once the correct plugins have been implemented
 			[
 				{
 					plugin: pluginFullscreen({}),
@@ -345,6 +369,7 @@ addPlugin(
 					plugin: pluginLayerChooser({}),
 				},
 			],
+			// TODO: Delete the mock plugins including the components once the correct plugins have been implemented
 			[
 				{
 					plugin: {
@@ -355,6 +380,71 @@ addPlugin(
 					icon: 'kern-icon-fill--share',
 				},
 			],
+			[
+				{
+					plugin: pluginFilter({
+						layers: {
+							[reports]: {
+								categories: [
+									{
+										targetProperty: 'skat',
+										knownValues: [
+											{
+												key: '100',
+												values: ['100'],
+												icon: 'kern-icon--road',
+											},
+											{
+												key: '101',
+												values: ['101'],
+												icon: 'kern-icon--remove-road',
+											},
+											{
+												key: '102',
+												values: ['102'],
+												icon: 'kern-icon--destruction',
+											},
+										],
+										selectAll: true,
+									},
+									{
+										targetProperty: 'skat',
+										knownValues: [
+											{
+												key: '1xx',
+												values: ['100', '101', '102'],
+												icon: 'kern-icon--road',
+											},
+										],
+										selectAll: true,
+									},
+									{
+										targetProperty: 'statu',
+										knownValues: [
+											{
+												key: 'todo',
+												values: ['In Bearbeitung'],
+												icon: 'kern-icon--assignment',
+											},
+											{
+												key: 'done',
+												values: ['abgeschlossen'],
+												icon: 'kern-icon--check',
+											},
+										],
+									},
+								],
+								time: {
+									targetProperty: 'start',
+									freeSelection: 'until',
+									last: [0, 7, 30],
+									pattern: 'YYYYMMDD',
+								},
+							},
+						},
+					}),
+				},
+			],
 			[
 				{
 					plugin: pluginGeoLocation({
diff --git a/src/architecture.spec.ts b/src/architecture.spec.ts
index ff18b41f7a..ef5fba0cf8 100644
--- 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)$'
+				'^plugins/[^/]+/((index|locales|store|types)\\.ts|utils/.*\\.ts|components/.*\\.spec\\.ts|stores/.*\\.ts)$'
 			)
 			.check()
 		expect(violations).toEqual([])
diff --git a/src/components/PolarCard.ce.vue b/src/components/PolarCard.ce.vue
index 885b837c06..4243f49d79 100644
--- a/src/components/PolarCard.ce.vue
+++ b/src/components/PolarCard.ce.vue
@@ -1,5 +1,5 @@
 <template>
-	<article class="kern-card kern-card--small">
+	<article class="kern-card kern-card--small" tabindex="-1">
 		<div class="kern-card__container">
 			<slot />
 		</div>
diff --git a/src/components/PolarTemplate.ce.vue b/src/components/PolarTemplate.ce.vue
new file mode 100644
index 0000000000..45dd97df1e
--- /dev/null
+++ b/src/components/PolarTemplate.ce.vue
@@ -0,0 +1,7 @@
+<template>
+	<slot />
+</template>
+
+<script setup lang="ts">
+// This can be used to render a container that does not emit a DOM element.
+</script>
diff --git a/src/components/kern/KernBlockButton.ce.vue b/src/components/kern/KernBlockButton.ce.vue
new file mode 100644
index 0000000000..837d0292dd
--- /dev/null
+++ b/src/components/kern/KernBlockButton.ce.vue
@@ -0,0 +1,37 @@
+<template>
+	<button
+		class="kern-btn kern-btn--block kern-btn--tertiary"
+		@click="emit('click')"
+	>
+		<span
+			v-if="props.icon"
+			:class="{ 'kern-icon': true, [props.icon]: true }"
+			aria-hidden="true"
+		/>
+		<span class="kern-label">{{ props.label }}</span>
+	</button>
+</template>
+
+<script setup lang="ts">
+import type { Icon } from '@/core'
+
+const props = defineProps<{
+	icon?: Icon | false
+	label: string
+}>()
+
+const emit = defineEmits<{
+	click: []
+}>()
+</script>
+
+<style scoped>
+.kern-btn--tertiary {
+	background-color: #edf1fa;
+	justify-content: left;
+
+	.kern-label {
+		text-decoration: none;
+	}
+}
+</style>
diff --git a/src/components/kern/KernBlockButtonCheckbox.ce.vue b/src/components/kern/KernBlockButtonCheckbox.ce.vue
new file mode 100644
index 0000000000..97b4288e57
--- /dev/null
+++ b/src/components/kern/KernBlockButtonCheckbox.ce.vue
@@ -0,0 +1,78 @@
+<template>
+	<input
+		:id="id"
+		v-model="model"
+		type="checkbox"
+		@keydown.prevent.enter="model = !model"
+		@focus="scrollVisible($event)"
+	/>
+	<label :for="id" class="kern-btn kern-btn--block kern-btn--tertiary">
+		<span
+			v-if="props.icon"
+			:class="{ 'kern-icon': true, [props.icon]: true }"
+			aria-hidden="true"
+		/>
+		<span class="kern-label">{{ props.label }}</span>
+	</label>
+</template>
+
+<script setup lang="ts">
+import { useId } from 'vue'
+
+import type { Icon } from '@/core'
+
+const props = defineProps<{
+	icon?: Icon | false
+	label: string
+}>()
+
+const model = defineModel<boolean>({ required: true })
+
+const id = useId()
+
+function scrollVisible(evt: FocusEvent) {
+	const target = evt.target as HTMLInputElement
+	const label = target.parentElement?.querySelector(`label[for="${target.id}"]`)
+	if (label?.scrollIntoView) {
+		label.scrollIntoView({
+			behavior: 'smooth',
+			block: 'nearest',
+			inline: 'nearest',
+		})
+	}
+}
+</script>
+
+<style scoped>
+.kern-btn--tertiary {
+	background-color: #edf1fa;
+	justify-content: left;
+
+	.kern-label {
+		text-decoration: none;
+	}
+}
+
+label {
+	border: var(--kern-metric-border-width-default) solid transparent;
+}
+
+input[type='checkbox'] {
+	position: absolute;
+	height: 0;
+	clip-path: circle(0);
+
+	&:focus-visible + label {
+		padding: var(--kern-metric-space-none) var(--kern-metric-space-default);
+		border-radius: var(--kern-metric-border-radius-default);
+		box-shadow:
+			0 0 0 2px var(--kern-color-action-on-default),
+			0 0 0 4px var(--kern-color-action-focus-border-inside),
+			0 0 0 6px var(--kern-color-action-focus-border-outside);
+	}
+
+	&:checked + label {
+		border-color: var(--kern-color-action-default);
+	}
+}
+</style>
diff --git a/src/components/kern/KernBlockButtonRadioGroup.ce.vue b/src/components/kern/KernBlockButtonRadioGroup.ce.vue
new file mode 100644
index 0000000000..04f1a15a8a
--- /dev/null
+++ b/src/components/kern/KernBlockButtonRadioGroup.ce.vue
@@ -0,0 +1,101 @@
+<template>
+	<div class="radiogroup" role="radiogroup">
+		<template v-for="(item, idx) of props.items" :key="idx">
+			<span
+				ref="radios"
+				role="radio"
+				:aria-checked="model === item.value"
+				:aria-labelledby="id + '-' + idx"
+				tabindex="0"
+				:data-value="item.value"
+				@keydown.prevent.space="model = item.value"
+				@keydown.prevent.enter="model = item.value"
+				@focus="scrollVisible($event)"
+			/>
+			<label
+				:id="id + '-' + idx"
+				class="kern-btn kern-btn--block kern-btn--tertiary"
+				@click.prevent="((model = item.value), radios?.[idx].focus())"
+			>
+				<span
+					v-if="item.icon"
+					:class="{ 'kern-icon': true, [item.icon]: true }"
+					aria-hidden="true"
+				/>
+				<span class="kern-label">{{ item.label }}</span>
+			</label>
+		</template>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useId, useTemplateRef } from 'vue'
+
+import type { Icon } from '@/core'
+
+const props = defineProps<{
+	items: {
+		value: string
+		label: string
+		icon?: Icon | false
+	}[]
+}>()
+
+const model = defineModel<string>({ required: true })
+
+const id = useId()
+
+const radios = useTemplateRef<HTMLInputElement>('radios')
+
+function scrollVisible(evt: FocusEvent) {
+	const target = evt.target as HTMLInputElement
+	const label = target.parentElement?.querySelector(
+		`label[id="${target.getAttribute('aria-labelledby')}"]`
+	)
+	if (label?.scrollIntoView) {
+		label.scrollIntoView({
+			behavior: 'smooth',
+			block: 'nearest',
+			inline: 'nearest',
+		})
+	}
+}
+</script>
+
+<style scoped>
+.radiogroup {
+	display: contents;
+}
+
+.kern-btn--tertiary {
+	background-color: #edf1fa;
+	justify-content: left;
+
+	.kern-label {
+		text-decoration: none;
+	}
+}
+
+label {
+	border: var(--kern-metric-border-width-default) solid transparent;
+}
+
+[role='radio'] {
+	position: absolute;
+	height: 0;
+	clip-path: circle(0);
+
+	&:focus-visible + label {
+		padding: var(--kern-metric-space-none) var(--kern-metric-space-default);
+		border-radius: var(--kern-metric-border-radius-default);
+		box-shadow:
+			0 0 0 2px var(--kern-color-action-on-default),
+			0 0 0 4px var(--kern-color-action-focus-border-inside),
+			0 0 0 6px var(--kern-color-action-focus-border-outside);
+	}
+
+	&[aria-checked='true'] + label {
+		border-color: var(--kern-color-action-default);
+	}
+}
+</style>
diff --git a/src/components/kern/KernCheckbox.ce.vue b/src/components/kern/KernCheckbox.ce.vue
new file mode 100644
index 0000000000..657fa7c7c4
--- /dev/null
+++ b/src/components/kern/KernCheckbox.ce.vue
@@ -0,0 +1,35 @@
+<template>
+	<div class="kern-form-check">
+		<input
+			:id="id"
+			v-model="model"
+			class="kern-form-check__checkbox"
+			type="checkbox"
+			@keydown.prevent.enter="model = !model"
+		/>
+		<label :for="id" class="kern-label">
+			{{ props.label }}
+		</label>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useId } from 'vue'
+
+import type { Icon } from '@/core'
+
+const props = defineProps<{
+	icon?: Icon | false
+	label: string
+}>()
+
+const model = defineModel<boolean>({ required: true })
+
+const id = useId()
+</script>
+
+<style scoped>
+.kern-form-check {
+	box-sizing: border-box;
+}
+</style>
diff --git a/src/components/kern/KernDatePicker.ce.vue b/src/components/kern/KernDatePicker.ce.vue
new file mode 100644
index 0000000000..825886d72b
--- /dev/null
+++ b/src/components/kern/KernDatePicker.ce.vue
@@ -0,0 +1,29 @@
+<template>
+	<input
+		v-model="inputModel"
+		type="date"
+		class="kern-form-input__input"
+		:min="dateToString(props.min ?? null)"
+		:max="dateToString(props.max ?? null)"
+	/>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { dateToString, stringToDate } from '@/lib/dateUtils'
+
+const props = defineProps<{
+	min?: Date
+	max?: Date
+}>()
+
+const model = defineModel<Date | null>({ required: true })
+
+const inputModel = computed({
+	get: () => dateToString(model.value),
+	set: (value) => {
+		model.value = stringToDate(value)
+	},
+})
+</script>
diff --git a/src/components/kern/KernDateRangePicker.ce.vue b/src/components/kern/KernDateRangePicker.ce.vue
new file mode 100644
index 0000000000..130bce0d78
--- /dev/null
+++ b/src/components/kern/KernDateRangePicker.ce.vue
@@ -0,0 +1,28 @@
+<template>
+	<div class="range-picker">
+		<KernDatePicker v-model="start" v-bind="props" />
+		–
+		<KernDatePicker v-model="end" v-bind="props" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import KernDatePicker from './KernDatePicker.ce.vue'
+
+const props = defineProps<{
+	min?: Date
+	max?: Date
+}>()
+
+const start = defineModel<Date | null>('start', { required: true })
+const end = defineModel<Date | null>('end', { required: true })
+</script>
+
+<style scoped>
+.range-picker {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin: 0.3em 0;
+}
+</style>
diff --git a/src/components/kern/KernRadioGroup.ce.vue b/src/components/kern/KernRadioGroup.ce.vue
new file mode 100644
index 0000000000..e0e9b698f9
--- /dev/null
+++ b/src/components/kern/KernRadioGroup.ce.vue
@@ -0,0 +1,38 @@
+<template>
+	<div v-for="(item, idx) of props.items" :key="idx" class="kern-form-check">
+		<input
+			:id="id + '-' + idx"
+			v-model="model"
+			class="kern-form-check__radio"
+			type="radio"
+			:value="item.value"
+		/>
+		<label :for="id + '-' + idx" class="kern-label">
+			{{ item.label }}
+		</label>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useId } from 'vue'
+
+import type { Icon } from '@/core'
+
+const props = defineProps<{
+	items: {
+		value: string
+		label: string
+		icon?: Icon | false
+	}[]
+}>()
+
+const model = defineModel<string>({ required: true })
+
+const id = useId()
+</script>
+
+<style scoped>
+.kern-form-check {
+	box-sizing: border-box;
+}
+</style>
diff --git a/src/core/stores/index.ts b/src/core/stores/index.ts
index d469fa4c09..2fa3323fa2 100644
--- a/src/core/stores/index.ts
+++ b/src/core/stores/index.ts
@@ -228,6 +228,16 @@ export const useCoreStore = defineStore('core', () => {
 		 */
 		shadowRoot: computed(() => mainStore.shadowRoot),
 
+		/**
+		 * Returns the effective layer configuration or `null` if the layer was not found.
+		 * The configuration is merged from the {@link createMap | serviceRegister parameter of createMap} and the POLAR {@link MapConfiguration.layers | layers} configuration.
+		 *
+		 * @param layerId - Layer ID
+		 * @returns Layer configuration (object) or `null`
+		 * @alpha
+		 */
+		getLayerMapConfiguration: mainStore.getLayerMapConfiguration,
+
 		/**
 		 * Allows setting content to the MoveHandle to be displayed on small devices
 		 * if the application has the same size as the window.
diff --git a/src/core/stores/main.ts b/src/core/stores/main.ts
index 4ca1203531..4f6304879a 100644
--- a/src/core/stores/main.ts
+++ b/src/core/stores/main.ts
@@ -2,6 +2,7 @@ import type { Feature, Map } from 'ol'
 import type { Coordinate } from 'ol/coordinate'
 import type { Point } from 'ol/geom'
 
+import { rawLayerList } from '@masterportal/masterportalapi'
 import { toMerged } from 'es-toolkit'
 import { acceptHMRUpdate, defineStore } from 'pinia'
 import { computed, ref, shallowRef, watch } from 'vue'
@@ -78,6 +79,17 @@ export const useMainStore = defineStore('main', () => {
 		center.value = (feature.getGeometry() as Point).getCoordinates()
 	}
 
+	function getLayerMapConfiguration(layerId: string) {
+		const polar = configuration.value.layers.find(
+			(layer) => layer.id === layerId
+		)
+		const register = rawLayerList.getLayerWhere({ id: layerId })
+		if (!polar || !register) {
+			return null
+		}
+		return { ...register, ...polar } as typeof polar
+	}
+
 	function setup() {
 		addEventListener('resize', updateHasSmallDisplay)
 		updateHasSmallDisplay()
@@ -111,6 +123,7 @@ export const useMainStore = defineStore('main', () => {
 		// Actions
 		centerOnFeature,
 		updateHasSmallDisplay,
+		getLayerMapConfiguration,
 		setup,
 		teardown,
 	}
diff --git a/src/core/types/main.ts b/src/core/types/main.ts
index 0d72c33b4d..a20e0f28ef 100644
--- a/src/core/types/main.ts
+++ b/src/core/types/main.ts
@@ -1,6 +1,7 @@
 import type { VueElement } from 'vue'
 
 import type { AddressSearchPluginOptions } from '@/plugins/addressSearch'
+import type { FilterPluginOptions } from '@/plugins/filter'
 import type { FooterPluginOptions } from '@/plugins/footer'
 import type { FullscreenPluginOptions } from '@/plugins/fullscreen'
 import type { GeoLocationPluginOptions } from '@/plugins/geoLocation'
@@ -299,6 +300,7 @@ export interface MapConfiguration extends MasterportalApiConfiguration {
 	 * The default is to use KERN's standard theme.
 	 */
 	theme?: PolarTheme
+
 	// Plugins are not sorted alphabetical, but listed last.
 	// Remember to sort them alphabetical inside their space.
 	// TODO: Generate this section via types/plugin.ts
@@ -307,6 +309,9 @@ export interface MapConfiguration extends MasterportalApiConfiguration {
 	/** Configuration for addressSearch plugin. */
 	addressSearch?: AddressSearchPluginOptions
 
+	/** Configuration for filter plugin. */
+	filter?: FilterPluginOptions
+
 	/** Configuration for footer plugin. */
 	footer?: FooterPluginOptions
 
diff --git a/src/core/types/plugin.ts b/src/core/types/plugin.ts
index 1a26360814..398f7cc70f 100644
--- a/src/core/types/plugin.ts
+++ b/src/core/types/plugin.ts
@@ -4,6 +4,9 @@ import type { Component } from 'vue'
 import type { PluginId as AddressSearchPluginId } from '@/plugins/addressSearch'
 import type { resourcesEn as AddressSearchResources } from '@/plugins/addressSearch/locales'
 import type { useAddressSearchStore as AddressSearchStore } from '@/plugins/addressSearch/store'
+import type { PluginId as FilterPluginId } from '@/plugins/filter'
+import type { resourcesEn as FilterResources } from '@/plugins/filter/locales'
+import type { useFilterStore as FilterStore } from '@/plugins/filter/store'
 import type { PluginId as FooterPluginId } from '@/plugins/footer'
 import type { resourcesEn as FooterResources } from '@/plugins/footer/locales'
 import type { useFooterStore as FooterStore } from '@/plugins/footer/store'
@@ -35,6 +38,7 @@ import type { useToastStore as ToastStore } from '@/plugins/toast/store'
 
 import type { NineLayoutTag } from '../utils/NineLayoutTag'
 import type { Locale } from './locales'
+import type { Icon } from './theme'
 
 export interface PluginOptions {
 	displayComponent?: boolean
@@ -88,6 +92,7 @@ export type PolarPluginStore<
 /** @internal */
 export type BundledPluginId =
 	| typeof AddressSearchPluginId
+	| typeof FilterPluginId
 	| typeof FooterPluginId
 	| typeof FullscreenPluginId
 	| typeof GeoLocationPluginId
@@ -111,6 +116,7 @@ type GetPluginStore<
 /** @internal */
 export type BundledPluginStores<T extends BundledPluginId> =
 	| GetPluginStore<T, typeof AddressSearchPluginId, typeof AddressSearchStore>
+	| GetPluginStore<T, typeof FilterPluginId, typeof FilterStore>
 	| GetPluginStore<T, typeof FooterPluginId, typeof FooterStore>
 	| GetPluginStore<T, typeof FullscreenPluginId, typeof FullscreenStore>
 	| GetPluginStore<T, typeof GeoLocationPluginId, typeof GeoLocationStore>
@@ -139,6 +145,7 @@ export type BundledPluginLocaleResources<T extends BundledPluginId> =
 			typeof AddressSearchPluginId,
 			typeof AddressSearchResources
 	  >
+	| GetPluginResources<T, typeof FilterPluginId, typeof FilterResources>
 	| GetPluginResources<T, typeof FooterPluginId, typeof FooterResources>
 	| GetPluginResources<T, typeof FullscreenPluginId, typeof FullscreenResources>
 	| GetPluginResources<
@@ -191,7 +198,7 @@ export interface PluginContainer {
 	 * Icon class for the plugin.
 	 * This icon will be used as the default for rendering in menus.
 	 */
-	icon?: string
+	icon?: Icon
 
 	/**
 	 * Whether the plugin is independently rendered.
diff --git a/src/core/types/theme.ts b/src/core/types/theme.ts
index d313c5b777..d43d9cbb27 100644
--- a/src/core/types/theme.ts
+++ b/src/core/types/theme.ts
@@ -53,7 +53,7 @@ export type Color = { oklch: OklchColor } | { rgba: RgbaColor } | string
 /**
  * An icon.
  */
-export type Icon = `kern-icon--${string}`
+export type Icon = `kern-icon--${string}` | `kern-icon-fill--${string}`
 
 /**
  * A theme for the POLAR map client.
diff --git a/src/core/utils/export/store.ts b/src/core/utils/export/store.ts
index 119d491981..72e9969cba 100644
--- a/src/core/utils/export/store.ts
+++ b/src/core/utils/export/store.ts
@@ -59,7 +59,6 @@ export function subscribe<T extends StoreId>(
 	options?: WatchOptions
 ) {
 	const store = getStore(map, storeName)
-	// @ts-expect-error | Parameter name is checked, but TS does not infer this
 	return watch(() => store[parameterName], callback, {
 		immediate: true,
 		...options,
@@ -81,6 +80,5 @@ export function updateState<T extends StoreId>(
 	payload: unknown
 ) {
 	const store = getStore(map, storeName)
-	// @ts-expect-error | Parameter name is checked, but TS does not infer this
 	store[parameterName] = payload
 }
diff --git a/src/lib/dateUtils.ts b/src/lib/dateUtils.ts
new file mode 100644
index 0000000000..0fa3b49450
--- /dev/null
+++ b/src/lib/dateUtils.ts
@@ -0,0 +1,16 @@
+export function dateToString(date: Date | null) {
+	if (date === null) {
+		return ''
+	}
+	return [date.getFullYear(), date.getMonth() + 1, date.getDate()]
+		.map((v) => v.toString().padStart(2, '0'))
+		.join('-')
+}
+
+export function stringToDate(date: string) {
+	if (date.length === 0) {
+		return null
+	}
+	const [y, m, d] = date.split('-')
+	return new Date(Number(y), Number(m) - 1, Number(d))
+}
diff --git a/src/lib/getVectorSource.ts b/src/lib/getVectorSource.ts
new file mode 100644
index 0000000000..487a28863c
--- /dev/null
+++ b/src/lib/getVectorSource.ts
@@ -0,0 +1,27 @@
+import type Layer from 'ol/layer/Layer'
+
+import ClusterSource from 'ol/source/Cluster'
+import VectorSource from 'ol/source/Vector'
+
+/**
+ * Retrieves the vector source from a layer using (possibly nested) `.getSource()` calls.
+ *
+ * @param layer - Layer to get the vector source from
+ * @returns Vector source
+ */
+export function getVectorSource(layer: Layer): VectorSource {
+	let source = layer.getSource()
+	if (!source) {
+		throw new Error('Could not find a vector source for this layer')
+	}
+	while (source instanceof ClusterSource) {
+		source = source.getSource()
+		if (!source) {
+			throw new Error('Could not find a vector source for this layer')
+		}
+	}
+	if (!(source instanceof VectorSource)) {
+		throw new Error('Could not find a vector source for this layer')
+	}
+	return source
+}
diff --git a/src/lib/invisibleStyle.ts b/src/lib/invisibleStyle.ts
index a4f42d9853..c26e85d72c 100644
--- a/src/lib/invisibleStyle.ts
+++ b/src/lib/invisibleStyle.ts
@@ -32,3 +32,25 @@ export const isInvisible = (feature: Feature) =>
  */
 export const isVisible = (feature: Feature) =>
 	feature.getStyle() !== InvisibleStyle
+
+/**
+ * Hides a feature.
+ *
+ * @param feature - The feature to hide.
+ */
+export const hideFeature = (feature: Feature) => {
+	if (isVisible(feature)) {
+		feature.setStyle(InvisibleStyle)
+	}
+}
+
+/**
+ * Shows a feature.
+ *
+ * @param feature - The feature to show.
+ */
+export const showFeature = (feature: Feature) => {
+	if (isInvisible(feature)) {
+		feature.setStyle()
+	}
+}
diff --git a/src/plugins/filter/components/FilterCategory.ce.vue b/src/plugins/filter/components/FilterCategory.ce.vue
new file mode 100644
index 0000000000..fe11051f14
--- /dev/null
+++ b/src/plugins/filter/components/FilterCategory.ce.vue
@@ -0,0 +1,115 @@
+<template>
+	<FilterSection
+		v-for="(category, idx) of filterStore.selectedLayerConfiguration.categories"
+		:key="idx"
+		:title="
+			$t(
+				($) =>
+					$['layer'][filterStore.selectedLayerId]['category'][
+						category.targetProperty
+					]['title'],
+				{ ns: PluginId, defaultValue: category.targetProperty }
+			)
+		"
+	>
+		<div class="polar-filter-category-values">
+			<KernBlockButton
+				v-if="category.selectAll"
+				icon="kern-icon--deselect"
+				:label="$t(($) => $.category.deselectAll, { ns: PluginId })"
+				@click="selectOrDeselectAll(category)"
+			/>
+			<component
+				:is="
+					coreStore.layout === 'standard'
+						? KernBlockButtonCheckbox
+						: KernCheckbox
+				"
+				v-for="categoryValue of category.knownValues"
+				:key="flattenValue(categoryValue)"
+				:icon="typeof categoryValue !== 'string' && categoryValue.icon"
+				:label="
+					$t(
+						($) =>
+							$['layer'][filterStore.selectedLayerId]['category'][
+								category.targetProperty
+							]['knownValue'][flattenValue(categoryValue)],
+						{ ns: PluginId, defaultValue: flattenValue(categoryValue) }
+					)
+				"
+				:model-value="
+					getStatus(category.targetProperty, expandValue(categoryValue))
+				"
+				@update:model-value="
+					setStatus(category.targetProperty, expandValue(categoryValue), $event)
+				"
+			/>
+		</div>
+	</FilterSection>
+</template>
+
+<script setup lang="ts">
+import KernBlockButton from '@/components/kern/KernBlockButton.ce.vue'
+import KernBlockButtonCheckbox from '@/components/kern/KernBlockButtonCheckbox.ce.vue'
+import KernCheckbox from '@/components/kern/KernCheckbox.ce.vue'
+import { useCoreStore } from '@/core/stores'
+
+import { useFilterStore } from '../store'
+import {
+	PluginId,
+	type Category,
+	type CategoryValue,
+	type FilterState,
+} from '../types'
+import FilterSection from './FilterSection.ce.vue'
+
+const coreStore = useCoreStore()
+const filterStore = useFilterStore()
+
+function expandValue(value: Category['knownValues'][number]) {
+	return typeof value === 'string' ? { key: value, values: [value] } : value
+}
+
+function flattenValue(value: Category['knownValues'][number]) {
+	return expandValue(value).key
+}
+
+function createMissingObjects(targetProperty: string) {
+	// The state is created automatically and this component is only used when a layer is selected.
+	const layerState = filterStore.selectedLayerState as FilterState
+	layerState.knownValues ??= {}
+	return (layerState.knownValues[targetProperty] ??= Object.fromEntries(
+		filterStore.selectedLayerConfiguration.categories
+			?.find((category) => category.targetProperty === targetProperty)
+			?.knownValues.map((value) => [flattenValue(value), true]) ?? []
+	))
+}
+
+function getStatus(targetProperty: string, { values }: CategoryValue) {
+	return Object.entries(
+		filterStore.selectedLayerState?.knownValues?.[targetProperty] ?? {}
+	)
+		.filter(([value]) => values.includes(value))
+		.every(([, status]) => status)
+}
+
+function setStatus(
+	targetProperty: string,
+	{ values }: CategoryValue,
+	newValue: boolean
+) {
+	const valueState = createMissingObjects(targetProperty)
+	values.forEach((value) => (valueState[value] = newValue))
+}
+
+function selectOrDeselectAll(category: Category) {
+	const valueState = createMissingObjects(category.targetProperty)
+	const categoryValues = category.knownValues.flatMap((entry) =>
+		typeof entry === 'string' ? [entry] : entry.values
+	)
+	const newStatus =
+		Object.values(valueState).filter((selected) => selected).length !==
+		categoryValues.length
+	categoryValues.forEach((value) => (valueState[value] = newStatus))
+}
+</script>
diff --git a/src/plugins/filter/components/FilterLayerChooser.ce.vue b/src/plugins/filter/components/FilterLayerChooser.ce.vue
new file mode 100644
index 0000000000..0c3cf90a01
--- /dev/null
+++ b/src/plugins/filter/components/FilterLayerChooser.ce.vue
@@ -0,0 +1,32 @@
+<template>
+	<div class="kern-form-input">
+		<label class="kern-label" for="select">Fachdatensatz auswählen</label>
+		<div class="kern-form-input__select-wrapper">
+			<select v-model="selectModel" class="kern-form-input__select">
+				<option
+					v-for="layer of filterStore.layers"
+					:key="layer.layerId"
+					:value="layer.layerId"
+				>
+					{{ layer.layerConfiguration?.name || layer.layerId }}
+				</option>
+			</select>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { useFilterStore } from '../store'
+
+const model = defineModel<string | null>({ required: true })
+const selectModel = computed({
+	get: () => model.value || '',
+	set: (value) => {
+		model.value = value || null
+	},
+})
+
+const filterStore = useFilterStore()
+</script>
diff --git a/src/plugins/filter/components/FilterSection.ce.vue b/src/plugins/filter/components/FilterSection.ce.vue
new file mode 100644
index 0000000000..b3ce91d250
--- /dev/null
+++ b/src/plugins/filter/components/FilterSection.ce.vue
@@ -0,0 +1,25 @@
+<template>
+	<component
+		:is="
+			coreStore.layout === 'nineRegions'
+				? FilterSectionNineRegions
+				: FilterSectionStandard
+		"
+		v-bind="props"
+	>
+		<slot />
+	</component>
+</template>
+
+<script setup lang="ts">
+import { useCoreStore } from '@/core/stores'
+
+import FilterSectionNineRegions from './FilterSectionNineRegions.ce.vue'
+import FilterSectionStandard from './FilterSectionStandard.ce.vue'
+
+const props = defineProps<{
+	title: string
+}>()
+
+const coreStore = useCoreStore()
+</script>
diff --git a/src/plugins/filter/components/FilterSectionNineRegions.ce.vue b/src/plugins/filter/components/FilterSectionNineRegions.ce.vue
new file mode 100644
index 0000000000..1b4e13685b
--- /dev/null
+++ b/src/plugins/filter/components/FilterSectionNineRegions.ce.vue
@@ -0,0 +1,28 @@
+<template>
+	<details class="kern-accordion">
+		<summary class="kern-accordion__header">
+			<span class="kern-title">{{ props.title }}</span>
+		</summary>
+		<section class="kern-accordion__body">
+			<slot />
+		</section>
+	</details>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+	title: string
+}>()
+</script>
+
+<style scoped>
+.kern-accordion__header {
+	padding: var(--kern-metric-space-x-small);
+
+	.kern-title {
+		color: black;
+		font-weight: normal;
+		font-size: 1.2em;
+	}
+}
+</style>
diff --git a/src/plugins/filter/components/FilterSectionStandard.ce.vue b/src/plugins/filter/components/FilterSectionStandard.ce.vue
new file mode 100644
index 0000000000..8e79b54d5c
--- /dev/null
+++ b/src/plugins/filter/components/FilterSectionStandard.ce.vue
@@ -0,0 +1,22 @@
+<template>
+	<section class="polar-filter-section">
+		<h3 class="kern-heading-small">{{ props.title }}</h3>
+		<slot />
+	</section>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+	title: string
+}>()
+</script>
+
+<style scoped>
+.polar-filter-section {
+	width: 100%;
+
+	h3 {
+		padding-left: 0.15em;
+	}
+}
+</style>
diff --git a/src/plugins/filter/components/FilterTime.ce.vue b/src/plugins/filter/components/FilterTime.ce.vue
new file mode 100644
index 0000000000..efe9989dee
--- /dev/null
+++ b/src/plugins/filter/components/FilterTime.ce.vue
@@ -0,0 +1,51 @@
+<template>
+	<FilterSection :title="$t(($) => $.time.header, { ns: PluginId })">
+		<div class="polar-filter-category-values">
+			<component
+				:is="
+					coreStore.layout === 'standard'
+						? KernBlockButtonRadioGroup
+						: KernRadioGroup
+				"
+				v-model="filterStore.timeModel"
+				:items="filterStore.timeItems"
+				@update:model-value="scrollVisible($event)"
+			/>
+		</div>
+		<KernDateRangePicker
+			v-if="filterStore.timeModel === 'custom'"
+			v-model:start="filterStore.timeStart"
+			v-model:end="filterStore.timeEnd"
+			v-bind="filterStore.timeConstraints"
+		/>
+	</FilterSection>
+</template>
+
+<script setup lang="ts">
+import { nextTick, useTemplateRef } from 'vue'
+
+import KernBlockButtonRadioGroup from '@/components/kern/KernBlockButtonRadioGroup.ce.vue'
+import KernDateRangePicker from '@/components/kern/KernDateRangePicker.ce.vue'
+import KernRadioGroup from '@/components/kern/KernRadioGroup.ce.vue'
+import { useCoreStore } from '@/core/stores'
+
+import { useFilterStore } from '../store'
+import { PluginId } from '../types'
+import FilterSection from './FilterSection.ce.vue'
+
+const coreStore = useCoreStore()
+const filterStore = useFilterStore()
+
+const section = useTemplateRef<HTMLElement>('section')
+
+async function scrollVisible(model: string) {
+	if (model === 'custom') {
+		await nextTick()
+		if (section.value?.lastElementChild?.scrollIntoView) {
+			section.value.lastElementChild.scrollIntoView({
+				behavior: 'smooth',
+			})
+		}
+	}
+}
+</script>
diff --git a/src/plugins/filter/components/FilterUI.ce.vue b/src/plugins/filter/components/FilterUI.ce.vue
new file mode 100644
index 0000000000..ec808c7d9a
--- /dev/null
+++ b/src/plugins/filter/components/FilterUI.ce.vue
@@ -0,0 +1,48 @@
+<template>
+	<PolarCard>
+		<FilterLayerChooser
+			v-if="filterStore.layers.length > 1"
+			v-model="filterStore.selectedLayerId"
+		/>
+		<h2 v-else class="kern-heading-medium">
+			{{ filterStore.selectedLayer?.layerConfiguration?.name }}
+		</h2>
+		<component
+			:is="coreStore.layout === 'nineRegions' ? 'div' : PolarTemplate"
+			class="kern-accordion-group"
+		>
+			<FilterCategory v-if="filterStore.selectedLayerId" />
+			<FilterTime v-if="filterStore.selectedLayerHasTimeFilter" />
+		</component>
+	</PolarCard>
+</template>
+
+<script setup lang="ts">
+import PolarCard from '@/components/PolarCard.ce.vue'
+import PolarTemplate from '@/components/PolarTemplate.ce.vue'
+import { useCoreStore } from '@/core/stores'
+
+import { useFilterStore } from '../store'
+import FilterCategory from './FilterCategory.ce.vue'
+import FilterLayerChooser from './FilterLayerChooser.ce.vue'
+import FilterTime from './FilterTime.ce.vue'
+
+const coreStore = useCoreStore()
+const filterStore = useFilterStore()
+</script>
+
+<style scoped>
+:deep(.polar-filter-category-values) {
+	display: flex;
+	flex-direction: column;
+	gap: var(--kern-metric-space-x-small);
+}
+
+:deep(.kern-accordion-group .polar-filter-category-values) {
+	margin-top: var(--kern-metric-space-default);
+}
+
+.kern-accordion-group {
+	width: 100%;
+}
+</style>
diff --git a/src/plugins/filter/components/FilterUI.spec.ts b/src/plugins/filter/components/FilterUI.spec.ts
new file mode 100644
index 0000000000..3e10dc3945
--- /dev/null
+++ b/src/plugins/filter/components/FilterUI.spec.ts
@@ -0,0 +1,98 @@
+import { createTestingPinia } from '@pinia/testing'
+import { mount, VueWrapper } from '@vue/test-utils'
+import { expect, test as _test, vi, assert } from 'vitest'
+import { nextTick } from 'vue'
+
+import { useCoreStore } from '@/core/stores'
+import { mockedT } from '@/test/utils/mockI18n'
+
+import { useFilterStore } from '../store'
+import FilterUI from './FilterUI.ce.vue'
+
+/* eslint-disable no-empty-pattern */
+const test = _test.extend<{
+	wrapper: VueWrapper
+	coreStore: ReturnType<typeof useCoreStore>
+	store: ReturnType<typeof useFilterStore>
+}>({
+	wrapper: async ({}, use) => {
+		vi.mock('i18next', () => ({
+			t: (keyFn, opts) => mockedT(keyFn, opts),
+		}))
+		const wrapper = mount(FilterUI, {
+			attachTo: document.body,
+			global: {
+				plugins: [createTestingPinia({ createSpy: vi.fn })],
+				mocks: {
+					$t: mockedT,
+				},
+			},
+		})
+		await use(wrapper)
+		wrapper.unmount()
+	},
+	coreStore: async ({}, use) => {
+		const store = useCoreStore()
+		await use(store)
+	},
+	store: async ({}, use) => {
+		const store = useFilterStore()
+		await use(store)
+	},
+})
+/* eslint-enable no-empty-pattern */
+
+test('Component transfers category and time filters to the store', async ({
+	wrapper,
+	coreStore,
+	store,
+}) => {
+	// @ts-expect-error | This is for testing
+	coreStore.configuration = {
+		filter: {
+			layers: {
+				one: {
+					categories: [
+						{
+							targetProperty: 'pet',
+							knownValues: ['cat', 'dog'],
+							selectAll: true,
+						},
+					],
+					time: {
+						targetProperty: 'time',
+						freeSelection: 'until',
+						last: [1],
+					},
+				},
+			},
+		},
+	}
+	await nextTick()
+
+	const onlyCat = wrapper
+		.findAll('label')
+		.find(
+			(lbl) => lbl.text() === '$t(filter:layer.one.category.pet.knownValue.cat)'
+		)
+	assert(onlyCat !== undefined, 'Could not find cat button')
+	await onlyCat.trigger('click')
+
+	expect(store.selectedLayerState?.knownValues?.pet?.dog).toBeTruthy()
+	expect(store.selectedLayerState?.knownValues?.pet?.cat).toBeFalsy()
+
+	const yesterday = wrapper
+		.findAll('label')
+		.find((lbl) => lbl.text() === '$t(filter:time.last_1)')
+	assert(yesterday !== undefined, 'Could not find yesterday button')
+	await yesterday.trigger('click')
+
+	expect(store.timeModel).toEqual('last-1')
+
+	await nextTick()
+	expect(
+		wrapper
+			.find('[aria-labelledby="' + yesterday.element.id + '"]')
+			.element.getAttribute('aria-checked')
+	).toBe('true')
+})
diff --git a/src/plugins/filter/index.ts b/src/plugins/filter/index.ts
new file mode 100644
index 0000000000..58227f3bd5
--- /dev/null
+++ b/src/plugins/filter/index.ts
@@ -0,0 +1,32 @@
+/* eslint-disable tsdoc/syntax */
+/**
+ * @module \@polar/polar/plugins/filter
+ */
+/* eslint-enable tsdoc/syntax */
+
+import type { PluginContainer, PolarPluginStore } from '@/core'
+
+import component from './components/FilterUI.ce.vue'
+import locales from './locales'
+import { useFilterStore } from './store'
+import { PluginId, type FilterPluginOptions } from './types'
+
+/**
+ * Creates a plugin which allows to filter arbitrary configurable vector layers by their properties.
+ *
+ * @returns Plugin for use with {@link addPlugin}
+ */
+export default function pluginFilter(
+	options: FilterPluginOptions
+): PluginContainer {
+	return {
+		id: PluginId,
+		component,
+		locales,
+		icon: 'kern-icon--filter-alt',
+		storeModule: useFilterStore as PolarPluginStore,
+		options,
+	}
+}
+
+export * from './types'
diff --git a/src/plugins/filter/locales.ts b/src/plugins/filter/locales.ts
new file mode 100644
index 0000000000..224ac89d5b
--- /dev/null
+++ b/src/plugins/filter/locales.ts
@@ -0,0 +1,73 @@
+/* eslint-disable tsdoc/syntax */
+/**
+ * This is the documentation for the locales keys in the filter plugin.
+ * These locales are *NOT* exported, but documented only.
+ *
+ * @module locales/plugins/filter
+ */
+/* eslint-enable tsdoc/syntax */
+
+import type { Locale } from '@/core'
+
+/**
+ * German locales for filter plugin.
+ * For overwriting these values, use the plugin's ID as namespace.
+ */
+export const resourcesDe = {
+	category: {
+		deselectAll: 'Alle an-/abwählen',
+	},
+	time: {
+		header: 'Zeitraum',
+		noRestriction: 'Keine Einschränkung',
+		last_zero: 'Heute',
+		last_one: 'Der letzte Tag',
+		last_other: 'Die letzten {{count}} Tage',
+		next_zero: 'Heute',
+		next_one: 'Der nächste Tag',
+		next_other: 'Die nächsten {{count}} Tage',
+		chooseTimeFrame: 'Zeitraum wählen',
+	},
+} as const
+
+/**
+ * English locales for filter plugin.
+ * For overwriting these values, use the plugin's ID as namespace.
+ */
+export const resourcesEn = {
+	category: {
+		deselectAll: 'De-/select all',
+	},
+	time: {
+		header: 'Time frame',
+		noRestriction: 'No restriction',
+		last_zero: 'Today',
+		last_one: 'The last day',
+		last_other: 'The last {{count}} days',
+		next_zero: 'Today',
+		next_one: 'The next day',
+		next_other: 'The next {{count}} days',
+		chooseTimeFrame: 'Choose time frame',
+	},
+} as const
+
+/**
+ * Filter plugin locales.
+ *
+ * @privateRemarks
+ * The first entry will be used as fallback.
+ *
+ * @internal
+ */
+const locales: Locale[] = [
+	{
+		type: 'de',
+		resources: resourcesDe,
+	},
+	{
+		type: 'en',
+		resources: resourcesEn,
+	},
+]
+
+export default locales
diff --git a/src/plugins/filter/store.ts b/src/plugins/filter/store.ts
new file mode 100644
index 0000000000..82f275b673
--- /dev/null
+++ b/src/plugins/filter/store.ts
@@ -0,0 +1,142 @@
+/* eslint-disable tsdoc/syntax */
+/**
+ * @module \@polar/polar/plugins/filter/store
+ */
+/* eslint-enable tsdoc/syntax */
+
+import { acceptHMRUpdate, defineStore, storeToRefs } from 'pinia'
+import { watch } from 'vue'
+
+import { getVectorSource } from '@/lib/getVectorSource'
+
+import { useFilterMainStore } from './stores/main'
+import { useFilterTimeStore } from './stores/time'
+import { updateFeatureVisibility } from './utils/updateFeatureVisibility'
+
+/* eslint-disable tsdoc/syntax */
+/**
+ * @function
+ *
+ * Plugin store for filtering features.
+ */
+/* eslint-enable tsdoc/syntax */
+export const useFilterStore = defineStore('plugins/filter', () => {
+	const filterMainStore = useFilterMainStore()
+	const filterMainStoreRefs = storeToRefs(filterMainStore)
+	const filterTimeStore = useFilterTimeStore()
+	const filterTimeStoreRefs = storeToRefs(filterTimeStore)
+
+	const teardownCallbacks = [] as (() => void)[]
+
+	function setupPlugin() {
+		filterMainStore.filteredLayers.forEach((layer) => {
+			const source = getVectorSource(layer)
+			const callback = () => {
+				updateFeatureVisibility(
+					source,
+					filterMainStore.state[layer.get('id')] ?? {}
+				)
+			}
+			source.on('featuresloadend', callback)
+			teardownCallbacks.push(() => {
+				source.un('featuresloadend', callback)
+			})
+			teardownCallbacks.push(
+				watch(
+					() => filterMainStore.state[layer.get('id')],
+					() => {
+						callback()
+					},
+					{ deep: true, immediate: true }
+				)
+			)
+		})
+	}
+
+	function teardownPlugin() {
+		teardownCallbacks.forEach((callback) => {
+			callback()
+		})
+	}
+
+	return {
+		/**
+		 * Flat list of filterable layers.
+		 *
+		 * @alpha
+		 */
+		layers: filterMainStoreRefs.layers,
+
+		/**
+		 * ID of the selected layer.
+		 *
+		 * @alpha
+		 */
+		selectedLayerId: filterMainStoreRefs.selectedLayerId,
+
+		/**
+		 * Information on the selected layer.
+		 *
+		 * @alpha
+		 */
+		selectedLayer: filterMainStoreRefs.selectedLayer,
+
+		/**
+		 * Configuration of the selected layer w.r.t. filter.
+		 * If no layer is selected, the configuration is an empty object.
+		 *
+		 * @alpha
+		 */
+		selectedLayerConfiguration: filterMainStoreRefs.selectedLayerConfiguration,
+
+		/**
+		 * State of the selected layer w.r.t. filter.
+		 * If no layer is selected, the state is `null`.
+		 *
+		 * @alpha
+		 */
+		selectedLayerState: filterMainStoreRefs.selectedLayerState,
+
+		/**
+		 * `true` if the selected layer allows filtering for time.
+		 *
+		 * @alpha
+		 */
+		selectedLayerHasTimeFilter: filterMainStoreRefs.selectedLayerHasTimeFilter,
+
+		/**
+		 * @alpha
+		 */
+		timeModel: filterTimeStoreRefs.model,
+
+		/**
+		 * @alpha
+		 */
+		timeStart: filterTimeStoreRefs.customModelStart,
+
+		/**
+		 * @alpha
+		 */
+		timeEnd: filterTimeStoreRefs.customModelEnd,
+
+		/**
+		 * @alpha
+		 */
+		timeConstraints: filterTimeStoreRefs.timeConstraints,
+
+		/**
+		 * @alpha
+		 */
+		timeItems: filterTimeStoreRefs.items,
+
+		/** @internal */
+		setupPlugin,
+
+		/** @internal */
+		teardownPlugin,
+	}
+})
+
+if (import.meta.hot) {
+	import.meta.hot.accept(acceptHMRUpdate(useFilterStore, import.meta.hot))
+}
diff --git a/src/plugins/filter/stores/main.ts b/src/plugins/filter/stores/main.ts
new file mode 100644
index 0000000000..0944cdb837
--- /dev/null
+++ b/src/plugins/filter/stores/main.ts
@@ -0,0 +1,97 @@
+import { acceptHMRUpdate, defineStore } from 'pinia'
+import { computed, ref, watch } from 'vue'
+
+import { useCoreStore } from '@/core/stores'
+
+import {
+	PluginId,
+	type FilterConfiguration,
+	type FilterPluginOptions,
+	type FilterState,
+} from '../types'
+
+export const useFilterMainStore = defineStore('plugins/filter/main', () => {
+	const coreStore = useCoreStore()
+
+	const configuration = computed(
+		() =>
+			(coreStore.configuration[PluginId] ?? {
+				layers: {},
+			}) as FilterPluginOptions
+	)
+
+	const state = ref<Record<string, FilterState>>({})
+
+	const layers = computed(() =>
+		Object.entries(configuration.value.layers).map(
+			([layerId, filterConfiguration]) => ({
+				layerId,
+				layerConfiguration: coreStore.getLayerMapConfiguration(layerId),
+				filterConfiguration,
+			})
+		)
+	)
+
+	const selectedLayerId = ref<string | null>(null)
+	watch(
+		() => configuration.value.layers,
+		(layers) => {
+			Object.keys(layers).forEach((layerId) => {
+				state.value[layerId] ??= {}
+			})
+			selectedLayerId.value = Object.keys(layers)[0] || ''
+		},
+		{ immediate: true, deep: true }
+	)
+
+	const selectedLayer = computed(
+		() =>
+			layers.value.find((layer) => layer.layerId === selectedLayerId.value) ??
+			null
+	)
+
+	const selectedLayerConfiguration = computed(
+		() =>
+			(selectedLayerId.value
+				? configuration.value.layers[selectedLayerId.value]
+				: {}) as FilterConfiguration
+	)
+
+	const selectedLayerState = computed(
+		() =>
+			(selectedLayerId.value
+				? state.value[selectedLayerId.value]
+				: null) as FilterState | null
+	)
+
+	const selectedLayerHasTimeFilter = computed(
+		() =>
+			selectedLayerConfiguration.value.time?.last ||
+			selectedLayerConfiguration.value.time?.next ||
+			selectedLayerConfiguration.value.time?.freeSelection
+	)
+
+	const filteredLayers = computed(() =>
+		coreStore.map
+			.getAllLayers()
+			.filter((layer) =>
+				Object.keys(configuration.value.layers).includes(layer.get('id'))
+			)
+	)
+
+	return {
+		configuration,
+		state,
+		layers,
+		selectedLayerId,
+		selectedLayer,
+		selectedLayerConfiguration,
+		selectedLayerState,
+		selectedLayerHasTimeFilter,
+		filteredLayers,
+	}
+})
+
+if (import.meta.hot) {
+	import.meta.hot.accept(acceptHMRUpdate(useFilterMainStore, import.meta.hot))
+}
diff --git a/src/plugins/filter/stores/time.ts b/src/plugins/filter/stores/time.ts
new file mode 100644
index 0000000000..0e457ad6c3
--- /dev/null
+++ b/src/plugins/filter/stores/time.ts
@@ -0,0 +1,217 @@
+import { t } from 'i18next'
+import { acceptHMRUpdate, defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+
+import type { Icon } from '@/core'
+
+import { useCoreStore } from '@/core/stores'
+
+import { PluginId, type Time } from '../types'
+import { useFilterMainStore } from './main'
+
+export const useFilterTimeStore = defineStore('plugins/filter/time', () => {
+	const minDate = new Date(-8640000000000000)
+	const maxDate = new Date(8640000000000000)
+
+	const coreStore = useCoreStore()
+	const filterMainStore = useFilterMainStore()
+
+	const configuration = computed(
+		() => filterMainStore.selectedLayerConfiguration.time || ({} as Time)
+	)
+	const state = computed(
+		() => filterMainStore.selectedLayerState?.timeSpan || null
+	)
+
+	const targetProperty = computed(
+		() => configuration.value.targetProperty || ''
+	)
+	const pattern = computed(() => configuration.value.pattern || 'YYYY-MM-DD')
+	const timeState = computed(
+		() =>
+			state.value?.[targetProperty.value] ?? {
+				from: minDate,
+				until: maxDate,
+				pattern: pattern.value,
+			}
+	)
+
+	const customModelStart = computed({
+		get: () =>
+			timeState.value.from.getTime() === minDate.getTime()
+				? null
+				: timeState.value.from,
+		set: (value) => {
+			if (!filterMainStore.selectedLayerState) {
+				return
+			}
+			const layerState = filterMainStore.selectedLayerState
+			const spanState = (layerState.timeSpan ??= {})
+			const propState = (spanState[targetProperty.value] ??= {
+				from: minDate,
+				until: maxDate,
+				pattern: pattern.value,
+			})
+			propState.from = value || minDate
+		},
+	})
+	const customModelEnd = computed({
+		get: () => {
+			if (timeState.value.until.getTime() === maxDate.getTime()) {
+				return null
+			}
+			const value = new Date(timeState.value.until)
+			value.setDate(value.getDate() - 1)
+			return value
+		},
+		set: (value) => {
+			if (!filterMainStore.selectedLayerState) {
+				return
+			}
+			const layerState = filterMainStore.selectedLayerState
+			const spanState = (layerState.timeSpan ??= {})
+			const propState = (spanState[targetProperty.value] ??= {
+				from: minDate,
+				until: maxDate,
+				pattern: pattern.value,
+			})
+			if (value === null) {
+				propState.until = maxDate
+				return
+			}
+			const newValue = new Date(value)
+			newValue.setDate(newValue.getDate() + 1)
+			propState.until = newValue
+		},
+	})
+
+	function checkDate(offset: number, date: Date) {
+		const referenceDate = new Date()
+		referenceDate.setDate(referenceDate.getDate() + offset)
+		return date.toDateString() === referenceDate.toDateString()
+	}
+
+	const isCustom = ref(false)
+	const model = computed<
+		'all' | 'custom' | `last-${string}` | `next-${string}`
+	>({
+		get: () => {
+			if (isCustom.value) {
+				return 'custom'
+			}
+			if (customModelStart.value === null && customModelEnd.value === null) {
+				return 'all'
+			}
+			if (customModelStart.value && customModelEnd.value) {
+				for (const offset of filterMainStore.selectedLayerConfiguration.time
+					?.last || []) {
+					if (
+						checkDate(0, customModelEnd.value) &&
+						checkDate(-offset, customModelStart.value)
+					) {
+						return `last-${offset}` as `last-${string}`
+					}
+				}
+				for (const offset of filterMainStore.selectedLayerConfiguration.time
+					?.next || []) {
+					if (
+						checkDate(0, customModelStart.value) &&
+						checkDate(offset, customModelEnd.value)
+					) {
+						return `next-${offset}` as `next-${string}`
+					}
+				}
+			}
+			return 'custom'
+		},
+		set: (value) => {
+			if (value === 'all' || value === 'custom') {
+				customModelStart.value = null
+				customModelEnd.value = null
+			} else if (value.startsWith('last-')) {
+				const offset = Number(value.substring(5))
+				const now = new Date()
+				const from = new Date(
+					now.getFullYear(),
+					now.getMonth(),
+					now.getDate() - offset
+				)
+				const until = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+				customModelStart.value = from
+				customModelEnd.value = until
+			} else if (value.startsWith('next-')) {
+				const offset = Number(value.substring(5))
+				const now = new Date()
+				const from = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+				const until = new Date(
+					now.getFullYear(),
+					now.getMonth(),
+					now.getDate() + offset
+				)
+				until.setDate(until.getDate() + offset)
+				customModelStart.value = from
+				customModelEnd.value = until
+			}
+			isCustom.value = value === 'custom'
+		},
+	})
+
+	const timeConstraints = computed(
+		() =>
+			({
+				from: {
+					min: new Date(),
+				},
+				until: {
+					max: new Date(),
+				},
+			})[
+				filterMainStore.selectedLayerConfiguration.time?.freeSelection || ''
+			] || {}
+	)
+
+	const items = computed(() => {
+		// This reactive value needs to recompute on language changes.
+		// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+		coreStore.language
+
+		return [
+			{
+				value: 'all',
+				label: t(($) => $.time.noRestriction, { ns: PluginId }),
+				icon: 'kern-icon--all-inclusive',
+			},
+			...(configuration.value.last?.map((offset) => ({
+				value: `last-${offset}`,
+				label: t(($) => $.time.last, { ns: PluginId, count: offset }),
+				icon: 'kern-icon--history' as Icon,
+			})) || []),
+			...(configuration.value.next?.map((offset) => ({
+				value: `next-${offset}`,
+				label: t(($) => $.time.next, { ns: PluginId, count: offset }),
+				icon: 'kern-icon--timeline' as Icon,
+			})) || []),
+			...(configuration.value.freeSelection
+				? [
+						{
+							value: 'custom',
+							label: t(($) => $.time.chooseTimeFrame, { ns: PluginId }),
+							icon: 'kern-icon--calendar-month' as Icon,
+						},
+					]
+				: []),
+		] satisfies { value: string; label: string; icon: Icon }[]
+	})
+
+	return {
+		model,
+		customModelStart,
+		customModelEnd,
+		timeConstraints,
+		items,
+	}
+})
+
+if (import.meta.hot) {
+	import.meta.hot.accept(acceptHMRUpdate(useFilterTimeStore, import.meta.hot))
+}
diff --git a/src/plugins/filter/types.ts b/src/plugins/filter/types.ts
new file mode 100644
index 0000000000..191a3796ef
--- /dev/null
+++ b/src/plugins/filter/types.ts
@@ -0,0 +1,339 @@
+import type { Icon, PluginOptions } from '@/core'
+
+/**
+ * Plugin identifier.
+ */
+export const PluginId = 'filter'
+
+/**
+ * One or more values grouped to a single entry of a category-based filter configuration for a layer.
+ *
+ * @example
+ * ```ts
+ * {
+ * 	key: 'myHomeIsMyCastle',
+ * 	values: ['home', 'castle'],
+ * 	icon: 'kern-icon--home',
+ * }
+ * ```
+ */
+export interface CategoryValue {
+	/**
+	 * Key that is used for localization of the entry.
+	 */
+	key: string
+
+	/**
+	 * Technical values of the feature property.
+	 */
+	values: string[]
+
+	/**
+	 * (Standard-layout-only)
+	 * An icon that is assigned to the value for filtering.
+	 */
+	icon?: Icon
+}
+
+/**
+ * Category-based filter configuration for a layer.
+ *
+ * @example
+ * ```ts
+ * {
+ * 	targetProperty: 'favouriteIceCream',
+ * 	knownValues: ['chocolate', 'vanilla', 'strawberry'],
+ * 	selectAll: true,
+ * }
+ * ```
+ *
+ * This example configuration will add these checkboxes:
+ *
+ * ```
+ * ▢ De-/select all
+ * ▢ Chocolate
+ * ▢ Vanilla
+ * ▢ Strawberry
+ * ```
+ */
+export interface Category {
+	/**
+	 * Known values for the target property to filter by.
+	 * Values not listed here cannot be filtered.
+	 *
+	 * If using `string` instead of `CategoryValue`, the string is interpreted as the `key` and as the only entry in `values`.
+	 *
+	 * @remarks
+	 * The values listed here should be localized:
+	 * ```ts
+	 * filter: {
+	 * 	layer: {
+	 * 		haus: {
+	 * 			category: {
+	 * 				houseType: {
+	 * 					knownValue: {
+	 * 						shed: 'Schuppen',
+	 * 						mansion: 'Villa',
+	 * 						fortress: 'Festung',
+	 * 					},
+	 * 				},
+	 * 			},
+	 * 		},
+	 * 	},
+	 * }
+	 * ```
+	 *
+	 * @example ['shed', 'mansion', 'fortress']
+	 */
+	knownValues: (CategoryValue | string)[]
+
+	/**
+	 * Key of the feature property to filter by.
+	 *
+	 * @remarks
+	 * This value can be localized:
+	 * ```ts
+	 * filter: {
+	 * 	layer: {
+	 * 		haus: {
+	 * 			category: {
+	 * 				houseType: {
+	 * 					title: 'Art des Hauses',
+	 * 				},
+	 * 			},
+	 * 		},
+	 * 	},
+	 * }
+	 * ```
+	 *
+	 * @example `'houseType'`
+	 */
+	targetProperty: string
+
+	/**
+	 * If `true`, a checkbox is provided to enable or disable all `knownValues` at once.
+	 *
+	 * @example true
+	 * @defaultValue false
+	 */
+	selectAll?: boolean
+}
+
+/**
+ * Time-based filter configuration for a layer.
+ *
+ * @remarks
+ * Of all time restrictions, at most one can be selected at any time.
+ * The produced options are selectable by radio buttons.
+ *
+ * @example
+ * ```ts
+ * {
+ * 	targetProperty: 'start',
+ * 	pattern: 'YYYYMMDD',
+ * 	last: [
+ * 		{
+ * 			amounts: [7, 30],
+ * 		},
+ * 	],
+ * 	next: [
+ * 		{
+ * 			amounts: [7, 30],
+ * 		},
+ * 	],
+ * 	freeSelection: {
+ * 		now: 'until',
+ * 	},
+ * }
+ * ```
+ */
+export interface Time {
+	/**
+	 * Key of the feature property to filter by.
+	 */
+	targetProperty: string
+
+	/**
+	 * Defines if the time filter is freely selectable by the user.
+	 * If set to `'until'`, every time range until the current day (inclusive) can be selected.
+	 * If set to `'from'`, every time range from the current day (inclusive) can be selected.
+	 * If not set, this feature is disabled.
+	 *
+	 * @example
+	 * The configuration `'until'` will add this option:
+	 * ```ts
+	 * ◯ Choose time frame
+	 *   From ▒▒▒▒▒▒▒▒▒▒▒ // clicking input opens a selector restricted *until* today
+	 *   To   ▇▇▇▇▇▇▇▇▇▇▇ // clicking input opens a selector restricted *until* today
+	 * ```
+	 */
+	freeSelection?: 'until' | 'from'
+
+	/**
+	 * Configuration for preset time ranges in the past, measured in days.
+	 * A configuration of `[5, 10]` adds the options `Last 5 days` and `Last 10 days`.
+	 *
+	 * @example
+	 * For the configuration `[3, 7]`, this will yield the following options:
+	 * ```
+	 * ◯ Last 3 days
+	 * ◯ Last 7 days
+	 * ```
+	 *
+	 * @remarks
+	 * The selections will always include full days, and additionally the current day.
+	 * Due to this, the time frame of "last 7 days" is actually 8*24h long.
+	 * This seems unexpected at first, but follows intuition – if it's Monday and a user filters to the "last seven days", they would expect to fully see last week's Monday, but also features from that day's morning.
+	 */
+	last?: number[]
+
+	/**
+	 * Configuration for preset time ranges in the future.
+	 * A configuration of `[5, 10]` adds the options `Next 5 days` and `Next 10 days`.
+	 *
+	 * @example
+	 * For the configuration `[3, 7]`, this will yield the following options:
+	 * ```
+	 * ◯ Next 3 days
+	 * ◯ Next 7 days
+	 * ```
+	 *
+	 * @remarks
+	 * The selections will always include full days, and additionally the current day.
+	 * Due to this, the time frame of "next 7 days" is actually 8*24h long.
+	 * This seems unexpected at first, but follows intuition – if it's Monday and a user filters to the "next seven days", they would expect to fully see next week's Monday, but also features from that day's morning.
+	 */
+	next?: number[]
+
+	/**
+	 * A pattern that specifies the date format used in the feature properties.
+	 * The pattern definition allows the following tokens:
+	 * - `YYYY`: 4-digit year
+	 * - `MM`: 2-digit month (01-12)
+	 * - `DD`: 2-digit day of month (01-31)
+	 * - `-`: ignored character
+	 *
+	 * @privateRemarks
+	 * All characters that are not tokens are handled as ignored characters.
+	 * This behavior may change in future versions without a breaking change!
+	 *
+	 * @example For the pattern `'--YYYYDD-MM'`, the value `'ML197001-04'` will be interpreted as 1970-04-01 / Apr 1, 1970.
+	 * @defaultValue 'YYYY-MM-DD'
+	 */
+	pattern?: string
+}
+
+/**
+ * Filter configuration for a layer.
+ *
+ * @example
+ * ```ts
+ * {
+ * 	categories: [
+ * 		{
+ * 			targetProperty: 'favouriteIceCream',
+ * 			knownValues: ['chocolate', 'vanilla', 'strawberry'],
+ * 			selectAll: true,
+ * 		},
+ * 	],
+ * 	time: {
+ * 		targetProperty: 'start',
+ * 		pattern: 'YYYYMMDD',
+ * 	},
+ * }
+ * ```
+ */
+export interface FilterConfiguration {
+	/**
+	 * A definition of different categories to filter features based on their properties.
+	 */
+	categories?: Category[]
+
+	/**
+	 * Filter features based on a time property.
+	 */
+	time?: Time
+}
+
+/**
+ * Plugin options for filter plugin.
+ *
+ * @example
+ * ```ts
+ * {
+ * 	layers: {
+ * 		'1234': {
+ * 			categories: [
+ * 				{
+ * 					selectAll: true,
+ * 					targetProperty: 'buildingType',
+ * 					knownValues: ['shed', 'mansion', 'fortress']
+ * 				},
+ * 				{
+ * 					selectAll: false,
+ * 					targetProperty: 'lightbulb',
+ * 					knownValues: ['on', 'off']
+ * 				}
+ * 			],
+ * 			time: {
+ * 				targetProperty: 'lastAccident',
+ * 				last: [
+ * 					{
+ * 						amounts: [7, 30],
+ * 						unit: 'days',
+ * 					},
+ * 				],
+ * 				freeSelection: {
+ * 					unit: 'days',
+ * 					now: 'until'
+ * 				},
+ * 				pattern: 'YYYYDDMM'
+ * 			}
+ * 		}
+ * 	}
+ * }
+ * ```
+ */
+export interface FilterPluginOptions extends PluginOptions {
+	/**
+	 * Maps a layer ID to its filter configuration.
+	 */
+	layers: Record<string, FilterConfiguration>
+}
+
+/**
+ * Filter state for a layer.
+ * This represents the filters enabled by the user.
+ */
+export interface FilterState {
+	/**
+	 * For each key representing a property's key, only values listed as keys with a truthy value in the value record are visible.
+	 *
+	 * @example
+	 * The following example allows the property `houseType` to have the value `shed` only.
+	 * ```ts
+	 * {
+	 * 	houseType: { shed: true, house: false },
+	 * }
+	 * ```
+	 */
+	knownValues?: Record<string, Record<string, boolean>>
+
+	/**
+	 * For each key representing a property's key, only values starting after `from` and ending until `until` are visible.
+	 * The interpretation of the date is done using the `pattern` as described in `Time.pattern`.
+	 *
+	 * @example
+	 * The following example allows the property `time` (ISO date) to be in 2025.
+	 * ```ts
+	 * {
+	 * 	time: {
+	 * 		from: new Date('2025-01-01'),
+	 * 		to: new Date('2025-12-31'),
+	 * 		pattern: 'YYYY-MM-DD',
+	 * 	},
+	 * }
+	 * ```
+	 */
+	timeSpan?: Record<string, { from: Date; until: Date; pattern: string }>
+}
diff --git a/src/plugins/filter/utils/doesFeaturePassFilter.ts b/src/plugins/filter/utils/doesFeaturePassFilter.ts
new file mode 100644
index 0000000000..d18e307781
--- /dev/null
+++ b/src/plugins/filter/utils/doesFeaturePassFilter.ts
@@ -0,0 +1,110 @@
+import { Feature } from 'ol'
+
+import type { FilterState } from '../types'
+
+import { parseDateWithPattern } from './parseDateWithPattern'
+
+/**
+ * Checks if a given feature passes the given filter state.
+ *
+ * @param feature - Feature to check
+ * @param filter - Current filter state
+ * @returns `true` if the feature should be visible, `false` otherwise
+ */
+export function doesFeaturePassFilter(feature: Feature, filter: FilterState) {
+	if (
+		filter.knownValues &&
+		!Object.entries(filter.knownValues).every(
+			([key, values]) => values[feature.get(key)]
+		)
+	) {
+		return false
+	}
+
+	if (
+		filter.timeSpan &&
+		!Object.entries(filter.timeSpan).every(([key, config]) => {
+			const featureDate = parseDateWithPattern(feature.get(key), config.pattern)
+			return featureDate >= config.from && featureDate < config.until
+		})
+	) {
+		return false
+	}
+
+	return true
+}
+
+if (import.meta.vitest) {
+	const { expect, test } = import.meta.vitest
+
+	const feature = new Feature()
+	feature.set('category', 'blue')
+	feature.set('time', '2025-01-01')
+
+	test('a feature passes an empty filter', () => {
+		const filter = {} satisfies FilterState
+		expect(doesFeaturePassFilter(feature, filter)).toBeTruthy()
+	})
+
+	test('a feature passes the category filter', () => {
+		const filter = {
+			knownValues: {
+				category: {
+					blue: true,
+				},
+			},
+		} satisfies FilterState
+		expect(doesFeaturePassFilter(feature, filter)).toBeTruthy()
+	})
+
+	test('a feature fails the category filter', () => {
+		const filter = {
+			knownValues: {
+				category: {
+					red: true,
+				},
+			},
+		} satisfies FilterState
+		expect(doesFeaturePassFilter(feature, filter)).toBeFalsy()
+	})
+
+	test('a feature passes the time filter', () => {
+		const filter = {
+			timeSpan: {
+				time: {
+					pattern: 'YYYY-MM-DD',
+					from: new Date('Jan 1, 2024'),
+					until: new Date('Dec 31, 2026'),
+				},
+			},
+		} satisfies FilterState
+		expect(doesFeaturePassFilter(feature, filter)).toBeTruthy()
+	})
+
+	test('a feature fails the time filter', () => {
+		const filter = {
+			timeSpan: {
+				time: {
+					pattern: 'YYYY-MM-DD',
+					from: new Date('Jan 1, 2024'),
+					until: new Date('Dec 31, 2024'),
+				},
+			},
+		} satisfies FilterState
+		expect(doesFeaturePassFilter(feature, filter)).toBeFalsy()
+	})
+
+	test('a feature fails one out of two filters', () => {
+		const filter = {
+			knownValues: {
+				category: {
+					blue: true,
+				},
+				misc: {
+					yes: true,
+				},
+			},
+		} satisfies FilterState
+		expect(doesFeaturePassFilter(feature, filter)).toBeFalsy()
+	})
+}
diff --git a/src/plugins/filter/utils/parseDateWithPattern.ts b/src/plugins/filter/utils/parseDateWithPattern.ts
new file mode 100644
index 0000000000..ad950725db
--- /dev/null
+++ b/src/plugins/filter/utils/parseDateWithPattern.ts
@@ -0,0 +1,43 @@
+/**
+ * Returns a `Date` object from a string using the parsing instruction described with pattern.
+ *
+ * @param date - The date string to parse from
+ * @param pattern - The pattern to parse with
+ * @returns Parsed Date object
+ */
+export function parseDateWithPattern(date: string, pattern: string): Date {
+	const result = Object.fromEntries(['Y', 'M', 'D'].map((key) => [key, '']))
+	pattern.split('').forEach((token, index) => {
+		if (token in result && typeof result[token] === 'string') {
+			result[token] += date[index] || ''
+		}
+	})
+	return new Date(Number(result.Y), Number(result.M) - 1, Number(result.D))
+}
+
+if (import.meta.vitest) {
+	const { expect, test } = import.meta.vitest
+
+	test.for([
+		{
+			date: '2025-07-01',
+			pattern: 'YYYY-MM-DD',
+			expected: new Date('Jul 1, 2025'),
+		},
+		{
+			date: '202-521-12X',
+			pattern: 'YYY-YDM-MD-',
+			expected: new Date('Nov 22, 2025'),
+		},
+		{
+			date: '2026-01',
+			pattern: 'YYYY-MM-DD',
+			expected: new Date('Dec 31, 2025'),
+		},
+	])(
+		'parseDateWithPattern works as expected',
+		({ date, pattern, expected }) => {
+			expect(parseDateWithPattern(date, pattern)).toEqual(expected)
+		}
+	)
+}
diff --git a/src/plugins/filter/utils/updateFeatureVisibility.ts b/src/plugins/filter/utils/updateFeatureVisibility.ts
new file mode 100644
index 0000000000..7c85f10b86
--- /dev/null
+++ b/src/plugins/filter/utils/updateFeatureVisibility.ts
@@ -0,0 +1,59 @@
+import { Feature } from 'ol'
+import VectorSource from 'ol/source/Vector'
+
+import { hideFeature, showFeature } from '@/lib/invisibleStyle'
+
+import type { FilterState } from '../types'
+
+import { doesFeaturePassFilter } from './doesFeaturePassFilter'
+
+/**
+ * Update the features in the given source according to the given filter.
+ *
+ * @param source - Source of the layer
+ * @param filter - Filter state for the layer
+ */
+export function updateFeatureVisibility(
+	source: VectorSource,
+	filter: FilterState
+) {
+	const features = source
+		.getFeatures()
+		.flatMap((feature) => feature.get('features') || [feature]) as Feature[]
+
+	// For performance reasons, do not update each feature individually on screen.
+	source.clear()
+	features.forEach((feature) => {
+		;(doesFeaturePassFilter(feature, filter) ? showFeature : hideFeature)(
+			feature
+		)
+	})
+	source.addFeatures(features)
+}
+
+if (import.meta.vitest) {
+	const { test, expect, vi } = import.meta.vitest
+	const { isVisible, isInvisible } = await import('@/lib/invisibleStyle')
+	const doesFeaturePassFilterFile = await import('./doesFeaturePassFilter')
+	const filterSpy = vi.spyOn(doesFeaturePassFilterFile, 'doesFeaturePassFilter')
+	filterSpy.mockImplementation((f: Feature) => f.get('filter') === 'yes')
+
+	test('feature visibility is updated according to filter', () => {
+		const alpha = new Feature()
+		alpha.set('filter', 'yes')
+
+		const beta = new Feature()
+		beta.set('filter', 'no')
+
+		const source = new VectorSource()
+		source.addFeatures([alpha, beta])
+
+		updateFeatureVisibility(source, {})
+
+		expect(source.getFeatures()).toHaveLength(2)
+		expect(source.getFeatures()).toContain(alpha)
+		expect(isVisible(alpha)).toBeTruthy()
+		expect(source.getFeatures()).toContain(beta)
+		expect(isInvisible(beta)).toBeTruthy()
+	})
+}
diff --git a/src/plugins/iconMenu/components/NineRegionsMenu.ce.vue b/src/plugins/iconMenu/components/NineRegionsMenu.ce.vue
index e6333b9e3f..9485f5b3bd 100644
--- a/src/plugins/iconMenu/components/NineRegionsMenu.ce.vue
+++ b/src/plugins/iconMenu/components/NineRegionsMenu.ce.vue
@@ -2,7 +2,7 @@
 	<component :is="asList ? 'ul' : 'div'" class="polar-plugin-icon-menu-list">
 		<component
 			:is="asList ? 'li' : 'div'"
-			v-for="({ plugin, icon }, index) of menus"
+			v-for="(item, index) of menus"
 			:key="index"
 			:class="
 				deviceIsHorizontal
@@ -10,33 +10,40 @@
 					: 'polar-plugin-icon-menu-list-item'
 			"
 		>
-			<component :is="plugin.component" v-if="icon === undefined" />
+			<component
+				:is="item.plugin.component"
+				v-if="
+					'icon' in item
+						? typeof item.icon === 'undefined'
+						: typeof item.plugin.icon === 'undefined'
+				"
+			/>
 			<template v-else>
 				<component
 					:is="buttonComponent"
 					v-if="buttonComponent"
-					:id="plugin.id"
-					:icon="icon"
+					:id="item.plugin.id"
+					:icon="'icon' in item ? item.icon : item.plugin.icon"
 					:hint="
-						$t(($) => $.hints[plugin.id], {
+						$t(($) => $.hints[item.plugin.id], {
 							ns: 'iconMenu',
 						})
 					"
 				/>
 				<NineRegionsButton
 					v-else
-					:id="plugin.id"
-					:icon="icon"
+					:id="item.plugin.id"
+					:icon="('icon' in item ? item.icon : item.plugin.icon) ?? ''"
 					:hint="
-						$t(($) => $.hints[plugin.id], {
+						$t(($) => $.hints[item.plugin.id], {
 							ns: 'iconMenu',
 						})
 					"
 				/>
 				<!-- Content is otherwise displayed in MoveHandle of the core. -->
 				<component
-					:is="plugin.component"
-					v-if="open === plugin.id && (!hasWindowSize || !hasSmallWidth)"
+					:is="item.plugin.component"
+					v-if="open === item.plugin.id && (!hasWindowSize || !hasSmallWidth)"
 					ref="pluginComponent"
 					:class="[
 						deviceIsHorizontal
diff --git a/src/test/utils/mockI18n.ts b/src/test/utils/mockI18n.ts
index 5b6f5150b8..6b69d107da 100644
--- a/src/test/utils/mockI18n.ts
+++ b/src/test/utils/mockI18n.ts
@@ -7,6 +7,7 @@ export function mockedT(
 	options: {
 		ns: string
 		context?: string
+		count?: number
 	}
 ) {
 	const target = {
@@ -21,5 +22,5 @@ export function mockedT(
 			return proxy
 		},
 	})
-	return `$t(${options.ns}:${keyFn(proxy)}${options.context ? `_${options.context}` : ''})`
+	return `$t(${options.ns}:${keyFn(proxy)}${options.context ? `_${options.context}` : ''}${options.count ? `_${options.count}` : ''})`
 }
diff --git a/vue2/packages/plugins/Filter/CHANGELOG.md b/vue2/packages/plugins/Filter/CHANGELOG.md
deleted file mode 100644
index dea2ff57d3..0000000000
--- a/vue2/packages/plugins/Filter/CHANGELOG.md
+++ /dev/null
@@ -1,35 +0,0 @@
-# CHANGELOG
-
-## unpublished
-
-- Fix: Resolve a bug where keyboard navigation in radio groups didn't work.
-
-## 3.0.0
-
-- Breaking: Upgrade peerDependency `ol` from `^9.2.4` to `^10.3.1`.
-
-## 2.0.0
-
-- Breaking: Upgrade peerDependency `ol` from `^7.1.0` to `^9.2.4`.
-- Chore: Remove unused peerDependency `@masterportal/masterportalapi`.
-
-## 1.1.2
-
-- Fix: Features with categories that are not listed in `knownValues` are never displayed now. Previously, they were initially visible, but disappeared once any filter was touched.
-- Fix: It was possible to have features visible that were loaded after the filter was applied and that would have been filtered out. This has been resolved.
-- Fix: Adjust documentation to properly describe optionality of configuration parameters.
-- Fix: Correctly log an error if required parameter `layers` is not provided.
-
-## 1.1.1
-
-- Fix: Configurations without time element could sometimes error on filtering operations.
-- Fix: Filtering by custom timeframe added an additional day into the range.
-- Fix: Filtering by a single day selected features of the next day only.
-
-## 1.1.0
-
-- Feature: Improved implementation to make plugin SPA-ready.
-
-## 1.0.0
-
-Initial release.
diff --git a/vue2/packages/plugins/Filter/LICENSE b/vue2/packages/plugins/Filter/LICENSE
deleted file mode 100644
index c29ce2f835..0000000000
--- a/vue2/packages/plugins/Filter/LICENSE
+++ /dev/null
@@ -1,287 +0,0 @@
-                      EUROPEAN UNION PUBLIC LICENCE v. 1.2
-                      EUPL © the European Union 2007, 2016
-
-This European Union Public Licence (the ‘EUPL’) applies to the Work (as defined
-below) which is provided under the terms of this Licence. Any use of the Work,
-other than as authorised under this Licence is prohibited (to the extent such
-use is covered by a right of the copyright holder of the Work).
-
-The Work is provided under the terms of this Licence when the Licensor (as
-defined below) has placed the following notice immediately following the
-copyright notice for the Work:
-
-        Licensed under the EUPL
-
-or has expressed by any other means his willingness to license under the EUPL.
-
-1. Definitions
-
-In this Licence, the following terms have the following meaning:
-
-- ‘The Licence’: this Licence.
-
-- ‘The Original Work’: the work or software distributed or communicated by the
-  Licensor under this Licence, available as Source Code and also as Executable
-  Code as the case may be.
-
-- ‘Derivative Works’: the works or software that could be created by the
-  Licensee, based upon the Original Work or modifications thereof. This Licence
-  does not define the extent of modification or dependence on the Original Work
-  required in order to classify a work as a Derivative Work; this extent is
-  determined by copyright law applicable in the country mentioned in Article 15.
-
-- ‘The Work’: the Original Work or its Derivative Works.
-
-- ‘The Source Code’: the human-readable form of the Work which is the most
-  convenient for people to study and modify.
-
-- ‘The Executable Code’: any code which has generally been compiled and which is
-  meant to be interpreted by a computer as a program.
-
-- ‘The Licensor’: the natural or legal person that distributes or communicates
-  the Work under the Licence.
-
-- ‘Contributor(s)’: any natural or legal person who modifies the Work under the
-  Licence, or otherwise contributes to the creation of a Derivative Work.
-
-- ‘The Licensee’ or ‘You’: any natural or legal person who makes any usage of
-  the Work under the terms of the Licence.
-
-- ‘Distribution’ or ‘Communication’: any act of selling, giving, lending,
-  renting, distributing, communicating, transmitting, or otherwise making
-  available, online or offline, copies of the Work or providing access to its
-  essential functionalities at the disposal of any other natural or legal
-  person.
-
-2. Scope of the rights granted by the Licence
-
-The Licensor hereby grants You a worldwide, royalty-free, non-exclusive,
-sublicensable licence to do the following, for the duration of copyright vested
-in the Original Work:
-
-- use the Work in any circumstance and for all usage,
-- reproduce the Work,
-- modify the Work, and make Derivative Works based upon the Work,
-- communicate to the public, including the right to make available or display
-  the Work or copies thereof to the public and perform publicly, as the case may
-  be, the Work,
-- distribute the Work or copies thereof,
-- lend and rent the Work or copies thereof,
-- sublicense rights in the Work or copies thereof.
-
-Those rights can be exercised on any media, supports and formats, whether now
-known or later invented, as far as the applicable law permits so.
-
-In the countries where moral rights apply, the Licensor waives his right to
-exercise his moral right to the extent allowed by law in order to make effective
-the licence of the economic rights here above listed.
-
-The Licensor grants to the Licensee royalty-free, non-exclusive usage rights to
-any patents held by the Licensor, to the extent necessary to make use of the
-rights granted on the Work under this Licence.
-
-3. Communication of the Source Code
-
-The Licensor may provide the Work either in its Source Code form, or as
-Executable Code. If the Work is provided as Executable Code, the Licensor
-provides in addition a machine-readable copy of the Source Code of the Work
-along with each copy of the Work that the Licensor distributes or indicates, in
-a notice following the copyright notice attached to the Work, a repository where
-the Source Code is easily and freely accessible for as long as the Licensor
-continues to distribute or communicate the Work.
-
-4. Limitations on copyright
-
-Nothing in this Licence is intended to deprive the Licensee of the benefits from
-any exception or limitation to the exclusive rights of the rights owners in the
-Work, of the exhaustion of those rights or of other applicable limitations
-thereto.
-
-5. Obligations of the Licensee
-
-The grant of the rights mentioned above is subject to some restrictions and
-obligations imposed on the Licensee. Those obligations are the following:
-
-Attribution right: The Licensee shall keep intact all copyright, patent or
-trademarks notices and all notices that refer to the Licence and to the
-disclaimer of warranties. The Licensee must include a copy of such notices and a
-copy of the Licence with every copy of the Work he/she distributes or
-communicates. The Licensee must cause any Derivative Work to carry prominent
-notices stating that the Work has been modified and the date of modification.
-
-Copyleft clause: If the Licensee distributes or communicates copies of the
-Original Works or Derivative Works, this Distribution or Communication will be
-done under the terms of this Licence or of a later version of this Licence
-unless the Original Work is expressly distributed only under this version of the
-Licence — for example by communicating ‘EUPL v. 1.2 only’. The Licensee
-(becoming Licensor) cannot offer or impose any additional terms or conditions on
-the Work or Derivative Work that alter or restrict the terms of the Licence.
-
-Compatibility clause: If the Licensee Distributes or Communicates Derivative
-Works or copies thereof based upon both the Work and another work licensed under
-a Compatible Licence, this Distribution or Communication can be done under the
-terms of this Compatible Licence. For the sake of this clause, ‘Compatible
-Licence’ refers to the licences listed in the appendix attached to this Licence.
-Should the Licensee's obligations under the Compatible Licence conflict with
-his/her obligations under this Licence, the obligations of the Compatible
-Licence shall prevail.
-
-Provision of Source Code: When distributing or communicating copies of the Work,
-the Licensee will provide a machine-readable copy of the Source Code or indicate
-a repository where this Source will be easily and freely available for as long
-as the Licensee continues to distribute or communicate the Work.
-
-Legal Protection: This Licence does not grant permission to use the trade names,
-trademarks, service marks, or names of the Licensor, except as required for
-reasonable and customary use in describing the origin of the Work and
-reproducing the content of the copyright notice.
-
-6. Chain of Authorship
-
-The original Licensor warrants that the copyright in the Original Work granted
-hereunder is owned by him/her or licensed to him/her and that he/she has the
-power and authority to grant the Licence.
-
-Each Contributor warrants that the copyright in the modifications he/she brings
-to the Work are owned by him/her or licensed to him/her and that he/she has the
-power and authority to grant the Licence.
-
-Each time You accept the Licence, the original Licensor and subsequent
-Contributors grant You a licence to their contributions to the Work, under the
-terms of this Licence.
-
-7. Disclaimer of Warranty
-
-The Work is a work in progress, which is continuously improved by numerous
-Contributors. It is not a finished work and may therefore contain defects or
-‘bugs’ inherent to this type of development.
-
-For the above reason, the Work is provided under the Licence on an ‘as is’ basis
-and without warranties of any kind concerning the Work, including without
-limitation merchantability, fitness for a particular purpose, absence of defects
-or errors, accuracy, non-infringement of intellectual property rights other than
-copyright as stated in Article 6 of this Licence.
-
-This disclaimer of warranty is an essential part of the Licence and a condition
-for the grant of any rights to the Work.
-
-8. Disclaimer of Liability
-
-Except in the cases of wilful misconduct or damages directly caused to natural
-persons, the Licensor will in no event be liable for any direct or indirect,
-material or moral, damages of any kind, arising out of the Licence or of the use
-of the Work, including without limitation, damages for loss of goodwill, work
-stoppage, computer failure or malfunction, loss of data or any commercial
-damage, even if the Licensor has been advised of the possibility of such damage.
-However, the Licensor will be liable under statutory product liability laws as
-far such laws apply to the Work.
-
-9. Additional agreements
-
-While distributing the Work, You may choose to conclude an additional agreement,
-defining obligations or services consistent with this Licence. However, if
-accepting obligations, You may act only on your own behalf and on your sole
-responsibility, not on behalf of the original Licensor or any other Contributor,
-and only if You agree to indemnify, defend, and hold each Contributor harmless
-for any liability incurred by, or claims asserted against such Contributor by
-the fact You have accepted any warranty or additional liability.
-
-10. Acceptance of the Licence
-
-The provisions of this Licence can be accepted by clicking on an icon ‘I agree’
-placed under the bottom of a window displaying the text of this Licence or by
-affirming consent in any other similar way, in accordance with the rules of
-applicable law. Clicking on that icon indicates your clear and irrevocable
-acceptance of this Licence and all of its terms and conditions.
-
-Similarly, you irrevocably accept this Licence and all of its terms and
-conditions by exercising any rights granted to You by Article 2 of this Licence,
-such as the use of the Work, the creation by You of a Derivative Work or the
-Distribution or Communication by You of the Work or copies thereof.
-
-11. Information to the public
-
-In case of any Distribution or Communication of the Work by means of electronic
-communication by You (for example, by offering to download the Work from a
-remote location) the distribution channel or media (for example, a website) must
-at least provide to the public the information requested by the applicable law
-regarding the Licensor, the Licence and the way it may be accessible, concluded,
-stored and reproduced by the Licensee.
-
-12. Termination of the Licence
-
-The Licence and the rights granted hereunder will terminate automatically upon
-any breach by the Licensee of the terms of the Licence.
-
-Such a termination will not terminate the licences of any person who has
-received the Work from the Licensee under the Licence, provided such persons
-remain in full compliance with the Licence.
-
-13. Miscellaneous
-
-Without prejudice of Article 9 above, the Licence represents the complete
-agreement between the Parties as to the Work.
-
-If any provision of the Licence is invalid or unenforceable under applicable
-law, this will not affect the validity or enforceability of the Licence as a
-whole. Such provision will be construed or reformed so as necessary to make it
-valid and enforceable.
-
-The European Commission may publish other linguistic versions or new versions of
-this Licence or updated versions of the Appendix, so far this is required and
-reasonable, without reducing the scope of the rights granted by the Licence. New
-versions of the Licence will be published with a unique version number.
-
-All linguistic versions of this Licence, approved by the European Commission,
-have identical value. Parties can take advantage of the linguistic version of
-their choice.
-
-14. Jurisdiction
-
-Without prejudice to specific agreement between parties,
-
-- any litigation resulting from the interpretation of this License, arising
-  between the European Union institutions, bodies, offices or agencies, as a
-  Licensor, and any Licensee, will be subject to the jurisdiction of the Court
-  of Justice of the European Union, as laid down in article 272 of the Treaty on
-  the Functioning of the European Union,
-
-- any litigation arising between other parties and resulting from the
-  interpretation of this License, will be subject to the exclusive jurisdiction
-  of the competent court where the Licensor resides or conducts its primary
-  business.
-
-15. Applicable Law
-
-Without prejudice to specific agreement between parties,
-
-- this Licence shall be governed by the law of the European Union Member State
-  where the Licensor has his seat, resides or has his registered office,
-
-- this licence shall be governed by Belgian law if the Licensor has no seat,
-  residence or registered office inside a European Union Member State.
-
-Appendix
-
-‘Compatible Licences’ according to Article 5 EUPL are:
-
-- GNU General Public License (GPL) v. 2, v. 3
-- GNU Affero General Public License (AGPL) v. 3
-- Open Software License (OSL) v. 2.1, v. 3.0
-- Eclipse Public License (EPL) v. 1.0
-- CeCILL v. 2.0, v. 2.1
-- Mozilla Public Licence (MPL) v. 2
-- GNU Lesser General Public Licence (LGPL) v. 2.1, v. 3
-- Creative Commons Attribution-ShareAlike v. 3.0 Unported (CC BY-SA 3.0) for
-  works other than software
-- European Union Public Licence (EUPL) v. 1.1, v. 1.2
-- Québec Free and Open-Source Licence — Reciprocity (LiLiQ-R) or Strong
-  Reciprocity (LiLiQ-R+).
-
-The European Commission may update this Appendix to later versions of the above
-licences without producing a new version of the EUPL, as long as they provide
-the rights granted in Article 2 of this Licence and protect the covered Source
-Code from exclusive appropriation.
-
-All other changes or additions to this Appendix require the production of a new
-EUPL version.
\ No newline at end of file
diff --git a/vue2/packages/plugins/Filter/README.md b/vue2/packages/plugins/Filter/README.md
deleted file mode 100644
index 32d730084e..0000000000
--- a/vue2/packages/plugins/Filter/README.md
+++ /dev/null
@@ -1,197 +0,0 @@
-# Filter
-
-## Scope
-
-The Filter plugin can be used to filter arbitrary configurable vector layers by their properties.
-
-## Configuration
-
-### filter
-
-| fieldName | type | description |
-| - | - | - |
-| layers | Record<string, filterConfiguration> | Maps layer id to filter configuration. |
-
-For details on the `displayComponent` attribute, refer to the [Global Plugin Parameters](../../core/README.md#global-plugin-parameters) section of `@polar/core`.
-
-```
-The following chapters contain drafts in this format. Please mind that they neither represent UI nor localisation, but are merely there to communicate the idea with an example.
-```
-
-<details>
-<summary>Example configuration</summary>
-
-```js
-{
-  filter: {
-    layers: {
-      '1234': {
-        categories: [
-          {
-            selectAll: true,
-            targetProperty: 'buildingType',
-            knownValues: ['shed', 'mansion', 'fortress']
-          },
-          {
-            selectAll: false,
-            targetProperty: 'lightbulb',
-            knownValues: ['on', 'off']
-          }
-        ],
-        time: {
-          targetProperty: 'lastAccident',
-          last: [
-            {
-              amounts: [7, 30],
-              unit: 'days',
-            },
-          ],
-          freeSelection: {
-            unit: 'days',
-            now: 'until'
-          },
-          /**
-           * Feature holds date property as e.g. "20143012", where 2014 is the
-           * year, 30 the day, and 12 the month.
-           */
-          pattern: 'YYYYDDMM'
-        }
-      }
-    }
-  }
-}
-```
-
-</details>
-
-#### filter.filterConfiguration
-
-| fieldName | type | description |
-| - | - | - |
-| categories | category[]? | Category filter definition to filter features by their property values. |
-| time | time? | Time filter definition so filter features by a time property. |
-
-Example configuration:
-```js
-categories: [
-  {
-    targetProperty: 'favouriteIceCream', 
-    knownValues: ['chocolate', 'vanilla', 'strawberry'],
-    selectAll: true
-  }
-],
-time: {
-  targetProperty: 'start',
-  pattern: 'YYYYMMDD',
-},
-```
-
-##### filter.filterConfiguration.category
-
-| fieldName | type | description |
-| - | - | - |
-| knownValues | (string \| number \| boolean \| null)[] | Array of known values for the feature properties. Each entry will result in a checkbox that allows filtering the appropriate features. Properties not listed will not be filterable and never be visible. The technical name will result in a localization key that can be configured on a per-client basis. |
-| targetProperty | string | Target property to filter by. This is the name (that is, key) of a feature property. |
-| selectAll | boolean? | If true, a checkbox is added to de/select all `knownValues` (above) at once. Defaults to `false`. |
-
-Example configuration:
-```js
-categories: [
-  {
-    targetProperty: 'favouriteIceCream', 
-    knownValues: ['chocolate', 'vanilla', 'strawberry'],
-    selectAll: true,
-  }
-],
-```
-
-This example configuration will add these checkboxes:
-
-```
-▢ De-/select all
-▢ Chocolate
-▢ Vanilla
-▢ Strawberry
-```
-
-##### filter.filterConfiguration.time
-
-| fieldName | type | description |
-| - | - | - |
-| targetProperty | string | Target property to filter by. |
-| freeSelection | freeSelection? | Provide a more dynamic configurable from-to chooser for timeframes. |
-| last | options[]? | Array of options to create for a `last` filter, e.g. "last 10 days". |
-| next | options[]? | Array of options to create for a `next` filter, e.g. "next 10 day". |
-| pattern | string? | Pattern the target string uses for its date formatting. Defaults to `'YYYY-MM-DD'`. Only 'Y', 'M', and 'D' are interpreted. All other characters are considered filler. Example: A feature has `"AA202001-04"` as property value that is supposed to convey a date. Setting `pattern` to `"--YYYYDD-MM"` would interpret it as the 1st of April, 2020. |
-
-Of all time restrictions, at most one can be selected at any time. The produced options are selectable by radio buttons.
-
-Example configuration:
-```js
-time: {
-  targetProperty: 'start',
-  pattern: 'YYYYMMDD',
-  last: [
-    {
-      amounts: [7, 30],
-    },
-  ],
-  next: [
-    {
-      amounts: [7, 30],
-    },
-  ],
-  freeSelection: {
-    now: 'until',
-  },
-}
-```
-
-###### filter.filterConfiguration.time.options
-
-| fieldName | type | description |
-| - | - | - |
-| amounts | number[] | Offer radio buttons for these amounts of `unit`. The rest of the current day is additionally included in the range. |
-| unit | 'days'? | Implemented units. Currently, only `'days'` are supported. Defaults to `'days'`. |
-
-Example configuration:
-```js
-last: [
-  {
-    amounts: [7, 30],
-    unit: 'days'
-  },
-],
-```
-
-This example configuration will add these radio buttons:
-
-```
-◯ Last 3 days
-◯ Last 7 days
-```
-
-In `'days'` mode, the selections will always include full days, and additionally the current day. Due to this, the time frame of "last 7 days" is actually 8*24h long. This seems unexpected at first, but follows intuition – if it's Monday and a user filters to the "last seven days", they would expect to fully see last week's Monday, but also features from that day's morning.
-
-###### filter.filterConfiguration.time.freeSelection
-
-| fieldName | type | description |
-| - | - | - |
-| now | ('until' \| 'from')? | If set, only time points *until* now or *from* now are selectable, including the current time point. |
-| unit | 'days'? | Implemented units. Currently, only `'days'` are supported. Defaults to `'days'`. |
-
-Example configuration:
-```js
-freeSelection: {
-  now: 'until',
-  unit: 'days'
-},
-```
-
-This example configuration will add this radio button:
-
-```js
-◯ Choose time frame
-   From ▒▒▒▒▒▒▒▒▒▒▒ // clicking input opens a selector restricted *until* today
-   To   ▇▇▇▇▇▇▇▇▇▇▇ // clicking input opens a selector restricted *until* today
-```
diff --git a/vue2/packages/plugins/Filter/package.json b/vue2/packages/plugins/Filter/package.json
deleted file mode 100644
index 38b94e4b4a..0000000000
--- a/vue2/packages/plugins/Filter/package.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "name": "@polar/plugin-filter",
-  "version": "3.0.0",
-  "description": "Filter plugin for POLAR that adds filter functionality to vector-data based layers.",
-  "keywords": [
-    "OpenLayers",
-    "ol",
-    "POLAR",
-    "plugin",
-    "Filter"
-  ],
-  "license": "EUPL-1.2",
-  "type": "module",
-  "author": "Dataport AöR <polar@dataport.de>",
-  "main": "src/index.ts",
-  "files": [
-    "src/**/*",
-    "CHANGELOG.md"
-  ],
-  "peerDependencies": {
-    "@repositoryname/vuex-generators": "^1.1.2",
-    "ol": "^10.4.0",
-    "vue": "^2.6.14",
-    "vuex": "^3.6.2"
-  },
-  "devDependencies": {
-    "@polar/lib-custom-types": "^2.0.0",
-    "@polar/lib-invisible-style": "^3.0.0"
-  }
-}
diff --git a/vue2/packages/plugins/Filter/src/components/ChooseTimeFrame.vue b/vue2/packages/plugins/Filter/src/components/ChooseTimeFrame.vue
deleted file mode 100644
index e8fc666042..0000000000
--- a/vue2/packages/plugins/Filter/src/components/ChooseTimeFrame.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div>
-    <v-date-picker
-      v-model="dates"
-      range
-      no-title
-      scrollable
-      elevation="5"
-      :min="minDate"
-      :max="maxDate"
-      :first-day-of-week="1"
-      :locale="language"
-      :next-month-aria-label="$t('plugins.filter.time.vuetify.aria.nextMonth')"
-      :next-year-aria-label="$t('plugins.filter.time.vuetify.aria.nextYear')"
-      :prev-month-aria-label="$t('plugins.filter.time.vuetify.aria.prevMonth')"
-      :prev-year-aria-label="$t('plugins.filter.time.vuetify.aria.prevYear')"
-    ></v-date-picker>
-    <p class="polar-filter-time-frame-explanation">
-      {{ $t('plugins.filter.time.chooseTimeFrame.info') }}
-    </p>
-  </div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue'
-import { mapGetters, mapActions } from 'vuex'
-
-export default Vue.extend({
-  name: 'PolarFilterChooseTimeFrame',
-  props: {
-    layerId: {
-      type: String,
-      required: true,
-    },
-    now: {
-      type: String,
-      required: true,
-      validator: function (value: string | undefined): boolean {
-        return ['until', 'from', undefined].includes(value)
-      },
-    },
-  },
-  computed: {
-    ...mapGetters('plugin/filter', ['getFreeSelection']),
-    ...mapGetters(['language']),
-    dates: {
-      get() {
-        return this.getFreeSelection(this.layerId)
-      },
-      set(freeSelection) {
-        this.changeFreeSelection({
-          freeSelection,
-          layerId: this.layerId,
-        })
-      },
-    },
-    minDate() {
-      if (this.now === 'from') {
-        return new Date(Date.now()).toISOString().split('T')[0]
-      }
-      return undefined
-    },
-    maxDate() {
-      if (this.now === 'until') {
-        return new Date(Date.now()).toISOString().split('T')[0]
-      }
-      return undefined
-    },
-  },
-  methods: {
-    ...mapActions('plugin/filter', ['changeFreeSelection']),
-  },
-})
-</script>
-
-<style lang="scss" scoped>
-.polar-filter-time-frame-explanation {
-  letter-spacing: 0.05em;
-  font-size: 13px;
-  line-height: 14px;
-  margin-top: 0.5em;
-  margin-bottom: 0;
-}
-</style>
diff --git a/vue2/packages/plugins/Filter/src/components/Filter.vue b/vue2/packages/plugins/Filter/src/components/Filter.vue
deleted file mode 100644
index 8cb16f701e..0000000000
--- a/vue2/packages/plugins/Filter/src/components/Filter.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<template>
-  <div>
-    <v-card class="polar-plugin-filter-wrapper">
-      <template v-for="(layerId, layerIndex) of layers">
-        <v-card-title :key="`plugin-filter-layer-title-${layerIndex}`">
-          {{ $t(`plugins.filter.layerName.${layerId}`) }}
-        </v-card-title>
-        <v-divider :key="`plugin-filter-divider-${layerIndex}`"></v-divider>
-        <v-expansion-panels
-          :key="`plugin-filter-accordion-${layerIndex}`"
-          accordion
-        >
-          <template v-if="getCategories(layerId)">
-            <v-expansion-panel
-              v-for="(
-                { targetProperty, knownValues, selectAll }, categoryIndex
-              ) of getCategories(layerId)"
-              :key="`plugin-filter-panel-${layerIndex}-${categoryIndex}`"
-            >
-              <v-expansion-panel-header>
-                {{
-                  $t(
-                    `plugins.filter.category.${layerId}.title.${targetProperty}`
-                  )
-                }}
-              </v-expansion-panel-header>
-              <v-expansion-panel-content>
-                <v-checkbox
-                  v-if="selectAll"
-                  dense
-                  hide-details
-                  :label="$t('plugins.filter.category.deselectAll')"
-                  :indeterminate="
-                    getActiveCategoryAll({ layerId, targetProperty }) ===
-                    'indeterminate'
-                  "
-                  :input-value="
-                    getActiveCategoryAll({ layerId, targetProperty })
-                  "
-                  @change="toggleCategoryAll({ layerId, targetProperty })"
-                ></v-checkbox>
-                <v-checkbox
-                  v-for="(knownValue, knownValueIndex) of knownValues"
-                  :key="`plugin-filter-checkbox-${layerIndex}-${categoryIndex}-${knownValueIndex}`"
-                  dense
-                  hide-details
-                  :label="
-                    $t(
-                      `plugins.filter.category.${layerId}.${targetProperty}.${knownValue}`
-                    )
-                  "
-                  :input-value="
-                    getActiveCategory({
-                      layerId,
-                      targetProperty,
-                      knownValue,
-                    })
-                  "
-                  @change="
-                    toggleCategory({ layerId, targetProperty, knownValue })
-                  "
-                ></v-checkbox>
-              </v-expansion-panel-content>
-            </v-expansion-panel>
-          </template>
-          <v-expansion-panel v-if="getTimeConfig(layerId)">
-            <v-expansion-panel-header class="polar-plugin-filter-expansion">
-              {{ $t(`plugins.filter.time.header`) }}
-            </v-expansion-panel-header>
-            <v-expansion-panel-content>
-              <v-radio-group
-                :value="
-                  getActiveTime({
-                    layerId,
-                  })
-                "
-                dense
-                hide-details
-                @change="
-                  (radioId) =>
-                    changeTimeRadio({
-                      radioId,
-                      layerId,
-                    })
-                "
-              >
-                <v-radio
-                  :label="$t('plugins.filter.time.noRestriction')"
-                  :value="0"
-                  @keydown.up.stop
-                  @keydown.right.stop
-                  @keydown.down.stop
-                  @keydown.left.stop
-                ></v-radio>
-                <template
-                  v-for="(
-                    { label, component, amount, now }, timeIndex
-                  ) of getTimeOptions(layerId)"
-                >
-                  <v-radio
-                    :key="`plugin-filter-checkbox-${layerIndex}-${timeIndex}`"
-                    :label="$t(label, { count: amount })"
-                    :value="timeIndex + 1"
-                    @keydown.up.stop
-                    @keydown.right.stop
-                    @keydown.down.stop
-                    @keydown.left.stop
-                  ></v-radio>
-                  <component
-                    :is="component"
-                    v-if="
-                      component && getActiveTime({ layerId }) === timeIndex + 1
-                    "
-                    :key="`plugin-filter-checkbox-${layerIndex}-${timeIndex}-options`"
-                    :layer-id="layerId"
-                    :now="now"
-                  ></component>
-                </template>
-              </v-radio-group>
-            </v-expansion-panel-content>
-          </v-expansion-panel>
-        </v-expansion-panels>
-      </template>
-    </v-card>
-  </div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue'
-import { mapGetters, mapActions } from 'vuex'
-
-export default Vue.extend({
-  name: 'PolarFilter',
-  computed: {
-    ...mapGetters('plugin/filter', [
-      'filterConfiguration',
-      'getActiveCategory',
-      'getActiveCategoryAll',
-      'getActiveTime',
-      'getCategories',
-      'getTimeConfig',
-      'getTimeOptions',
-    ]),
-    layers(): string[] {
-      return Object.keys(this.filterConfiguration.layers)
-    },
-  },
-  methods: {
-    ...mapActions('plugin/filter', [
-      'toggleCategory',
-      'toggleCategoryAll',
-      'changeTimeRadio',
-    ]),
-  },
-})
-</script>
-
-<style lang="scss" scoped>
-.polar-plugin-filter-wrapper {
-  min-width: 300px;
-
-  // tone down spacing
-  .v-expansion-panel-header.v-expansion-panel-header--active {
-    min-height: 48px;
-  }
-
-  .v-input--radio-group {
-    margin-top: 0;
-  }
-}
-</style>
diff --git a/vue2/packages/plugins/Filter/src/components/index.ts b/vue2/packages/plugins/Filter/src/components/index.ts
deleted file mode 100644
index 86f96a7cfa..0000000000
--- a/vue2/packages/plugins/Filter/src/components/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Filter } from './Filter.vue'
diff --git a/vue2/packages/plugins/Filter/src/index.ts b/vue2/packages/plugins/Filter/src/index.ts
deleted file mode 100644
index 69d629c439..0000000000
--- a/vue2/packages/plugins/Filter/src/index.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import Vue from 'vue'
-import { FilterConfiguration } from '@polar/lib-custom-types'
-import { Filter } from './components'
-import locales from './locales'
-import { makeStoreModule } from './store'
-
-export default (options: FilterConfiguration) => (instance: Vue) =>
-  instance.$store.dispatch('addComponent', {
-    name: 'filter',
-    plugin: Filter,
-    locales,
-    storeModule: makeStoreModule(),
-    options,
-  })
diff --git a/vue2/packages/plugins/Filter/src/locales.ts b/vue2/packages/plugins/Filter/src/locales.ts
deleted file mode 100644
index 6ded8088b7..0000000000
--- a/vue2/packages/plugins/Filter/src/locales.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import { Locale } from '@polar/lib-custom-types'
-
-export const resourcesDe = {
-  plugins: {
-    filter: {
-      category: {
-        deselectAll: 'Alle an-/abwählen',
-      },
-      time: {
-        header: 'Zeitraum',
-        noRestriction: 'Keine Einschränkung',
-        last: {
-          days_one: 'Der letzte Tag',
-          days_other: 'Die letzten {{ count }} Tage',
-        },
-        next: {
-          days_one: 'Der nächste Tag',
-          days_other: 'Die nächsten {{ count }} Tage',
-        },
-        chooseTimeFrame: {
-          label: 'Zeitraum wählen',
-          info: 'Bitte wählen Sie ein Einzeldatum oder das erste und letzte Datum eines Zeitraums.',
-        },
-        vuetify: {
-          aria: {
-            nextMonth: 'Nächsten Monat auswählen',
-            nextYear: 'Nächstes Jahr auswählen',
-            prevMonth: 'Vorherigen Monat auswählen',
-            prevYear: 'Vorheriges Jahr auswählen',
-          },
-        },
-      },
-    },
-  },
-} as const
-
-export const resourcesEn = {
-  plugins: {
-    filter: {
-      category: {
-        deselectAll: 'De-/select all',
-      },
-      time: {
-        header: 'Time frame',
-        noRestriction: 'No restriction',
-        last: {
-          days_one: 'The last day',
-          days_other: 'The last {{ count }} days',
-        },
-        next: {
-          days_one: 'The next day',
-          days_other: 'The next {{ count }} days',
-        },
-        chooseTimeFrame: {
-          label: 'Choose time frame',
-          info: 'Please choose a singular date or the first and last date of a time frame.',
-        },
-        vuetify: {
-          aria: {
-            nextMonth: 'Choose next month',
-            nextYear: 'Choose next year',
-            prevMonth: 'Choose previous month',
-            prevYear: 'Choose previous year',
-          },
-        },
-      },
-    },
-  },
-} as const
-
-const locales: Locale[] = [
-  {
-    type: 'de',
-    resources: resourcesDe,
-  },
-  {
-    type: 'en',
-    resources: resourcesEn,
-  },
-]
-
-export default locales
diff --git a/vue2/packages/plugins/Filter/src/store/index.ts b/vue2/packages/plugins/Filter/src/store/index.ts
deleted file mode 100644
index 79cd202f3b..0000000000
--- a/vue2/packages/plugins/Filter/src/store/index.ts
+++ /dev/null
@@ -1,240 +0,0 @@
-import {
-  generateSimpleGetters,
-  generateSimpleMutations,
-} from '@repositoryname/vuex-generators'
-import { FilterConfiguration, PolarModule } from '@polar/lib-custom-types'
-import ClusterSource from 'ol/source/Cluster'
-import ChooseTimeFrame from '../components/ChooseTimeFrame.vue'
-import {
-  FilterGetters,
-  FilterState,
-  KnownValue,
-  LayerId,
-  TargetProperty,
-} from '../types'
-import {
-  getLayer,
-  updateFeatureVisibility,
-} from '../utils/updateFeatureVisibility'
-import { setState } from '../utils/setState'
-import { arrayOnlyContains } from '../utils/arrayOnlyContains'
-import { parseTimeOption } from '../utils/parseTimeOption'
-
-const getInitialState = (): FilterState => ({
-  category: {},
-  time: {},
-})
-
-export const makeStoreModule = () => {
-  const storeModule: PolarModule<FilterState, FilterGetters> = {
-    namespaced: true,
-    state: getInitialState(),
-    actions: {
-      setupModule({
-        getters: { filterConfiguration },
-        rootGetters: { map },
-        commit,
-        dispatch,
-      }): void {
-        if (Object.entries(filterConfiguration.layers).length === 0) {
-          console.error(
-            '@polar/plugin-filter: No configuration for parameter "layers" was found. Plugin will not be usable.'
-          )
-        }
-        Object.entries(filterConfiguration.layers).forEach(
-          ([layerId, { categories, time }]) => {
-            if (categories) {
-              categories.forEach(({ targetProperty, knownValues }) =>
-                commit('setupState', {
-                  path: ['category', layerId, targetProperty],
-                  value: knownValues.reduce((accumulator, current) => {
-                    accumulator[current] = true
-                    return accumulator
-                  }, {}),
-                })
-              )
-            }
-            if (time) {
-              const { targetProperty, freeSelection, pattern } = time
-              commit('setupState', {
-                path: ['time', layerId],
-                value: {
-                  targetProperty,
-                  pattern: pattern || 'YYYY-MM-DD',
-                  radioId: 0,
-                  freeSelection: freeSelection ? [] : null,
-                },
-              })
-            }
-            // apply filter effects on layer loads
-            // @ts-expect-error | only layers with getSource allowed
-            let source = getLayer(map, layerId).getSource()
-            while (source instanceof ClusterSource) {
-              source = source.getSource()
-            }
-            source.on('featuresloadend', () =>
-              dispatch('updateFeatureVisibility', layerId)
-            )
-            // initially update visibility in case loading already took place
-            dispatch('updateFeatureVisibility', layerId)
-          }
-        )
-      },
-      toggleCategory(
-        { getters, commit, dispatch },
-        payload: {
-          layerId: LayerId
-          targetProperty: TargetProperty
-          knownValue: KnownValue
-        }
-      ) {
-        const value = !getters.getActiveCategory(payload)
-        commit('setCategory', { ...payload, value })
-        dispatch('updateFeatureVisibility', payload.layerId)
-      },
-      toggleCategoryAll(
-        { getters, commit, dispatch },
-        payload: {
-          layerId: LayerId
-          targetProperty: TargetProperty
-        }
-      ) {
-        // 'indeterminate' to false intentionally (something had to be decided)
-        const value = !getters.getActiveCategoryAll(payload)
-        const { layerId } = payload
-        // @ts-expect-error | this call only happens if structures exist (generation in .vue)
-        getters
-          .getCategories(layerId)
-          .find(
-            ({ targetProperty }) => targetProperty === payload.targetProperty
-          )
-          .knownValues.forEach((knownValue) => {
-            commit('setCategory', { ...payload, knownValue, value })
-          })
-        dispatch('updateFeatureVisibility', payload.layerId)
-      },
-      changeTimeRadio(
-        { commit, dispatch },
-        payload: { layerId: LayerId; radioId: number }
-      ) {
-        commit('setTimeRadio', payload)
-        dispatch('updateFeatureVisibility', payload.layerId)
-      },
-      changeFreeSelection(
-        { commit, dispatch },
-        { layerId, freeSelection }: { layerId: LayerId; freeSelection: Date[] }
-      ) {
-        commit('setFreeSelection', { layerId, freeSelection })
-        dispatch('updateFeatureVisibility', layerId)
-      },
-      updateFeatureVisibility(
-        { state, rootGetters, getters },
-        layerId: LayerId
-      ) {
-        updateFeatureVisibility({
-          map: rootGetters.map,
-          layerId,
-          categories: getters.getCategories(layerId),
-          timeOptions: getters.getTimeOptions(layerId),
-          state: JSON.parse(JSON.stringify(state)),
-        })
-      },
-    },
-    mutations: {
-      ...generateSimpleMutations(getInitialState()),
-      setCategory(
-        state,
-        {
-          layerId,
-          targetProperty,
-          knownValue,
-          value,
-        }: {
-          layerId: LayerId
-          targetProperty: TargetProperty
-          knownValue: KnownValue
-          value: boolean
-        }
-      ) {
-        state.category[layerId][targetProperty][knownValue] = value
-      },
-      setupState(state, { path, value }: { path: string[]; value: boolean }) {
-        setState(state, path, value)
-      },
-      setTimeRadio(
-        state,
-        { layerId, radioId }: { layerId: LayerId; radioId: number }
-      ) {
-        state.time[layerId].radioId = radioId
-      },
-      setFreeSelection(
-        state,
-        { layerId, freeSelection }: { layerId: LayerId; freeSelection: Date[] }
-      ) {
-        state.time[layerId].freeSelection = freeSelection
-      },
-    },
-    getters: {
-      ...generateSimpleGetters(getInitialState()),
-      filterConfiguration(_, __, ___, rootGetters): FilterConfiguration {
-        return rootGetters.configuration?.filter || { layers: {} }
-      },
-      getActiveCategory:
-        (state) =>
-        ({ layerId, targetProperty, knownValue }) =>
-          state.category[layerId][targetProperty][knownValue],
-      getActiveCategoryAll:
-        (state) =>
-        ({ layerId, targetProperty }) => {
-          const allValues = Object.values(
-            state.category[layerId][targetProperty]
-          )
-          if (arrayOnlyContains(allValues, true)) {
-            return true
-          }
-          if (arrayOnlyContains(allValues, false)) {
-            return false
-          }
-          return 'indeterminate'
-        },
-      getActiveTime:
-        (state) =>
-        ({ layerId }) =>
-          state.time[layerId].radioId,
-      getCategories: (_, getters) => (layerId) =>
-        getters.filterConfiguration.layers[layerId]?.categories || [],
-      getTimeConfig:
-        (_, { filterConfiguration }) =>
-        (layerId) =>
-          filterConfiguration.layers[layerId]?.time || null,
-      getTimeOptions:
-        (_, { getTimeConfig }) =>
-        (layerId) => {
-          const timeConfig = getTimeConfig(layerId)
-          if (!timeConfig) {
-            return []
-          }
-          return [
-            ...(timeConfig.last || []).map(parseTimeOption('last')).flat(1),
-            ...(timeConfig.next || []).map(parseTimeOption('next')).flat(1),
-            ...(!timeConfig.freeSelection
-              ? []
-              : [
-                  {
-                    label: 'plugins.filter.time.chooseTimeFrame.label',
-                    component: ChooseTimeFrame,
-                    amount: null,
-                    unit: timeConfig.freeSelection.unit || 'days',
-                    now: timeConfig.freeSelection.now,
-                    type: 'freeSelection',
-                  },
-                ]),
-          ]
-        },
-      getFreeSelection: (state) => (layerId: string) =>
-        state.time[layerId].freeSelection,
-    },
-  }
-
-  return storeModule
-}
diff --git a/vue2/packages/plugins/Filter/src/types.ts b/vue2/packages/plugins/Filter/src/types.ts
deleted file mode 100644
index 1c00f56140..0000000000
--- a/vue2/packages/plugins/Filter/src/types.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { FilterConfiguration } from '@polar/lib-custom-types'
-import Vue from 'vue'
-
-export type LayerId = string
-export type TargetProperty = string
-export type KnownValue = string
-export type DatePattern = string
-export interface TimeLayerEntry {
-  targetProperty: TargetProperty
-  pattern: DatePattern
-  radioId: number
-  freeSelection: Date[]
-}
-export interface TimeOption {
-  label: string
-  component: Vue | null
-  amount: number | null
-  unit: 'days'
-  now: 'until' | 'from' | null
-  type: 'last' | 'next' | 'freeSelection'
-}
-
-export interface FilterState {
-  category: Record<LayerId, Record<TargetProperty, Record<KnownValue, boolean>>>
-  time: Record<LayerId, TimeLayerEntry>
-}
-
-export interface FilterGetters extends FilterState {
-  filterConfiguration: FilterConfiguration
-  getActiveCategory: ({
-    layerId,
-    targetProperty,
-    knownValue,
-  }: {
-    layerId: LayerId
-    targetProperty: TargetProperty
-    knownValue: KnownValue
-  }) => boolean
-  getActiveCategoryAll: ({
-    layerId,
-    targetProperty,
-  }: {
-    layerId: LayerId
-    targetProperty: TargetProperty
-  }) => boolean | 'indeterminate'
-  getActiveTime: ({ layerId }: { layerId: LayerId }) => number
-  getCategories: (
-    layerId: LayerId
-  ) => FilterConfiguration['layers'][string]['categories']
-  getTimeConfig: (
-    layerId: LayerId
-  ) => FilterConfiguration['layers'][string]['time']
-  getTimeOptions: (layerId: LayerId) => TimeOption[]
-  getFreeSelection: (layerId: LayerId) => TimeLayerEntry['freeSelection']
-}
diff --git a/vue2/packages/plugins/Filter/src/utils/arrayOnlyContains.ts b/vue2/packages/plugins/Filter/src/utils/arrayOnlyContains.ts
deleted file mode 100644
index 126c612772..0000000000
--- a/vue2/packages/plugins/Filter/src/utils/arrayOnlyContains.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export const arrayOnlyContains = (array: unknown[], value: unknown) =>
-  array.reduce((accumulator, current) => accumulator && current === value, true)
diff --git a/vue2/packages/plugins/Filter/src/utils/parseTimeOption.ts b/vue2/packages/plugins/Filter/src/utils/parseTimeOption.ts
deleted file mode 100644
index cf81a54cd3..0000000000
--- a/vue2/packages/plugins/Filter/src/utils/parseTimeOption.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { FilterConfigurationTimeOption } from '@polar/lib-custom-types'
-import { TimeOption } from '../types'
-
-export const parseTimeOption =
-  (timeDirection: 'last' | 'next') =>
-  (config: FilterConfigurationTimeOption): TimeOption[] =>
-    config.amounts.map((amount) => ({
-      label: `plugins.filter.time.${timeDirection}.${config.unit || 'days'}`,
-      component: null,
-      amount,
-      unit: config.unit || 'days',
-      now: null,
-      type: timeDirection,
-    }))
diff --git a/vue2/packages/plugins/Filter/src/utils/setState.ts b/vue2/packages/plugins/Filter/src/utils/setState.ts
deleted file mode 100644
index 2b0bcfb24d..0000000000
--- a/vue2/packages/plugins/Filter/src/utils/setState.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import Vue from 'vue'
-
-export const setState = (state: object, path: string[], value: unknown) => {
-  if (path.length === 1) {
-    Vue.set(state, path[0], value)
-    return
-  }
-  const [step, ...restPath] = path
-  if (!state[step]) {
-    Vue.set(state, step, {})
-  }
-  setState(state[step], restPath, value)
-}
diff --git a/vue2/packages/plugins/Filter/src/utils/updateFeatureVisibility.ts b/vue2/packages/plugins/Filter/src/utils/updateFeatureVisibility.ts
deleted file mode 100644
index b83efdcdda..0000000000
--- a/vue2/packages/plugins/Filter/src/utils/updateFeatureVisibility.ts
+++ /dev/null
@@ -1,169 +0,0 @@
-import { Feature, Map } from 'ol'
-import { InvisibleStyle } from '@polar/lib-invisible-style'
-import { FilterConfiguration } from '@polar/lib-custom-types'
-import ClusterSource from 'ol/source/Cluster'
-import BaseLayer from 'ol/layer/Base'
-import { DatePattern, FilterState, LayerId, TimeOption } from '../types'
-
-const doesFeaturePassCategoryFilter = (
-  categories: FilterConfiguration['layers'][string]['categories'],
-  category: FilterState['category'],
-  feature: Feature,
-  layerId: LayerId
-) =>
-  (categories || []).every(
-    ({ targetProperty }) =>
-      category[layerId][targetProperty][feature.get(targetProperty)]
-  )
-
-const getFreeSelectionLimits = (clickLimits: Date[]): Date[] => {
-  const limits = clickLimits
-    .slice(0, 2)
-    .sort()
-    .map((x) => new Date(x))
-  if (!limits[1]) {
-    limits[1] = new Date(limits[0])
-  }
-  return limits
-}
-
-const getDateFromValue = (
-  propertyValue: string,
-  pattern: DatePattern
-): Date => {
-  const yearIndices: number[] = []
-  const monthIndices: number[] = []
-  const dayIndices: number[] = []
-  const indexLookup = {
-    Y: yearIndices,
-    M: monthIndices,
-    D: dayIndices,
-  }
-  ;[...pattern].forEach((letter, index) => indexLookup[letter]?.push?.(index))
-  function getFromPropertyValue(index: number) {
-    return propertyValue[index]
-  }
-  return new Date(
-    Number(yearIndices.map(getFromPropertyValue).join('')),
-    Number(monthIndices.map(getFromPropertyValue).join('')) - 1,
-    Number(dayIndices.map(getFromPropertyValue).join(''))
-  )
-}
-
-const doesFeaturePassTimeFilter = (
-  layerId: LayerId,
-  time: FilterState['time'],
-  timeOptions: TimeOption[],
-  feature: Feature
-): boolean => {
-  // radioId=0 means 'no restriction'
-  if (!time || !time[layerId] || time[layerId].radioId === 0) {
-    return true
-  }
-  const { targetProperty, radioId, pattern } = time[layerId]
-  const selectedTimeFilter = timeOptions[radioId - 1]
-  const propertyValue = feature.get(targetProperty)
-  const featureDate = getDateFromValue(propertyValue, pattern)
-  const { type, amount, unit } = selectedTimeFilter
-
-  // only unit 'days' currently supported
-  const unitMilliseconds = {
-    days: 24 * 60 * 60 * 1000,
-  }[unit || 'days']
-  const limits: Date[] = []
-
-  if (type === 'freeSelection') {
-    const chosenLimits = time[layerId].freeSelection
-    if (chosenLimits.length === 0) {
-      // no limits selected? feature passes automatically
-      return true
-    }
-    ;[limits[0], limits[1]] = getFreeSelectionLimits(chosenLimits)
-  } else {
-    limits[type === 'last' ? 0 : 1] = new Date(
-      // @ts-expect-error | amount is number in last/next case
-      Date.now() - amount * unitMilliseconds
-    )
-    limits[type === 'last' ? 1 : 0] = new Date(Date.now())
-  }
-  limits[0].setHours(0, 0, 0, 0)
-  limits[1].setHours(23, 59, 59, 999)
-
-  return limits[0] <= featureDate && featureDate <= limits[1]
-}
-
-const doesFeaturePassFilter = (
-  feature: Feature,
-  { category, time }: FilterState,
-  categories: FilterConfiguration['layers'][string]['categories'],
-  layerId: LayerId,
-  timeOptions: TimeOption[]
-): boolean => {
-  if (
-    category &&
-    !doesFeaturePassCategoryFilter(categories, category, feature, layerId)
-  ) {
-    return false
-  }
-
-  return Boolean(
-    time && doesFeaturePassTimeFilter(layerId, time, timeOptions, feature)
-  )
-}
-
-export const getLayer = (map: Map, layerId: LayerId): BaseLayer => {
-  const layer = map
-    .getLayers()
-    .getArray()
-    .find((layer) => layer.get('id') === layerId)
-  if (!layer) {
-    throw new Error(
-      `Layer ${layerId} undefined in Filter.utils.updateFeatureVisibility.`
-    )
-  }
-  return layer
-}
-
-export const updateFeatureVisibility = ({
-  map,
-  layerId,
-  state,
-  categories,
-  timeOptions,
-}: {
-  map: Map
-  layerId: LayerId
-  state: FilterState
-  categories: FilterConfiguration['layers'][string]['categories']
-  timeOptions: TimeOption[]
-}) => {
-  const layer = getLayer(map, layerId)
-
-  // @ts-expect-error | only layers with getSource allowed
-  let source = layer.getSource()
-  while (source instanceof ClusterSource) {
-    source = source.getSource()
-  }
-  const updateFeatures = source
-    .getFeatures()
-    .map((feature) => feature.get('features') || [feature])
-    .flat(1)
-  // only update finally to prevent overly recalculating clusters
-  source.clear()
-
-  updateFeatures.forEach((feature) => {
-    const targetStyle = doesFeaturePassFilter(
-      feature,
-      state,
-      categories,
-      layerId,
-      timeOptions
-    )
-      ? null
-      : InvisibleStyle
-    if (feature.getStyle() !== targetStyle) {
-      feature.setStyle(targetStyle)
-    }
-  })
-  source.addFeatures(updateFeatures)
-}
diff --git a/vue2/packages/plugins/Filter/vite.config.js b/vue2/packages/plugins/Filter/vite.config.js
deleted file mode 100644
index 0d2ec38a15..0000000000
--- a/vue2/packages/plugins/Filter/vite.config.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { getCodeConfig } from '../../../viteConfigs'
-
-export default getCodeConfig()