- added FilterControl to map

src/Components/Map/Subcomponents/Controls/FilterControl.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import { useState, useEffect } from 'react';
+
+const typeMapping = [
+    {value: null, label: 'Kein Filter'},
+    {value: 'kompass', label: 'Würdekompass'},
+    {value: 'themenkompass', label: 'Themenkompass-Gruppe'},
+    {value: 'liebevoll.jetzt', label: 'liebevoll.jetzt'}
+];
+
+const CustomFilterIcon = ({ size = 20 }) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="currentColor"  // Changed from 'none' to 'currentColor'
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+    >
+        <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" />
+    </svg>
+);
+
+const CheckmarkIcon = () => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+    >
+        <polyline points="20 6 9 17 4 12" />
+    </svg>
+);
+
+const FilterControl = ({ activeFilter, setActiveFilter }) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const toggleFilter = () => {
+        setIsOpen(!isOpen);
+    };
+
+    const applyFilter = (filterValue) => {
+        setActiveFilter(filterValue);
+        setIsOpen(false);
+    };
+
+    return (
+        <div className="tw-relative">
+            <div className="tw-indicator">
+                {activeFilter !== null && (
+                    <span className="tw-indicator-item tw-badge tw-badge-secondary tw-bg-red-500 tw-border-red-500"></span>
+                )}
+                <button
+                    className="tw-w-12 tw-h-12 tw-rounded-full tw-bg-base-100 tw-flex tw-items-center tw-justify-center tw-border tw-border-gray-300 hover:tw-bg-gray-200 focus:tw-bg-gray-200 focus:tw-outline-none"
+                    onClick={toggleFilter}
+                >
+                    <CustomFilterIcon size={24} />
+                </button>
+            </div>
+
+            {isOpen && (
+                <div className="tw-absolute tw-bottom-12 tw-left-0 tw-bg-base-100 tw-shadow-xl tw-rounded-lg tw-overflow-hidden tw-border tw-border-gray-200 tw-min-w-[250px]">
+                    <ul className="tw-py-1">
+                        {typeMapping.map((type) => (
+                            <li key={type.value}>
+                                <button
+                                    onClick={() => applyFilter(type.value)}
+                                    className={`tw-w-full tw-text-left tw-text-sm tw-px-4 tw-py-2 tw-flex tw-items-center tw-space-x-2
+                                      hover:tw-bg-gray-300 focus:tw-bg-gray-300 focus:tw-outline-none
+                                      ${activeFilter === type.value ? 'tw-bg-gray-200' : ''}`}
+                                >
+                                     <span className="tw-w-4">
+                                        {activeFilter === type.value && <CheckmarkIcon />}
+                                     </span>
+                                    <span>{type.label}</span>
+                                </button>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default FilterControl;

src/Components/Map/UtopiaMap.tsx

@@ -9,8 +9,7 @@ import AddButton from "./Subcomponents/AddButton";
 import { useEffect, useState } from "react";
 import { ItemFormPopupProps } from "./Subcomponents/ItemFormPopup";
 import { SearchControl } from "./Subcomponents/Controls/SearchControl";
-import { LayerControl } from "./Subcomponents/Controls/LayerControl";
-import { QuestControl } from "./Subcomponents/Controls/QuestControl";
+// import { QuestControl } from "./Subcomponents/Controls/QuestControl";
 import { Control } from "./Subcomponents/Controls/Control";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import { TagsControl } from "./Subcomponents/Controls/TagsControl";
@@ -18,6 +17,8 @@ import { useSelectPosition, useSetMapClicked,useSetSelectPosition } from "./hook
 import { useClusterRef, useSetClusterRef } from "./hooks/useClusterRef";
 import { Feature, Geometry as GeoJSONGeometry } from 'geojson';
 import {useAuth} from "../Auth";
+import FilterControl from "./Subcomponents/Controls/FilterControl";
+import {LayerControl} from "./Subcomponents/Controls/LayerControl";
 
 // for refreshing map on resize (needs to be implemented)
 const mapDivRef = React.createRef();
@@ -61,6 +62,8 @@ function UtopiaMap({
     const clusterRef = useClusterRef();
     const setMapClicked = useSetMapClicked();
 
+    const [activeFilter, setActiveFilter] = useState(null);
+
     const [itemFormPopup, setItemFormPopup] = useState<ItemFormPopupProps | null>(null);
 
     const [embedded, setEmbedded] = useState<boolean>(true)
@@ -92,9 +95,11 @@ function UtopiaMap({
                         <TagsControl />
                     </Control>
                     <Control position='bottomLeft' zIndex="999" absolute>
-                        {!embedded && (
-                            <QuestControl></QuestControl>
-                        )}
+                        {/*{!embedded && (*/}
+                        {/*    <QuestControl></QuestControl>*/}
+                        {/*)}*/}
+                        <FilterControl activeFilter={activeFilter} setActiveFilter={setActiveFilter} />
+                        {/*todo: needed layer handling is located LayerControl*/}
                         <LayerControl></LayerControl>
                     </Control>
                     <TileLayer