maik
bfcb2ce6c0
- static/geo/deutschland-bundeslaender.geojson (BKG, vereinfacht, ~40KB) - map.js: Tile-Layer entfernt, Bundeslaender-GeoJSON per same-origin fetch als Vektor-Hintergrund; Detail-Minikarte als Deutschland-Locator - hugo.toml: OSM tileURL entfernt, Attribution nur noch als Text - CSS: neutraler Kartenhintergrund statt Tile-Grau - Ergebnis: 0 externe Requests (per Playwright-Netzwerk-Audit verifiziert)
124 lines
5.1 KiB
Markdown
124 lines
5.1 KiB
Markdown
# Offener Prozess – Interaktive Karte (Hugo)
|
||
|
||
Hugo-Neubau von [map.offener-prozess.de](https://map.offener-prozess.de/)
|
||
(Ablösung des alten WordPress/Listable-Setups). Interaktive Karte der
|
||
Schauplätze des NSU-Komplexes mit **Leaflet** und einer **lokalen Deutschland-Karte**
|
||
(Bundesländer-GeoJSON im Repo, keine externen Kacheln/CDN – DSGVO-freundlich),
|
||
im Layout ans Original angelehnt (Split-View:
|
||
Kartenliste links, Karte rechts), umgesetzt mit dem Theme
|
||
[`themes/op-dz/`](themes/op-dz/) (UIkit 3, Schrift *ABC Favorit*, alle Assets
|
||
lokal/DSGVO-konform).
|
||
|
||
## Starten
|
||
|
||
```bash
|
||
hugo server # Vorschau: http://localhost:1313
|
||
hugo --gc --minify # Produktions-Build nach ./public
|
||
```
|
||
|
||
Voraussetzung: **Hugo Extended ≥ 0.116**.
|
||
|
||
## Inhalt
|
||
|
||
**118 Schauplätze** wurden von der Altseite importiert (112 mit Koordinaten,
|
||
6 ohne – erscheinen als Cards, aber nicht als Marker), verteilt auf **18
|
||
Kategorien** (Mordanschläge, Raubüberfälle, Aufenthaltsorte, Wohnungen des Trios,
|
||
Fanzines, Unterstützende, Behörden …). Texte, Adressen, Koordinaten, Quellen und
|
||
Bilder stammen von map.offener-prozess.de.
|
||
|
||
## Struktur
|
||
|
||
```
|
||
hugo.toml Konfiguration: Taxonomie, Menüs, Kartenkacheln, Params
|
||
data/kategorien.yaml Kategorie → Markerfarbe (Reihenfolge = Filter-Reihenfolge)
|
||
content/
|
||
_index.md Startseite (= Karten-Explorer)
|
||
schauplaetze/<slug>/ je Schauplatz ein Page-Bundle (index.md + optional cover.*)
|
||
so-funktionierts.md, ueber.md
|
||
layouts/index.html Startseite → Explorer-Partial
|
||
themes/op-dz/
|
||
layouts/partials/
|
||
explorer.html Split-View (Liste + Suche + Filter + Karte)
|
||
karte.html Karten-Container + eingebettete Marker-Daten (JSON)
|
||
schauplatz-card.html gelbe Card (mit data-Attributen für JS-Filter)
|
||
layouts/schauplaetze/ list.html (Explorer) + single.html (Detail mit Sidebar)
|
||
layouts/_default/term.html Kategorie-Seite (gefilterter Explorer)
|
||
assets/js/map.js Leaflet: Cluster, Kategorie-Filter, Textsuche, Card↔Marker
|
||
static/vendor/ leaflet, markercluster, uikit (alle lokal)
|
||
```
|
||
|
||
## Einen Schauplatz anlegen
|
||
|
||
Neuer Ordner `content/schauplaetze/<slug>/index.md`:
|
||
|
||
```yaml
|
||
---
|
||
title: "Titel"
|
||
subtitle: "Namen / Kurzkontext"
|
||
date: 2004-02-25
|
||
kategorien: ["Mordanschläge"] # muss zu data/kategorien.yaml passen
|
||
lat: 54.1104949
|
||
lng: 12.1544098
|
||
address: "Straße Nr, PLZ Ort"
|
||
datum: "25.02.2004" # optionales Anzeige-Datum in der Sidebar
|
||
quelle: "Quellenangabe"
|
||
featured: true # optional → „Tipp!"-Markierung
|
||
---
|
||
|
||
Fließtext …
|
||
```
|
||
|
||
Der Punkt erscheint automatisch auf allen Karten (Start, Kategorie) und bekommt
|
||
eine Detailseite mit Mini-Karte + „Anfahrt per OpenStreetMap". Ein Bild
|
||
`cover.jpg` im selben Ordner wird als Card-/Kopfbild genutzt.
|
||
|
||
## Karte (komplett lokal, keine externen CDN)
|
||
|
||
Die Basemap ist **keine** externe Kachel (kein OpenStreetMap/CDN, DSGVO-freundlich),
|
||
sondern eine lokale **Bundesländer-GeoJSON** unter
|
||
[`static/geo/deutschland-bundeslaender.geojson`](static/geo/deutschland-bundeslaender.geojson)
|
||
(amtliche BKG-Geometrie, vereinfacht, ~40 KB). `map.js` lädt sie same-origin per
|
||
`fetch` und rendert sie vektoriell mit Leaflet (Bundesländer-Grenzen blau, Land
|
||
cremefarben). 118 Marker werden per Leaflet.markercluster gebündelt; Farbe =
|
||
Kategorie (`data/kategorien.yaml`). Attribution steht als **Text** in `hugo.toml`
|
||
unter `[params.map]` (kein Request).
|
||
|
||
Tradeoff: keine Straßen-Detailtiefe beim Reinzoomen – die Karte ist eine
|
||
Übersichts-/Verortungskarte. Die Detailseiten zeigen den Ort als Pin auf der
|
||
ganzen Deutschland-Silhouette (Locator). Neue amtliche Geometrie:
|
||
[isellsoap/deutschlandGeoJSON](https://github.com/isellsoap/deutschlandGeoJSON)
|
||
(`2_bundeslaender/3_mittel.geo.json` für mehr Detail).
|
||
|
||
## Externe Quellen
|
||
|
||
Die `quelle`-Angabe eines Schauplatzes wird auf der Detailseite unter „Externe
|
||
Quellen" ausgegeben; enthaltene URLs werden automatisch zu anklickbaren Links
|
||
(öffnen in neuem Tab, `rel="noopener"`) — umgesetzt über das Partial
|
||
[`themes/op-dz/layouts/partials/linkify.html`](themes/op-dz/layouts/partials/linkify.html).
|
||
|
||
## Kiosk-Modus
|
||
|
||
Für den Ausstellungs-/Terminalbetrieb lässt sich die Seite über einen
|
||
URL-Parameter „verriegeln":
|
||
|
||
```
|
||
?kiosk=true Kiosk-Modus aktivieren (auch ?kiosk=1)
|
||
?kiosk=false Kiosk-Modus verlassen (auch ?kiosk=0)
|
||
```
|
||
|
||
Ist der Modus aktiv, werden **externe Links** (anderer Host) sowie
|
||
`mailto:`/`tel:`-Links **unklickbar** gemacht — der Linktext bleibt lesbar, wirkt
|
||
aber wie normaler Fließtext. Die **interne Navigation bleibt erhalten**, damit
|
||
Karte und Schauplätze weiter erkundet werden können.
|
||
|
||
Der Modus wird beim ersten Aufruf mit `?kiosk=true` gesetzt und bleibt für die
|
||
**gesamte Browser-Session** aktiv (auch beim Weiterklicken ohne den Parameter);
|
||
verlassen wird er mit `?kiosk=false`. Logik:
|
||
[`assets/js/kiosk.js`](assets/js/kiosk.js) (global auf allen Seiten geladen).
|
||
|
||
## Erneut importieren
|
||
|
||
Der Import-Script (WP-Job-Manager-AJAX `jm-ajax/get_listings/` + Detailseiten)
|
||
liegt unter `scratchpad/import.py`. Erneut ausführbar, überschreibt die Bundles
|
||
unter `content/schauplaetze/` (das `_index.md` bleibt).
|