HowTo: Magic Mirror – Show current traffic overview

Posted on 28. February 2019 by Fab

Ein cooles und praktisches Plugin für den MagicMirror ist das Plugin “MMM-GoogleMapsTraffic“. Dieses zeigt euch den Status des aktuellen Straßenverkehrs in Eurer Umgebung an.

Wie Ihr dies installiert ist im folgenden Artikel beschrieben

Safety instructions

I know the following notes are always kind of annoying and seem unnecessary. Unfortunately, many people who knew "better" have lost eyes, fingers or other things due to carelessness or injured themselves. Data loss is almost negligible in comparison, but even these can be really annoying. Therefore, please take five minutes to read the safety instructions. Because even the coolest project is not worth injury or other trouble.
https://www.nerdiy.de/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 make a purchase via this link, Nerdiy.de will receive a commission from the relevant online shop or provider. The price does not change for you. If you make your purchases via these links, you support Nerdiy.de in being able to offer other useful projects in the future. 🙂

Requirements

Helpful articles:
Bevor ihr mit der Installation startet solltet ihr den RaspberryPi soweit vorbereitet haben, dass dieser über das Netzwerk erreichbar und per SSH Steuerbar ist. Außerdem sollte die MagicMirror-Software eingerichtet sein.

The following articles describe what you need to do to get everything ready:
RaspberryPi – setup for nerdiys!
RaspberryPi – The first configuration!
RaspberryPi – Control the RaspberryPi via SSH
MagicMirror - Installing the required software

Required tool:
-no-

Required material:

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

Log in to the RaspberryPi via SSH

To start, you must first log in to the Rasp Pi with Putty via SSH. How to do this is in the article RaspberryPi - Control the RaspberryPi via SSH described.

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

Installing the module

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

Install this on your RaspberryPi. How to install your modules is described in the following article:
MagicMirror - Install 3rd party modules

Configuration of the module

Das Modul konfiguriert Ihr – wie von MagicMirror-Modulen gewohnt – indem Ihr die Modul-Konfiguration in die Konfiguration Eurer MagicMirror Installation eintragt.
Öffnet dazu die Konfigurationsdatei Eurer MagicMirror-Installation mit folgendem Befehl:

sudo nano ~/MagicMirror/config/config.js

Bevor Ihr die folgende Konfigurationsdatei eintragt müsst Ihr allerdings noch ein paar Ersetzungen vornehmen.

{ 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)', }, }

Google Maps API-Key eintragen

Damit dieses Modul funktioniert benötigt es Zugriff auf die GoogleMaps API. Dazu ist ein API-Key notwendig.
Wie Ihr einen GoogleMaps API Key bekommt ist in folgendem Artikel beschrieben:
GoogleMaps API-Key registrieren

Habt Ihr einen Google-Maps API-Key registriert. ersetzt Ihr in der Modul-Konfiguration “YOUR_KEY” durch Euren GoogleMaps API-Key.

Breiten- und Längengrad eintragen

Neben dem API-Key benötigt das Modul außerdem den Breiten- und Längengrad des gewünschten Ortes.
Wie Ihr mithilfe von Google-Maps den Breiten- und Längengrad eines beliebigen Ortes herausfindet ist in folgendem Artikel beschrieben:
Find the latitude and longitude of any location with GoogleMaps

Habt Ihr Breiten- und Längengrad Eures gewünschten Ortes ermittelt ersetzt Ihr “YOUR_LATITUDE” durch den Breitengrad Eures gewünschten Ortes und “YOUR_LONGITUDE” durch den Längengrad Eures gewünschten Ortes.

Weitere Optionen

Neben den oben angegebenen Optionen gibt es noch weitere einstellbare Optionen, welche zum Großteil das Aussehen des Moduls beeinflussen.

Eine Liste der Möglichen Optionen:

Zitat aus dem Modul-GitHub: https://github.com/vicmora/MMM-GoogleMapsTraffic

Configuration options

option Description

keys required Google api key. See below for help.

lat required Latitude used to center the map. See below for help.

Type: float

length required Longitude used to center the map. See below for help.

Type: float

height Height of the map.

Type: string (pixels)
Default values: 300px

width Width of the map.

Type: string (pixels)
Default values: 300px

zoom Zoom value to display from lat/lng.

Type: integer
Default values: 10

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

Type: string
Default values: roadmap

styledMapType Style of the map. See below for help.

Type: string
Possible values: default, dark, night, black or custom
Default values: default

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

Type: boolean
Default values: true

updateInterval How often the module should load the map.

Type: internal in milliseconds
Default values: 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 values: 'rgb(0, 0, 0, 0)'

option	Description
`keys`	required Google api key. See below for help.
`lat`	required Latitude used to center the map. See below for help. Type: `float`
`length`	required Longitude used to center the map. See below for help. Type: `float`
`height`	Height of the map. Type: `string` (pixels) Default values: `300px`
`width`	Width of the map. Type: `string` (pixels) Default values: `300px`
`zoom`	Zoom value to display from lat/lng. Type: `integer` Default values: `10`
`mapTypeId`	The map type to display (roadmap, satellite, hybrid, terrain). Type: `string` Default values: `roadmap`
`styledMapType`	Style of the map. See below for help. Type: `string` Possible values: `default`, `dark`, `night`, `black` or custom Default values: `default`
`disableDefaultUI`	Disable default UI buttons (Zoom and Street View). Type: `boolean` Default values: `true`
`updateInterval`	How often the module should load the map. Type: `internal` in milliseconds Default values: `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 values: `'rgb(0, 0, 0, 0)'`

Die Konfiguration dieser Optionen sind für einen ersten Test nicht notwendig. Solltet Ihr sie nicht eintragen verwendet das Modul die Standardwerte der jeweiligen Optionen.

Resultat

Habt Ihr die Konfiguration korrekt eingetragen sollte euch beim nächsten Laden das MagicMirrors folgende Anzeige begrüßen.

More information

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

Have fun with the project

I hope everything worked as described for you. If not or you have questions or suggestions please let me know in the comments. I will then add this to the article if necessary.
Ideas for new projects are always welcome. 🙂

PS 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 think it's cool that I share the information with you, I would be happy about a small donation to the coffee fund. 🙂

20 comments

Bodo says:

6. March 2021 at 10:36

Hello. Exactly as you present it here, I would like to have it on my mirror. Unfortunately, I always get an error message that the config is wrong.
Would you help me a little with that?
Best regards
Bodo

Reply
1. Fab says:
  
  6. March 2021 at 21:10
  
  Hi Bodo,
  this is often due to incorrect formatting of the config file. The tricky thing here is that all the open parentheses have to be properly closed again.
  You can copy your config file here and see if the error messages help you. 🙂 https://jshint.com/
  Otherwise you can also use the config at https://pastebin.com/ upload and send me the link. Then I can take a look if you want.
  Remember to delete any existing API keys or access data from the config before forwarding them to anyone. 🙂
  Best regards
  Fabian
  
  Reply
Bodo says:

11. March 2021 at 19:41

Hello Fabian,
Sorry I only saw your reply now. sorry I'll try to send you the code tomorrow if I can. In any case, thank you very much for the offered help. I've been at this for weeks and I'm going in circles.
You hear from me as soon as possible.
Best regards
Bodo

Reply
Bodo says:

12. March 2021 at 11:40

Hello Fabian,
if i did it right you should be here https://pastebin.com/KiYNnauD see the content of the config.
The code from Google Cloud was in there as the API. Likewise longitude and latitude.

Best regards
Bodo

Reply
1. Fab says:
  
  12. March 2021 at 17:43
  
  Hi Bodo,
  look here: https://pastebin.com/b0iVmzaV
  That should actually work. There were a few commas and brackets that were in the wrong place. You can debug something like that quite well if you do it, for example, under https://js.do/ eingibt und durch einen Klick auf “Run code” die Fehlermeldung anzeigen lässt und abarbeitet. 🙂
  I hope everything works out.
  Best regards
  Fabian
  
  Reply
Bodo says:

14. March 2021 at 9:56

Hello Fabian,
First of all, thank you very much for your efforts. But unfortunately it didn't work. When I load your code it doesn't boot and writes directly in the mirror that something is wrong with the config.
Then I went and reloaded my working one. And it works. Then I put only YOUR maps traffic module in MY running conig and then the same message comes up.
I then copied only the Google Traffic area from YOUR file and loaded it at js.do.
{
Modul : ‘MMM-GoogleMapsTraffic’ ,
Position : ‘top_left’ ,
configure : {
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?

Best regards
Bodo

Reply
1. Fab says:
  
  14. March 2021 at 11:57
  
  Hi Bodo,
  I just watched it again. 🙂
  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
  
  I hope I understood you correctly about the double brackets. You mean in the uploaded code (under https://pastebin.com/b0iVmzaV) for example the brackets in line 63 and 64 right? If yes: That is correct. You have to make sure that all previously opened parentheses are closed again. For example, the parenthesis on line 63 closes the parenthesis on line 58. The parenthesis on line 64 closes the parenthesis on line 55. Similarly, the square bracket on line 111 closes the square bracket on line 40. With these curly braces code blocks are always combined. It just gets a bit confusing sometimes. Especially when the blocks span multiple lines.
  
  Last but not least I have the config from https://pastebin.com/b0iVmzaV just loaded into my magic mirror. It will be displayed there. maybe it can be that the error lies in one of the installed modules? If you want, send me a screenshot of your error message. 🙂
  Best regards
  Fabian
  
  Reply
Bodo says:

14. March 2021 at 13:35

Hello Fabian,
so,......it's going up now. Madness,......after 2 months annoyed. Until now I had always inserted everything from the script file. And now that I've clicked clone above and copied that file, at least I get a Maps window. Albeit with an error message.
It remains even if I enter the API code and the other two data.
Greeting Bodo

Reply
1. Fab says:
  
  14. March 2021 at 15:01
  
  hey bodo,
  just tried it again. When I enter my API key, longitude and latitude the map is displayed.
  Are you sure you entered the latitude and longitude in the correct format?
  I have pasted the code of the module for you here. You just have to insert the API key and then you should see the traffic around the Reichstag. 🙂 https://pastebin.com/JsprMVFb
  Best regards
  Fabian
  
  Reply
Bodo says:

14. March 2021 at 16:57

Hello Fabian,
It gets even better. Now the map can be seen, but with an error message about it.
This page can't load Google Maps correctly.
In your module there are also many more numbers for latitude and longitude. I took it from the Goggle Maps web address. eg: 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
And from that then 52.5186222 and 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?
Greeting Bodo

Reply
1. Fab says:
  
  14. March 2021 at 17:05
  
  hey bodo,
  sounds good. 🙂 I would just try not to restrict the API use any further. It may very well be that the error message is related to this. 🙂
  The extra digits in the latitude and longitude are just a little bit more accurate. But since you only want to mark one region anyway, that shouldn't be too tragic.
  Best regards
  Fabian
  
  Reply
Bodo says:

14. March 2021 at 19:46

Hello Fabian,
Thanks again. I'll try it and then, probably tomorrow, get back to you.
Best regards
Bodo

Reply
Bodo says:

14. March 2021 at 19:59

Fabian,
have lifted all restrictions. message remains. However, I can confirm it with the mouse. Then it stays away until the next time the mirror starts up. But it comes back every time.
Greeting Bodo

Reply
1. Fab says:
  
  14. March 2021 at 20:28
  
  hey bodo,
  strange. But then it must actually be related to the Google API. I did not see this error message. :/ maybe just create a new API access and try it out?
  Best regards
  Fabian
  
  Reply
Bodo says:

15. March 2021 at 17:00

Hello Fabian,
So,……….have just generated a new API and entered it in the config. Unfortunately without success. The message stays.
I'll try to delete everything in the cloud platform and then create it again. Let's see what comes out of it. However, everything looks a little different here than in your instructions.
Best regards
Bodo

Reply
Bodo says:

15. March 2021 at 19:32

Fabian !!!!!!!!!
It's done !!!!!!!!!! Thanks to this guide here https://www.wpgmaps.com/documentation/creating-a-google-maps-api-key/
I got rid of the error message. It was something with the login credentials and linked account on Google.
But first I want to wait another day and see if the devil doesn't come back after all.
Until then, thank you very much in advance!!!!!!!!!!!!!!!!
But I'll get in touch with you again.
Best regards
Bodo

Reply
1. Fab says:
  
  16. March 2021 at 17:01
  
  hey bodo,
  that sounds good. 🙂 I keep my fingers crossed that everything goes on like this. 🙂
  Best regards
  Fabian
  
  Reply
Bodo says:

17. March 2021 at 18:39

Hello Fabian,
everything looks really good. So once again a thousand thanks!!!
Best regards
Bodo

Reply
Bodo says:

20. March 2021 at 14:47

Hello Fabian, I would like to ask you something else. Just for understanding. Here 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?
Best regards
Bodo

Reply
1. Fab says:
  
  20. March 2021 at 19:01
  
  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.
  Do you mean that? 🙂
  Best regards
  Fabian
  
  Reply