Files
maik bfcb2ce6c0 feat(karte): lokale Deutschland-Basemap statt OpenStreetMap-Kacheln (keine externen CDN)
- 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)
2026-08-19 13:16:16 +02:00

5.1 KiB
Raw Permalink Blame History

Offener Prozess Interaktive Karte (Hugo)

Hugo-Neubau von 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/ (UIkit 3, Schrift ABC Favorit, alle Assets lokal/DSGVO-konform).

Starten

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:

---
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 (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 (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.

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 (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).