Admin: Die Seite wurde neu angelegt: „Hauptseite > Schwarzatal.org == Technische Dokumentation: Kartenprojekt (WikiMap) == Das Kartenprojekt bindet interaktive [https://leafletjs.com 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 `…“`


2026-06-28T08:34:47Z
Die Seite wurde neu angelegt: „Hauptseite > Schwarzatal.org  == Technische Dokumentation: Kartenprojekt (WikiMap) ==  Das Kartenprojekt bindet interaktive [https://leafletjs.com 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 <code>…“
Neue Seite
[[Hauptseite]] > [[Hauptseite#Schwarzatal.org|Schwarzatal.org]]



== Technische Dokumentation: Kartenprojekt (WikiMap) ==



Das Kartenprojekt bindet interaktive [https://leafletjs.com 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 <code>/resources/lib/leaflet/</code> – hier liegen

die fertigen Programmbibliotheken, die nicht bearbeitet werden.

* '''Wiki-Seiten''' im <code>MediaWiki:</code>-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:



{| class="wikitable"

! Datei !! Funktion

|-

| <code>leaflet.js</code> || Die eigentliche Kartenbibliothek – zeichnet

Karten, reagiert auf Zoom und Klick, setzt Pins.

|-

| <code>leaflet.css</code> || Das Aussehen von Leaflet.

|-

| <code>Control.FullScreen.umd.js</code> || Das Vollbild-Plugin.

|-

| <code>Control.FullScreen.css</code> || Aussehen des Vollbild-Plugins.

|-

| <code>images/</code> || 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:



{| class="wikitable"

! Seite !! Funktion

|-

| <code>MediaWiki:Gadget-WikiMap.js</code> || '''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.

|-

| <code>MediaWiki:Gadget-WikiMap.css</code> || Bestimmt das Aussehen der Karten

– Größe des Kartenfensters und Optik der Pins (inkl. des pulsierenden roten

aktiven Pins).

|-

| <code>MediaWiki:WikiMap-Orte.json</code> || '''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.

|-

| <code>MediaWiki:WikiMap-Gemeinden.json</code> || Datenquelle für die

Gemeinde-Umrisse. Enthält die GeoJSON-Polygone aller Gemeinden; beim Klick auf

einen Umriss springt man zur jeweiligen Gemeinde-Seite.

|-

| <code>MediaWiki:Gadgets-definition</code> || '''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:



<pre>

<div class="wikimap" data-aktiv-ort="gaestehaus-mustertal"></div>

</pre>



Das <code>class="wikimap"</code> ist das Signal „hier soll eine Karte hin".

Das <code>data-aktiv-ort</code> 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 <code>.wikimap</code>-Element und lädt Leaflet von den

Server-Dateien nach.

# Es holt die Ortsdaten aus <code>WikiMap-Orte.json</code>.

# 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''' (<code>.js</code> + <code>.css</code>),

der das Verhalten bestimmt.

# Der Code zieht seine '''Daten''' aus den zwei JSON-Seiten (Orte + Gemeinden).

# Einzelne '''Wiki-Seiten''' lösen mit einem einzeiligen <code><nowiki><div></nowiki></code>

die Karte aus.

# Die '''Gadgets-Definition''' ist der Schalter, der das Ganze aktiviert.
WikiMap - Versionsgeschichte
