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>