Technische Dokumentation: Kartenprojekt (WikiMap)
Das Kartenprojekt bindet interaktive Leaflet-Karten in Wiki-Seiten ein. Diese Dokumentation erklärt alle beteiligten Dateien, ihren Speicherort und ihre Funktion.
Die zwei Speicherorte
Das Projekt lebt an zwei getrennten Orten. Diese nicht zu verwechseln ist wichtig:
- Server (FTP) unter
/resources/lib/leaflet/– hier liegen
die fertigen Programmbibliotheken, die nicht bearbeitet werden.
- Wiki-Seiten im
MediaWiki:-Namespace – hier liegt der
eigene Code und die Daten, versioniert und bearbeitbar.
Server-Dateien (FTP)
Einmal hochgeladen, danach unverändert. Es sind die unveränderten Leaflet-Bibliotheksdateien:
| Datei | Funktion |
|---|---|
leaflet.js |
Die eigentliche Kartenbibliothek – zeichnet
Karten, reagiert auf Zoom und Klick, setzt Pins. |
leaflet.css |
Das Aussehen von Leaflet. |
Control.FullScreen.umd.js |
Das Vollbild-Plugin. |
Control.FullScreen.css |
Aussehen des Vollbild-Plugins. |
images/ |
Grafiken, die Leaflet benötigt (Marker-Schatten etc.). |
Diese Dateien sind „fremder" Code, der nur lokal gehostet wird, damit der Browser sie laden kann, ohne von externen Servern abhängig zu sein (DSGVO, keine CDN-Abhängigkeit).
Wiki-Seiten
Das eigentliche Projekt. Jede Seite hat eine klare Aufgabe:
| Seite | Funktion |
|---|---|
MediaWiki:Gadget-WikiMap.js |
Herzstück. Lädt Leaflet von
den Server-Dateien, definiert die fünf Kartenansichten, liest die Ortsdaten, zeichnet die Pins und hebt den aktiven hervor. Änderungen am Kartenverhalten passieren fast immer hier. |
MediaWiki:Gadget-WikiMap.css |
Bestimmt das Aussehen der Karten
– Größe des Kartenfensters und Optik der Pins (inkl. des pulsierenden roten aktiven Pins). |
MediaWiki:WikiMap-Orte.json |
Zentrale Datenquelle für alle
Stecknadeln. Jeder Ort steht hier genau einmal, mit Name, Koordinaten, Ziel-Wikiseite und Kategorie. Kernidee: eine Stelle für alle Pins, überall im Wiki automatisch aktuell. |
MediaWiki:WikiMap-Gemeinden.json |
Datenquelle für die
Gemeinde-Umrisse. Enthält die GeoJSON-Polygone aller Gemeinden; beim Klick auf einen Umriss springt man zur jeweiligen Gemeinde-Seite. |
MediaWiki:Gadgets-definition |
Registrierung. Eine Zeile
sagt MediaWiki, dass das Gadget existiert und aus welchen Seiten es besteht. Ohne diese Zeile passiert nichts. |
Einbindung auf einer Seite
Auf einer normalen Wiki-Seite genügt ein leeres Element:
<div class="wikimap" data-aktiv-ort="gaestehaus-mustertal"></div>
Das class="wikimap" ist das Signal „hier soll eine Karte hin".
Das data-aktiv-ort nennt die ID des hervorgehobenen Ortes. Die
Karte holt sich Position und alle anderen Pins selbst aus der zentralen JSON.
Ablauf beim Seitenaufruf
- Jemand öffnet eine Wiki-Seite mit Karte.
- MediaWiki liefert die Seite plus das Gadget (weil in der Gadgets-Definition
registriert).
- Das Gadget erkennt das
.wikimap-Element und lädt Leaflet von den
Server-Dateien nach.
- Es holt die Ortsdaten aus
WikiMap-Orte.json. - Es zeichnet die Karte mit allen Pins und zoomt auf den aktiven Ort.
Zusammenhang (Hierarchie)
- Fundament: die Server-Dateien (Leaflet selbst).
- Darauf sitzt der Gadget-Code (
.js+.css),
der das Verhalten bestimmt.
- Der Code zieht seine Daten aus den zwei JSON-Seiten (Orte + Gemeinden).
- Einzelne Wiki-Seiten lösen mit einem einzeiligen
<div>
die Karte aus.
- Die Gadgets-Definition ist der Schalter, der das Ganze aktiviert.