kannst du mir den wiki besser formulieren  und anpassen
# TALAS V5 nodeMap

## Einführung
Dieses Dokument bietet einen umfassenden Überblick über das TALAS V5-GIS-Projekt Web-Anwendung nodeMap, die es ermöglicht visuell und auf interaktive Weise, verschiedene Daten und Informationen zu speichern, zu verwalten und anzuzeigen. Die Anwendung basiert auf Geographic Information Systems (GIS) und verwendet MySQL als Datenbank.

## Installation

### Voraussetzungen
- **Node.js und npm:** Stellen Sie sicher, dass Node.js und npm auf Ihrem System installiert sind. Besuchen Sie [Node.js](https://nodejs.org) für Installationsanleitungen.

### Projekt von Teams herunterladen

nodeMap.zip von Teams herunterladen von den URL ...

### Projekt entpacken und kopieren


Mit 7-Zip oder andere Tools die Datei entpacken.
Den entpackte Ordner "nodeMap" in diesen Verzeichnis kopieren C:\inetpub\wwwroot\talas5

### mapTiles Ordner in den Projekt einfügen

mapTiles Verzeichnis in C:\inetpub\wwwroot\talas5\nodeMap\public Verzeichnis einfügen, die mapTiles sollen lokal sein

### Konfiguration des Servers

Port 3000 muss auf dem Server Frei gegeben.

In C:\inetpub\wwwroot\talas5\MessagesMap\MapTypC.aspx muss die IP des Servers und pPort 3000 eingegeben aber kein localhost oder 127.0.0.1
z.B. 
"http://10.10.0.30:3000?m=" + encodeURIComponent(mValue) + "&u=" + encodeURIComponent(uValue);

In /pages/api/[...path].js muss die IP des Servers eingegeben werden
z.B. target: "10.10.0.30",





### Lokale Entwicklungsumgebung starten

In C:\inetpub\wwwroot\talas5\nodeMap die Datei StartNodeApp.bat von Projekt Ordner kopieren und auf dem Desktop kopierren um Zeit zu sparen ,doppelklick dann wird die App gestartet, dann kann den Kommandozeile minimiert werden, Den Fenster nicht schließen.



## Nutzung

### Karte ansehen
Die Hauptseite zeigt eine interaktive Karte, auf der verschiedene geografische Punkte dargestellt werden.
-Mit der Maus über ein Element (Station oder PoI) ercheint ein Popuo mit  Informationen üder dieses Element
-Überlappende Stationen erkennt man mit Plus Icon: Falls mehrere Station überlappend sind kann mit linke Mausklick, wird dan die Stationen visuell auseinander gehen ,und dann über Mausover auf ein Station bekommt man über ein popup Information dieses Station.


### Layer auswählen
Benutzer können verschiedene Layer über Checkboxen ein- und ausblenden, um spezifische Daten auf der Karte anzuzeigen oder zu verbergen.


### Station wählen
In Dropdown Menü kann nach Station gesucht werden, wird dann zu den ausgewählter Station Reingezoomt.

### Feste Zoom-Stufe
 Falls Rein- und Rausgezoomt wird , hier kann den Icon klick zu einer bestimmte Zoom-Stufe gehen.
 
 



### Station öffnen

Station kann in selben Browser-Fenster oder in einem neuen Tab geöffnet werden

Maus über eine Station -> Rechte Maustaste um konetxt menü öffnen dann auf "station öffnen (tab)" klicken falls in neue Browser-Tab geöffnet werden soll oder "Station öffnen " klicken fall in selben Browser-fenster geöffnet werden soll.


### Hinzufügen neuer PoI
Nutzer können über ein Formular neue Marker(PoI) zur Datenbank hinzufügen.
Rechter Maustaste -> POI hinzufügen -> Formular ausfühlen -> "POI hinzufügen" Button klicken.
dann erscheint POI schon auf die Karte


### Koordinaten anzeigen
im Kontext-Menü den Koordinaten anzeigen klicken, wird ein alert Fenster geöffnet mit den Koordinaten

### Zoom 
Mit Mausrad oder in Kontextmenü Reinzoomen oder Rauszoom.
### Hier zentrieren
die aktuelle Maus Koordinaten wird im Browser-Fenster in zu mitte stationiert






## Fehlerbehebung

### Problembehandlung bei der Installation
Stellen Sie sicher, dass alle Umgebungsvariablen korrekt gesetzt sind.

### Lösungen bei häufigen Fehlern
Bei Neben-Effekten während der Weiterentwicklung könnte es hilfreich sein, die Seite neu zu laden (aktualisieren).

## Verzeichnisstruktur

### /pages
- _app.js  
  Grundlegende Konfiguration und Layout für die gesamte Anwendung. Importiert globale Styles und Recoil-Root für State Management.
- index.js  
  Startseite der Anwendung, lädt die Hauptkomponenten und initiiert die Karte.
- [...path].js  
  Eine Dynamic Route, die verwendet wird, um verschiedene URLs zu verarbeiten, die spezifische Ansichten oder Funktionen in der Anwendung darstellen.

### /components
- DataSheet.js  
  Verantwortlich für die Anzeige und Interaktion mit den Layer- und Stationsauswahlen. Ermöglicht das Aktivieren/Deaktivieren von Layern und zeigt Informationen zu geografischen Punkten.
- MapComponent.js  
  Kernkomponente für die Darstellung der Karte. Beinhaltet Logik für das Hinzufügen von Layern, Zoom-Funktionen und andere interaktive Elemente.

### /public
- Speicherort für statische Dateien wie Map (falls Internet nicht vorhanden), Bilder, Icons und andere Medien, die in der Benutzeroberfläche verwendet werden.

### /styles
- Enthält CSS-Dateien und andere Styling-Ressourcen für das Tailwind CSS-Framework.

### /store
- Zustandsmanagement-Dateien, die mit Recoil erstellt wurden. Diese Dateien definieren Atome und Selektoren für den globalen Zustand der Anwendung.

### /api
- addLocation.js  
  API-Route zur Handhabung des Hinzufügens neuer Standortdaten zur Datenbank.
- updateLocation.js  
  API-Route zur Aktualisierung bestehender Standortdaten.
- locations.js  
  API-Route, die für das Abrufen von Standortdaten zuständig ist.

### /config
- config.js  
  Konfigurationsdatei, die wichtige Konstanten und Einstellungen für die Anwendung enthält, wie z.B. API-Endpoints.

# Benutzeranleitung

## Hauptfunktionen

### Karteninteraktionen

#### Zoomen und Verschieben
- **Zoomen:** Sie können mit dem Mausrad ein- und auszoomen, um näher an Bereiche heranzukommen oder sich für eine Übersicht zu entfernen.
- **Verschieben:** Halten Sie die linke Maustaste gedrückt und bewegen Sie die Maus, um die Karte zu verschieben und verschiedene Bereiche zu erkunden.

#### Kontextmenü
- **Zoom-Optionen:** Das Kontextmenü bietet Funktionen zum gezielten Rein- und Rauszoomen in definierte Bereiche.
- **Zentrieren:** Sie können eine bestimmte Koordinate in der Mitte des Bildschirms zentrieren, indem Sie diese Option im Kontextmenü auswählen.

#### Steuerung der Kartenansicht
- **Stationsauswahl:** Oben rechts auf der Karte befindet sich ein Dropdown-Menü, mit dem Sie direkt zu einer ausgewählten Station zoomen können.
- **Layer-Kontrolle:** In derselben Oberfläche können Sie über Checkboxen verschiedene System-Layer ein- oder ausblenden, um spezifische Informationen auf der Karte anzuzeigen oder zu verbergen.
- **Rauszoomen-Icon:** Ein Icon zum Rauszoomen ermöglicht es Ihnen, schnell zu einem definierten Bereich zurückzukehren.

#### Koordinatenanzeige
- **Koordinaten-Alert:** Im Kontextmenü können Sie die aktuellen Koordinaten der Mausposition in einem Alert-Fenster anzeigen lassen.

### POIs hinzufügen und bearbeiten

1. **POI hinzufügen:**
   - Rechtsklicken Sie auf den gewünschten Ort auf der Karte, um das Kontextmenü zu öffnen.
   - Wählen Sie die Option "Neuen Standort hinzufügen".
   - Füllen Sie das Formular mit den notwendigen Informationen über den POI aus und klicken Sie auf "Speichern", um den Standort zur Karte und zur Datenbank hinzuzufügen.

2. **POI bearbeiten:**
   - Um einen bestehenden POI zu verschieben, klicken und halten Sie den Marker des POI und ziehen Sie ihn an die neue Position.
   - Lassen Sie den Marker los, um die neue Position zu bestätigen. Die Position wird automatisch in der MySQL-Datenbank aktualisiert.

### Autostart

    -Die Datei StartNodeApp.bat kann kopiert werden und in einem beliebige Ort eingefügt werden,bei Doppel-Klick startet die Datei dann die 
    Start-Dev.ps1, Start-Dev.ps1 startet die Web-Anwendung
    



Diese Dokumentation und Benutzeranleitung kann weiter angepasst und erweitert werden.


PS C:\Users\isa.LTW\Desktop\24.05.2024> .\FilterTreeOutput.ps1
Auflistung der Ordnerpfade f³r Volume OS
Volumeseriennummer : ECF0-871C
C:\USERS\ISA.LTW\DESKTOP\24.05.2024\NODEMAP 24.05.2024
|   .env.local
|   .gitignore
|   package-lock.json
|   package.json
|   postcss.config.js
|   Recoil in Next.js-Projekt _ Wiki.js.pdf
|   Start-Dev.ps1
|   StartNodeApp.bat
|   tailwind.config.js
|
+---.next
|   |   build-manifest.json
|   |   package.json
|   |   react-loadable-manifest.json
|   |   trace
|   |
|   +---cache
|   |   +---swc
|   |   |   \---plugins
|   |   |       \---v7_windows_x86_64_0.106.15
|   |   \---webpack
|   |
|   +---server
|   |   |   components_MapComponent_js.js
|   |   |   interception-route-rewrite-manifest.js
|   |   |   middleware-build-manifest.js
|   |   |   middleware-manifest.json
|   |   |   middleware-react-loadable-manifest.js
|   |   |   next-font-manifest.js
|   |   |   next-font-manifest.json
|   |   |   pages-manifest.json
|   |   |   webpack-api-runtime.js
|   |   |   webpack-runtime.js
|   |   |   _error.js
|   |   |
|   |   +---pages
|   |   |   |   index.js
|   |   |   |   _app.js
|   |   |   |   _document.js
|   |   |   |   _error.js
|   |   |   |
|   |   |   \---api
|   |   |       |   getPoiById.js
|   |   |       |   readLocations.js
|   |   |       |   readPoiTyp.js
|   |   |       |   [...path].js
|   |   |       |
|   |   |       \---talas_v5
|   |   |               location_device.js
|   |   |
|   |   \---vendor-chunks
|   |           @heroicons.js
PS C:\Users\isa.LTW\Desktop\24.05.2024>