Back on Track: Erste Lagekarte

Bisher wurden die einzelnen Tools zunächst separat getestet und ein grundlegender Workflow entwickelt.
Es gibt mehrere Daten- und Tracking-Quellen, die auf unterschiedlichen Wegen ihre Daten an n8n senden. n8n verarbeitet diese Daten, speichert sie in Budibase und liest sie bei Bedarf wieder aus.

Leaflet ruft beim Laden der Seite die benötigten Daten von n8n ab und sendet – falls erforderlich – auch neue Informationen zurück.

Leaflet – einfach? Nicht für den Admin

Leaflet gilt als unkomplizierte JavaScript-Bibliothek, mit der sich schnell eine Karte darstellen lässt. Dank eigenem Kartenserver sogar offline.

Der Einstieg ist tatsächlich simpel: Ein paar Code-Schnipsel in Ghost einfügen – und schon erscheint die erste eigene Karte.

Doch danach beginnt die eigentliche Arbeit:
Sinnvolle Layer definieren, passende Icons beschaffen und bereitstellen, Webhooks einbinden, Kartenfunktionen anpassen, Sonderfunktionen ergänzen. Innerhalb kurzer Zeit wächst der „kleine“ Code zu einem Umfang, der sich vor einer vollwertigen Webanwendung nicht mehr verstecken muss.

Natürlich lief auch hier nicht alles reibungslos – vermutlich unter anderem, weil sowohl n8n als auch Leaflet für mich Neuland waren. Nach einiger Zeit und intensiver KI-Unterstützung gelang es fast, die Daten von n8n an Leaflet zu übertragen.

Probleme traten jedoch immer wieder auf, sobald ich ein normales JSON-Format verwendete. Nach zahlreichen Fehlversuchen entschied ich mich, in n8n einen zusätzlichen Schritt einzubauen und die Daten in GeoJSON umzuwandeln.

GeoJSON definiert ein klares Format für Geodaten und bringt einen entscheidenden Vorteil mit: Es lassen sich beliebige zusätzliche Eigenschaften integrieren. So können beispielsweise Kennzeichen oder andere Merkmale direkt mit übergeben und später gezielt durchsucht werden.

Nachdem die Kommunikation zwischen Leaflet und n8n funktionierte, habe ich getestet, welche Funktionen sich zusätzlich umsetzen lassen. Das Ergebnis war beeindruckend:

• GPS- oder UTM-Koordinaten anzeigen
• Hydranten online abrufen und einblenden
• Neue Objekte direkt auf der Karte anlegen
• Radien oder Kegel grafisch darstellen

Technisch ist inzwischen vieles möglich. Nun liegt der Fokus stärker auf der Struktur und Optimierung der Tabellen, die hinter der Karte stehen.

Fazit

Die fertige Karte hat meine Erwartungen übertroffen und ist in der Bedienung erstaunlich intuitiv. Gleichzeitig ist der Aufwand und die Komplexität des Codes im Hintergrund deutlich höher als zunächst angenommen.

Ohne KI-Unterstützung hätte ich das Projekt vermutlich nicht umgesetzt