Read the statement by Michael Teeuw here.
Trafficmaps
-
Does anybody know what modules i have to use to get the maps js api working? Angular? Async? Express? Or somerhing like a google api module?
-
@tyho you don’t need no modules. The only thing that is important is that you fully understand the MagicMirror framework. As told, the best way to learn this, is by start building a real simple module.
-
You could also look at what’s already been done, such as https://github.com/moshen/node-googlemaps …
-
@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 -
anyone who want to show a google staticmap on there mirror. Here is the code:
/* 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; } }); -
Instead of Google, you could also use Microsoft’s Bing service to get a map with accidents:
-
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.
-
-
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? -
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…
-
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 ^^
-
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 :(
-
@tyho so what exactly you’re trying to implement? What would be a use case here for the MM?
-
@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.
-
@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.
-
@alexyak that would be awesome. I guess there will be much interest for a module like this looking on the topic views ^^
-
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
-
@alexyak Thnx for the module! I will try it when i am home :)
-
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.
-
Thanks for the little tutorial!
Could you please explain, with which module do you calculating the current time to your work and mom?Sebastian
-
@shgmongohh [card:SamLewis0602/MMM-Traffic]
Hello! It looks like you're interested in this conversation, but you don't have an account yet.
Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.
With your input, this post could be even better 💗
Register Login