wegfinder Widget

Letzte Änderung: 20.05.2019

Einleitung

Wie wohin? - Das kostenlose Routing-Widget von wegfinder für deine Website. Damit finden deine Website-Benutzer alle Wege in Österreich. Ganz gleich ob mit den Öffis, dem Auto, dem Fahrrad, mit Car Sharing, oder einer anderen der zahlreichen verfügbaren Möglichkeiten.

Du kannst Ziel und/oder Start, sowie optional auch eine Abfahrts- oder Ankunfszeit festlegen.

Klickt ein Besucher auf "Weg finden" werden alle Wege für die gewünschte Strecke angezeigt. Hat der Nutzer die wegfinder App installiert, werden die Ergebnisse direkt in der App angezeigt. Andernfalls stellen wir die gefunden Wege auf der responsive Website wegfinder.at dar.

Das Design des Widgets kannst du mittels CSS vollständig an deine Website anpassen.

Integration

Einbindung als Script

Einfache Variante

Füge die folgende Zeile an der Stelle im BODY-Abschnitt deiner Website ein, an der das wegfinder Widget angezeigt werden soll.

<script  src="https://wegfinder.at/plugins/widget.min.js" async type="text/javascript"></script>
Individuelle Platzierung

Füge ein DIV-Element im BODY-Bereich deiner Website ein in welchem das Widget dargestellt werden soll und gib die ID des DIV-Elements als Script-Parameter an.

<div id="wegfinder"></div>
...
<script  src="https://wegfinder.at/plugins/widget.min.js" data-html-targetElementID="wegfinder" async type="text/javascript"></script>
Individuelles Design

Lade unser Stylesheet herunter, passe es an deine Bedürfnisse an und gib dein Pfad zu deinem adaptierten Stylesheet als Script-Parameter an.

<div id="wegfinder"></div>
...
<script  src="https://wegfinder.at/plugins/widget.min.js" data-html-targetElementID="wegfinder" data-html-stylesheet="./my-widget.min.css" async type="text/javascript"></script>

Einbindung als iFrame

Alternativ zur Einbindung als Script, kannst Du das Widget auch als iFrame einbinden.

<iframe src="https://wegfinder.at/plugins/widget.min.html" name="wegfinder" height="270px" width="320px" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>

Optionen

Die folgenden Optionen stehen dir zur weiteren Konfiguration des Widgets zur Verfügung.

Beispiel: Beschriftung des Suchen-Buttons ändern (data-search-label)

Script Attribut
<script src="https://wegfinder.at/plugins/widget.min.js" async data-search-label="Suche" type="text/javascript"></script>
iFrame URL-Parameter
<iframe src="https://wegfinder.at/plugins/widget.min.html?data-search-label=Suche" name="wegfinder" height="270px" width="320px" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>

Start

Parameter Name Beschreibung Standardwert
data-origin-label Beschriftung des Eingabefelds für den Start.
data-origin-placeholder Platzhalter im Eingabefeld für den Start. von
data-origin-name Vorausgefüllter Start, Name wird als Basis für Textsuche verwendet, zB „Wien“.
data-origin-id ID eines vorausgefüllten Starts, z.B. „m:pRdmF9“.
data-origin-searchCoordinates-latitude WGS64-Koordinate (LAT) des Suchmittelpunkts für den Start.
data-origin-searchCoordinates-longitude WGS64-Koordinate (LNG) des Suchmittelpunkts für den Start

Ziel

Parameter Name Beschreibung Standardwert
data-destination-label Beschriftung des Eingabefelds für das Ziel.
data-destination-placeholder Platzhalter im Eingabefeld für das Ziel. von
data-destination-name Vorausgefülltes Ziel, Name wird als Basis für Textsuche verwendet, zB „Linz“.
data-destination-id ID eines vorausgefüllten Ziels, z.B. „m:z3O3RH“.
data-destination-searchCoordinates-latitude WGS64-Koordinate (LAT) des Suchmittelpunkts für das Ziel.
data-destination-searchCoordinates-longitude WGS64-Koordinate (LNG) des Suchmittelpunkts für das Ziel.

Zeitpunkt

Parameter Name Beschreibung Standardwert
data-timestamp-date Vorausgefülltes Datum im Format TT.MM.JJJJ
data-timestamp-time Vorausgefüllte Uhrzeit im Format HH:MM von
data-timestamp-type Ankunft („depart“) oder Ankunft („arrive“) depart
data-timestamp-label Beschriftung für die Zusammenfassung des Zeitpunkts.
data-timestamp-delimiter Trennzeichen in der Zusammenfassung des Zeitpunkts. :
data-timestamp-labelNow Text für „Jetzt“ Jetzt
data-timestamp-labelPopup Überschrift für das Popup zum Setzen des Zeitpunkts.
data-timestamp-labelType Beschriftung für Auswahlfeld Abfahrt/Ankunft
data-timestamp-labelDeparture Text für „Abfahrt“ Abfahrt
data-timestamp-labelArrival Text für „Ankunft“ Ankunft
data-timestamp-labelDate Beschriftung für Eingabefeld „Datum“
data-timestamp-labelTime Beschriftung für Eingabefeld „Zeit“
data-timestamp-labelButton Beschriftung des Buttons zum Schließen des Popups. OK

Hinweise

Parameter Name Beschreibung Standardwert
data-messages-gettingGeoLocation Hinweis während Geo-Position ermittelt wird. Position wird ermittelt …
data-messages-hintGeoLocation Hinweistext für automatische Standortbestimmung. Aktuellen Standort verwenden.
data-messages-hintSwap Hinweistext für den Tausch von Start und Ziel. Abfahrtsort und Zielort tauschen.
data-messages-hintNow Hinweistext um „Abfahrt Jetzt“ zu setzen. Abfahrt jetzt.
data-messages-hintClear Hinweistext für „Feld löschen“ Feld löschen.
data-messages-errorGeoLocation Fehlertext, Standort konnte nicht bestimmt werden. Standort konnte nicht ermittelt werden.
data-messages-errorOriginEmpty Fehlertext, kein Start angegeben. Wähle einen Abfahrtsort!
data-messages-errorOriginNotValid Fehlerext, kein Start ausgewählt. Abfahrtsort aus Liste wählen!
data-messages-errorDestinationEmpty Fehlertext, kein Ziel angegeben. Wähle einen Zielsort!
data-messages-errorDestinationNotValid Fehlertext, kein Ziel ausgewählt. Zielsort aus Liste wählen!
data-messages-errorOriginEqualsDestination Fehlertext, Start und Ziel sind gleich. Abfahrtsort und Zielort sind ident!

Auto Complete

Parameter Name Beschreibung Standardwert
data-autocomplete-minLength Anzahl an Zeichen die für Start bzw. Ziel eingegeben werden müssen bevor Suchvorschläge angezeigt werden. 3
data-autocomplete-maxResults Maximale Anzahl von Suchvorschlägen die für Start bzw. Ziel angezeigt werden sollen. 5
data-autocomplete-delay Verzögerung und Millisekunden zwischen Tastenanschlag der Eingabe und der Abfrage von Suchvorschlägen für Start bzw. Ziel. 150

HTML

Parameter Name Beschreibung Standardwert
data-html-targetElementID ID des HTML-Parent Elements des Widgets. wegfinder
data-html-prefixClass Prefix, der allen Widget-CSS-Klassen vorangestellt wird. wegfinder
data-html-prefixID Prefix, der allen Widget-Element-IDs vorangestellt wird. wegfinder
data-html-prefixUrlParam Prefix für URL Get Parameter data
data-html-targetElementClass CSS-Klasse die dem Parent Element des Widget zugewiesen wird. Widget
data-html-objectName Name der Javascript-Window Variablen, unter der die Javascript-API aufgerufen werden kann. wegfinder
data-html-stylesheet Zu ladendes Stylesheet. https://wegfinder.at/plugins/widget.min.css

Callback

Parameter Name Beschreibung Standardwert
data-callback-initialized Name der Callbackfunktion, die nach der Initialisierung des Widgets aufgerufen werden soll. (Beim Aufruf der Callbackfunktion wird das Scripting-Objekt als Parameter übergeben.)
data-callback-searched Name der Callbackfunktion, die bei einer Suche aufgerufen werden soll. (Beim Aufruf der Callbackfunktion wird das Scripting-Objekt als Parameter übergeben.)

JS API

Sobald das Widget vollständig geladen ist (siehe Callback-Function Initialized), steht das Object wegfinder als JS API zur Verfügung.

Beispiel: Eigenschaft setzen
<script>
   wegfinder.settings.search.label="Suche";
</script>
Beispiel: Funktion aufrufen
<script>
   wegfinder.init();
</script>

Eigenschaften

Eigenschaft Beschreibung
info Informationen über die Widget-Version und den Herausgeber (schreibgeschützt)
settings Optionen. Änderungen werden nach dem Aufruf der Funktion init() übernommen.
settingsDefaults Standardwerte der Optionen.(schreibgeschützt)

Funktionen

Funktion Beschreibung
reset() Lädt das Widget mit den Standardeinstellungen neu.
init() Lädt das Widget auf Basis der aktuellen Optionen (wegfinder.settings) neu.
getOriginName() Rückgabewert: Name des ausgewählten Starts.
setOrigin(<STRING>) Sucht nach dem übergebenen Ort und wählt den ersten Treffer als Start aus.
getOriginId() Rückgabewert: ID des ausgewählten Starts.
setOriginId(<STRING>) Setzt den Start auf Basis der übergebenen ID.
getDestinationName() Rückgabewert: Name des ausgewählten Ziels.
setDestination(<STRING>) Sucht nach dem übergebenen Ort und wählt den ersten Treffer als Ziel aus.
getDestinationId() Rückgabewert: ID des ausgewählten Ziels.
setDestinationId(<STRING>) Setzt das Ziel Basis der übergebenen ID.
swapLocations() Tausche Start und Ziel.
getDepart() Rückgabewert: true = Abfahrt, false = Ankunft
setDepart(<BOOLEAN>) Wählt entweder Ankunft (TRUE) oder Abfahrt (FALSE) aus.
getDate() Rückgabewert: gewähltes Datum (TT.MM.JJJJ)
setDate(<STRING>) Setzt das Datum: TT.MM.JJJJ
getTime() Rückgabewert: gewählte Uhrzeit (HH:MM)
setTime(<STRING>) Setzt die Uhrzeit: HH:MM
setTime(<STRING>) Setzt die Uhrzeit: HH:MM
departNow() Setzt Datum und Uhrzeit auf den aktuellen Wert und wählt den Typ „Ankunft“ aus.
showTimestampPopup(<BOOLEAN>) Öffnet (TRUE) oder schließt (FALSE=default) das Popup zur Eingabe von Datum und Uhrzeit.
search() Startet die Suche.

Events

Für diese Events können Callback-Funktionen als Optionen definiert werden.

Event Beschreibung
initialized Wird aufgerufen, wenn das Widget initialisiert wurde.
searched Wird aufgerufen, wenn eine Suche abgesetzt wird.
Beispiel Callback Funktion
<script  src="https://wegfinder.at/plugins/widget.min.js" async data-callback-initialized="myCallback" type="text/javascript"></script>
...
<script type="text/javascript">
  function myCallback(obj) {
    console.log("widget loaded");
    console.log(obj);
  }
</script>