How To: Map tile with real-time traffic

James · March 8, 2018, 6:54pm

It is really cool to show the map tile with real-time traffic on the dashboard. This is something I wanted to have for a while. And I was able to get this setup in 2 minutes following the steps below.

Steps:

Get a MS Bing map API from here
https://www.bingmapsportal.com/Application

(Why not Google Map? Because Google map static image api doesn’t allow traffic layer. )
Go to the link below and setup your map parameter using the API Key from Step 1
https://staticmapmaker.com/bing/

(Don’t forget to check the “Show traffic” box.)
Copy the generated URL

chrome_2018-03-08_12-48-59938×818 588 KB
Add a Media Tile in SharpTools dashboard, and paste the URL we got from Step 3 in the “Media URL” field, set the Refresh Interval to 300 seconds, and hit “Create”

chrome_2018-03-08_12-52-051164×912 129 KB

(Since MS Bing API Key allows free 125k API calls per year, so you may not want to set the refresh interval to be less than 5 minutes.See here for API usage limit details.)

Here you go. Very cool map tile with real-time traffic right here!

Derek_C · March 11, 2019, 7:25pm

I received an email from bing maps that navteqna and navteqeu datasources are being shutdown. Does this mean this tile will stop working or does it not rely on the data sources?

James · March 11, 2019, 8:02pm

Hi Derek,
From the URL generated in the Bing Static Map Maker mentioned in the original post, it doesn’t seem to use navteqna nor navteqeu, so I don’t think this real-time traffic image tile will be impacted.

Derek_C · March 12, 2019, 1:13am

Hi James, thanks for checking. I really like this feature and would hate to lose it.

Shai_Dotan · October 2, 2019, 7:34pm

Hi James,
The map looks great !! thanks.
It will be even greater if there was a way to see pins at my family members locations. Is that possible ?
Your help is really appreciated… Thanks again

James · October 2, 2019, 8:33pm

@Shai_Dotan, that is actually a pretty cool idea. But unfortunately, based on my quick research, shared location is not available through Google Map API at this moment, and I don’t think Bing even has the location sharing feature though. I will take another look later if this can be achieved in different way then.

steinauf · October 28, 2019, 8:42pm

I followed your steps exactly, but the site is just giving me a broken image link. Is there something wrong with staticmapmaker, or my bing API?

James · October 28, 2019, 9:45pm

Hi @steinauf, can you take a screenshot of the Bing static map link generator page and the link you created and send them to me over message so you don’t expose your API key. I can take a look for you when I have a chance.

steinauf · October 29, 2019, 6:00pm

Figured it out. When I copied the coordinates from bing maps, it included a space after the comma that it didn’t like. Deleted space, map shows up!

James · October 29, 2019, 6:14pm

Glad to hear you got it figured out and thanks for sharing.

James · February 27, 2020, 2:54pm

@Tedis_Agolli has shared another traffic related solution using Google API to get estimated commute time that can be displayed as a image in the dashboard. See below for details, and that’s pretty cool.

Jason_Carreira · March 17, 2021, 9:59pm

Has anyone tried using the pushpin URL parameters to locate people on the map dynamically based on something like Life360 lat/lon coordinates?

Dustin_bragg · May 27, 2021, 4:29pm

This might help some
https://community.sharptools.io/t/life-360-hubitat-map-tile/6596/2

cmderden79 · May 28, 2021, 5:37pm

@James Man this is great, I’ve been wanting something like this for a while so thanks for sharing!! I will get this setup TONIGHT.

I do have a follow up. This can only be used to show a traffic map in a general area and not on a direct route (say morning work commute) correct? Reason I ask is I have been curious about passing “commute time” to smartthings to build automations on but I am not sure this would be able to do that.

Either way, this is awesome information.

cmderden79 · May 28, 2021, 7:28pm

@James scratch that follow up question I had - I just came back and read the entire thread and saw the alternate google solution. I will look at that first.

Tim_Collins · February 4, 2024, 6:23am

@James I’m having the same issue, may I message you as well for assistance? It looks good on the generator page, and if I paste the copied link into a blank browser page, it does pull up an image of the map with traffic indications… but it’s a broken non-display after inserting that same link into a media tile.

Thanks!

josh · February 4, 2024, 6:03pm

You could also post it here with the key part of the URL redacted.

Tim_Collins · February 4, 2024, 9:08pm

Thanks Josh.

The webpage from last night was still up as I’d left it, and this is what I saw:

After taking a screenshot, I was going to screenshot the link working in a browser as it did last night, but it no longer does. Now if I try to re-run, I get this:

And this is the error return info you get when running the generated link (as it told you to do for more info):

It appears to be indicating my Key is valid, but the service is down. Is the service down for everyone, or is this just my error?

Tim_Collins · February 4, 2024, 9:46pm

Trying to debug a little further, I opened an anonymous session (Firefox), went to the static map maker, and it functioned properly.

The resulting URL also opens the expected map in a blank browser (first an anon browser, but then in a non-anon browser as well). (Tried another browser, still works)

Thinking perhaps a cache problem, I cleared my cache/history/all. No joy, in non-anon, it still gives same error.

Okay, let’s try Microsoft’s own browser, Edge. Again, same error, no go. Chrome… again, same error.

Tried a blank browser as a final test, and same URL no longer works, but returns the JSON error.

Tim_Collins · February 6, 2024, 8:15pm

It must have been their servers, as it appears to be working now. (Got it on my dashboard.)