MEC-Centerplan im Google-Maps-Modus

Die alten MEC-Webseiten zeigten den Centerplan als Google-Maps-Karte mit einem georeferenzierten SVG-Etagen-Overlay und klickbaren Branchen-Pins auf den Shop-Positionen. Cockpit kann diesen klassischen Look heute auf der Einkaufswelt-Seite 1:1 reproduzieren, ohne den bestehenden Centerplan-Workflow (SVG-Editor, Shop-Mapping, Routen) zu verändern.

Diese Anleitung richtet sich an Center-Betreiber, deren Webseite mit einem der MEC-Templates (A, D, Grooss oder Green) läuft und die den klassischen Look gewohnt sind.

Wann brauche ich diesen Modus?

Variante	Wann?	Voraussetzungen
Standard (2D / 3D)	Andere Templates oder MEC ohne klassischen Look	Nur das SVG-Centerplan-System – keine GPS-Daten nötig
Georeferenz-Overlay (OSM)	MEC-ähnlich, aber ohne Google-Maps-Kosten (OpenStreetMap-Hintergrund)	GPS-Eckpunkte des Etagen-Overlays
Google Maps + SVG (klassisch wie MEC)	Originalgetreuer MEC-Look mit Google-Karte + Branchen-Pins	Google-Maps-API-Key, GPS-Eckpunkte, Geo-Marker pro Shop

Du erkennst die Modi am Auswahlfeld „Karten-Darstellung" im Webseiten-Tab → Reiter Centerplan.

Schritt-für-Schritt-Aktivierung

1) Google-Maps-API-Key bereitstellen (einmalig pro Installation)

Das Cockpit-Center-Website-Frontend nutzt die Umgebungsvariable NEXT_PUBLIC_GOOGLE_MAPS_API_KEY. Wichtig: Diese Variable muss in beiden Apps gesetzt sein:

• apps/center-website/.env.local (oder beim Hosting der Center-Website) – hier liest der öffentliche Einkaufswelt-Renderer den Key, um die Google-Karte zu laden.
• apps/dashboard/.env.local (optional, aber empfohlen) – wird nur für zukünftige Dashboard-Karten-Integrationen genutzt; der Geo-Marker-Tab selbst funktioniert ohne Google-Maps-Key (er nutzt Leaflet/OSM).

Ohne Key in der Center-Website-.env.local fällt der Modus automatisch auf den Leaflet-Renderer zurück, damit die Seite weiter funktioniert. Bei API-Key-Restriktionen für localhost, die jeweiligen Center-Website-Domains und ggf. die Dashboard-Domain freigeben.

2) Modus im Webseiten-Tab umstellen

1. Im Dashboard zum Center → Webseite → Reiter Centerplan.
2. Karten-Darstellung → Google Maps + SVG (klassisch wie MEC) wählen.
3. Im erscheinenden Hinweis-Block die GPS-Eckpunkte des Etagen-Overlays pflegen:

• Süd / West = unten-links auf der Karte (Dezimalgrad).
• Nord / Ost = oben-rechts auf der Karte (Dezimalgrad).
• Tipp: In Google Maps Rechtsklick → „Was ist hier?" liefert die Werte für die jeweilige Ecke.

4. Speichern.

Diese Eckpunkte werden in centerplanConfig.overlayGeoBounds gespeichert und sind kompatibel mit dem Modus „Georeferenz-Overlay (OSM)" – ein Wechsel zwischen den Modi geht ohne Datenverlust.

3) Etagen-SVG hochladen (falls noch nicht passiert)

Im Centerplan-Editor (Dashboard → Centerpläne → Etage bearbeiten) im Tab SVG-Centerplan die Etagen-SVG hinterlegen. Das ist der gewohnte Workflow – unverändert.

4a) Alternative: SVG direkt im Mapping-Tab über Google Maps positionieren

Seit Mai 2026 kannst du Schritt 2 (GPS-Eckpunkte tippen) komplett überspringen und das Etagen-SVG interaktiv im Mapping-Tab über die Google-Karte legen.

Wo: Dashboard → Centerpläne → Etage bearbeiten → Tab „Shop-Mapping". Oben gibt es jetzt einen Umschalter:

• SVG-Ansicht (Standard) – die klassische Ansicht mit der reinen SVG-Karte.
• Karten-Ansicht – Google Maps im Hintergrund, das SVG als drag-/skalierbares Overlay darüber.

So funktioniert die Karten-Ansicht:

• Blaue Eck-Punkte (NW, NE, SE, SW) ziehen → das SVG ändert seine Größe.
• Gelben Punkt in der Mitte ziehen → das gesamte SVG verschieben.
• Über der Karte: Slider „Deckkraft" (20–100 %), Buttons „Speichern", „Zurücksetzen" (auf zuletzt gespeicherte Position) und „Einpassen" (Karte auf SVG zoomen).
• Erst „SVG-Position speichern" – sonst geht der Zustand beim Reload verloren.

Klick auf eine SVG-Fläche:

• Freie Fläche: Modal öffnet sich, du wählst Shop / Filiale / Service / Büro aus der Liste – die Zuordnung wird sofort gespeichert.
• Bereits zugeordnete Fläche (grün hinterlegt): kleines Aktions-Popup mit „Zuordnung löschen" / „Abbrechen".

Warum das nützlich ist:

• Du musst die GPS-Eckpunkte nicht mehr per Hand abtippen – die Position wird beim Ziehen live in centerplanConfig.overlayGeoBounds umgerechnet und gespeichert.
• Die Bounds werden unabhängig vom aktiven Karten-Modus gespeichert (kein Datenverlust beim Renderer-Wechsel). Du kannst sie also schon einmal setzen, bevor du im Webseiten-Tab auf „Google Maps + SVG" umstellst.
• Voraussetzung: GPS des Centers (Webseiten-Tab → Geo / Koordinaten) + NEXT_PUBLIC_GOOGLE_MAPS_API_KEY in apps/dashboard/.env.local. Fehlt eines davon, zeigt die Karten-Ansicht einen Hinweis und du arbeitest weiter mit der SVG-Ansicht.

Hinweis: Welche Ansicht zuletzt gewählt wurde, merkt sich der Browser (localStorage). Default ist SVG-Ansicht – wer den klassischen Workflow bevorzugt, braucht nichts umzustellen.

4) Geo-Position pro Shop setzen

Im Centerplan-Editor im neuen Tab Geo-Marker:

• Linke Spalte: Liste aller Shops, Filialen, Services und Büros/Praxen des Centers – auch jene, die noch keine Etage haben. Jeder Eintrag zeigt einen Status-Badge:
  • GPS – auf dieser Etage gemappt + GPS-Position gesetzt.
  • offen – auf dieser Etage gemappt, GPS-Position fehlt.
  • andere Etage – nur auf einer anderen Etage gemappt.
  • nicht zugeordnet – noch nirgendwo auf der Karte. Klick auf „Auf Karte setzen" funktioniert in allen vier Fällen: Wenn auf dieser Etage noch kein MapLocation-Eintrag existiert, wird er beim ersten Klick auf der Karte automatisch angelegt – ohne Umweg übers Shop-Mapping-Tab. Die Status-Badges in der oberen Statistik-Leiste sind klickbar und filtern die Liste (z. B. „nur ohne GPS auf dieser Etage" oder „nur nicht zugeordnete Items").
• Rechte Spalte: OpenStreetMap-Karte mit:
  • Center-Mittelpunkt (grauer Marker, aus den Adresskoordinaten).
  • Falls in Schritt 2 GPS-Eckpunkte gepflegt wurden und ein Etagen-SVG hochgeladen ist: das Etagen-SVG als transparentes Overlay (zwischen den GPS-Eckpunkten gespannt). Du siehst den Centerplan also 1:1 dort liegen, wo er später auch auf der Live-Website über der Google-Karte schwebt.
    • Über der Karte gibt es Buttons „Overlay sichtbar/aus" und einen Deckkraft-Schieber (10–100 %), um den Centerplan durchscheinend zu machen.
    • Wenn das SVG fehlt oder die Eckpunkte nicht gepflegt sind, wird stattdessen nur ein gestrichelt-blaues Rechteck als Hilfslinie gezeigt.
  • Bereits gesetzte Pins als orange Kreise.

So setzt du eine Position:

1. Links in der Liste den gewünschten Eintrag suchen (Suchfeld + Filter-Badges helfen, z. B. „nicht zugeordnet" anklicken).
2. „Auf Karte setzen" klicken.

• Hat der Eintrag schon einen MapLocation auf dieser Etage → Karte geht in den Klick-Modus (Crosshair-Cursor).
• Hat er noch keinen → wird automatisch angelegt und die Karte geht direkt in den Klick-Modus.

3. Direkt auf den passenden Bereich des transparenten Centerplan-Overlays klicken – die Pin-Position wird sofort gespeichert (kleiner Toast oben rechts).

So korrigierst du eine Position:

• Direkt die Lat/Lng-Felder in der Liste editieren (Tab/Klick außerhalb speichert).
• Oder erneut „Auf Karte setzen" → neuen Punkt klicken.
• Mit „Position löschen" entfernst du die Geo-Position (der Shop erscheint dann nicht mehr als Pin auf der Center-Website).

Der Tab Geo-Marker ergänzt den bestehenden Tab Shop-Mapping. Das Shop-Mapping ordnet Shops den SVG-Flächen zu (für Hover/Klick auf der SVG-Etage). Geo-Marker setzen die GPS-Position desselben Shops für die Branchen-Pins auf der Google-Karte. Beide Daten ergänzen sich; keine ersetzt die andere. Wer „Google Maps + SVG" nutzen will, kann den Geo-Marker-Tab auch eigenständig pflegen – das Shop-Mapping ist dafür nicht zwingend erforderlich.

5) Live prüfen

Auf der Center-Website die Einkaufswelt-Seite öffnen. Sichtbar sind:

• Der Shop-Sidebar-Block links wie gewohnt (#centerplan-navigation).
• Rechts daneben die Google-Maps-Karte mit dem Etagen-SVG als georeferenziertes Overlay.
• Jeder Shop mit gepflegter Geo-Position als branchen-farbiger Pin.
• Rechts unten ein Etagen-Picker (wenn mehrere Etagen aktiv sind).

Klick-Verhalten (1:1 nach Original-MEC): Beim Klick auf einen Shop in der Sidebar fliegt die Karte zum Pin:

• panTo-Animation zur Shop-Position
• Zoom-Stufe 20 (entspricht Original setZoom(20))
• Pixel-Offset, damit der Pin rechts neben der überlappenden Sidebar sichtbar bleibt:
  • Sidebar (700px) sichtbar → 350px Offset
  • Nur Detail-Panel (350px) → 175px Offset
  • Mobile (<1060px) → 0 Offset (Panels nehmen die volle Breite ein)
• Wenn der Shop auf einer anderen Etage liegt, wechselt das Etagen-Overlay automatisch.
• Beim Schließen des Detail-Panels (Pfeil zurück) zoomt die Karte zurück auf die Etagen-Bounds (entspricht Original zoomToAll).

Fehlt eine der Voraussetzungen (API-Key, GPS-Eckpunkte, mind. eine aktive Etage mit hochgeladenem SVG), zeigt die Seite automatisch den Leaflet-Modus als Fallback.

Häufige Fragen

Muss ich für jeden Shop GPS-Koordinaten haben?
Nein. Nur Shops mit hinterlegter Position erscheinen als Pin auf der Karte. Shops ohne Position sind im Sidebar-Block sichtbar und nutzen weiterhin das normale Shop-Mapping.

Was passiert mit bestehenden Daten, wenn ich den Modus wechsle?
Nichts. Die Modi nutzen dieselben overlayGeoBounds und MapLocation- Einträge. Ein Wechsel zwischen „Georeferenz-Overlay (OSM)" und „Google Maps + SVG" ist ohne Datenverlust.

Wie zeichne ich die Branchen-Farben?
Die Pins greifen auf die Shop.category/categoryRef.color-Werte zurück (gleich wie der bestehende Centerplan). Für eine konsistente Optik solltest du den Kategorien im Dashboard Farben hinterlegen.

Wie verhält sich der Tab Geo-Marker, wenn ich den Modus auf „Standard" oder „Georeferenz-Overlay" zurückstelle?
Der Tab bleibt im Editor sichtbar (für spätere Wiederverwendung), wird auf der Center-Website aber nicht ausgewertet. Die Werte bleiben in der Datenbank erhalten.

Querverweise

• Entwickler-Doku zum Datenmodell + API: [developer-guide/mec-shared-bausteine](../developer-guide/mec-shared-bausteine#phase-b-114-einkaufswelt--centerplan--original-markup--klassischer-google-maps-svg-modus-mai-2026).
• Klassischer Centerplan-Workflow (SVG, Shops, Routen): [./content-creator-workflow](./content-creator-workflow).
• SVG-Strukturanforderungen: [./svg-struktur](./svg-struktur).