📍 CoordinateInput.js

Die Komponente CoordinateInput stellt ein einfaches Eingabefeld für geografische Koordinaten (Latitude, Longitude) bereit.
Sie dient typischerweise dazu, einen bestimmten Punkt auf der Karte zu fokussieren bzw. zu markieren.

🔧 Pfad

/components/uiWidgets/CoordinateInput.js

🎯 Zweck

Eingabe von Koordinaten (z. B. 53.2,8.1)
Übergabe dieser Koordinaten an eine Callback-Funktion zur weiteren Verarbeitung
Positioniert sich dauerhaft in der linken oberen Ecke der Seite (z. B. zur schnellen Navigation)

⚙️ Props

Prop	Typ	Beschreibung
`onCoordinatesSubmit`	`function`	Wird beim Abschicken des Formulars mit dem eingegebenen Koordinaten-String aufgerufen

🧩 Interne Logik

const [coordinates, setCoordinates] = useState("");

Der Eingabewert wird im lokalen State gespeichert
Beim Submit (onSubmit) wird onCoordinatesSubmit(coordinates) aufgerufen, wenn gesetzt

🧰 UI-Aufbau

Eingabefeld für Text: Erwartet lat,lng
Button: „Zu Marker zoomen“
Position: fixed top-5 left-5 → dauerhaft sichtbar

🎨 Gestaltung (Tailwind CSS)

Element	Klassen
Container	`fixed top-5 left-5 z-50 bg-white shadow-lg rounded-lg p-4 w-72`
Input	`border p-2 rounded w-full mb-2`
Button	`bg-blue-500 text-white p-2 rounded w-full hover:bg-blue-600`

🧪 Testfälle

Eingabe	Erwartung
`53.2,8.1`	Callback `onCoordinatesSubmit("53.2,8.1")` wird ausgelöst
Leer	Callback wird ausgelöst mit leerem String
Buttonklick	Löst `handleSubmit()` aus
Enter-Taste im Eingabefeld	Löst ebenfalls Submit aus

💡 Erweiterungsideen

Validierung des Formats (lat,lng) vor dem Absenden
Automatisches Zentrieren der Leaflet-Karte in der Callback-Funktion
Optionale Markierung des Punkts auf der Karte

📄 Verwendung

Beispiel in einer Map-Komponente:

<CoordinateInput
  onCoordinatesSubmit={(coords) => {
    const [lat, lng] = coords.split(",").map(Number);
    map.setView([lat, lng], 16); // Leaflet
  }}
/>

📦 Verwandte Komponenten

MapComponent.js – kann die übergebenen Koordinaten zur Zentrierung oder Marker-Erstellung nutzen

3.0 KiB Raw Blame History Unescape Escape