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)
This commit is contained in:
@@ -2,8 +2,9 @@
|
|||||||
|
|
||||||
Hugo-Neubau von [map.offener-prozess.de](https://map.offener-prozess.de/)
|
Hugo-Neubau von [map.offener-prozess.de](https://map.offener-prozess.de/)
|
||||||
(Ablösung des alten WordPress/Listable-Setups). Interaktive Karte der
|
(Ablösung des alten WordPress/Listable-Setups). Interaktive Karte der
|
||||||
Schauplätze des NSU-Komplexes mit **Leaflet + OpenStreetMap** (statt der alten
|
Schauplätze des NSU-Komplexes mit **Leaflet** und einer **lokalen Deutschland-Karte**
|
||||||
Google-Maps-/Mapbox-Einbindung), im Layout ans Original angelehnt (Split-View:
|
(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
|
Kartenliste links, Karte rechts), umgesetzt mit dem Theme
|
||||||
[`themes/op-dz/`](themes/op-dz/) (UIkit 3, Schrift *ABC Favorit*, alle Assets
|
[`themes/op-dz/`](themes/op-dz/) (UIkit 3, Schrift *ABC Favorit*, alle Assets
|
||||||
lokal/DSGVO-konform).
|
lokal/DSGVO-konform).
|
||||||
@@ -71,11 +72,22 @@ Der Punkt erscheint automatisch auf allen Karten (Start, Kategorie) und bekommt
|
|||||||
eine Detailseite mit Mini-Karte + „Anfahrt per OpenStreetMap". Ein Bild
|
eine Detailseite mit Mini-Karte + „Anfahrt per OpenStreetMap". Ein Bild
|
||||||
`cover.jpg` im selben Ordner wird als Card-/Kopfbild genutzt.
|
`cover.jpg` im selben Ordner wird als Card-/Kopfbild genutzt.
|
||||||
|
|
||||||
## Karte / Kacheln
|
## Karte (komplett lokal, keine externen CDN)
|
||||||
|
|
||||||
Standard: OpenStreetMap. Eigener Tile-Server (OSM-Usage-Policy!) in `hugo.toml`
|
Die Basemap ist **keine** externe Kachel (kein OpenStreetMap/CDN, DSGVO-freundlich),
|
||||||
unter `[params.map]` (`tileURL`, `attribution`). 118 Marker werden per
|
sondern eine lokale **Bundesländer-GeoJSON** unter
|
||||||
Leaflet.markercluster gebündelt; Farbe = Kategorie (`data/kategorien.yaml`).
|
[`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
|
## Externe Quellen
|
||||||
|
|
||||||
|
|||||||
@@ -22,8 +22,9 @@ removePathAccents = true # ä/ö/ü → a/o/u in URLs
|
|||||||
email = "info@offener-prozess.de"
|
email = "info@offener-prozess.de"
|
||||||
|
|
||||||
[params.map]
|
[params.map]
|
||||||
tileURL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
# Keine externen Kacheln/CDN – Basemap ist die lokale Bundesländer-GeoJSON
|
||||||
attribution = '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>-Mitwirkende'
|
# unter static/geo/. Attribution nur als Text (kein Request).
|
||||||
|
attribution = "Geodaten: © GeoBasis-DE / BKG (Bundesländergrenzen)"
|
||||||
|
|
||||||
# ============================================================================
|
# ============================================================================
|
||||||
# SPRACHEN
|
# SPRACHEN
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@@ -474,9 +474,11 @@ a:hover { color: var(--op-blau-dunkel); }
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 560px;
|
height: 560px;
|
||||||
border: 2px solid var(--op-blau);
|
border: 2px solid var(--op-blau);
|
||||||
background: var(--op-papier);
|
background: #d9e1ea; /* neutrale Fläche „ausserhalb DE" (kein Tile-Grau) */
|
||||||
z-index: 0; /* unter der Sticky-Navbar halten */
|
z-index: 0; /* unter der Sticky-Navbar halten */
|
||||||
}
|
}
|
||||||
|
/* Leaflet-eigener Container-Hintergrund (ohne Tiles) an den Hausstil angleichen */
|
||||||
|
.op-map .leaflet-container { background: #d9e1ea; }
|
||||||
.op-map--klein { height: 320px; }
|
.op-map--klein { height: 320px; }
|
||||||
|
|
||||||
/* Leaflet-Popup im Hausstil: Bild oben, gelber Body (wie im Original) */
|
/* Leaflet-Popup im Hausstil: Bild oben, gelber Body (wie im Original) */
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
/* =========================================================================
|
/* =========================================================================
|
||||||
OP·Karte – Leaflet + OpenStreetMap
|
OP·Karte – Leaflet mit LOKALER Deutschland-Karte (keine externen Tiles/CDN)
|
||||||
- farbige Kreis-Marker je Kategorie, Clustering (markercluster)
|
- Basemap = Bundesländer-GeoJSON aus dem Repo (static/geo/…), vektoriell
|
||||||
|
- farbige Pin-Marker je Kategorie, Clustering (markercluster)
|
||||||
- Kategorie-Filter (Checkboxen) + Textsuche, synchron mit der Card-Liste
|
- Kategorie-Filter (Checkboxen) + Textsuche, synchron mit der Card-Liste
|
||||||
- Klick auf Card öffnet den zugehörigen Marker
|
- Klick auf Card öffnet den zugehörigen Marker
|
||||||
Daten kommen aus <script type="application/json" id="op-map-data">.
|
Daten kommen aus <script type="application/json" id="op-map-data">.
|
||||||
@@ -18,15 +19,45 @@
|
|||||||
var places = payload.places || [];
|
var places = payload.places || [];
|
||||||
var colors = payload.colors || {};
|
var colors = payload.colors || {};
|
||||||
var defaultColor = payload.defaultColor || "#1e2758";
|
var defaultColor = payload.defaultColor || "#1e2758";
|
||||||
var tileUrl = payload.tileUrl || "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
|
var klein = !!payload.klein;
|
||||||
var attribution = payload.attribution ||
|
var geojsonUrl = payload.geojsonUrl || "";
|
||||||
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>-Mitwirkende';
|
var attribution = payload.attribution || "Geodaten: © GeoBasis-DE / BKG";
|
||||||
|
var germanyBounds = null;
|
||||||
|
|
||||||
var map = L.map(el, { scrollWheelZoom: false });
|
var map = L.map(el, {
|
||||||
L.tileLayer(tileUrl, { maxZoom: 19, attribution: attribution }).addTo(map);
|
scrollWheelZoom: false,
|
||||||
|
minZoom: 5, maxZoom: 12,
|
||||||
|
attributionControl: true
|
||||||
|
});
|
||||||
|
map.attributionControl.setPrefix(false).addAttribution(attribution);
|
||||||
map.on("focus", function () { map.scrollWheelZoom.enable(); });
|
map.on("focus", function () { map.scrollWheelZoom.enable(); });
|
||||||
map.on("blur", function () { map.scrollWheelZoom.disable(); });
|
map.on("blur", function () { map.scrollWheelZoom.disable(); });
|
||||||
|
|
||||||
|
// Lokale Deutschland-Karte (Bundesländer) als Vektor-Hintergrund laden.
|
||||||
|
// Same-Origin-Fetch aus dem Repo – kein externer Request.
|
||||||
|
if (geojsonUrl) {
|
||||||
|
fetch(geojsonUrl)
|
||||||
|
.then(function (r) { return r.ok ? r.json() : null; })
|
||||||
|
.then(function (geo) {
|
||||||
|
if (!geo) return;
|
||||||
|
var land = L.geoJSON(geo, {
|
||||||
|
style: {
|
||||||
|
color: "#1e2758", weight: 1, opacity: .85,
|
||||||
|
fillColor: "#f4f1e6", fillOpacity: 1
|
||||||
|
},
|
||||||
|
interactive: false
|
||||||
|
}).addTo(map);
|
||||||
|
land.bringToBack();
|
||||||
|
germanyBounds = land.getBounds();
|
||||||
|
// Detail-Minikarte = Verortung: ganz Deutschland mit dem einen Pin zeigen.
|
||||||
|
// Grosse Karte: nur wenn (noch) keine Marker den Ausschnitt bestimmen.
|
||||||
|
if (klein || !records.length) {
|
||||||
|
try { map.fitBounds(germanyBounds.pad(0.02)); } catch (e) {}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(function () {});
|
||||||
|
}
|
||||||
|
|
||||||
var useCluster = places.length > 1 && typeof L.markerClusterGroup === "function";
|
var useCluster = places.length > 1 && typeof L.markerClusterGroup === "function";
|
||||||
var group = useCluster
|
var group = useCluster
|
||||||
? L.markerClusterGroup({ maxClusterRadius: 45, showCoverageOnHover: false })
|
? L.markerClusterGroup({ maxClusterRadius: 45, showCoverageOnHover: false })
|
||||||
@@ -93,8 +124,13 @@
|
|||||||
});
|
});
|
||||||
var countCards = cards.filter(function (c) { return !c.classList.contains("is--hidden"); }).length;
|
var countCards = cards.filter(function (c) { return !c.classList.contains("is--hidden"); }).length;
|
||||||
if (countEl) countEl.textContent = countCards;
|
if (countEl) countEl.textContent = countCards;
|
||||||
if (bounds.isValid()) map.fitBounds(bounds.pad(0.15));
|
if (bounds.isValid()) {
|
||||||
else if (allBounds) map.fitBounds(allBounds.pad(0.15));
|
// Auf der Detail-Minikarte nicht ins Leere zoomen: Umkreis statt Punkt
|
||||||
|
if (klein) map.fitBounds(bounds.pad(0.15), { maxZoom: 8 });
|
||||||
|
else map.fitBounds(bounds.pad(0.15));
|
||||||
|
}
|
||||||
|
else if (allBounds) map.fitBounds(allBounds.pad(0.15), klein ? { maxZoom: 8 } : undefined);
|
||||||
|
else if (germanyBounds) map.fitBounds(germanyBounds.pad(0.02));
|
||||||
}
|
}
|
||||||
|
|
||||||
// --- DOM-Hooks ---
|
// --- DOM-Hooks ---
|
||||||
|
|||||||
@@ -35,8 +35,9 @@
|
|||||||
"places" $places
|
"places" $places
|
||||||
"colors" $colorMap
|
"colors" $colorMap
|
||||||
"defaultColor" $default
|
"defaultColor" $default
|
||||||
"tileUrl" (site.Params.map.tileURL | default "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")
|
"klein" ($klein | default false)
|
||||||
"attribution" (site.Params.map.attribution | default `© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>-Mitwirkende`)
|
"geojsonUrl" ("geo/deutschland-bundeslaender.geojson" | relURL)
|
||||||
|
"attribution" (site.Params.map.attribution | default "Geodaten: © GeoBasis-DE / BKG (Bundesländergrenzen)")
|
||||||
}}
|
}}
|
||||||
|
|
||||||
<div id="op-map" class="op-map{{ if $klein }} op-map--klein{{ end }}"
|
<div id="op-map" class="op-map{{ if $klein }} op-map--klein{{ end }}"
|
||||||
|
|||||||
Reference in New Issue
Block a user