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.

    Trafficmaps

    Scheduled Pinned Locked Moved Development
    63 Posts 11 Posters 71.1k Views 12 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.
    • A Offline
      alexyak
      last edited by alexyak

      Instead of Google, you could also use Microsoft’s Bing service to get a map with accidents:

      https://msdn.microsoft.com/en-us/library/hh441726

      https://msdn.microsoft.com/en-us/library/hh305205.aspx

      1 Reply Last reply Reply Quote 0
      • T Offline
        tyho
        last edited by tyho

        Good one! i will see if i can get something working.

        What i try to do is:

        • Get a map with a route to my work.

        • Get traffic status along this route.

        • Style the maps so it’s nice visable through the mirror. (black/white maps and red lines/triangels for traffic jam.

        • Abillity to switch route with @alexyak voicecontrol module. (work me = to amsterdam) (work girlfriend = to utrecht)

        This are a few wishes. But i am happy already if i get the first two working ^^ i am not skilled at node and js at all… any help is appreciated.

        1 Reply Last reply Reply Quote 0
        • T Offline
          tyho
          last edited by

          ok just for the record. if i got the most simple maps js api code:

          <!DOCTYPE html>
          <html>
            <head>
              <title>Simple Map</title>
              <meta name="viewport" content="initial-scale=1.0">
              <meta charset="utf-8">
              <style>
                html, body {
                  height: 100%;
                  margin: 0;
                  padding: 0;
                }
                #map {
                  height: 100%;
                }
              </style>
            </head>
            <body>
              <div id="map"></div>
              <script>
                var map;
                function initMap() {
                  map = new google.maps.Map(document.getElementById('map'), {
                    center: {lat: -34.397, lng: 150.644},
                    zoom: 8
                  });
                }
              </script>
              <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
              async defer></script>
            </body>
          </html>
          

          can i just create a module with:
          var x = document.getElementById("map").id;for the div?
          var x = document.createElement("SCRIPT");for the script tags? (w3schools said it supports async and defer)
          and then create 2 functions. 1 for the src api url that i can callback within the script tags and 1 for the initMap that i can callback after the scr url?
          Is this good thinking or is it not that simple?

          1 Reply Last reply Reply Quote 0
          • T Offline
            tyho
            last edited by tyho

            i am feeling close but also so far far away ^^ ghehe

            Module.register("trafficmaps",{
            	defaults: {
            	},
            
            	start: function(){
            		Log.info('Starting module: ' + this.name);
            	},
            
            	initMap: function(){
            		var map;
                    map = new google.maps.Map(document.getElementById('map'), {
                      center: {lat: -34.397, lng: 150.644},
                      zoom: 8
                    });
            	},
            
            
            	getDom: function() {
            		var wrapper = document.createElement("div");
            		var mapdiv = document.getElementById("map");	
            		wrapper.appendChild(mapdiv);
            		var maps = document.createElement('script');
            		maps.type = 'text/javascript'; maps.async = true; maps.defer = true;
            		maps.src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=" + this.initMap;
            		wrapper.appendChild(maps);
            		return wrapper;
            	}
            });
            

            This script hangs… and it prevents other modules loading…

            1 Reply Last reply Reply Quote 0
            • T Offline
              tyho
              last edited by

              I am also trying the bing option seperately but also no result. I’ll keep trying. I am wondering why there arn’t any scripts on the web yet. I think this is for there experts among us ^^

              1 Reply Last reply Reply Quote 0
              • T Offline
                tyho
                last edited by

                i found a example of bing maps: https://github.com/jwalgran/bing

                Anyone who can turn this into a module? I already tried but no succes :(

                A 1 Reply Last reply Reply Quote 0
                • A Offline
                  alexyak @tyho
                  last edited by

                  @tyho so what exactly you’re trying to implement? What would be a use case here for the MM?

                  1 Reply Last reply Reply Quote 0
                  • T Offline
                    tyho
                    last edited by tyho

                    @alexyak What i tried to create is a map view from my home to my work. With on this map the trafficjam/delay. (google can do with the red orange green lines and bing with the triangles). With this map i can see in the morning when i wake up, if i have to leave earlier because of traffic jam. This where my first thoughts for the module. (but with my ms frontpage experience i can’t get this working ^^)

                    As a second thought i had in mind to use your voice module (or facial recgnition module) to switch between my map and that of my girlfriend. So another map is loaded.

                    In the google static map that i already created there is no option to add a traffic layer.

                    In both google maps and bing maps there are style options to make the map black and white for better display. and for example the traffic jam could be red displayed.

                    A 1 Reply Last reply Reply Quote 0
                    • A Offline
                      alexyak @tyho
                      last edited by

                      @tyho alright, now I understand your requirements… I can’t promise, but will try to have a look at this over a few coming days.

                      1 Reply Last reply Reply Quote 0
                      • T Offline
                        tyho
                        last edited by

                        @alexyak that would be awesome. I guess there will be much interest for a module like this looking on the topic views ^^

                        A 1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 3
                        • 4
                        • 5
                        • 6
                        • 7
                        • 3 / 7
                        • 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