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)
  3. Benenne jedes Element eindeutig (z.B. shop-1, service-info)
  4. Füge data-name Attribute hinzu für Namen
  5. Exportiere als SVG

Detaillierte Anleitung: SVG-ANLEITUNG.md

✅ Schritt 2: SVG hochladen​

Im Dashboard:​

1. Gehe zu: Dashboard → Wayfinding → SVG-Karte erstellen
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 → Wayfinding → Übersicht
→ Sollte neuen Floor anzeigen

✅ Schritt 4: Shops & Services mappen​

Im Dashboard:​

1. Gehe zu: Dashboard → Wayfinding → Karten-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. Wähle Shop aus der Liste (links)
2. Ziehe Shop per Drag & Drop auf Karte (rechts)
3. Lasse Maus los → Shop wird platziert
4. 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 → Wayfinding → Karten-Mapping
→ Statistik oben: "X von Y Shops gemappt"

2. 3D-Vorschau testen:​

Dashboard → Wayfinding → Übersicht
→ 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: Drag & Drop funktioniert nicht​

Symptom: Shop lässt sich nicht auf Karte ziehen

Lösung:

  1. Prüfe Browser-Konsole auf Fehler
  2. Stelle sicher, dass Floor ausgewählt ist
  3. Prüfe, ob SVG geladen ist (rechte Seite)
  4. Versuche Browser-Refresh (Cmd+R / Ctrl+R)

Test:

// Browser-Konsole
console.log('Floor ID:', selectedFloorId);
console.log('SVG Content:', svgContent?.length);

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-ANLEITUNG.md)

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: