Feature/0577 add poi filter layer

apps/geoportal/src/app/components/layers/GeoportalLayerButton.tsx

@@ -55,8 +55,7 @@ import "./tabs.css";
 import {
   LayerButton,
   LayerIcon,
-  buildFilterExpression,
-  captureOriginalFilters,
+  useRestoreLayerFilter,
 } from "@carma-mapping/components";
 import { Badge, Spin } from "antd";
 import { LoadingOutlined } from "@ant-design/icons";
@@ -156,54 +155,13 @@ const GeoportalLayerButton = ({
     }
   }, [layersLength]);
 
-  const filterAppliedRef = useRef(false);
-  useEffect(() => {
-    if (!layer.filterConfig || !layer.filterState || filterAppliedRef.current)
-      return;
-
-    const mapEntry = maplibreMaps?.find((entry) => entry.id === id);
-    if (!mapEntry?.map) return;
-
-    const libreMap = mapEntry.map;
-    try {
-      const originals = captureOriginalFilters(
-        layer.filterConfig.layerPattern,
-        libreMap
-      );
-
-      const filterExpression = buildFilterExpression(
-        layer.filterConfig,
-        layer.filterState
-      );
-
-      Object.keys(originals).forEach((layerId) => {
-        try {
-          const origFilter = originals[layerId];
-          let combinedFilter = filterExpression;
-
-          if (origFilter && filterExpression) {
-            combinedFilter = ["all", origFilter, filterExpression];
-          } else if (origFilter && !filterExpression) {
-            combinedFilter = origFilter;
-          }
-
-          libreMap.setFilter(layerId, combinedFilter);
-        } catch (error) {
-          console.error(
-            `[FilterRestore] Error setting filter on layer ${layerId}:`,
-            error
-          );
-        }
-      });
-
-      filterAppliedRef.current = true;
-    } catch (error) {
-      console.error(
-        `[FilterRestore] Error restoring filters for ${id}:`,
-        error
-      );
-    }
-  }, [layer.filterConfig, layer.filterState, maplibreMaps, id]);
+  const layerMaplibreMap =
+    maplibreMaps?.find((entry) => entry.id === id)?.map ?? null;
+  useRestoreLayerFilter(
+    layer.filterConfig,
+    layer.filterState,
+    layerMaplibreMap
+  );
 
   const isCurrentlyVisible = () => {
     if (zoom >= layer?.props?.maxZoom || zoom <= layer?.props?.minZoom) {

apps/geoportal/src/app/components/layers/InteractionView.tsx

@@ -12,6 +12,7 @@ import {
   createFilterButtons,
   FilterInfo,
   FilterState,
+  PoiFilterPanel,
 } from "@carma-mapping/components";
 import {
   getSelectedFeature,
@@ -26,6 +27,7 @@ import { useFilterBackground } from "./useFilterBackground";
 import FilterBackdrop from "./FilterBackdrop";
 
 const InteractionView = ({ isDragging }: { isDragging?: boolean }) => {
+  const [filterState, setFilterState] = useState<FilterState | undefined>();
   const dispatch = useDispatch();
   const activeInteractionLayerID = useSelector(getActiveInteractionLayerID);
   const layers = useSelector(getLayers);
@@ -44,13 +46,53 @@ const InteractionView = ({ isDragging }: { isDragging?: boolean }) => {
     isDragging
   );
 
+  const filterType = layer?.filterConfig?.filterType;
+
   const FilterComponent = useMemo(
     () =>
-      layer?.filterConfig ? createFilterButtons(layer.filterConfig) : null,
-    [layer?.filterConfig]
+      layer?.filterConfig && filterType !== "poi"
+        ? createFilterButtons(layer.filterConfig)
+        : null,
+    [layer?.filterConfig, filterType]
   );
 
-  if (!layer) {
+  if (!layer || !layer.filterConfig) {
+    return null;
+  }
+
+  if (filterType === "poi") {
+    return (
+      <div ref={wrapperRef} className="relative">
+        {validBg && !isDragging && <FilterBackdrop bgData={validBg} />}
+        <div className="pt-3 w-full flex justify-center">
+          <div
+            ref={filterRef}
+            style={{
+              maxWidth: 700,
+              background: "rgba(255, 255, 255, 0.9)",
+              borderRadius: 12,
+              padding: "8px 12px",
+            }}
+          >
+            <PoiFilterPanel
+              maplibreMap={maplibreMap}
+              initialFilterState={layer.filterState}
+              onFilterChange={(info, state) => {
+                dispatch(
+                  setLayerFilterState({ id: layer.id, filterState: state })
+                );
+                dispatch(
+                  setLayerFilterInfo({ id: layer.id, filterInfo: info })
+                );
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!FilterComponent) {
     return null;
   }
 

apps/topicmaps/e-auto-ladestation/src/app/PieChart.jsx

@@ -1,7 +1,7 @@
 import { useContext } from "react";
 import { FeatureCollectionContext } from "react-cismap/contexts/FeatureCollectionContextProvider";
 import { getColorForProperties } from "./helper/styler";
-import { PieChart } from "@carma-appframeworks/portals";
+import { PieChart } from "@carma-mapping/components";
 
 const ChartComp = ({ visible = true }) => {
   const { filteredItems } = useContext(FeatureCollectionContext);

apps/topicmaps/e-bikes/src/app/components/Menu/EBikesPieChart.tsx

@@ -1,7 +1,7 @@
 import { useContext } from "react";
 import { FeatureCollectionContext } from "react-cismap/contexts/FeatureCollectionContextProvider";
 import { getColorForProperties } from "../../../helper/styler";
-import { PieChart } from "@carma-appframeworks/portals";
+import { PieChart } from "@carma-mapping/components";
 
 const EBikesPieChart = ({ visible = true }) => {
   const { filteredItems } = useContext<typeof FeatureCollectionContext>(

apps/topicmaps/kita-finder/src/app/KitasPieChart.jsx

@@ -4,7 +4,7 @@ import { useContext } from "react";
 import { FeatureCollectionContext } from "react-cismap/contexts/FeatureCollectionContextProvider";
 import { useSelector } from "react-redux";
 import { getFeatureRenderingOption } from "./store/slices/ui";
-import { PieChart } from "@carma-appframeworks/portals";
+import { PieChart } from "@carma-mapping/components";
 
 const KitasPieChart = ({ visible = true }) => {
   const { filteredItems } = useContext(FeatureCollectionContext);

apps/topicmaps/klimaorte/vite.config.ts

@@ -22,6 +22,10 @@ export default defineConfig({
 
   plugins: [react(), nxViteTsPaths()],
 
+  optimizeDeps: {
+    include: ['leaflet', 'leaflet-snap'],
+  },
+
   // Uncomment this if you are using workers.
   // worker: {
   //  plugins: [ nxViteTsPaths() ],

apps/topicmaps/kulturstadtplan/src/app/components/menu/KulturPieChart.tsx

@@ -6,7 +6,7 @@ import {
   getColorFromMainlocationTypeName,
   textConversion,
 } from "../../../helper/styler";
-import { PieChart } from "@carma-appframeworks/portals";
+import { PieChart } from "@carma-mapping/components";
 
 const KulturPieChart = ({ visible = true }) => {
   const { filteredItems } = useContext<typeof FeatureCollectionContext>(

apps/topicmaps/luftmessstationen/vite.config.ts

@@ -22,6 +22,10 @@ export default defineConfig({
 
   plugins: [react(), nxViteTsPaths()],
 
+  optimizeDeps: {
+    include: ['leaflet', 'leaflet-snap'],
+  },
+
   // Uncomment this if you are using workers.
   // worker: {
   //  plugins: [ nxViteTsPaths() ],

apps/topicmaps/ng-stadtplan/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="utf-8" />
+    <title>Online-Stadtplan Wuppertal</title>
+    <base href="/" />
+
+    <link rel="icon" href="/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1,viewport-fit=cover, user-scalable=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Online-Stadtplan Wuppertal" />
+
+    <link rel="stylesheet" href="/src/styles.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

apps/topicmaps/ng-stadtplan/postcss.config.cjs

@@ -0,0 +1,13 @@
+/* postcss.config.cjs */
+const path = require("path");
+
+module.exports = {
+  plugins: {
+    "postcss-import": {},
+    "tailwindcss/nesting": {},
+    tailwindcss: {
+      config: path.join(__dirname, "tailwind.config.cjs"),
+    },
+    autoprefixer: {},
+  },
+};

apps/topicmaps/ng-stadtplan/project.json

@@ -0,0 +1,69 @@
+{
+  "name": "ng-stadtplan",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/topicmaps/ng-stadtplan/src",
+  "projectType": "application",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nx/vite:build",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "outputPath": "dist/apps/topicmaps/ng-stadtplan"
+      },
+      "configurations": {
+        "development": {
+          "mode": "development"
+        },
+        "production": {
+          "mode": "production"
+        }
+      }
+    },
+    "serve": {
+      "executor": "@nx/vite:dev-server",
+      "defaultConfiguration": "development",
+      "options": {
+        "buildTarget": "ng-stadtplan:build",
+        "host": "0.0.0.0"
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "ng-stadtplan:build:development",
+          "hmr": true
+        },
+        "production": {
+          "buildTarget": "ng-stadtplan:build:production",
+          "hmr": false
+        }
+      }
+    },
+    "preview": {
+      "executor": "@nx/vite:preview-server",
+      "defaultConfiguration": "development",
+      "options": {
+        "buildTarget": "ng-stadtplan:build"
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "ng-stadtplan:build:development"
+        },
+        "production": {
+          "buildTarget": "ng-stadtplan:build:production"
+        }
+      },
+      "dependsOn": ["build"]
+    },
+    "test": {
+      "executor": "@nx/vite:test",
+      "outputs": ["{options.reportsDirectory}"],
+      "options": {
+        "reportsDirectory": "../../../coverage/apps/topicmaps/ng-stadtplan"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    }
+  }
+}