feat: GeocoderFeature mit Feature Toggle und Anpassungen integriert

- GeocoderFeature als separates Modul implementiert und initialisiert.
- Feature Toggle für Geocoder in .env.local hinzugefügt (NEXT_PUBLIC_ENABLE_GEOCODER).
- Dynamische Aktivierung des Geocoders über MapComponent.js basierend auf Feature-Flag.
- Anpassungen zur Entfernung bzw. Anpassung der Fehlermeldung "Nothing found".
- Styling-Verbesserungen für das Suchfeld mit Tailwind CSS.

.env.local

@@ -11,4 +11,6 @@ DB_PORT=3306
 ######################### Offline Karte
 #NEXT_PUBLIC_ONLINE_TILE_LAYER="http://127.0.0.1:3000/mapTiles/{z}/{x}/{y}.png"
 #NEXT_PUBLIC_ONLINE_TILE_LAYER="http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png"
+####################
+NEXT_PUBLIC_ENABLE_GEOCODER=true
 

components/MapComponent.js

@@ -44,6 +44,7 @@ import useLineData from "../hooks/useLineData.js";
 import { useMapComponentState } from "../hooks/useMapComponentState";
 import { disablePolylineEvents, enablePolylineEvents } from "../utils/setupPolylines";
 import { updateLocation } from "../utils/updateBereichUtil";
+import { initGeocoderFeature } from "../components/features/GeocoderFeature";
 //--------------------------------------------
 import { currentPoiState } from "../redux/slices/currentPoiSlice.js";
 import { selectGisStationsStaticDistrict, setGisStationsStaticDistrict } from "../redux/slices/gisStationsStaticDistrictSlice";
@@ -738,92 +739,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       }
     });
     //--------------------------------------------
-    // Benutzerdefiniertes Icon erstellen für den Geocoder
-    const customIcon = L.icon({
-      iconUrl: "/img/marker-icon.png", // Pfad zum Icon
-      iconSize: [32, 32], // Größe des Icons
-      iconAnchor: [16, 32], // Ankerpunkt (Mitte unten)
-      popupAnchor: [0, -32], // Popup-Ankerpunkt
-    });
-    // Geocoder mit benutzerdefiniertem Icon verwenden
-    const geocoder = L.Control.geocoder({
-      position: "topleft",
-      defaultMarkGeocode: false,
-      geocoder: new L.Control.Geocoder.Nominatim({
-        serviceUrl: "https://nominatim.openstreetmap.org/",
-        geocodingQueryParams: {
-          "accept-language": "de", // Sprache auf Deutsch setzen
-          countrycodes: "DE", // Nur Ergebnisse aus Deutschland
-        },
-      }),
-    })
-      .on("markgeocode", function (e) {
-        const latlng = e.geocode.center;
-        map.setView(latlng, 15);
-
-        // Marker hinzufügen
-        L.marker(latlng, { icon: customIcon }).addTo(map).bindPopup(e.geocode.name).openPopup();
-      })
-      .addTo(map);
-
-    // Tailwind-Klassen dynamisch hinzufügen
-    setTimeout(() => {
-      // Geocoder-Container stylen
-      const geocoderContainer = document.querySelector(".leaflet-control-geocoder");
-      if (geocoderContainer) {
-        // Nur minimale Klassen für Volle Breite und abgerundetes Design
-        geocoderContainer.classList.add(
-          "shadow-md",
-          "border",
-          "border-gray-300",
-          "rounded-full",
-          "bg-white",
-          "p-2",
-          "w-96" // Breite des gesamten Suchfeldes
-        );
-
-        // Alle anderen Elemente im Container entfernen außer Eingabefeld
-        Array.from(geocoderContainer.children).forEach((child) => {
-          if (!child.querySelector("input")) {
-            child.remove(); // Löscht alle Elemente außer dem Eingabefeld
-          }
-        });
-      }
-
-      // Eingabefeld stylen und Platzhaltertext setzen
-      const geocoderInput = document.querySelector(".leaflet-control-geocoder input");
-      if (geocoderInput) {
-        geocoderInput.classList.add(
-          "border-none",
-          "outline-none",
-          "w-full", // Volle Breite nutzen
-          "text-sm",
-          "text-gray-700",
-          "pl-3"
-        );
-        geocoderInput.placeholder = "Ort oder Adresse suchen..."; // Platzhalter auf Deutsch
-      }
-
-      // Meldung "Nothing found." ausblenden
-      const noResultsMessage = document.querySelector(".leaflet-control-geocoder-form-no-error");
-      if (noResultsMessage) {
-        noResultsMessage.style.display = "none"; // Verstecke die Meldung
-      }
-
-      // Alternativen (falls leer) ebenfalls ausblenden
-      const observer = new MutationObserver(() => {
-        const alternatives = document.querySelector(".leaflet-control-geocoder-alternatives");
-        if (alternatives && alternatives.children.length === 0) {
-          alternatives.style.display = "none"; // Verstecke die Liste, wenn keine Vorschläge vorhanden sind
-        }
-      });
-
-      // Beobachte Änderungen im Geocoder-Container
-      const targetNode = document.querySelector(".leaflet-control-geocoder");
-      if (targetNode) {
-        observer.observe(targetNode, { childList: true, subtree: true });
-      }
-    }, 100);
 
     //--------------------------------------------
 
@@ -933,6 +848,12 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   }, [map, allMarkers]);
 
   //---------------------------------------
+  useEffect(() => {
+    if (map) {
+      initGeocoderFeature(map); // Geocoder-Feature initialisieren
+    }
+  }, [map]);
+  //--------------------------------------------
 
   return (
     <>

components/features/GeocoderFeature.js

@@ -0,0 +1,49 @@
+// components/features/GeocoderFeature.js
+export function initGeocoderFeature(map) {
+  // Feature Toggle
+  const isGeocoderEnabled = process.env.NEXT_PUBLIC_ENABLE_GEOCODER === "true";
+
+  if (!isGeocoderEnabled) return; // Falls deaktiviert, nichts ausführen
+
+  // Benutzerdefiniertes Icon erstellen
+  const customIcon = L.icon({
+    iconUrl: "/img/marker-icon.png",
+    iconSize: [32, 32],
+    iconAnchor: [16, 32],
+    popupAnchor: [0, -32],
+  });
+
+  // Geocoder hinzufügen
+  const geocoder = L.Control.geocoder({
+    position: "topleft",
+    defaultMarkGeocode: false,
+    errorMessage: "", // Keine Fehlermeldung anzeigen
+    geocoder: new L.Control.Geocoder.Nominatim({
+      serviceUrl: "https://nominatim.openstreetmap.org/",
+      geocodingQueryParams: {
+        "accept-language": "de",
+        countrycodes: "DE",
+      },
+    }),
+  })
+    .on("markgeocode", function (e) {
+      const latlng = e.geocode.center;
+      map.setView(latlng, 15);
+      L.marker(latlng, { icon: customIcon }).addTo(map).bindPopup(e.geocode.name).openPopup();
+    })
+    .addTo(map);
+
+  // Styling mit Tailwind CSS
+  setTimeout(() => {
+    const geocoderContainer = document.querySelector(".leaflet-control-geocoder");
+    if (geocoderContainer) {
+      geocoderContainer.classList.add("shadow-md", "border", "border-gray-300", "rounded-full", "bg-white", "p-2", "w-96");
+
+      const geocoderInput = geocoderContainer.querySelector("input");
+      if (geocoderInput) {
+        geocoderInput.classList.add("border-none", "outline-none", "w-full", "text-sm", "text-gray-700", "pl-3");
+        geocoderInput.placeholder = "Ort oder Adresse suchen...";
+      }
+    }
+  }, 100);
+}