• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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.
  • K Offline
    KirAsh4 Moderator
    last edited by Aug 7, 2016, 6:25 PM

    You could also look at what’s already been done, such as https://github.com/moshen/node-googlemaps …

    A Life? Cool! Where can I download one of those from?

    1 Reply Last reply Reply Quote 0
    • T Offline
      tyho
      last edited by Aug 7, 2016, 7:41 PM

      @KirAsh4 i’ve seen that one ;) but i don’t know where to start. That module uses some different dependeties that are already in magicmirror. As suggested by @MichMich i should first build a simple module. (Well i’ve build one already that works very well but i don’t know if thats the right way of writing code and if it’s fail proof). Anyway i will keep try some stuff. I die got a map on my mirror with static map. But i want this trafficlayer. So i need to use the javascript api.
      On the mirror i can already see what i have to wear, where i have to go (appointments), and what happend in the world before i go. Wouldn’t it be cool if we can display traffic info and map before we leave to work. :D

      1 Reply Last reply Reply Quote 0
      • T Offline
        tyho
        last edited by tyho Aug 8, 2016, 12:37 PM Aug 8, 2016, 12:08 PM

        anyone who want to show a google staticmap on there mirror. Here is the code:

        0_1470659814707_screenshot.png

        /* global Module */
        
        /* Magic Mirror
         * Module: staticmap
         *
         */
          
        Module.register("staticmap",{
        	defaults: {
        		center: "new york",
        		zoom: 14,
        		mapwidth: 600,
        		mapheight: 500,
        		highway: "on",
        		arterial: "on",
        		local: "on"
        	},
        
        start: function(){
        	Log.info('Starting module: ' + this.name);
        },
        
        
        
        	getDom: function() {
        		var wrapper = document.createElement("div");
        		var img = document.createElement("img");
        		img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + this.config.center + 
        		"&zoom=" + this.config.zoom +
        		"&size=" + this.config.mapwidth + "x" + this.config.mapheight + 
        		"&maptype=roadmap" +
        		"&style=feature:road.highway|visibility:" + this.config.highway +			  
        		"&style=feature:road.arterial|visibility:" + this.config.arterial +	
        		"&style=feature:road.local|visibility:" + this.config.local + 
        		"&style=feature:road|invert_lightness:true|saturation:-100|weight:1|lightness:1" +
        		"&style=feature:administrative|invert_lightness:true|saturation:-100|weight:1|lightness:1|visibility:on" + 
        		"&style=feature:poi|invert_lightness:true|weight:1|saturation:-100|lightness:1|visibility:on" +
        		"&style=feature:transit|invert_lightness:true|saturation:-100|lightness:1|weight:1|visibility:on" +
        		"&style=feature:landscape|invert_lightness:true|weight:1|saturation:-100|lightness:1|visibility:on" +
        		"&style=feature:water|invert_lightness:true|weight:1|saturation:-100|lightness:1|visibility:on" +
        		"&style=feature:road|element:labels.text.fill|lightness:100" +
        		"&style=feature:road|element:labels.text.stroke|lightness:-100";
        		img.width = this.config.mapwidth;
        		img.height = this.config.mapheight;
        		wrapper.appendChild(img);
        		return wrapper;
        	}
        });
        
        1 Reply Last reply Reply Quote 1
        • A Offline
          alexyak
          last edited by alexyak Aug 9, 2016, 7:16 PM Aug 9, 2016, 7:13 PM

          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 Aug 10, 2016, 10:11 AM Aug 10, 2016, 9:59 AM

            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 Aug 10, 2016, 8:45 PM

              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 Aug 11, 2016, 4:45 PM Aug 11, 2016, 4:44 PM

                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 Aug 11, 2016, 7:35 PM

                  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 Aug 12, 2016, 7:14 PM

                    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 Aug 12, 2016, 7:18 PM Reply Quote 0
                    • A Offline
                      alexyak @tyho
                      last edited by Aug 12, 2016, 7:18 PM

                      @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
                      • 1
                      • 2
                      • 3
                      • 4
                      • 5
                      • 6
                      • 7
                      • 3 / 7
                      3 / 7
                      • First post
                        22/63
                        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