http://dev.

Thanks very much. You are a legend. It’s finally working after me trying everything that I could think of.
One of my biggest mistakes was I started with “http:// and ended with jf4”; which works fine without the Math.random. Clearly ‘ was the way to go and not “.

wrapper.src = 'http://dev.virtualearth.net/REST/v1/Imagery/Map/Road/-26.0460,27.9790/13?mapSize=500,420&pp=' + Math.random() + ',' + Math.random() + '&ml=TrafficFlow&key=Asm#####AJWIWc5o8Onf4fhH8O3IEe2e8ZcHaLTBWhx4_BWTvOW4S5xj60MuUJf4';

This way you use the actual value and not Math.random() as a string.

Like this the code is working fine:

wrapper.src = ‘http://dev.virtualearth.net/REST/v1/Imagery/Map/Road/-26.0460,27.9790/13?mapSize=500,420&ml=TrafficFlow&key=Asm#####AJWIWc5o8Onf4fhH8O3IEe2e8ZcHaLTBWhx4_BWTvOW4S5xj60MuUJf4’;

Like this it isn’t working:

wrapper.src = ‘http://dev.virtualearth.net/REST/v1/Imagery/Map/Road/-26.0460,27.9790/13?mapSize=500,420&pp=Math.random(),Math.random()&ml=TrafficFlow&key=Asm#####AJWIWc5o8Onf4fhH8O3IEe2e8ZcHaLTBWhx4_BWTvOW4S5xj60MuUJf4’;

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

In your maproute.js it says “map_key” not “api_key”.

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.

I really don’t know what’s going on.

Maybe I should just implement it as a final picture

Okay your link with my API worked…

I put my API key in the maproute.js file as the default key. Maybe that is the problem.

How should the config.js file look?
Like this?

                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: 'xxxxx', // Your Bing maps api key
                updateInterval: 300000 // 5 min refresh

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

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…

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

What should I do now?

I think that’s a different problem and I have to handle that first…

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.

Thanks for your quick reply.
Can you just tell me how to enter the “standalone” mode?
thanks

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.

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

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

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

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