Zum Inhalt

Konfiguration

Standard-Konfiguration

Vollständige Referenz mit allen Optionen und Standardwerten:

const config = {
  api: {
    locationAutocomplete: "https://sv-luebeck.bc-testsystem.de/api/v1/ext-search",
    timeout: 8000,
    useMockData: false,
    maxResults: 25,
    debounceDelay: 1000,
  },
  search: {
    baseUrl: "https://netzplan.swhl.de/initialize/journeys",
    urlFormat: "path-segments",
    additionalParams: { ld: "9644" },
    via: { enabled: true, paramName: "via" },
    products: { enabled: true, paramName: "p" },
  },
  ui: {
    theme: "db-theme",
    language: "de",
    showDepartureTimeSelection: true,
    defaultTimeMode: "departure",
  },
  labels: {
    startPlaceholder: "Start",
    destinationPlaceholder: "Ziel",
    viaPlaceholder: "Zwischenstopp (optional)",
    addViaLabel: "Zwischenstopp hinzufügen",
    removeViaLabel: "Zwischenstopp entfernen",
    searchButton: "Verbindung finden",
    departureTime: "Abfahrt",
    arrivalTime: "Ankunft",
    changeTime: "ändern",
    swapAriaLabel: "Start und Ziel umdrehen",
    departureNow: "Jetzt",
    currentLocation: "Aktueller Standort",
    locatingUser: "Standort wird ermittelt...",
    locationError: "Standort nicht verfügbar",
    productsLabel: "Verkehrsmittel",
    showMoreResults: "Weitere Ergebnisse anzeigen",
  },
};

API-Optionen

Option Typ Standard Beschreibung
locationAutocomplete string Erforderlich. URL des Autocomplete-Endpunkts
apiKey string API-Schlüssel (wird als Header x-api-key gesendet)
timeout number 5000 Request-Timeout in ms
useMockData boolean true Mock-Daten statt echter API (für Tests)
maxResults number 25 Anzahl der initial angezeigten Autocomplete-Ergebnisse
debounceDelay number 1000 Verzögerung in ms, bevor ein Autocomplete-Request abgesetzt wird

Mock-Daten & Fallback

  • useMockData: true — Für Tests ohne echte API; das Widget nutzt integrierte Demo-Daten.
  • Fallback — Bei API-Fehlern (Timeout, Netzwerkfehler) schaltet das Widget automatisch auf Mock-Daten um, damit es weiter nutzbar bleibt.

Such-Optionen

Option Typ Beschreibung
baseUrl string Basis-URL für die Weiterleitung zur Fahrplanauskunft
urlFormat string "query-params" oder "path-segments" — siehe URL-Formate
additionalParams object Zusätzliche URL-Parameter (z.B. { ld: "9644" })
via object Zwischenstopp-Konfiguration
products object Verkehrsmittel-Filter-Konfiguration

GPS-Standort

Das Widget zeigt automatisch den aktuellen Standort als erste Option im Autocomplete. Die Texte sind über labels anpassbar:

{
  "labels": {
    "currentLocation": "Mein Standort",
    "locatingUser": "Standort wird ermittelt...",
    "locationError": "Standort nicht verfügbar"
  }
}

Zwischenstopp (Via)

Nur Haltestellen

Als Zwischenstopp sind nur Haltestellen (type: "stop") erlaubt — keine Adressen oder POIs.

// Standard: aktiviert
{ search: { via: { enabled: true, paramName: "via" } } }

// Deaktivieren
{ search: { via: { enabled: false } } }

// Anderen Parameter-Namen (z.B. für Ihre Such-URL)
{ search: { via: { enabled: true, paramName: "intermediate" } } }

Anzahl der Suchergebnisse

Die API liefert alle Ergebnisse in einem Request (max. 30: bis zu 25 aus der Datenbank + 5 HERE-Adressen). Mit maxResults wird gesteuert, wie viele davon initial angezeigt werden. Gibt es mehr Ergebnisse als maxResults, erscheint der Button "Weitere Ergebnisse anzeigen" — ein Klick zeigt die restlichen Ergebnisse ohne erneuten API-Request.

// Standard: 25 Ergebnisse, Rest per Button nachladen (aus Cache)
{ api: { maxResults: 25 } }

// Alle Ergebnisse sofort anzeigen (kein Button)
{ api: { maxResults: 50 } }

// Button-Text anpassen
{ labels: { showMoreResults: "Mehr laden" } }

Debounce (Verzögerung der Suche)

Um die Anzahl der API-Requests (und damit externe Kosten für z.B. HERE-Adressen) zu reduzieren, wird die Suche erst nach einer konfigurierbaren Verzögerung ausgelöst.

// Standard: 1000ms (1 Sekunde) Verzögerung
{ api: { debounceDelay: 1000 } }

// Kürzere Verzögerung (z.B. 500ms)
{ api: { debounceDelay: 500 } }

Verkehrsmittel-Filter

// Standard: alle verfügbaren Verkehrsmittel
{ search: { products: { enabled: true, paramName: "p" } } }

// Nur bestimmte Verkehrsmittel anzeigen
{
  search: {
    products: {
      enabled: true,
      paramName: "p",
      available: {
        "SuburbanTrains": "S-Bahn",
        "LightRail": "Straßenbahn",
        "Bus": "Bus"
      }
    }
  }
}

// Vollständig benutzerdefinierte Verkehrsmittel
{
  search: {
    products: {
      enabled: true,
      paramName: "transport",
      available: {
        "metro": "U-Bahn",
        "tram": "Straßenbahn",
        "bus": "Bus",
        "ferry": "Fähre"
      }
    }
  }
}

// Verkehrsmittel-Filter deaktivieren
{ search: { products: { enabled: false } } }

UI & Labels

Über ui und labels können Theme, Sprache und alle Texte angepasst werden. Details siehe Styling & Themes.

Zeitauswahl ausblenden

Wenn die Abfahrt/Ankunft-Zeitauswahl nicht benötigt wird:

{ ui: { showDepartureTimeSelection: false } }