This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<h1 id="nodemap-entwicklerdokumentation">📘 NodeMap –
Entwicklerdokumentation</h1>
<p>Willkommen in der Entwicklerdokumentation für
<strong>NodeMap</strong> – einer modularen Kartenanwendung zur
Visualisierung und Bearbeitung von GIS-Daten, POIs und Gerätestatus in
einer interaktiven Leaflet-Karte.</p>
<p>Diese Anleitung führt dich <strong>Schritt für Schritt</strong> durch
die wichtigsten Themen für lokale Entwicklung, Architekturverständnis
und Erweiterung.</p>
<hr />
<h2 id="inhaltsverzeichnis">📚 Inhaltsverzeichnis</h2>
<h3 id="einstieg-übersicht">🔹 Einstieg & Übersicht</h3>
<ul>
<li><a href="#projektüberblick">Projektüberblick</a></li>
<li><a href="build-and-deploy.md">Build & Deployment</a></li>
<li><a href="checklist.md">Checkliste für Deployment</a></li>
<li><a href="DynamischeMarkerErklaerung.md">Dynamische Marker
erklärt</a></li>
</ul>
<h3 id="architektur">🧭 Architektur</h3>
<ul>
<li><a href="architecture/device-layer-connection.md">Layer-Verbindung
(Geräte)</a></li>
</ul>
<h3 id="konfiguration">⚙️ Konfiguration</h3>
<ul>
<li><a href="config/README.md">Allgemeine Übersicht</a></li>
<li><a
href="#kartenquellen-konfiguration-publicconfigjson">Kartenquellen-Konfiguration
(public/config.json)</a></li>
</ul>
<hr />
<h2 id="kartenquellen-konfiguration-publicconfig.json">⚙️
Kartenquellen-Konfiguration (public/config.json)</h2>
<p>Die Datei <code>public/config.json</code> steuert, welche
Kartenquelle (z.B. OSM oder lokale Tiles) für die Leaflet-Karte
verwendet wird.</p>
<p><strong>Beispiel:</strong></p>
<div class="sourceCode" id="cb1"><pre
class="sourceCode json"><code class="sourceCode json"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="fu">{</span></span>
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a> <span class="dt">"//info"</span><span class="fu">:</span> <span class="st">"tileSources: 'local' für offline, 'osm' für online"</span><span class="fu">,</span></span>
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a> <span class="dt">"tileSources"</span><span class="fu">:</span> <span class="fu">{</span></span>
<span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a> <span class="dt">"local"</span><span class="fu">:</span> <span class="st">"http://localhost/talas5/TileMap/mapTiles/{z}/{x}/{y}.png"</span><span class="fu">,</span></span>
<span id="cb1-5"><a href="#cb1-5" aria-hidden="true" tabindex="-1"></a> <span class="dt">"osm"</span><span class="fu">:</span> <span class="st">"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"</span></span>
<span id="cb1-6"><a href="#cb1-6" aria-hidden="true" tabindex="-1"></a> <span class="fu">},</span></span>
<span id="cb1-7"><a href="#cb1-7" aria-hidden="true" tabindex="-1"></a> <span class="dt">"active"</span><span class="fu">:</span> <span class="st">"osm"</span></span>
<span id="cb1-8"><a href="#cb1-8" aria-hidden="true" tabindex="-1"></a><span class="fu">}</span></span></code></pre></div>
<ul>
<li>Mit <code>active</code> kann zwischen Online- und Offline-Karten
umgeschaltet werden.</li>
<li>Die Datei wird beim Start der App automatisch geladen.</li>
<li>Für Offline-Betrieb muss das lokale Kartenmaterial vorhanden sein
(siehe Installationsanleitung).</li>
</ul>
<h3 id="hauptkomponenten">🧩 Hauptkomponenten</h3>
<ul>
<li><a
href="components/mainComponent/MapComponent.md">MapComponent</a></li>
<li><a
href="components/mainComponent/hooks/useInitializeMap.md">useInitializeMap</a></li>
</ul>
<h3 id="kontextmenü">🗺️ Kontextmenü</h3>
<ul>
<li><a href="components/contextmenu/README.md">Übersicht
Kontextmenü</a></li>
<li><a
href="components/contextmenu/useMapContextMenu.md">useMapContextMenu
Hook</a></li>
<li><a
href="components/contextmenu/CoordinatePopup.md">CoordinatePopup</a></li>
</ul>
<h3 id="pois">➕ POIs</h3>
<ul>
<li><a href="components/pois/AddPOIModal.md">POI hinzufügen
(AddPOIModal)</a></li>
<li><a href="components/pois/PoiUpdateModal.md">POI bearbeiten
(PoiUpdateModal)</a></li>
</ul>
<h3 id="gis-polylinien">📏 GIS-Polylinien</h3>
<ul>
<li><a
href="components/gisPolylines/PolylineContextMenu.md">PolylineContextMenu</a></li>
<li><a
href="components/gisPolylines/icons/StartIcon.md">StartIcon</a></li>
<li><a href="components/gisPolylines/icons/EndIcon.md">EndIcon</a></li>
<li><a
href="components/gisPolylines/icons/CircleIcon.md">CircleIcon</a></li>
<li><a
href="components/gisPolylines/icons/SupportPointIcons.md">SupportPointIcons</a></li>
</ul>
<h3 id="ui-komponenten">💡 UI-Komponenten</h3>
<ul>
<li><a
href="components/uiWidgets/CoordinateInput.md">CoordinateInput</a></li>
<li><a
href="components/uiWidgets/VersionInfoModal.md">VersionInfoModal</a></li>
<li><a
href="components/uiWidgets/mapLayersControlPanel/EditModeToggle.md">EditModeToggle</a></li>
<li><a
href="components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.md">MapLayersControlPanel</a></li>
</ul>
<h3 id="weitere-tools">🧪 Weitere Tools</h3>
<ul>
<li><a href="components/TestScript.md">TestScript (Debug)</a></li>
</ul>
<hr />
<h2 id="projektüberblick">Projektüberblick</h2>
<p>NodeMap wird von <strong>TALAS.web</strong> über einen iFrame
geladen. Die Anwendung basiert auf folgenden Technologien:</p>
<table>
<thead>
<tr>
<th>Technologie</th>
<th>Zweck</th>
</tr>
</thead>
<tbody>
<tr>
<td>Next.js</td>
<td>React-Framework (Frontend/SSR)</td>
</tr>
<tr>
<td>Leaflet</td>
<td>Kartendarstellung</td>
</tr>
<tr>
<td>Redux Toolkit</td>
<td>Zustandverwaltung</td>
</tr>
<tr>
<td>Tailwind CSS</td>
<td>Styling</td>
</tr>
<tr>
<td>MySQL</td>
<td>Datenbank</td>
</tr>
<tr>
<td>Node.js / IIS</td>
<td>Server und Auslieferung</td>
</tr>
</tbody>
</table>
<p>👉 Mehr zur Systemarchitektur: <a
href="architecture.md">architecture.md</a></p>
<hr />
<h2 id="projektstruktur-setup">Projektstruktur & Setup</h2>
<h3 id="zielsystem">Zielsystem</h3>
<ul>
<li>Offline-Umgebung</li>
<li>Windows-Server mit IIS</li>
<li>Datenzugriff über TALAS-Webservice oder lokale API</li>
</ul>
<h3 id="lokale-entwicklung">Lokale Entwicklung</h3>
<p>➡ <a href="guide/setup-dev.md">Entwicklungs-Setup</a><br />
➡ <a href="guide/project-structure.md">Projektstruktur erklärt</a><br />
➡ <a href="guide/dependencies.md">Abhängigkeiten & Tools</a><br />
➡ <a href="guide/env.md">Umgebungsvariablen (env-Dateien)</a></p>
<hr />
<h2 id="webservices-api-fluss">Webservices & API-Fluss</h2>
<p>NodeMap verwendet zwei Quellen für Daten:</p>
<ol type="1">
<li><strong>TALAS-WebServices</strong> (Port 80) – POIs, Geräte, Rechte,
Linien usw.</li>
<li><strong>Lokale Next.js API</strong> (Port 3000) – direkte
Datenbankzugriffe via MySQL</li>
</ol>
<p>➡ <a href="guide/webservices.md">Webservices-Dokumentation</a></p>
<hr />
<h2 id="zustandverwaltung-redux">Zustandverwaltung Redux</h2>
<p>Die komplette Anwendung verwendet Redux zur globalen
Zustandverwaltung.</p>
<ul>
<li>Architektur: <code>Service → Thunk → Slice → Komponente</code></li>
<li>Beispiel: POIs, Marker, Linien, Rechte, Layer-Status</li>
<li>Redux DevTools werden unterstützt</li>
</ul>
<p>➡ <a href="guide/redux-zustand.md">Zustandverwaltung mit
Redux</a></p>
<hr />
<h2 id="entwicklung-testdaten">Entwicklung & Testdaten</h2>
<p>Zur Entwicklung ohne echte API stehen lokale Mockdaten zur
Verfügung:</p>
<ul>
<li>Aktivierung über
<code>.env.development → NEXT_PUBLIC_USE_MOCKS=true</code></li>
<li>In <code>.env.production</code> sollte
<code>NEXT_PUBLIC_USE_MOCKS=false</code> gesetzt sein</li>
<li>Nutzung z.B. in <code>pages/api/mocks/...</code></li>
<li>Hinweise im UI zeigen aktivierten Mockmodus</li>
</ul>
<p>➡ <a href="guide/mock-data.md">Mockdaten & Entwicklung</a></p>
<hr />
<h2 id="fehlerbehandlung-glossar">Fehlerbehandlung & Glossar</h2>
<p>Typische Probleme (z.B. Webservice nicht erreichbar, Layer nicht
sichtbar) werden in der FAQ gesammelt.<br />
Zudem gibt es eine Begriffsliste zur Orientierung:</p>
<p>➡ <a href="guide/faq.md">FAQ & häufige Fehler</a><br />
➡ <a href="guide/glossar.md">Glossar</a></p>
<hr />
<h2 id="hinweis-zum-deployment">Hinweis zum Deployment</h2>
<p>📦 Die Anleitung für Server-Installation und ZIP-Deployment findest
du in:<br />
➡ <a href="../README.md">Root-README.md</a></p>
<hr />
<h2 id="tipp">Tipp</h2>
<p>Wenn du neu im Projekt bist, beginne mit dem Kapitel
<strong>Projektstruktur & Setup</strong> und folge dann über die
Webservices bis zu den Komponenten.</p>
