Read the statement by Michael Teeuw here.
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.jsModule.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); }, }); -
@wscheer
Is this modul still working?I did everthing you explained:
in my config.js:
{ module: 'maproute', position: 'middle_center', },And /var/www/html/MagicMirror/modules/maproute/maproute.js is the code from above.
I’ve created an API for Bing maps.
But if I run MM I just see a small image. Like the right picture could not be found.
And if I look to the report om bing how often my API was used, it counts 0.Where is the mistake?
Thanks
-
@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.
-
Thanks for your quick reply.
Can you just tell me how to enter the “standalone” mode?
thanks -
@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.
-
@wscheer
oh okay, I already did that and the command line said my page was created correctly.
But in teh browser it said page not found.I think that’s a different problem and I have to handle that first…
-
Now I can open the MM in the webbrowser.
What should I do now?
-
@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 :)
-
I’ve installed Firefox:
Initializing MagicMirror. logger.js:17:4 Loading core translation file: translations/de.json logger.js:20:4 Loading core translation fallback file: translations/en.json logger.js:20:4 Load script: modules/default/alert//alert.js logger.js:20:4 Module registered: alert logger.js:20:4 Bootstrapping module: alert logger.js:17:4 Load script: modules/default/alert//classie.js logger.js:20:4 Load script: modules/default/alert//modernizr.custom.js logger.js:20:4 Load script: modules/default/alert//notificationFx.js logger.js:20:4 Scripts loaded for: alert logger.js:20:4 Load stylesheet: modules/default/alert//ns-default.css logger.js:20:4 Styles loaded for: alert logger.js:20:4 alert - Load translation: translations/de.json logger.js:20:4 alert - Load translation fallback: translations/en.json logger.js:20:4 Translations loaded for: alert logger.js:20:4 Load script: modules/maproute//maproute.js logger.js:20:4 Module registered: maproute logger.js:20:4 Bootstrapping module: maproute logger.js:17:4 Scripts loaded for: maproute logger.js:20:4 Styles loaded for: maproute logger.js:20:4 Translations loaded for: maproute logger.js:20:4 Load stylesheet: css/custom.css logger.js:20:4 Starting module: alert logger.js:17:4 All modules started! logger.js:17:4 maproute received a system notification: ALL_MODULES_STARTED logger.js:20:4 maproute received a system notification: DOM_OBJECTS_CREATED logger.js:20:4 GET http://dev.virtualearth.net/REST/v1/Imagery/Map/Road/40.4406,-79.9959/12 [HTTP/1.1 401 Unauthorized 108ms]I think I have a wrong API access, but I think I did everything as described…
-
@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######-2http://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
