MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    1. Home
    2. wscheer
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.
    W
    Offline
    • Profile
    • Following 0
    • Followers 0
    • Topics 0
    • Posts 10
    • Groups 0

    wscheer

    @wscheer

    3
    Reputation
    667
    Profile views
    10
    Posts
    0
    Followers
    0
    Following
    Joined
    Last Online

    wscheer Unfollow Follow

    Best posts made by wscheer

    • RE: Trafficmaps

      @tyho @alexyak

      Wow guys thanks! I was a few steps behind tyho trying to get the google maps traffic option to work. I searched every few weeks for this and finally came upon this thread. I have a traffic map on my magic mirror now!!!

      For any super beginners (like myself) here are a few notes to add this to my magic mirror page.

      • Create a dir in your modules dir (ex: MagicMirror/modules/maproute/
      • Create a file called maproute.js (ex: MagicMirror/modules/maproute/maproute.js) This is where you copy in the code above that alexyak posted
      • Edit your config.js file to add the module to your page:
        I don’t think position and config are required but I stuck them in there and it works ok.
      {
                            module: 'maproute',
                            position: 'top_right',
                            config: {}
                      },
      
      

      Restart your pi or restart the magic mirror service and you should be all set!

      If I missed anything or anything is wrong, please let me know

      The map is cut off in my screenshot but I haven’t changed the sizing or anything yet.

      0_1473042805581_magicmirror-bingtraffic.jpg

      posted in Development
      W
      wscheer
    • RE: Trafficmaps

      @strawberry-3-141 Ding! Ding! Ding! That was it! THANK YOU!

      Also thanks again to @alexyak and @tyho for their input.

      I’ll post the code for anyone who wants Bing Traffic maps on their Magic Mirror.

      It’s a little hackish but maybe someone will come along and write it the correct way. Basically I’m taking the pushpin (pp) parameter and just assigning two random numbers to it. Math.random() creates a number between 0 and 1. So the map never shows the pushpin on the area I’m at. This causes the information to be “new” so when updateDom() is called, the info has changed.

      For any beginners, here is my file structure setup:
      The code below is located: /var/www/html/MagicMirror/modules/maproute/maproute.js

      Module.register("maproute", {
              defaults: {
                      latitude: '40.4406', // City latitude. Use google to get these coordinates
                      longitude: '-79.9959', // City longitude
                      map_zoom: '12', // 1 - 21
                      map_layer: 'TrafficFlow', 
                      map_size: '500', // Using this for both length and width
                      api_key: '123456789', // Your Bing maps api key
                      updateInterval: 300000 // 5 min refresh
              },
              getDom: function() {
                      var wrapper = '';
                      wrapper = document.createElement("img");
                      // The Math.random() calls are to place a random pushpin on the map and make the updateDom() call refresh
                      wrapper.src = "http://dev.virtualearth.net/REST/v1/Imagery/Map/Road/" + this.config.latitude + "," + this.config.longitude + "/" + this.config.map_zoom + "?mapSize=" + this.config.map_size + "," + this.config.map_size + "&pp=" + Math.random() + "," + Math.random() + "&ml=" + this.config.map_layer + "&key=" + this.config.map_key;
                      return wrapper;
              },
      	start: function() {
      		var self = this;
      		setInterval(function() {
      			self.updateDom(5000); // I set a 5 second refresh here for testing.
      		}, this.config.updateInterval);
      	},
      });
      
      posted in Development
      W
      wscheer

    Latest posts made by wscheer

    • RE: Trafficmaps

      @Jeff omg I’m such a doof. I’ll go back in my previous post and fix that.

      I’m so glad you got it working! I searched for months to find a map like this. I hope you enjoy it :)

      posted in Development
      W
      wscheer
    • RE: Trafficmaps

      @Jeff ok Jeff I have an idea.

      Can you look at your magic mirror page in server only mode again? Then if you right click and “inspect” the broken image you should see the url its trying to reach.

      Compare that to the url I had you copy paste in with your API that worked.

      Then if there is some sort of difference we should be able to track it down.

      posted in Development
      W
      wscheer
    • RE: Trafficmaps

      @Jeff yeah. Just replace the xxxx with your API key.

      posted in Development
      W
      wscheer
    • RE: Trafficmaps

      @Jeff Ok now we are getting somewhere.

      Try this:
      In your browser, paste this url but add your bing maps api key at the end. Mine looks like this (i replaced some characters with #)
      ######ss9ZpK9lZjPRNo78Xp######xM_zjDmyQ2M5GmkzcOUhW2BYmO######-2

      http://dev.virtualearth.net/REST/v1/Imagery/Map/Road/40.4406,-79.9959/12?mapSize=500,500&ml=TrafficFlow&key= ADD YOUR API KEY HERE

      When you do that, you should see the map all by itself. That would tell you if it was an issue with your api key itself.

      If that works, double check the api key was copied right in the config section
      “api_key: ‘123456789’, // Your Bing maps api key”

      Let me know what you find

      posted in Development
      W
      wscheer
    • RE: Trafficmaps

      @Jeff Ok so now if you load the page and you still see the broken image, the browser can help you find out what the problem is.

      If you use firefox, hit F12 and reload the magic mirror page you can see if there are any errors being reported. When I was first testing mine, I had an typo in the api string and I couldn’t really see it until I looked at it in the browser.

      Let me know if that helps, or post some screenshots of any errors and hopefully I can help :)

      posted in Development
      W
      wscheer
    • RE: Trafficmaps

      @Jeff yeah

      execute the following command from the MagicMirror folder: “node serveronly”. This will start the server, after which you can open the application in your browser of choice.

      posted in Development
      W
      wscheer
    • RE: Trafficmaps

      @Jeff yeah mine is still working.

      To troubleshoot you could run magic mirror in “standalone” mode. That would let you view the page on a desktop computer and you can look at the browser console to see what the errors are.

      Let me know if you need more instructions on that. I’m on a mobile right now. I could add more later.

      posted in Development
      W
      wscheer
    • RE: Trafficmaps

      @strawberry-3-141 Ding! Ding! Ding! That was it! THANK YOU!

      Also thanks again to @alexyak and @tyho for their input.

      I’ll post the code for anyone who wants Bing Traffic maps on their Magic Mirror.

      It’s a little hackish but maybe someone will come along and write it the correct way. Basically I’m taking the pushpin (pp) parameter and just assigning two random numbers to it. Math.random() creates a number between 0 and 1. So the map never shows the pushpin on the area I’m at. This causes the information to be “new” so when updateDom() is called, the info has changed.

      For any beginners, here is my file structure setup:
      The code below is located: /var/www/html/MagicMirror/modules/maproute/maproute.js

      Module.register("maproute", {
              defaults: {
                      latitude: '40.4406', // City latitude. Use google to get these coordinates
                      longitude: '-79.9959', // City longitude
                      map_zoom: '12', // 1 - 21
                      map_layer: 'TrafficFlow', 
                      map_size: '500', // Using this for both length and width
                      api_key: '123456789', // Your Bing maps api key
                      updateInterval: 300000 // 5 min refresh
              },
              getDom: function() {
                      var wrapper = '';
                      wrapper = document.createElement("img");
                      // The Math.random() calls are to place a random pushpin on the map and make the updateDom() call refresh
                      wrapper.src = "http://dev.virtualearth.net/REST/v1/Imagery/Map/Road/" + this.config.latitude + "," + this.config.longitude + "/" + this.config.map_zoom + "?mapSize=" + this.config.map_size + "," + this.config.map_size + "&pp=" + Math.random() + "," + Math.random() + "&ml=" + this.config.map_layer + "&key=" + this.config.map_key;
                      return wrapper;
              },
      	start: function() {
      		var self = this;
      		setInterval(function() {
      			self.updateDom(5000); // I set a 5 second refresh here for testing.
      		}, this.config.updateInterval);
      	},
      });
      
      posted in Development
      W
      wscheer
    • RE: Trafficmaps

      Hey All,
      I’ve been tinkering around with the Bing Traffic maps a little more. I made it a bit more customizable but I’m having an issue where the map never refreshes.

      I’ve tried calling updateDom() but that does not seem to do anything. I also tried setting the wrapper to ’ ’ before it is set to the bing url path.

      Any ideas?

      Module.register("maproute", {
              defaults: {
                      latitude: '40.4406', // city latitude
                      longitude: '-79.9959', // city longitude
                      map_zoom: '12', // 1 - 21
                      map_layer: 'TrafficFlow', 
                      map_size: '500', // using this for both length and width
                      api_key: '1234567890', //  your bing maps api key
                      updateInterval: 300000 // 5 mins
              },
              getDom: function() {
                      var wrapper = ''; // tried setting this to blank to see if that would clear out the old image
                      wrapper = document.createElement("img");
                      // create the url using the custom parameters
                      wrapper.src = "http://dev.virtualearth.net/REST/v1/Imagery/Map/Road/" + this.config.latitude + "," + this.config.longitude + "/" + this.config.map_zoom + "?mapSize=" + this.config.map_size + "," + this.config.map_size + "&ml=" + this.config.map_layer + "&key=" + this.config.map_key;
                      return wrapper;
              },
      	start: function() {
      		var self = this;
      		setInterval(function() {
      			self.updateDom(); // no speed defined, so it updates instantly.
      		}, this.config.updateInterval);
      	},
      });
      
      posted in Development
      W
      wscheer
    • RE: Trafficmaps

      @tyho @alexyak

      Wow guys thanks! I was a few steps behind tyho trying to get the google maps traffic option to work. I searched every few weeks for this and finally came upon this thread. I have a traffic map on my magic mirror now!!!

      For any super beginners (like myself) here are a few notes to add this to my magic mirror page.

      • Create a dir in your modules dir (ex: MagicMirror/modules/maproute/
      • Create a file called maproute.js (ex: MagicMirror/modules/maproute/maproute.js) This is where you copy in the code above that alexyak posted
      • Edit your config.js file to add the module to your page:
        I don’t think position and config are required but I stuck them in there and it works ok.
      {
                            module: 'maproute',
                            position: 'top_right',
                            config: {}
                      },
      
      

      Restart your pi or restart the magic mirror service and you should be all set!

      If I missed anything or anything is wrong, please let me know

      The map is cut off in my screenshot but I haven’t changed the sizing or anything yet.

      0_1473042805581_magicmirror-bingtraffic.jpg

      posted in Development
      W
      wscheer