WEBklar/Kirschner-Geb-udeservice
4
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Echte Karte auf Unternehmen und Kontakt (MapLibre + OpenFreeMap)

Browse Source 
Ersetzt die schematische Karte durch MapLibre GL 6.11 (lokal
eingebunden, ohne React, da die Seite statisch ist). Kacheln vom
OpenFreeMap-Stil "dark", auf die Nachtblau-Palette umgefärbt; Marker
mit Label, lädt beim Heranscrollen und zoomt sanft auf den Standort.
Die schematische Karte bleibt als Vorschau und Fallback ohne WebGL.
Datenschutzerklärung um den Kartenanbieter ergänzt.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
NotPika69andClaude Opus 5.5 committed 2026-09-30 22:00:33 +02:00
1 parent 5172b54339
commit 09f40da363
14 files changed
+1139 -43
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

assets/site.css
+17 -1
View File
@@ -502,10 +502,26 @@ html.has-intro .intro {
.map-card { display: grid; gap: var(--s4); align-items: stretch; }
@media (min-width: 900px) { .map-card { grid-template-columns: 1fr 1.3fr; } }
.map {
position: relative; min-height: 360px; border-radius: var(--radius); overflow: hidden; background: var(--night-900);
position: relative; min-height: clamp(360px, 36vw, 620px); border-radius: var(--radius); overflow: hidden; background: var(--night-900);
color: var(--fog);
}
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__placeholder { position: absolute; inset: 0; transition: opacity .8s var(--ease); }
.map .map__canvas { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease); } /* schlägt .maplibregl-map { position: relative } */
.map.is-live .map__canvas { opacity: 1; }
.map.is-live .map__placeholder { opacity: 0; pointer-events: none; }
.map-marker { display: grid; justify-items: center; gap: .45rem; pointer-events: none; }
.map-marker__label { padding: .45rem .8rem; background: var(--kk); color: var(--night-950); font: 700 .875rem/1.2 var(--font); border-radius: var(--radius); white-space: nowrap; box-shadow: 0 10px 30px rgba(10,20,36,.45); }
.map-marker__dot { position: relative; width: 16px; height: 16px; border-radius: 50%; background: var(--kk); box-shadow: 0 0 0 4px rgba(10,20,36,.9); }
.map-marker__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--kk); animation: pulse 2.4s var(--ease) infinite; }
/* MapLibre-Bedienelemente im Seitenstil */
.map .maplibregl-ctrl-group { background: var(--night-900); box-shadow: inset 0 0 0 1px var(--line-dark); border-radius: var(--radius); }
.map .maplibregl-ctrl-group button + button { border-top-color: var(--line-dark); }
.map .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1) brightness(1.4); }
.map .maplibregl-ctrl.maplibregl-ctrl-attrib, .map .maplibregl-ctrl.maplibregl-ctrl-attrib.maplibregl-compact-show { background: rgba(10,20,36,.85); color: var(--fog-mute); font: 400 .6875rem/1.4 var(--font); }
.map .maplibregl-ctrl-attrib-inner, .map .maplibregl-ctrl-attrib a { color: var(--fog-soft); }
.map .maplibregl-ctrl-attrib-button { filter: invert(1); }
.map .maplibregl-cooperative-gesture-screen { background: rgba(10,20,36,.72); color: var(--fog); font: 600 1rem/1.4 var(--font); }
.map__pin { position: absolute; left: 56%; top: 46%; transform: translate(-50%, -100%); display: grid; justify-items: center; gap: .4rem; }
.map__pin span { padding: .45rem .8rem; background: var(--kk); color: var(--night-950); font-weight: 700; font-size: .875rem; border-radius: var(--radius); white-space: nowrap; }
.map__pin i { width: 14px; height: 14px; border-radius: 50%; background: var(--kk); box-shadow: 0 0 0 6px rgba(91,138,214,.25); }