a19bf96843
- Zugriff auf GisStationsStaticDistrict.Points korrigiert - Verhindert leere Dropdown-Liste bei gültigen Daten - Neue Markdown-Dokus für UI-Komponenten erstellt (MapLayersControlPanel, EditModeToggle, VersionInfoModal, CoordinateInput) - Version auf 1.1.190 gesetzt
102 lines
3.0 KiB
Markdown
102 lines
3.0 KiB
Markdown
<!-- /docs/components/uiWidgets/CoordinateInput.md -->
|
||
|
||
# 📍 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
|
||
<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
|
||
|
||
---
|