4276eec853
- 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.
50 lines
1.6 KiB
JavaScript
50 lines
1.6 KiB
JavaScript
// 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);
|
|
}
|