Trafficmaps

tyho

@alexyak Thnx for the module! I will try it when i am home :)

wscheer

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.

shgmongohh

@wscheer

Thanks for the little tutorial!
Could you please explain, with which module do you calculating the current time to your work and mom?

Sebastian

strawberry 3.141

@shgmongohh [card:SamLewis0602/MMM-Traffic]

Notumlord

@strawberry-3.141 said in Trafficmaps:

@shgmongohh [card:SamLewis0602/MMM-Traffic]

Hijacking this thread since i cant find one specific for MMM-Traffic.

I can only get the “driving” mode to work with MMM-Traffic, if i anything else it’s stuck on Loading Commute.
Anyone else have this issue?

strawberry 3.141

@Notumlord if the author is not registered in this forum, then the best way would be to open an issue on github https://github.com/SamLewis0602/MMM-Traffic/issues

Mitchfarino

@Notumlord @strawberry-3-141

I have these two working fine for me in my config

	{
		module: 'MMM-Traffic',
		position: 'bottom_right',
		classes: 'dimmed medium', //optional, default is 'bright medium', only applies to commute info not route_name
		config: {
			api_key: '',
			mode: 'bicycling',
			origin: 'my origin',
			destination: 'my destination',
			route_name: 'Home to Work',
			changeColor: true,
			showGreen: false,
			limitYellow: 5, //Greater than 5% of journey time due to traffic
			limitRed: 20, //Greater than 20% of journey time due to traffic
			traffic_model: 'pessimistic',
			interval: 120000 //2 minutes
		}
	},
	{
		module: 'MMM-Traffic',
		position: 'bottom_right',
		classes: 'dimmed medium', //optional, default is 'bright medium', only applies to commute info not route_name
		config: {
			api_key: '',
			mode: 'driving',
			origin: 'my origin',
			destination: 'my destination',
			route_name: 'Home to Work',
			changeColor: true,
			showGreen: false,
			limitYellow: 5, //Greater than 5% of journey time due to traffic
			limitRed: 20, //Greater than 20% of journey time due to traffic
			traffic_model: 'pessimistic',
			interval: 120000 //2 minutes
		}
	},

Notumlord

@Mitchfarino
Strange, do you use the exact same origin/destination for both modules or do you format them differently depending on the mode?

Mitchfarino

@Notumlord exactly the same origin and destination, using my postcode for home as the origin and postcode for work as the destination

If you want to share your sample config, I can put it in my mirror to see if it works

wscheer

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);
	},
});