HowTo: Magic Mirror – Display current traffic overview

A cool and usefull plugin for the MagicMirror is the plugin “MMM-GoogleMapsTraffic”. This will show you the status of the current road traffic in your area.

How to install this is described in the following article

Hints for our lovely english readers: Basically, many of the articles on Nerdiy.de are translations from the original german articles. Therefore, it may happen here and there that some illustrations are not available in english and that some translations are weird/strange/full of mistakes or generally totaly wrong. So if you find some obvious (or also not obvious) mistakes don't hesitate to leave us a hint about that in the comment section. 
Also please don't get confused, that instead of a "dot" often a "comma" is used as decimal separator. 🙂


Safety instructions

I know the following hints are always a bit annoying and seem unnecessary. But unfortunately, many people who knew it "better" from carelessness lost their eyes, fingers or other things or hurt themselves. In comparison, a loss of data is almost not worth mentioning, but even these can be really annoying. Therefore, please take five minutes to read the safety instructions. Even the coolest project is worth no injury or other annoyance. https://www.nerdiy.de/en/sicherheitshinweise/

Affiliate links / advertising links

The links to online shops listed here are so-called affiliate links. If you click on such an affiliate link and shop via this link, Nerdiy.de receives a commission from the online shop or provider concerned. The price doesn't change for you. If you do your purchases via these links, you will support Nerdiy.de in being able to offer further useful projects in the future. 🙂


Requirements

Helpful Articles:
Before you start with the installation, you should have prepared the RaspberryPi so far that it can be reached via the network and controlled by SSH. In addition, the MagicMirror software should be set up.

The following articles describe what to do to prepare everything:
RaspberryPi – Setting up for Nerdiys!
RaspberryPi – The first configuration
RaspberryPi – Controlling the RaspberryPi via SSH

MagicMirror – Installing the required software

Required tools:
-none-

Required material:

In the following list you will find all the parts you need to implement this article.


Log in via SSH on the RaspberryPi

To get started, you first need to log in to RasPi with SSH on Putty. How to do it is described in the article

After entering your username and password you can start to enter the first commands.

Installation des Moduls

Damit ihr euch den aktuellen Straßenverkehr in Eurer Umgebung anzeigen könnt benötigt Ihr das Modul “MMM-GoogleMapsTraffic”. Ihr findet es unter https://github.com/vicmora/MMM-GoogleMapsTraffic

Installiert dies auf eurem RaspberryPi. Wie Ihr Module installiert ist im folgendem Artikel beschrieben:
MagicMirror – 3rd-Party-Module installieren


Configuration of the module

The module configuration is done – as usual with MagicMirror modules – by entering the module configuration in the configuration of your MagicMirror installation.
Open the configuration file of your MagicMirror installation with the following command:

sudo nano ~/MagicMirror/config/config.js

However, before you enter the following configuration file, you need to do a few substitutions.

{
     module: 'MMM-GoogleMapsTraffic',
     position: 'top_left',
     config: {
         key: 'YOUR_KEY',
         lat: YOUR_LATITUDE,
         lng: YOUR_LONGITUDE,
         height: '300px',
         width: '300px'
         styledMapType: "transparent",
         disableDefaultUI: true,
         backgroundColor: 'hsla(0, 0%, 0%, 0)',
     },
 }

Enter Google Maps API Key

For this module to work, it needs access to the Google Maps API. This requires an API key.
How to get a GoogleMaps API Key is described in the following article:
Register GoogleMaps API Key

Did you register a Google Maps API key? In the module configuration, replace “YOUR_KEY” with your GoogleMaps API key.

Enter latitude and longitude

In addition to the API key, the module also requires the latitude and longitude of the desired location.
How to find the latitude and longitude of any location using Google Maps is described in the following article:
Find latitude and longitude of any position with GoogleMaps

Once you have determined the latitude and longitude of your desired location, replace your “YOUR_LATITUDE” with the latitude of your desired location and “YOUR_LONGITUDE” with the longitude of your desired location.

More options

In addition to the options above, there are other adjustable options that largely affect the look of the module.

A list of possible options:
Quote from the module GitHub: https://github.com/vicmora/MMM-GoogleMapsTraffic

Configuration options

Option Description
key Required Google api key. See below for help.
lat Required Latitude used to center the map. See below for help.

Type: float

lng Required Longitude used to center the map. See below for help.

Type: float

height Height of the map.

Type: string (pixels)
Default value: 300px

width Width of the map.

Type: string (pixels)
Default value: 300px

zoom Zoom value to display from lat/lng.

Type: integer
Default value: 10

mapTypeId The map type to display (roadmap, satellite, hybrid, terrain).

Type: string
Default value: roadmap

styledMapType Style of the map. See below for help.

Type: string
Possible value: standard, dark, night, black or custom
Default value: standard

disableDefaultUI Disable default UI buttons (Zoom and Street View).

Type: boolean
Default value: true

updateInterval How often the module should load the map.

Type: int in millisecond
Default value: 900000 (15 mins)

markers Additional markers in the map as an array. See example.
backgroundColor Backgound behind the map.Can be set to transparent ('hsla(0, 0%, 0%, 0)') or left at black (default).

Type: string
Default value: 'rgba(0, 0, 0, 0)'

The configuration of these options is not necessary for a first test. If you do not enter it, the module will use the defaults for each option.


Result

If you have entered the configuration correctly, you should be welcome by the following message at te next time you load the MagicMirror.


Additional information

https://github.com/MichMich/MagicMirror
https://github.com/vicmora/MMM-GoogleMapsTraffic


I hope everything worked as described. If not or you have any other questions or suggestions, please let me know in the comments. Also, ideas for new projects are always welcome. 🙂

Fab

P.S. Many of these projects - especially the hardware projects - cost a lot of time and money. Of course I do this because I enjoy it, but if you appreciate it that I share these information with you, I would be happy about a small donation to the coffee box. 🙂

Buy Me a Coffee at ko-fi.com

20 comments

  1. Hallo. Genau so, wie Du es hier vorstellst, hätte ich es gerne auf meinem Mirror. Leider aber bekomme ich dann immer einer Fehlermeldung, das die Config nicht stimmt.
    Würdest Du mir da ein wenig helfen?
    Viele Grüße
    Bodo

    1. Hi Bodo,
      das liegt oft an einer fehlerhaften Formatierung der Config-Datei. Das kniffelige hier ist, dass alle geöffneten Klammern auch wieder korrekt geschlossen werden müssen.
      Du kannst deine Config-Datei ja mal hier rein kopieren und gucken ob Dir die Fehlermeldungen weiterhelfen. 🙂 https://jshint.com/
      Ansonsten kannst du die Config aber auch bei https://pastebin.com/ hochladen und mir den link senden. Dann kann ich mir das mal angucken, wenn du das willst.
      Denk dran eventuell vorhandene API Keys oder Zugangsdaten aus der Config zu löschen bevor du sie an irgendwen weiterleitest. 🙂
      Beste Grüße
      Fabian

  2. Hallo Fabian,
    habe Deine Antwort leider erst jetzt gesehen. Sorry. Ich werde mal versuchen ob ich es morgen schaffe, Dir den Code zu schicken. Auf jeden Fall aber jetzt schon mal vielen vielen Dank für die angebotene Hilfe. Ich bin da seit Wochen dran und drehe mich im Kreis.
    Ich melde mich schnellst möglich.
    Viele Grüße
    Bodo

    1. Hi Bodo,
      gucke mal hier: https://pastebin.com/b0iVmzaV
      Das müsste eigentlich funktionieren. Es gab ein paar Kommas und Klammern die an der falschen Stelle waren. Man kann sowas ganz gut debuggen, wenn man es zum Beispiel unter https://js.do/ eingibt und durch einen Klick auf “Run code” die Fehlermeldung anzeigen lässt und abarbeitet. 🙂
      Ich hoffe es klappt alles.
      Beste Grüße
      Fabian

  3. Hallo Fabian,
    zunächst einmal vielen vielen Dank für Deine Bemühungen. Es hat aber leider nicht geklappt. Wenn ich Deinen Code lade, bootet er nicht und schreibt direkt im Spiegel, dass etwas mit der Config nicht stimmt.
    Dann bin ich hin gegangen und habe meine funktionierende wieder geladen. Und die läuft. Dann habe ich in MEINE laufende Conig nur DEIN Maps Traffic Modul reingepackt und dann kommt die gleiche Meldung.
    Darauf hin habe ich aus DEINER Datei nur den Bereich Google Traffic kopiert und bei js.do geladen.
    {
    Modul : ‘MMM-GoogleMapsTraffic’ ,
    Position : ‘top_left’ ,
    config : {
    Schlüssel : ‘YOUR_KEY’ ,
    lat : ‘YOUR_LATITUDE’ ,
    lng : ‘YOUR_LONGITUDE’ ,
    Höhe : ‘300px’ ,
    Breite : ‘300px’ ,
    styledMapType : “transparent” ,
    disableDefaultUI : true ,
    backgroundColor : ‘hsla (0, 0%, 0%, 0)’
    }}
    } ,

    Und dann erhalte ich folgende Fehlermeldung: JavaScript-Fehler: Nicht erfasster Syntaxfehler: Unerwartetes Token ‘:’ in Zeile 4

    Könntest Du Dir das bitte nochmal ansehen? Weiterhin ist mir aufgefallen, das in Deiner Datei jeweils am Ende eines jeden Moduls eine “Doppelklammer” ist. Ist das so richtig?

    Viele Grüße
    Bodo

    1. Hi Bodo,
      ich habe mir das gerade nochmal angeguckt. 🙂
      Hast du den reinen Code der config bei js.do eingefügt? Wenn ich das mache zeigt er mir keine Fehlermeldung an. :/ Den “raw” code aus dem pastebin kannst du dir auch hier anzeigen lassen: https://pastebin.com/raw/b0iVmzaV

      Das es eine Fehlermeldung gibt, wenn du nur ein Modul bei js.do einfügst ist nachvollziehbar. Die ganze config-datei besteht im Prinzip aus einer “Keyed collection” (Infos findest du zum Beispiel hier: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Keyed_collections)
      Das heißt, wenn du nur den oben markierten Teil einfügst, weiß der javascript Interpreter gar nicht um was für ein Konstrukt es sich da handelt und wirft dementsprechend eine Fehlermeldung. Wenn du zum Beispiel den “Deklarationsteil” vor das Modul packst sollte es wieder klappen. Ein Beispiel habe ich mal hier hochgeladen: https://pastebin.com/inKvNBh3

      Ich hoffe ich habe dich richtig verstanden, was die Doppelklammern angeht. Du meinst in dem hochgeladenen Code (unter https://pastebin.com/b0iVmzaV) zum Beispiel die Klammern in Zeile 63 und 64 oder? Falls ja: Das ist richtig so. Man muss drauf achten, dass alle zuvor geöffneten Klammern auch wieder geschlossen werden. So Schließt die Klammer in Zeile 63 zum Beispiel die Klammer von Zeile 58. Die Klammer aus Zeile 64 schließt die Klammer aus Zeile 55. Ähnliches gilt für die eckige Klammer in Zeile 111. Diese schließt die eckig Klammer aus Zeile 40. Mit diesen geschweiften Klammern werden also immer Codeblöcke zusammengefasst. Das wird nur manchmal etwas unübersichtlich. Gerade, wenn die Blöcke über mehrere Zeilen gehen.

      Zu guter letzt habe ich die config von https://pastebin.com/b0iVmzaV mal eben in meinen magic mirror geladen. Dort wird sie angezeigt. Kann es vllt. sein, dass der Fehler in einem der installierten Module liegt? Wenn du möchtest schick mir doch mal einen Screenshot von deiner Fehlermeldung. 🙂
      Beste Grüße
      Fabian

  4. Hallo Fabian,
    also,…….es geht jetzt aufwärts. Wahnsinn,……nach 2 Monaten ärgern. Ich hatte bis jetzt immer alles aus der Script Datei eingefügt. Und jetzt, wo ich oben auf Klon geklickt und diese Datei kopiert habe, bekomme ich zumindest schon einmal ein Maps Fenster. Wenn auch mit Fehlermeldung.
    Die bleibt, auch wenn ich den API Code und die beiden anderen Daten eingebe.
    Gruß Bodo

    1. Hey Bodo,
      habe es gerade nochmal ausprobiert. Wenn ich meinen API Key, Längengrad und Breitengrad eingebe wird die Karte angezeigt.
      Bist du dir sicher, dass du den Breiten und Längengrad im richtigen Format eingetragen hast?
      Ich habe dir hier mal den Code des Moduls eingefügt. Du musst nur noch den API key einfügen und dann sollte dir der Verkehr um den Reichstag angezeigt werden. 🙂 https://pastebin.com/JsprMVFb
      Beste Grüße
      Fabian

  5. Hallo Fabian,
    es wird immer besser. Jetzt ist zwar die Karte zu sehen, allerdings mit einer Fehlermeldung drüber.
    This page can’t load Google Maps correctly.
    In Deinem Modul sind beim Breiten und Längengrad auch viel mehr Zahlen. Ich hatte die aus der Web Adresse von Goggle Maps entnommen. z.B.: https://www.google.com/maps/place/Reichstagsgeb%C3%A4ude,+Platz+der+Republik+1,+10557+Berlin/@52.5186222,13.3741289,17z/data=!3m1!4b1!4m5!3m4!1s0x47a851c748c80e45:0xbf985f98f930a812!8m2!3d52.518619!4d13.3763176
    Und daraus dann 52.5186222 und 13.3741289
    Aber das hat doch nichts mit der Fehlermeldung zu tun. Vielleicht habe ich ja auch auf der Maps Plattform etwas falsch gemacht. Dort habe ich den API Code auf “Maps Java Script API” und “Maps Static API” eingeschränkt. Könnte das der Fehler gewesen sein?
    Gruß Bodo

    1. Hey Bodo,
      das klingt doch gut. 🙂 Ich würde einfach mal versuchen den API Gebrauch nicht weiter einzuschränken. Das kann sehr gut sein, dass die Fehlermeldung damit zusammenhängt. 🙂
      Die zusätzlichen Ziffern in dem Breiten- und Längengrad sind nur eine etwas genauere Angabe. Da du aber eh nur eine Region kennzeichnen willst sollte das nicht weiter tragisch sein.
      Beste Grüße
      Fabian

  6. Hallo Fabian,
    nochmals vielen Dank. Ich werde es ausprobieren und mich dann, wahrscheinlich morgen, bei Dir melden.
    Viele Grüße
    Bodo

  7. Fabian,
    habe alle Einschränkungen aufgehoben. Meldung bleibt. Ich kann sie allerdings mit der Maus bestätigen. Dann bleibt sie bis zum nächsten starten des Spiegels weg. Kommt aber jedes mal wieder.
    Gruß Bodo

    1. Hey Bodo,
      seltsam. Dann muss es aber tatsächlich iwie mit der Google API zusammenhängen. Mir wurde diese Fehlermeldung nicht angezeigt. :/ Vllt. einfach mal einen neuen API Zugang erstellen und ausprobieren?
      Beste Grüße
      Fabian

  8. Hallo Fabian,
    also,……….habe soeben eine neue API generiert und eingetragen in der Config. Leider ohne Erfolg. Die Meldung bleibt.
    Ich werde mal versuchen alles in der Cloud Plattform zu löschen und dann neu zu erstellen. Mal sehen was dann dabei raus kommt. Allerdings sieht hier auch alles ein wenig anders wie in Deiner Anleitung aus.
    Viele Grüße
    Bodo

  9. Fabian !!!!!!!!!
    Es ist geschafft !!!!!!!!!! Dank dieser Anleitung hier https://www.wpgmaps.com/documentation/creating-a-google-maps-api-key/
    habe ich die Fehlermeldung weg bekommen. Es war etwas mit den Anmeldedaten und dem verknüpften Konto bei Google.
    Ich will aber erst mal noch einen Tag abwarten, ob nicht doch noch der Teufel wieder zurück kommt.
    Bis dahin, Dir auf jeden Fall aber schonmal vielen vielen Dank!!!!!!!!!!!!!!!
    Ich melde mich aber nochmal bei Dir.
    Viele Grüße
    Bodo

  10. Hallo Fabian,
    es sieht wirklich alles gut aus. Somit nochmal ein Tausendfaches Dankeschön !!!
    Viele Grüße
    Bodo

  11. Hallo Fabian, ich würde Dich da gerne noch etwas fragen. Nur zum Verständnis. Hier https://pastebin.com/b0iVmzaV in Zeile 53 (in Java Script) sieht man diese “Doppelklammer”. Unten dann in der RAW Datei ist an der gleichen Stelle aber nur eine Klammer die geschlossen wird. Was ist denn hier der Unterschied?
    Viele Grüße
    Bodo

    1. Hi Bodo,
      ich bin mir nicht ganz sicher, was du meinst. In der Ansicht bei mir ist eine geschweifte Klammer in Zeile 53 und eine in zeile 54. Die KLammer in Zeile 53 schließt den Block welcher mit der Klammer in Zeile 44 “config: {” geöffnet wurde. Die Klammer in Zeile 54 schließt den Block der in Zeile 41 geöffnet wurde.
      Meintest du das? 🙂
      Beste Grüße
      Fabian

Leave a Reply

Your email address will not be published. Required fields are marked *