MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Google Maps with traffic info

    Scheduled Pinned Locked Moved Requests
    9 Posts 5 Posters 10.4k Views 6 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • L Offline
      Leliekevertje
      last edited by

      Unfortunately I can’t write (understand) softwarecode so I hope someone will help me.

      There are some traffic modules but they only give you information from A to B. Is it possible to create and show a map (Google?) which shows a region of a country with traffic jams?

      In Google Maps it is possible to show a (fullscreen) map with a traffic layer, see https://www.google.nl/maps/@52.0357403,4.8328404,9.25z/data=!5m1!1e1

      It doesn’t have to be a fullscreen map. It would be nice if you can zoom in a particular area of a country.

      1 Reply Last reply Reply Quote 0
      • B Offline
        bradyemerson
        last edited by

        You could add the map using the iframe module (https://github.com/desertblade/iFrame). Provide the URL you linked to in your post in the configuration; or any other Google Maps URL.

        1 Reply Last reply Reply Quote 0
        • O Offline
          onetwankyfive
          last edited by

          I was able to achieve this with MMM-iFrameReload and an html file in that folder… It looks something like this.

          {
          module: ‘MMM-iFrameReload’,
          header:‘Traffic Map’,
          position: ‘top_right’, // This can be any of the regions.
          config: {
          // See ‘Configuration options’ for more information.
          url: “http://localhost:8080/modules/MMM-iFrameReload/nameofhtmlfile.html”,
          width: “580px”, // Optional. Default: 400px
          height: “1100px”, // Optional. Default: 800px
          refreshInterval: 600 //Optional. Default: 3600 = 1 hour
          }
          },

          with this code below to make the map and save the html in the iframe folder

          https://developers.google.com/maps/documentation/javascript/examples/layer-traffic

          L 1 Reply Last reply Reply Quote 0
          • L Offline
            Leliekevertje @onetwankyfive
            last edited by

            @onetwankyfive

            Hi 1twanky5,

            Thanks for helping me out :)

            Tried it, does’nt work unfortunately. Created an HTML.file (Randstad.html) and punt in the folder MagicMirror/modules/MMM-iFrameReload. See below the lines in my config file.

            	{
            		module: 'MMM-iFrameReload',
            		position: 'middle_center', 
            		config: {
            			url: '/home/pi/MagicMirror/modules/MMM-iFrameReload/Randstad.html',
            			height: '800px',
            			width: '600px', 
            			refreshInterval: 600 //Optional. Default: 3600 = 1 hour
            			}
            	},
            

            Tried the URL in a browser and that worked. But when I start MagicMirror , the screen turns black. Am I doing something wrong?

            Thanks in advance.

            H 1 Reply Last reply Reply Quote 0
            • H Offline
              honzup @Leliekevertje
              last edited by

              @Leliekevertje

              I think your url needs to be:

              url: 'http://localhost:8080/modules/MMM-iFrameReload/Randstad.html',
              

              That’s certainly how it works for me.

              A great addition to the MagicMirror.

              1 Reply Last reply Reply Quote 0
              • L Offline
                Leliekevertje
                last edited by

                Hi Honzup,

                Lost in lots of “try and error” situations but now I’m on the right path. Thanks it works great!

                If anyone have any suggestions to make te screen gray in stead of the default colors from Google, I love to hear it!

                1 Reply Last reply Reply Quote 0
                • B Offline
                  bradyemerson
                  last edited by bradyemerson

                  @Leliekevertje
                  Google Maps API provides styling capabilities: https://developers.google.com/maps/documentation/javascript/styling

                  There is a quite extensive collection of styles you can utilize here: https://snazzymaps.com/explore. Just copy the given JSON from snazzymaps into the styles parameter of GMaps API.

                  1 Reply Last reply Reply Quote 0
                  • L Offline
                    Leliekevertje
                    last edited by

                    Thanks for all the help, I really appriciate this!

                    I could not get rid of the (in my opinion ugly) green color which marks highways (with no traffic) with the Google styling as mentioned in the reply of bradyemerson.

                    I’ve found another solution within the MM Forum so I’ve copy/pasted it. Don’t know if this code is properly correct but it works for me and maybe others can benefit from it.

                    In the module MMM-iFrameReload i’ve changed te line:
                    iframe.style = “border:0”

                    in:
                    iframe.style = “border:0;-webkit-filter: grayscale(100%);filter: grayscale(100%);”

                    1 Reply Last reply Reply Quote 0
                    • G Offline
                      GeekyTiki
                      last edited by

                      Hello everyone, I’m wondering if anyone knows how I would be able to track the traffic on a specific road. Perhaps, between a point A and point B? I’m using the map, but it only displays the traffic data for major roads.

                      Any ideas would be greatly appreciated!

                      1 Reply Last reply Reply Quote 1
                      • 1 / 1
                      • First post
                        Last post
                      Enjoying MagicMirror? Please consider a donation!
                      MagicMirror created by Michael Teeuw.
                      Forum managed by Sam, technical setup by Karsten.
                      This forum is using NodeBB as its core | Contributors
                      Contact | Privacy Policy