diff --git a/.env.local b/.env.local index e37bc0865..21b3fd80a 100644 --- a/.env.local +++ b/.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 diff --git a/components/MapComponent.js b/components/MapComponent.js index d9c7daaa0..638790fb7 100644 --- a/components/MapComponent.js +++ b/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 ( <> diff --git a/components/features/GeocoderFeature.js b/components/features/GeocoderFeature.js new file mode 100644 index 000000000..25d0b8a43 --- /dev/null +++ b/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); +}