Trafficmaps

tyho

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?

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…

tyho

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 ^^

tyho

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 :(

alexyak

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

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.

alexyak

@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.

tyho

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

alexyak

@tyho

Here’s a basic module traffic map module to display a static map with a route and traffic based on bing api’s:

'use strict';

Module.register('maproute',{
	
	defaults: {
        key: "your_bing_map_key",
        start: "Morganville, NJ",
        end: "New York, NY",
	},
	
	start: function() {
		Log.info('Starting module: ' + this.name);
	},

        // Override dom generator.
	getDom: function() {
		var wrapper = document.createElement("img");
                wrapper.style = "position:center; width:600px; height:600px;";
                wrapper.src = "http://dev.virtualearth.net/REST/V1/Imagery/Map/Road/Routes?wp.0=" + this.config.start + ";46&wp.1=" + this.config.end + ";46&mapLayer=TrafficFlow&TravelMode=Driving&mapSize=600,600&key=" + this.config.key;
		return wrapper;
	}

});

Unfortunately there’s no way to change the style of the map on bing (black and white). You can get your map key from here:

https://www.bingmapsportal.com/

Thanks… Alex

tyho

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

wscheer

@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.

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

strawberry 3.141

@wscheer Quote from the readme Whenever your module need to be updated, call the updateDom(speed) method. It requests the MagicMirror core to update it's dom object. If you define the speed, the content update will be animated, but only if the content will realy change. So i guess your html looks all the time the same, so there is probably no real update of the dom. I suggest to try to add an timestamp somewhere and see if it gets updated then