# 📍 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 ```bash /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 ```js 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: ```jsx { 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 --- --- [Zurück zur Übersicht](../../README.md)