nodeMap/Wiki.md

TALAS V5 nodeMap

Einführung

Dieses Dokument bietet einen umfassenden Überblick über die TALAS V5-GIS-Webanwendung nodeMap. Diese Anwendung ermöglicht es, verschiedene Daten und Informationen visuell und interaktiv zu speichern, zu verwalten und anzuzeigen. Sie 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 für Installationsanleitungen.

Projekt herunterladen und vorbereiten

Laden Sie nodeMap.zip aus dem Team-URL herunter und entpacken Sie die Datei mit Werkzeugen wie 7-Zip. Kopieren Sie den entpackten Ordner nodeMap in das Verzeichnis C:\inetpub\wwwroot\talas5.

mapTiles einfügen

Fügen Sie das mapTiles-Verzeichnis in C:\inetpub\wwwroot\talas5\nodeMap\public ein. Die mapTiles sollten lokal sein.

Serverkonfiguration

1. Projekt Kopieren: Kopieren Sie das Projekt direkt, anstatt es von Gitea zu klonen, um Probleme mit npm install und Abhängigkeiten zu vermeiden.

2. Port Freigabe: Der Port 3000 muss auf dem Server freigegeben werden, damit die Anwendung auch außerhalb des Servers erreichbar ist.

3. API IP Konfiguration: Konfigurieren Sie die Server-IP und den Port in den entsprechenden Dateien, um den Zugriff auf die Anwendung zu ermöglichen. Beispielkonfigurationen:

   • In C:\inetpub\wwwroot\talas5\MessagesMap\MapTypC.aspx: "http://10.10.0.30:3000?m=" + encodeURIComponent(mValue) + "&u=" + encodeURIComponent(uValue);
   • Bei localhost kommt dieser Meldung: localhost hat die Verbindung abgelehnt. Also, nur über IP ist intern und extern erreichbar: "http://localhost:3000?m=" + encodeURIComponent(mValue) + "&u=" + encodeURIComponent(uValue);

4. Konfiguration in [...path].js:

   • In /pages/api/[...path].js muss die IP des Servers eingetragen werden: target: "http://localhost",
   • In /config/config.js API-Endpoint prüfen.

5. Datenbank-Host-IP: In .env.local: DB_HOST=localhost,

6. Map URL: In /components/MapComponent.js: const onlineTileLayer = "/mapTiles/{z}/{x}/{y}.png";

7. ServerURL in MapComponent: Stellen Sie sicher, dass serverURL die richtige IP-Adresse und API-Endpoint hat und für Benutzer-Berechtigung: const serverURL = "http://10.10.0.13";

8. baseURL in MapComponent: Stellen Sie sicher, dass baseURL die localhost und API-Endpoint hat und für Benutzer-Berechtigung und Stationen öffnen: const baseUrl = "http://localhost/talas5/devices/";

9. App als Service starten: Starten Sie die App als Service, damit sie mit dem Server-System startet: nssm.exe install ->Batch-Datei ->Projekt-Ordner -> 3. kann leer sein

10. Chrome Version: Der Web-Browser Chrome muss ab Version 125.0.6420.142 sein.

Benutzeranleitung

Karte ansehen

Die Hauptseite zeigt eine interaktive Karte, auf der verschiedene geografische Punkte dargestellt werden.

• Beim Überfahren eines Elements (Station oder Poi) mit der Maus erscheint ein Popup mit Informationen über dieses Element.

• Überlappende Stationen werden durch ein Plus-Icon angezeigt. Bei einem Linksklick auf das Icon werden die Stationen visuell auseinandergezogen, und Informationen zu einer Station werden bei Mausüberfahrt angezeigt.

• Verschieben: Halten Sie die linke Maustaste gedrückt und bewegen Sie die Maus, um die Karte zu verschieben um verschiedene Bereiche zu erkunden.

Station wählen

Oben rechts auf der Karte befindet sich ein Dropdown-Menü, mit dem Sie direkt zu einer ausgewählten Station zoomen können.

Layer auswählen

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.

Kontextmenü

Station öffnen

Stationen können im selben Browser-Fenster oder in einem neuen Tab geöffnet werden.

• Maus über eine Station -> Rechte Maustaste -> Kontextmenü öffnen und "Station öffnen (Tab)" wählen, um die Station in einem neuen Browser-Tab zu öffnen, oder "Station öffnen", um sie im selben Fenster zu öffnen.

Hinzufügen neuer Poi

Nutzer können über ein Formular neue Marker (Poi) zur Datenbank hinzufügen.

• Rechte Maustaste -> Poi hinzufügen -> Formular ausfüllen -> "Poi hinzufügen" Button klicken. Der Poi erscheint dann auf der Karte.

Koordinaten anzeigen

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

Zoom

Sie können mit dem Mausrad ein- und auszoomen, um näher an Bereiche heranzukommen oder sich für eine Übersicht zu entfernen. Sie haben auch die Möglichkeit im Kontextmenü ein- und auszoomen.

Hier zentrieren

Die aktuellen Mauskoordinaten werden im Browser-Fenster zentriert.

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 "Poi hinzufügen".
   • Füllen Sie das Formular mit den notwendigen Informationen über den Poi aus und klicken Sie auf "POI hinzufügen", um den PoI zur Karte und zur Datenbank hinzuzufügen.

2. Poi verschieben:

   • 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.

3. Poi bearbeiten:

   • Im Kontextmenü "Poi bearbeiten klicken, dann öffnet Formular-Fenster, drin können die Werte geändert dann auf "POI aktualisieren" klicken.

4. Poi löschen

   • In das vorherige Fenster "Poi löschen" klicken um von der Karte und von der Datenbank entfernen.

Fehlerbehebung

Problembehandlung bei der Installation

Stellen Sie sicher, dass alle Umgebungsvariablen korrekt gesetzt sind.

Lösungen bei häufigen Fehlern

Bei Problemen 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 das State Management.
• index.js: Startseite der Anwendung, lädt die Hauptkomponenten und initiiert die Karte.
• [...path].js: Dynamische 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.
• PoiUpdateModal.js:Komponente zum Aktualisieren(update) und löschen von Pois.
• ShowAddStationPopup.js:Komponente zum hinzufügen von Pois.

/public

• Speicherort für statische Dateien wie MapTiles (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.

Diese Dokumentation und Benutzeranleitung kann weiter angepasst und erweitert werden.