Skip to main content

Quick Start Guide

Übersicht​

Diese Anleitung zeigt dir in 5 Schritten, wie du ein funktionierendes Wayfinding-System für dein Shopping Center einrichtest.

Schritt 1: SVG-Grundriss vorbereiten​

Option A: Beispiel-SVG verwenden​

# Kopiere ein Beispiel-SVG
cp docs/wayfinding/examples/example-mall-single-floor.svg my-mall.svg

Option B: Eigenes SVG erstellen​

  1. Öffne Adobe Illustrator, Inkscape oder Figma
  2. Erstelle Layer mit folgenden IDs:
  • shops (für Shopflächen)
  • services (für Services wie WC, Info)
  • facilities (für Aufzüge, Treppen)
  • entrances (für Eingänge)
  1. Benenne jedes Element eindeutig (z.B. shop-1, service-info)
  2. Füge data-name Attribute hinzu für Namen
  3. Exportiere als SVG

Detaillierte Anleitung: SVG-Struktur & Wayfinding

Schritt 2: SVG hochladen​

Im Dashboard:​

1. Gehe zu: Dashboard → Centerpläne → Neuer Centerplan (oder Etage bearbeiten)
2. Klicke auf "SVG hochladen" oder ziehe Datei per Drag & Drop
3. Warte auf automatische Analyse
4. Prüfe erkannte Elemente in der Vorschau

Was passiert:​

  • System analysiert SVG-Struktur
  • Extrahiert Shops, Services, Facilities
  • Zeigt Vorschau mit allen erkannten Elementen
  • Erstellt MapFloor-Eintrag in Datenbank

Erwartetes Ergebnis:​

6 Shops erkannt
4 Services erkannt
4 Facilities erkannt
3 Eingänge erkannt
5 Waypoints erkannt

Schritt 3: Floor in Datenbank anlegen​

Automatisch (empfohlen):​

Der SVG-Upload erstellt automatisch einen MapFloor-Eintrag.

Manuell (falls nötig):​

// API-Call
POST /api/wayfinding/floors

{
  "centerId": "center-uuid",
  "floorNumber": 0,
  "name": "Erdgeschoss",
  "mapImage": "/uploads/wayfinding/svg/my-mall.svg",
  "mapSvg": "<svg>...</svg>",
  "isDefault": true
}

Prüfen:​

Dashboard → Centerpläne
→ Sollte neuen Floor anzeigen

Schritt 4: Shops & Services mappen​

Im Dashboard:​

1. Gehe zu: Dashboard → Centerpläne → Mapping (oder Etage bearbeiten → Tab Mapping)
2. Wähle Center aus (oben rechts)
3. Wähle Floor aus (Tabs)
4. Siehst du:
-  Links: Unmapped Shops/Services
-  Rechts: Interaktive SVG-Karte

Mapping durchführen:​

1. Klicke auf eine Fläche in der SVG-Karte (rechts)
2. Ein Modal öffnet sich mit der Liste der verfügbaren Shops/Services
3. Wähle den Shop aus der Liste
4. Der Shop wird an der geklickten Position platziert
5. Wiederhole für alle Shops/Services

Tipps​

  • Zoom: Mausrad oder Zoom-Buttons
  • Pan: Linke Maustaste gedrückt halten + ziehen
  • Löschen: Klick auf gemappten Shop → Trash-Icon
  • Auto-Save: Mappings werden automatisch gespeichert

Schritt 5: Testen & Verifizieren​

1. Mapping-Status prüfen:​

Dashboard → Centerpläne → Mapping
→ Statistik oben: "X von Y Shops gemappt"

2. 3D-Vorschau testen:​

Dashboard → Centerpläne
→ Klick auf Floor-Karte
→ 3D-Viewer sollte sich öffnen

3. API testen:​

# Alle Floors abrufen
curl http://localhost:3000/api/wayfinding/floors?centerId=YOUR_CENTER_ID

# Alle MapLocations abrufen
curl http://localhost:3000/api/wayfinding/locations?floorId=YOUR_FLOOR_ID

4. Frontend testen:​

Frontend-App → Center-Website → Centerplan
→ Sollte interaktive Karte anzeigen

Erwartetes Endergebnis​

Nach Abschluss aller Schritte solltest du haben:

Datenbank:​

  • MapFloor-Eintrag mit SVG
  • MapLocation-Einträge für jeden Shop/Service
  • Koordinaten (x, y) für jede Location

Dashboard:​

  • SVG-Karte sichtbar in Mapping-Interface
  • Alle Shops/Services gemappt
  • 3D-Vorschau funktioniert

Frontend:​

  • Interaktive Karte auf Center-Website
  • Shops klickbar
  • Navigation funktioniert

Troubleshooting​

Problem: SVG wird nicht erkannt​

Symptom: "Keine Shops gefunden"

Lösung:

  1. Prüfe Layer-IDs in SVG: 
    <g id="shops">  <!-- Muss "shops" oder "shop" enthalten -->
      <rect id="shop-1" ... />
    </g>
  2. Prüfe Element-IDs: Müssen eindeutig sein
  3. Prüfe Größe: Min. 40x30px für Shops

Test:

# SVG-Struktur analysieren
cat my-mall.svg | grep -E 'id="(shop|service|facility)"'

Problem: Modal öffnet sich nicht beim Klick​

Symptom: Klick auf Karte zeigt keine Shop-Auswahl

Lösung:

  1. Prüfe Browser-Konsole auf Fehler
  2. Stelle sicher, dass Etage ausgewählt ist
  3. Prüfe, ob SVG geladen ist
  4. Bei kleinen Flächen: "Namen ausblenden" klicken, damit Text-Elemente nicht den Klick abfangen
  5. Versuche Browser-Refresh (Cmd+R / Ctrl+R)

Problem: Shops werden nicht gespeichert​

Symptom: Nach Refresh sind Mappings weg

Lösung:

  1. Prüfe API-Response in Network-Tab
  2. Prüfe Datenbank: 
    SELECT * FROM "MapLocation" WHERE "floorId" = 'YOUR_FLOOR_ID';
  3. Prüfe Berechtigungen (User muss Center-Zugriff haben)

Test:

# API direkt testen
curl -X POST http://localhost:3000/api/shop-mapping \
- H "Content-Type: application/json" \
- d '{
    "shopId": "shop-uuid",
    "floorId": "floor-uuid",
    "coordinates": {"x": 100, "y": 200}
  }'

Problem: Multi-Floor funktioniert nicht​

Symptom: Nur ein Floor wird erkannt

Lösung:

  1. Prüfe SVG-Struktur: 
    <g id="floor-eg">  <!-- Muss "floor" enthalten -->
      <g id="shops-floor-eg">
        <rect id="shop-eg-1" ... />
      </g>
    </g>
  2. Jeder Floor braucht eigene Gruppe
  3. Shops müssen innerhalb der Floor-Gruppe sein

Test:

# Floor-Gruppen finden
cat my-mall.svg | grep -E 'id="floor-'

Weitere Ressourcen​

🎓 Nächste Schritte​

Nach dem Basic-Setup kannst du:

  1. Waypoints hinzufügen für Navigation
  2. 3D-Modelle hochladen (GLB/GLTF)
  3. Routen definieren zwischen Locations
  4. Digital Signage integrieren
  5. QR-Codes für Locations generieren

Best Practices​

SVG-Erstellung:​

  • Verwende sprechende IDs (shop-aldi statt rect-1)
  • Füge data-name Attribute hinzu
  • Halte Struktur konsistent über alle Floors
  • Verwende Standard-Farben (siehe SVG-Struktur)

Mapping:​

  • Mappe zuerst große Shops (Anker-Mieter)
  • Dann kleine Shops
  • Zuletzt Services & Facilities
  • Prüfe Mappings regelmäßig

Testing:​

  • Teste auf verschiedenen Browsern
  • Teste Mobile-Ansicht
  • Teste mit echten Shop-Daten
  • Teste Navigation zwischen Floors

Support​

Bei Fragen oder Problemen:

Nutzungsstatistik: Seitenaufrufe werden anonymisiert erfasst. Im Umami-Dashboard nach diesem Pfad filtern: /en/centerplan/quick-start