In diesem Artikel zeige ich Dir, wie ich mir Informationen (z.B. Fahrzeug und Verkehrsstörungen) zur täglichen Fahrt zum Arbeitsplatz visualisiere.
Auf meiner Visualisierung wollte ich eine Anzeige der täglichen Fahrt ins Geschäft implementieren. Neben der ungefähren Fahrzeit wollte ich natürlich auch noch Informationen über Verkehrsstörungen anzeigen. Für diese Anzeige eignet sich die Google Maps Karten und Routen Funktion ideal. Im Artikel zeige ich Dir, wie ich die Route über Google Maps erstellt und dann in ioBroker VIS integriert habe.
Im ersten Schritt müssen wir zunächst den Routenplaner von Google Maps öffnen www.google.de/maps. Im Routenplaner geben wir Start- und Zieladresse ein und wählen auf der Karte die bevorzugte Route (Route blau markiert). Sollen noch Zwischenstopps enthalten sein, können diese über die manuellen Punkte eingefügt werden. Nach der Eingabe und Konfiguration siehst Du direkt die Fahrzeit sowie mögliche Verkehrsstörungen anhand den Farben (gelb und rot).
Im nächsten Schritt öffnen wir oben links über die drei Linien (Sandwich-Button) das Menü und wählen dann „Karte teilen oder einbetten“.
Auf dem Fenster wechseln wir dann in den Bereich „Karte einbetten“ und kopieren den Inhalt (HTML-Definition) aus dem markierten Feld in die Zwischenablage.
Als nächstes öffnen wir in VIS die gewünschte View, auf der wir die Routen-Information anzeigen möchten.
Auf dieser View fügen wir im ersten Schritt das HTML-Widget ein. In dieses Widget können wir nun den HTML-Code des Google Routenplaners aus der Zwischenablage in den Bereich Allgemein – HTML kopieren.
Nun starten wir die VIS-Visualisierung. Im HTML-Widget wird jetzt die zuvor konfigurierte Route eingeblendet.
Ich freue mich wie immer über Fragen oder Anregungen 🙂