diff --git a/apps/geoportal/src/app/components/GeoportalMap/GeoportalMap.tsx b/apps/geoportal/src/app/components/GeoportalMap/GeoportalMap.tsx
index 08eb0d7cb0..4ee32f7ac2 100644
--- a/apps/geoportal/src/app/components/GeoportalMap/GeoportalMap.tsx
+++ b/apps/geoportal/src/app/components/GeoportalMap/GeoportalMap.tsx
@@ -100,8 +100,13 @@ import {
   getLayersIdle,
   getShowHamburgerMenu,
   setLayersIdle,
+  setMaplibreMaps,
 } from "../../store/slices/mapping.ts";
-import { getUIMode, UIMode } from "../../store/slices/ui.ts";
+import {
+  getUIMode,
+  UIMode,
+  getTriggerFeatureInfoUpdate,
+} from "../../store/slices/ui.ts";
 
 import LoginForm from "../LoginForm.tsx";
 import { useModelSelectionDispatcher } from "../../hooks/useModelSelectionDispatcher.ts";
@@ -215,6 +220,7 @@ export const GeoportalMap = ({ height, width, allow3d }: MapProps) => {
   const [shouldUpdateFeatureInfo, setShouldUpdateFeatureInfo] =
     useState<boolean>(false);
   const layersIdle = useSelector(getLayersIdle);
+  const triggerFeatureInfoUpdate = useSelector(getTriggerFeatureInfoUpdate);
 
   const version = getApplicationVersion(versionData);
 
@@ -528,10 +534,11 @@ export const GeoportalMap = ({ height, width, allow3d }: MapProps) => {
   );
 
   useEffect(() => {
-    if (shouldUpdateFeatureInfo) updateFeatureInfoLeaflet();
+    if (shouldUpdateFeatureInfo || triggerFeatureInfoUpdate > 0)
+      updateFeatureInfoLeaflet();
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [shouldUpdateFeatureInfo]);
+  }, [shouldUpdateFeatureInfo, triggerFeatureInfoUpdate]);
 
   const topicMapLocationChangedHandler = useCallback(
     (p: { lat: number; lng: number; zoom: number }) => {
@@ -588,6 +595,7 @@ export const GeoportalMap = ({ height, width, allow3d }: MapProps) => {
       selectedFeature,
       leafletMap: getLeafletMap(),
       maplibreMapsRef,
+      setMaplibreMaps: (entry) => dispatch(setMaplibreMaps(entry)),
     }),
     [
       uiMode,
@@ -596,6 +604,7 @@ export const GeoportalMap = ({ height, width, allow3d }: MapProps) => {
       selectedFeature,
       getLeafletMap,
       maplibreMapsRef,
+      setMaplibreMaps,
     ]
   );
 
diff --git a/apps/geoportal/src/app/components/GeoportalMap/hooks/useCreateCismapLayer.ts b/apps/geoportal/src/app/components/GeoportalMap/hooks/useCreateCismapLayer.ts
index 00b81d32cc..d12cf749cc 100644
--- a/apps/geoportal/src/app/components/GeoportalMap/hooks/useCreateCismapLayer.ts
+++ b/apps/geoportal/src/app/components/GeoportalMap/hooks/useCreateCismapLayer.ts
@@ -72,6 +72,7 @@ export const useCreateCismapLayers = (
     selectedFeature,
     leafletMap,
     maplibreMapsRef,
+    setMaplibreMaps,
   }: {
     mode: UIMode;
     dispatch: Dispatch;
@@ -79,6 +80,7 @@ export const useCreateCismapLayers = (
     selectedFeature: any;
     leafletMap: LeafletMap;
     maplibreMapsRef?: React.MutableRefObject<Map<string, any>>;
+    setMaplibreMaps?: (entry: { id: string; map: any }) => void;
   }
 ) => {
   const [globalHits, setGlobalHits] = useState({});
@@ -272,6 +274,9 @@ export const useCreateCismapLayers = (
               if (maplibreMapsRef) {
                 maplibreMapsRef.current.set(layer.id, map);
               }
+              if (setMaplibreMaps) {
+                setMaplibreMaps({ id: layer.id, map });
+              }
             },
             onStyleIdle: (e) => {
               setIdleLayers((old) => {
diff --git a/apps/geoportal/src/app/components/GeoportalMap/topicmap.utils.ts b/apps/geoportal/src/app/components/GeoportalMap/topicmap.utils.ts
index 8371bde88b..e1951d087b 100644
--- a/apps/geoportal/src/app/components/GeoportalMap/topicmap.utils.ts
+++ b/apps/geoportal/src/app/components/GeoportalMap/topicmap.utils.ts
@@ -456,6 +456,7 @@ const createVectorFeature = async (
       geometry: selectedVectorFeature.geometry,
       id: layer.id,
       vectorId: selectedVectorFeature.id,
+      sourceFeature: selectedVectorFeature,
       showMarker:
         selectedVectorFeature.geometry.type === "Polygon" ||
         selectedVectorFeature.geometry.type === "MultiPolygon",
diff --git a/apps/geoportal/src/app/components/layers/GeoportalLayerButton.tsx b/apps/geoportal/src/app/components/layers/GeoportalLayerButton.tsx
index 3c06d270ec..691ff0e0cc 100644
--- a/apps/geoportal/src/app/components/layers/GeoportalLayerButton.tsx
+++ b/apps/geoportal/src/app/components/layers/GeoportalLayerButton.tsx
@@ -7,7 +7,12 @@ import { useDispatch, useSelector } from "react-redux";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 
-import { faEye, faEyeSlash, faX } from "@fortawesome/free-solid-svg-icons";
+import {
+  faEye,
+  faEyeSlash,
+  faFilter,
+  faX,
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import L from "leaflet";
 
@@ -15,6 +20,7 @@ import { TopicMapContext } from "react-cismap/contexts/TopicMapContextProvider";
 
 import type { Layer } from "@carma/types";
 import { cn, getHashParams } from "@carma-commons/utils";
+import type { FilterInfo } from "@carma-mapping/components";
 
 import { updateInfoElementsAfterRemovingFeature } from "../../store/slices/features";
 import {
@@ -22,11 +28,13 @@ import {
   getClickFromInfoView,
   getLayers,
   getSelectedLayerIndex,
+  getActiveFilterLayerID,
   getShowLeftScrollButton,
   removeLayer,
   setClickFromInfoView,
   setSelectedLayerIndex,
   setSelectedLayerIndexNoSelection,
+  setActiveFilterLayerID,
   setShowLeftScrollButton,
   setShowRightScrollButton,
   toggleUseInFeatureInfo,
@@ -40,7 +48,7 @@ import "./pulsing.css";
 import "./tabs.css";
 
 import { LayerButton, LayerIcon } from "@carma-mapping/components";
-import { Spin } from "antd";
+import { Badge, Spin } from "antd";
 import { LoadingOutlined } from "@ant-design/icons";
 import { useLayerLoading } from "@carma-mapping/utils";
 
@@ -51,6 +59,7 @@ interface LayerButtonProps {
   icon?: string;
   layer: Layer;
   background?: boolean;
+  filterInfo?: FilterInfo;
 }
 
 const GeoportalLayerButton = ({
@@ -60,6 +69,7 @@ const GeoportalLayerButton = ({
   icon,
   layer,
   background,
+  filterInfo,
 }: LayerButtonProps) => {
   const { ref, inView } = useInView({
     threshold: 0.99,
@@ -84,6 +94,7 @@ const GeoportalLayerButton = ({
   const showLayerHideButtons = useSelector(getUIShowLayerHideButtons);
   const showLeftScrollButton = useSelector(getShowLeftScrollButton);
   const clickFromInfoView = useSelector(getClickFromInfoView);
+  const activeFilterLayerID = useSelector(getActiveFilterLayerID);
   const mode = useSelector(getUIMode);
   const showSettings = index === selectedLayerIndex;
   const layers = useSelector(getLayers);
@@ -202,6 +213,42 @@ const GeoportalLayerButton = ({
         {!background && (
           <>
             <span className="text-base ml-1">{title}</span>
+            {layer.filterConfig && (
+              <button
+                id={`filterLayerButton-${id}`}
+                className={cn("px-1.5 flex items-center justify-center")}
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  dispatch(
+                    setActiveFilterLayerID(
+                      activeFilterLayerID === id ? null : id
+                    )
+                  );
+                }}
+              >
+                <Badge
+                  count={
+                    filterInfo && !filterInfo.isShowingAll
+                      ? filterInfo.activeCount
+                      : 0
+                  }
+                  size="small"
+                  color={"#4b5563"}
+                >
+                  <FontAwesomeIcon
+                    icon={faFilter}
+                    className={cn(
+                      "text-sm",
+                      activeFilterLayerID === id
+                        ? "text-[#1677ff]"
+                        : "text-gray-600 hover:text-gray-500"
+                    )}
+                  />
+                </Badge>
+              </button>
+            )}
+
             <button
               id={`removeLayerButton-${id}`}
               className="hover:text-gray-500 text-gray-600 px-1.5 flex items-center justify-center"
diff --git a/apps/geoportal/src/app/components/layers/LayerWrapper.tsx b/apps/geoportal/src/app/components/layers/LayerWrapper.tsx
index 02f7f5896f..7fe6981367 100644
--- a/apps/geoportal/src/app/components/layers/LayerWrapper.tsx
+++ b/apps/geoportal/src/app/components/layers/LayerWrapper.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 
-import { useContext, useEffect } from "react";
+import { useContext, useEffect, useMemo, useState, useRef } from "react";
 import { useDispatch, useSelector } from "react-redux";
 
 import {
@@ -27,6 +27,10 @@ import { useWindowSize } from "@uidotdev/usehooks";
 import { TopicMapContext } from "react-cismap/contexts/TopicMapContextProvider";
 
 import { cn } from "@carma-commons/utils";
+import {
+  createFilterButtons,
+  type FilterInfo,
+} from "@carma-mapping/components";
 
 import { AppDispatch } from "../../store";
 import {
@@ -34,6 +38,7 @@ import {
   getLayers,
   getSelectedLayerIndex,
   getSelectedLayerIndexIsNoSelection,
+  getActiveFilterLayerID,
   getShowLeftScrollButton,
   getShowRightScrollButton,
   setLayers,
@@ -41,7 +46,19 @@ import {
   setSelectedLayerIndexNoSelection,
   setShowLeftScrollButton,
   setShowRightScrollButton,
+  getMaplibreMaps,
 } from "../../store/slices/mapping";
+import {
+  getFeatures,
+  getSelectedFeature,
+  getSecondaryInfoBoxElements,
+  setSelectedFeature as setSelectedFeatureAction,
+} from "../../store/slices/features";
+import {
+  getUIMode,
+  triggerFeatureInfoUpdateAction,
+  UIMode,
+} from "../../store/slices/ui";
 import GeoportalLayerButton from "./GeoportalLayerButton";
 import SecondaryView from "./SecondaryView";
 
@@ -52,13 +69,25 @@ const LayerWrapper = () => {
   const { routedMapRef } = useContext<typeof TopicMapContext>(TopicMapContext);
   const size = useWindowSize();
 
+  const [layerFilterInfo, setLayerFilterInfo] = useState<
+    Record<string, FilterInfo>
+  >({});
+
+  const filterComponentsCache = useRef<Map<string, any>>(new Map());
+
   const layers = useSelector(getLayers);
   const backgroundLayer = useSelector(getBackgroundLayer);
+  const maplibreMaps = useSelector(getMaplibreMaps);
+  const selectedFeature = useSelector(getSelectedFeature);
+  const uiMode = useSelector(getUIMode);
 
   const selectedLayerIndex = useSelector(getSelectedLayerIndex);
   const isNoSelectionIndex = useSelector(getSelectedLayerIndexIsNoSelection);
   const showLeftScrollButton = useSelector(getShowLeftScrollButton);
   const showRightScrollButton = useSelector(getShowRightScrollButton);
+  const activeFilterLayerID = useSelector(getActiveFilterLayerID);
+
+  const isModeFeatureInfo = uiMode === UIMode.FEATURE_INFO;
 
   const { isOver, setNodeRef } = useDroppable({
     id: "droppable",
@@ -100,6 +129,34 @@ const LayerWrapper = () => {
     }
   }, [size]);
 
+  // Create filter components for all layers that have filterConfig
+  // We render all but hide inactive ones to preserve state
+  // Cache components by layer ID to preserve state when layers are reordered
+  const filterComponents = useMemo(() => {
+    const cache = filterComponentsCache.current;
+
+    const currentLayerIds = new Set(layers.map((l) => l.id));
+    for (const [id] of cache) {
+      if (!currentLayerIds.has(id)) {
+        cache.delete(id);
+      }
+    }
+
+    layers.forEach((layer) => {
+      if (layer.filterConfig && !cache.has(layer.id)) {
+        cache.set(layer.id, {
+          id: layer.id,
+          Component: createFilterButtons(layer.filterConfig),
+        });
+      }
+    });
+
+    // Return only components for layers that currently exist and have filterConfig
+    return layers
+      .filter((layer) => layer.filterConfig && cache.has(layer.id))
+      .map((layer) => cache.get(layer.id));
+  }, [layers]);
+
   console.debug("RENDER: LayerWrapper selectedLayerIndex", selectedLayerIndex);
 
   return (
@@ -189,6 +246,7 @@ const LayerWrapper = () => {
                             : undefined
                         }
                         layer={layer}
+                        filterInfo={layerFilterInfo[layer.id]}
                       />
                     ))}
                   </SortableContext>
@@ -199,6 +257,39 @@ const LayerWrapper = () => {
         </div>
       </DndContext>
 
+      {filterComponents.map((filterEntry) => {
+        const isActive = filterEntry.id === activeFilterLayerID;
+        const maplibreMap = maplibreMaps
+          ? maplibreMaps.find((entry) => entry.id === filterEntry.id)?.map ??
+            null
+          : null;
+        const FilterComponent = filterEntry.Component;
+        return (
+          <div
+            key={filterEntry.id}
+            className={cn(
+              "pt-3 w-full flex items-center justify-center",
+              !isActive && "hidden"
+            )}
+          >
+            <FilterComponent
+              maplibreMap={maplibreMap}
+              selectedFeature={selectedFeature}
+              skipFeatureMatchCheck={isModeFeatureInfo}
+              setSelectedFeature={(feature) => {
+                dispatch(setSelectedFeatureAction(feature));
+              }}
+              onFilterChange={(info: FilterInfo) => {
+                setLayerFilterInfo((prev) => ({
+                  ...prev,
+                  [filterEntry.id]: info,
+                }));
+                dispatch(triggerFeatureInfoUpdateAction());
+              }}
+            />
+          </div>
+        );
+      })}
       {!isNoSelectionIndex && <SecondaryView />}
     </>
   );
diff --git a/apps/geoportal/src/app/components/layers/SecondaryView.tsx b/apps/geoportal/src/app/components/layers/SecondaryView.tsx
index 55915d1d2d..84307851fd 100644
--- a/apps/geoportal/src/app/components/layers/SecondaryView.tsx
+++ b/apps/geoportal/src/app/components/layers/SecondaryView.tsx
@@ -100,6 +100,9 @@ const SecondaryView = forwardRef<Ref, SecondaryViewProps>(({}, ref) => {
       const openBaseLayerViewButtons = document.querySelectorAll(
         '[id^="openBaseLayerView"]'
       );
+      const filterLayerButtons = document.querySelectorAll(
+        '[id^="filterLayerButton-"]'
+      );
 
       openBaseLayerViewButtons.forEach((layerButton, i) => {
         if (layerButton.contains(event.target as Node)) {
@@ -108,6 +111,13 @@ const SecondaryView = forwardRef<Ref, SecondaryViewProps>(({}, ref) => {
         }
       });
 
+      filterLayerButtons.forEach((filterButton) => {
+        if (filterButton.contains(event.target as Node)) {
+          returnFunction = true;
+          return;
+        }
+      });
+
       const foundElement = findElementByIdRecursive(
         event.target as Element,
         "openBaseLayerView"
@@ -168,7 +178,7 @@ const SecondaryView = forwardRef<Ref, SecondaryViewProps>(({}, ref) => {
       onClick={() => {
         dispatch(setSelectedLayerIndexNoSelection());
       }}
-      className="pt-4 w-full"
+      className="pt-3 w-full"
     >
       <div className="flex items-center justify-center w-full">
         <div
diff --git a/apps/geoportal/src/app/store/slices/mapping.ts b/apps/geoportal/src/app/store/slices/mapping.ts
index 8d95a6dc2b..7d2901c066 100644
--- a/apps/geoportal/src/app/store/slices/mapping.ts
+++ b/apps/geoportal/src/app/store/slices/mapping.ts
@@ -11,14 +11,21 @@ import {
 import { RootState } from "..";
 import { layerMap } from "../../config";
 
+type MapLibreMapEntry = {
+  id: string;
+  map: any;
+};
+
 const defaultOpacity = 0.2;
 
 const initialState: MappingState = {
   layers: [],
   savedLayerConfigs: [],
   selectedLayerIndex: SELECTED_LAYER_INDEX.NO_SELECTION,
+  activeFilterLayerID: null,
   paleOpacityValue: defaultOpacity,
   libreMapRef: null,
+  maplibreMaps: [],
   layersIdle: false,
 
   selectedMapLayer: {
@@ -106,11 +113,20 @@ const slice = createSlice({
       state.layers = newLayers;
     },
     removeLayer(state, action: PayloadAction<string>) {
+      const removedIndex = state.layers.findIndex(
+        (obj) => obj.id === action.payload
+      );
       const newLayers = state.layers.filter((obj) => obj.id !== action.payload);
       if (state.selectedLayerIndex > newLayers.length - 1) {
         state.selectedLayerIndex = newLayers.length - 1;
       }
       state.layers = newLayers;
+      state.maplibreMaps = state.maplibreMaps.filter(
+        (entry) => entry.id !== action.payload
+      );
+      if (state.activeFilterLayerID === action.payload) {
+        state.activeFilterLayerID = null;
+      }
     },
     removeLastLayer(state) {
       const newLayers = state.layers.slice(0, -1);
@@ -227,6 +243,9 @@ const slice = createSlice({
       }
     },
 
+    setActiveFilterLayerID(state, action) {
+      state.activeFilterLayerID = action.payload;
+    },
     setSelectedMapLayer(state, action: PayloadAction<BackgroundLayer>) {
       state.selectedMapLayer = action.payload;
     },
@@ -269,6 +288,18 @@ const slice = createSlice({
     setLibreMapRef(state, action: PayloadAction<any>) {
       state.libreMapRef = action.payload;
     },
+    setMaplibreMaps(state, action: PayloadAction<MapLibreMapEntry>) {
+      const entry = action.payload;
+      const current = state.maplibreMaps;
+      const idx = current.findIndex((e) => e.id === entry.id);
+      if (idx === -1) {
+        state.maplibreMaps = [...current, entry];
+      } else {
+        const next = [...current];
+        next[idx] = entry;
+        state.maplibreMaps = next;
+      }
+    },
     setConfigSelection(state, action: PayloadAction<SelectionItem>) {
       state.configSelection = action.payload;
     },
@@ -298,6 +329,7 @@ export const {
   setSelectedLayerIndexNoSelection,
   setNextSelectedLayerIndex,
   setPreviousSelectedLayerIndex,
+  setActiveFilterLayerID,
   setSelectedMapLayer,
   setBackgroundLayer,
   setSelectedLuftbildLayer,
@@ -314,6 +346,7 @@ export const {
 
   toggleUseInFeatureInfo,
   setLibreMapRef,
+  setMaplibreMaps,
   setConfigSelection,
   setLayersIdle,
 } = slice.actions;
@@ -356,8 +389,11 @@ export const getShowMeasurementButton = (state: RootState) =>
   state.mapping.showMeasurementButton;
 export const getShowRightScrollButton = (state: RootState) =>
   state.mapping.showRightScrollButton;
+export const getActiveFilterLayerID = (state: RootState) =>
+  state.mapping.activeFilterLayerID;
 export const getStartDrawing = (state: RootState) => state.mapping.startDrawing;
 export const getLibreMapRef = (state: RootState) => state.mapping.libreMapRef;
+export const getMaplibreMaps = (state: RootState) => state.mapping.maplibreMaps;
 export const getConfigSelection = (state: RootState) =>
   state.mapping.configSelection;
 export const getLayersIdle = (state: RootState) => state.mapping.layersIdle;
diff --git a/apps/geoportal/src/app/store/slices/ui.ts b/apps/geoportal/src/app/store/slices/ui.ts
index 7f68deb9bf..3240fe47d9 100644
--- a/apps/geoportal/src/app/store/slices/ui.ts
+++ b/apps/geoportal/src/app/store/slices/ui.ts
@@ -23,6 +23,7 @@ export interface UIState {
   showResourceModal: boolean;
   zenMode: boolean;
   showLoginModal: boolean;
+  triggerFeatureInfoUpdate: number;
 }
 
 const initialState: UIState = {
@@ -37,6 +38,7 @@ const initialState: UIState = {
   showResourceModal: false,
   zenMode: false,
   showLoginModal: false,
+  triggerFeatureInfoUpdate: 0,
 };
 
 const slice = createSlice({
@@ -85,6 +87,9 @@ const slice = createSlice({
     setShowLoginModal(state, action: PayloadAction<boolean>) {
       state.showLoginModal = action.payload;
     },
+    triggerFeatureInfoUpdateAction(state) {
+      state.triggerFeatureInfoUpdate = state.triggerFeatureInfoUpdate + 1;
+    },
   },
 });
 
@@ -101,6 +106,7 @@ export const {
   setShowResourceModal,
   setZenMode,
   setShowLoginModal,
+  triggerFeatureInfoUpdateAction,
 } = slice.actions;
 
 export const getUIMode = (state: RootState) => state.ui.mode;
@@ -118,5 +124,7 @@ export const getUIShowResourceModal = (state: RootState) =>
   state.ui.showResourceModal;
 export const getZenMode = (state: RootState) => state.ui.zenMode;
 export const getShowLoginModal = (state: RootState) => state.ui.showLoginModal;
+export const getTriggerFeatureInfoUpdate = (state: RootState) =>
+  state.ui.triggerFeatureInfoUpdate;
 
 export default slice.reducer;
diff --git a/apps/topicmaps/generic/src/app/Map.jsx b/apps/topicmaps/generic/src/app/Map.jsx
index b6c9bf6e60..e69099007b 100644
--- a/apps/topicmaps/generic/src/app/Map.jsx
+++ b/apps/topicmaps/generic/src/app/Map.jsx
@@ -27,9 +27,9 @@ import {
 } from "@carma-appframeworks/portals";
 import { EmptySearchComponent } from "@carma-mapping/fuzzy-search";
 import FuzzySearchWrapper from "./components/FuzzySearchWrapper";
-import { createFilterButtons } from "./components/GenericFilterButtonsFactory";
 import { Control, ControlLayout } from "@carma-mapping/map-controls-layout";
 import {
+  createFilterButtons,
   FullscreenControl,
   RoutedMapLocateControl,
   ZoomControl,
diff --git a/libraries/appframeworks/portals/src/lib/types/index.d.ts b/libraries/appframeworks/portals/src/lib/types/index.d.ts
index 982c7067c3..d898a6834d 100644
--- a/libraries/appframeworks/portals/src/lib/types/index.d.ts
+++ b/libraries/appframeworks/portals/src/lib/types/index.d.ts
@@ -117,6 +117,7 @@ export interface MappingState extends LayerState {
   paleOpacityValue: number;
   showLeftScrollButton: boolean;
   showRightScrollButton: boolean;
+  activeFilterLayerID: string | null;
   showFullscreenButton: boolean;
   showLocatorButton: boolean;
   showMeasurementButton: boolean;
@@ -125,6 +126,7 @@ export interface MappingState extends LayerState {
   startDrawing: boolean;
   clickFromInfoView: boolean;
   libreMapRef: any;
+  maplibreMaps?: any;
   configSelection?: SelectionItem;
   layersIdle: boolean;
 }
diff --git a/libraries/appframeworks/portals/src/lib/utils/utils.ts b/libraries/appframeworks/portals/src/lib/utils/utils.ts
index 7ddb0b2cf4..f99aacdc97 100644
--- a/libraries/appframeworks/portals/src/lib/utils/utils.ts
+++ b/libraries/appframeworks/portals/src/lib/utils/utils.ts
@@ -120,6 +120,7 @@ export const parseToMapLayer = async (
         vectorStyle = layer.vectorStyle;
       }
       let metaData = {};
+      let filterConfig = null;
       if (vectorStyle) {
         zoom = await fetch(vectorStyle)
           .then((response) => {
@@ -133,6 +134,9 @@ export const parseToMapLayer = async (
             if (result.metadata && result.metadata.carmaConf.layerInfo) {
               metaData = result.metadata.carmaConf.layerInfo;
             }
+            if (result.metadata && result.metadata.carmaConf.filterConfig) {
+              filterConfig = result.metadata.carmaConf.filterConfig;
+            }
             return parsedZoom;
           });
       }
@@ -168,6 +172,7 @@ export const parseToMapLayer = async (
           capabilitiesUrl: capabilitiesUrl,
           ...metaData,
         },
+        filterConfig,
       };
     } else {
       switch (layer.layerType) {
diff --git a/libraries/mapping/components/src/index.ts b/libraries/mapping/components/src/index.ts
index f95b848946..cb15569467 100644
--- a/libraries/mapping/components/src/index.ts
+++ b/libraries/mapping/components/src/index.ts
@@ -1,4 +1,11 @@
 export { FontAwesomeLikeIcon } from "./lib/components/FontAwesomeLikeIcon.tsx";
+export {
+  createFilterButtons,
+  type FilterConfig,
+  type FilterInfo,
+  type FilterOption,
+  type GenericFilterButtonsProps,
+} from "./lib/components/GenericFilterButtonsFactory.tsx";
 
 export {
   FullscreenControl,
diff --git a/libraries/mapping/components/src/lib/components/GenericFilterButtonsFactory.tsx b/libraries/mapping/components/src/lib/components/GenericFilterButtonsFactory.tsx
new file mode 100644
index 0000000000..a46cc21a16
--- /dev/null
+++ b/libraries/mapping/components/src/lib/components/GenericFilterButtonsFactory.tsx
@@ -0,0 +1,402 @@
+import { useState, useEffect, ReactNode } from "react";
+
+// Types for filter configuration
+export interface FilterOption {
+  key: string;
+  label: string;
+  icon?: string;
+  /** Alternative icon to show when filter is inactive (e.g., red dot vs green dot) */
+  inactiveIcon?: string;
+  /** Property name in the feature to check */
+  propertyName: string;
+  /** Value that the property should have when filter is active */
+  propertyValue: string;
+  /** Whether to show icon in grayscale when not selected (ignored if inactiveIcon is set) */
+  grayscaleWhenInactive?: boolean;
+}
+
+export interface FilterConfig {
+  /** The "show all" button label (not shown if filterMode is "or") */
+  allLabel?: string;
+  /** Layer name pattern to match (case-insensitive includes) */
+  layerPattern: string;
+  /** Filter mode: "and" (all conditions must match) or "or" (any condition matches). Default: "and" */
+  filterMode?: "and" | "or";
+  /** Available filter options */
+  filters: FilterOption[];
+  /** Style customizations */
+  styles?: {
+    buttonBorderRadius?: string;
+    /** Border color when selected. Set to "none" to disable border entirely. */
+    selectedBorderColor?: string;
+    iconSize?: string;
+    fontSize?: string;
+    gap?: string;
+    maxWidth?: string;
+  };
+}
+
+export interface FilterInfo {
+  activeCount: number;
+  totalCount: number;
+  isShowingAll: boolean;
+}
+
+export interface GenericFilterButtonsProps {
+  maplibreMap: any;
+  selectedFeature: any;
+  setSelectedFeature: (feature: any) => void;
+  config: FilterConfig;
+  onFilterChange?: (filterInfo: FilterInfo) => void;
+  skipFeatureMatchCheck?: boolean;
+}
+
+type FilterState = Record<string, boolean>;
+
+export const createFilterButtons = (config: FilterConfig) => {
+  const isOrMode = config.filterMode === "or";
+
+  const GenericFilterButtons = ({
+    maplibreMap,
+    selectedFeature,
+    setSelectedFeature,
+    onFilterChange,
+    skipFeatureMatchCheck = false,
+  }: Omit<GenericFilterButtonsProps, "config">) => {
+    // Initialize filter state
+    // In AND mode: "alle" starts as true, all filters false
+    // In OR mode: no "alle" button, all filters start as true (show all)
+    const initialState: FilterState = isOrMode
+      ? config.filters.reduce(
+          (acc, filter) => ({ ...acc, [filter.key]: true }),
+          {}
+        )
+      : {
+          alle: true,
+          ...config.filters.reduce(
+            (acc, filter) => ({ ...acc, [filter.key]: false }),
+            {}
+          ),
+        };
+
+    const [selectedFilters, setSelectedFilters] =
+      useState<FilterState>(initialState);
+
+    // Store original layer filters (captured once when map is ready)
+    const [originalFilters, setOriginalFilters] = useState<
+      Record<string, any[] | null>
+    >({});
+
+    // Function to build filter expression from selected filters
+    const buildFilterExpression = (filters: FilterState): any[] | null => {
+      if (isOrMode) {
+        // OR mode: show features matching ANY of the selected filters
+        const conditions: any[] = [];
+
+        config.filters.forEach((filterOption) => {
+          if (filters[filterOption.key]) {
+            conditions.push([
+              "==",
+              ["get", filterOption.propertyName],
+              filterOption.propertyValue,
+            ]);
+          }
+        });
+
+        // If no filters selected, hide all features using a filter that can never match
+        if (conditions.length === 0) {
+          return [
+            "==",
+            ["get", config.filters[0]?.propertyName || "wohnlage"],
+            "___HIDE_ALL___",
+          ];
+        }
+
+        // Always use explicit filter expression (don't optimize to null)
+        return ["any", ...conditions];
+      } else {
+        // AND mode: show features matching ALL selected filters
+        if (filters.alle) {
+          return null;
+        }
+
+        const conditions: any[] = [];
+
+        config.filters.forEach((filterOption) => {
+          if (filters[filterOption.key]) {
+            conditions.push([
+              "==",
+              ["get", filterOption.propertyName],
+              filterOption.propertyValue,
+            ]);
+          }
+        });
+
+        if (conditions.length > 0) {
+          return ["all", ...conditions];
+        }
+
+        return null;
+      }
+    };
+
+    // Function to check if a feature matches the current filter criteria
+    const checkFeatureMatchesFilter = (
+      feature: any,
+      filters: FilterState
+    ): boolean => {
+      if (!feature?.properties) return false;
+
+      const props = feature.properties;
+
+      if (isOrMode) {
+        // OR mode: feature matches if it matches ANY selected filter
+        const selectedFilterOptions = config.filters.filter(
+          (f) => filters[f.key]
+        );
+
+        // If no filters selected, nothing matches
+        if (selectedFilterOptions.length === 0) return false;
+
+        // If all filters selected, everything matches
+        if (selectedFilterOptions.length === config.filters.length) return true;
+
+        // Check if feature matches any selected filter
+        return selectedFilterOptions.some(
+          (filterOption) =>
+            props[filterOption.propertyName] === filterOption.propertyValue
+        );
+      } else {
+        // AND mode: feature matches if it matches ALL selected filters
+        if (filters.alle) return true;
+
+        for (const filterOption of config.filters) {
+          if (
+            filters[filterOption.key] &&
+            props[filterOption.propertyName] !== filterOption.propertyValue
+          ) {
+            return false;
+          }
+        }
+
+        return true;
+      }
+    };
+
+    // Style function for filter buttons
+    const getFilterButtonStyle = (isSelected: boolean) => {
+      const borderColor = config.styles?.selectedBorderColor;
+      const showBorder = isSelected && borderColor !== "none";
+
+      return {
+        display: "flex",
+        alignItems: "center",
+        gap: "6px",
+        backgroundColor: "white",
+        padding: "6px 12px",
+        borderRadius: config.styles?.buttonBorderRadius || "10px",
+        boxShadow: "0 2px 4px rgba(0,0,0,0.2)",
+        cursor: "pointer",
+        height: "28px",
+        border: showBorder
+          ? `2px solid ${borderColor || "#4378ccCC"}`
+          : "2px solid transparent",
+      };
+    };
+
+    // Capture original filters once when map becomes available
+    useEffect(() => {
+      if (!maplibreMap) return;
+      if (Object.keys(originalFilters).length > 0) return; // Already captured
+
+      const layers = maplibreMap.getStyle()?.layers || [];
+      const targetLayers = layers.filter((layer: any) =>
+        layer.id.toLowerCase().includes(config.layerPattern.toLowerCase())
+      );
+
+      const captured: Record<string, any[] | null> = {};
+      targetLayers.forEach((layer: any) => {
+        captured[layer.id] = layer.filter || null;
+      });
+
+      setOriginalFilters(captured);
+    }, [maplibreMap]);
+
+    // Apply filters to the map whenever selectedFilters or maplibreMap changes
+    useEffect(() => {
+      if (!maplibreMap) return;
+      if (Object.keys(originalFilters).length === 0) return; // Wait for original filters to be captured
+
+      try {
+        const targetLayerIds = Object.keys(originalFilters);
+
+        const filterExpression = buildFilterExpression(selectedFilters);
+
+        targetLayerIds.forEach((layerId: string) => {
+          try {
+            // Get the ORIGINAL filter (not the current one which may have our filter applied)
+            const origFilter = originalFilters[layerId];
+
+            let combinedFilter = filterExpression;
+
+            // If layer has an original filter, combine it with our filter using "all"
+            if (origFilter && filterExpression) {
+              combinedFilter = ["all", origFilter, filterExpression];
+            } else if (origFilter && !filterExpression) {
+              combinedFilter = origFilter;
+            }
+
+            maplibreMap.setFilter(layerId, combinedFilter);
+          } catch (error) {
+            console.error(`Error setting filter on layer ${layerId}:`, error);
+          }
+        });
+
+        // Check if selected feature still matches the new filter criteria
+        if (!skipFeatureMatchCheck && selectedFeature?.sourceFeature) {
+          const matchesFilter = checkFeatureMatchesFilter(
+            selectedFeature.sourceFeature,
+            selectedFilters
+          );
+
+          if (!matchesFilter) {
+            maplibreMap.setFeatureState(
+              {
+                source: selectedFeature.sourceFeature.source,
+                sourceLayer: selectedFeature.sourceFeature.sourceLayer,
+                id: selectedFeature.sourceFeature.id,
+              },
+              { selected: false }
+            );
+
+            setSelectedFeature(undefined);
+          }
+        }
+      } catch (error) {
+        console.error("Error applying filters:", error);
+      }
+    }, [selectedFilters, maplibreMap, selectedFeature]);
+
+    const computeFilterInfo = (filters: FilterState): FilterInfo => {
+      if (isOrMode) {
+        const activeCount = config.filters.filter((f) => filters[f.key]).length;
+        return {
+          activeCount: config.filters.length - activeCount, // In OR mode, count deselected as "filtered out"
+          totalCount: config.filters.length,
+          isShowingAll: activeCount === config.filters.length,
+        };
+      } else {
+        const activeCount = config.filters.filter((f) => filters[f.key]).length;
+        return {
+          activeCount,
+          totalCount: config.filters.length,
+          isShowingAll: filters.alle === true,
+        };
+      }
+    };
+
+    useEffect(() => {
+      if (onFilterChange) {
+        onFilterChange(computeFilterInfo(selectedFilters));
+      }
+    }, [selectedFilters]);
+
+    const handleFilterClick = (filterName: string) => {
+      if (isOrMode) {
+        // OR mode: simple toggle, no "alle" button
+        setSelectedFilters((prev) => ({
+          ...prev,
+          [filterName]: !prev[filterName],
+        }));
+      } else {
+        // AND mode: original behavior with "alle" button
+        if (filterName === "alle") {
+          setSelectedFilters({
+            alle: true,
+            ...config.filters.reduce(
+              (acc, filter) => ({ ...acc, [filter.key]: false }),
+              {}
+            ),
+          });
+        } else {
+          setSelectedFilters((prev) => {
+            const newFilters = {
+              ...prev,
+              alle: false,
+              [filterName]: !prev[filterName],
+            };
+
+            const hasIconSelection = config.filters.some(
+              (f) => newFilters[f.key]
+            );
+            if (!hasIconSelection) {
+              newFilters.alle = true;
+            }
+
+            return newFilters;
+          });
+        }
+      }
+    };
+
+    const iconSize = config.styles?.iconSize || "18px";
+
+    return (
+      <div
+        style={{
+          fontSize: config.styles?.fontSize || "13px",
+          marginTop: "1px",
+          display: "flex",
+          flexWrap: "wrap",
+          justifyContent: "center",
+          gap: config.styles?.gap || "8px",
+          maxWidth: config.styles?.maxWidth || "calc(100vw - 120px)",
+          marginLeft: "auto",
+          marginRight: "auto",
+        }}
+      >
+        {!isOrMode && (
+          <div
+            onClick={() => handleFilterClick("alle")}
+            style={getFilterButtonStyle(selectedFilters.alle)}
+          >
+            <span>{config.allLabel}</span>
+          </div>
+        )}
+        {config.filters.map((filterOption) => {
+          const isActive = selectedFilters[filterOption.key];
+          const iconSrc = isActive
+            ? filterOption.icon
+            : filterOption.inactiveIcon || filterOption.icon;
+          const shouldGrayscale =
+            !isActive &&
+            !filterOption.inactiveIcon &&
+            filterOption.grayscaleWhenInactive !== false;
+
+          return (
+            <div
+              key={filterOption.key}
+              onClick={() => handleFilterClick(filterOption.key)}
+              style={getFilterButtonStyle(isActive)}
+            >
+              {iconSrc && (
+                <img
+                  src={iconSrc}
+                  alt=""
+                  style={{
+                    width: iconSize,
+                    height: iconSize,
+                    filter: shouldGrayscale ? "grayscale(100%)" : "none",
+                  }}
+                />
+              )}
+              <span className="filter-button-text">{filterOption.label}</span>
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  return GenericFilterButtons;
+};
diff --git a/libraries/types/src/lib/carma-layers.d.ts b/libraries/types/src/lib/carma-layers.d.ts
index c4d5a8fa95..e723ce70de 100644
--- a/libraries/types/src/lib/carma-layers.d.ts
+++ b/libraries/types/src/lib/carma-layers.d.ts
@@ -50,6 +50,7 @@ export type Layer = {
   conf?: CarmaConfig;
   icon?: string;
   other?: OtherLayerProps;
+  filterConfig?: any;
 } & (
   | {
       layerType: "wmts" | "wmts-nt";