Discuss & Vote

Live Traffic travel time Tile! Image from query text using Shields.io

Rob Cummings 1 year ago in Media Tiles / Weather & Traffic • updated 1 day ago 38

I thought I'd post this to help others. I figured out a way to display the travel time for my wife's commute to work. See the pink tile in the screenshot below...

I used a Google Maps Distance Matrix API call and displayed the result in a Shields.IO badge. (Check out http://shields.io) Then I added the whole darn deal to the My Media section in Action Tiles.

Here's the link I used, broken into pieces...

Base URL: https://img.shields.io/badge/dynamic/json.svg

Badge Options (no label, pink color, time query, badge style): ?label= &colorA=ff69b4&colorB=ff69b4&prefix=&suffix=&query=$..duration_in_traffic.text&style=flat-square

Google Maps API call: &uri=https%3A%2F%2Fmaps.googleapis.com%2Fmaps%2Fapi%2Fdistancematrix%2Fjson%3Funits%3Dimperial%26departure_time%3Dnow%26origins%3D[origin address]%26destinations%3D[your destination address]%26key%3D[your API key]

You'll have to generate and use a Google API key and the URI has to be encoded with all those silly % escape codes. The Dynamic Generator at the bottom of the Shields.io page will help you out with the pieces. It was a bit of trial and error. Here's what it looks like all put together in the My Media image URL field...

https://img.shields.io/badge/dynamic/json.svg?label= &colorA=ff69b4&colorB=ff69b4&prefix=&suffix=&query=$..duration_in_traffic.text&style=flat-square&uri=https%3A%2F%2Fmaps.googleapis.com%2Fmaps%2Fapi%2Fdistancematrix%2Fjson%3Funits%3Dimperial%26departure_time%3Dnow%26origins%3D[your origin address]%26destinations%3D[your destination address]%26key%3D[your API key]

As everything seems to be, it's a little bit of a hack (text not centered), and the image and text proportion is stretched/crunched from the original (just like weather maps, camera images, etc.) but it seems to be working pretty well. One of the cool things is that it's actually an SVG, so no quality is lost if you make the tile bigger or look at it in a full-screen view. 

Hope this helps!

Discuss & Vote

I have to read and digest this carefully, but potentially this could be HUGE!


Shields.io is open source and really just takes JSON (in this case) or XML output and puts it in a PNG or SVG. I don't know why it didn't occur to me before, but you guys could adapt this code and method to display almost any dynamic API information. (Though in my non developer brain I'd think it would be easier to just display the JSON query text as native text.)


Thanks for sharing this innovative work, Rob!

Yes: We have had requests for "generic text output" Tiles; and sophisticated variants like "gauge Tiles".

The main hang-ups?

  • We'd like to get all our data from SmartThings. In many ways it keeps it simple. We can trust SmartThings to handle all the security and API intricacies of subscribing to the sources of the data and returning results in an expected way.
  • We need to know and expect something about the resulting text so that it can be formatted appropriately and consistently in the Tile. Since Tiles can be many shapes and sizes, and content and fonts can also be sized, it is quite difficult to predict what will fit in the Tile and what to do when a result text doesn't fit.

The above bullets are just speed bumps, not road-blocks. We just have to reiterate that there is "no such thing as a simple Feature". Everything takes time to figure out, design, implement, test, Beta test, and so on.

So we're grateful when y'all come up with pragmatic solutions like this which can tide us over!

Implementing a custom tiles from shields.io would actually save you a lot of hassle.

Shields.io does not only return images but also a standard json 



  • name: "custom badge",
  • value: "no query specified"


You can now expect something about the resulting text so that it can be formatted appropriately and consistently in the Tile.

That would allow SO MUCH MORE possibilities (AT is already awesome) and leave the hassle of formatting and playing around with shields.io to the end-user. We can now go strip any other json request and pass it in a standard way to AT.

Great point, Oliv...

We have a few Feature Requests (variations) to add functionality for REST-API calls or other ways to push data to a Tile or pull data or images or website frames into a Tile, etc..

Your shields.io JSON query example is help.

But please visit at least this one existing Topic to add Votes and perhaps a relevant use-case comment:  https://support.actiontiles.com/communities/12/topics/3615-api-calls-to-external-services


Excellent!  I had to play with it for a while to figure out the full text of the query (apparently I added an extra underscore in the destination) but it provides exactly what I needed.

Rob Cummings....Pardon my ignorance.....But I would love to give this a whirl, but I have no earthly idea where to begin other than the shields.io link. Would it be possible to post a tutorial?

And/or some more examples if others are using this.  I spent a few minutes trying to make a scoreboard from NBA JSON data but didn't get it working.


I'm not a programmer and probably spend way too much of my life doing this stuff by trial and error.

For the the traffic time, the biggest part is to generate a Google API key that allows you to make the API calls. https://console.developers.google.com/apis/credentials  You'll need to log in and generate a new key. When you generate a new key, you'll see a long string of random numbers and letters. That's your key. Don't ever post it anywhere publicly.

For the Shields.io part, you can use their website or hack together your own URL until it looks something like this:

origin address]%26destinations%3D[your destination
address]%26key%3D[your API key]

Here's the basic Google API URL:


I figured out the API call in my browser first. When I was sure I was getting the information I wanted. I added that link to the Shields.io generator. Then I figured out how to query just the information I wanted.

That's the $..duration_in_traffic.text part. When Shields gave me the whole combined URL, I copied and pasted that link into the My Media URL in Action Tiles. 

In Shields...

Type:  json

label:  (space)

uri:  The Google API URL

$.data.subdata (This is the query that extracts just the duration in minutes):   $..duration_in_traffic.text

hex color: (whatever you want)

Nothing for prefix or suffix

Hopefully this helps!

I'm having a hard time getting this to work, can anyone help me out please?

I have created an API Key and I am able to get mileage and drive time to show on a webpage.

   "destination_addresses" : [ "555 Somewhere, Columbus, OH 43215, USA" ],
   "origin_addresses" : [ "555 No Where, Columbus, OH 43220, USA" ],
   "rows" : [
         "elements" : [
               "distance" : {
                  "text" : "11.3 mi",
                  "value" : 18250
               "duration" : {
                  "text" : "15 mins",
                  "value" : 911
               "status" : "OK"
   "status" : "OK"

  I then open Shield.IO webpage and select 


space for label,

 url from maps.googleapis.com 

change next tab to $..duration_in_traffic.text (i have even tried $.data.subdata)


insert a space for prefix and suffix.  (I even deleted space and allowed prefix and suffix)

I am doing this under Dyamic portion on Shield.IO (almost bottom of the webpage).  When I click generate, I get a black box to the left and a green box to the right. 

 I then try Rob's final URL and placed my information into that.  After hacking it up, I get a pink custom badge and no information. It almost seems like the webpage isn't being pulled up.

My Final URL after replacing info




So who do I have to PayPal money to for beer to do this for me if I give you all the information you need to make this happen?

Thank you so much.  I got the time to work!!!!

One last question if I can bother you.  My tile says Custom Badge, do you know how I can get rid of that?

Very much interested in generating a driving distance tile.

I have been trying, but with no luck. I know I'm missing something but can't piece it together as of yet.

Here is what I have done.

1) Went to the Google Maps APIs (https://developers.google.com/maps/documentation/distance-matrix/) and selected the Duration and Distance link which took me to a getting started page. 

2) Selected "Activate the API and get an API key" link on the right of the page.

3) Selected "GET A KEY" which gave me an API key.

4) Took their example request [https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins=Washington,DC&destinations=New+York+City,NY&key=Your API KEY

    and substituted the origins and destinations with my origin and destination using + symbol for the spaces.

5) I then put that URL in my browser and it generated a web page like Ryan's showing disance.text to be 16 miles and a duration of 28 minutes...so I assumed that it was working.

6) I then took that URL and 

       a) Put &uri= in front

       b) Substituted %3A%2F%2F for :// and %2F for all the / , %3D for all the = signs and %3C for the commas.

7)  On the shield.io website near the bottom I put:

     Type:  json

     label:  nothing

     uri:  The Google API URL with the replacements I made in step 5 above

    $..duration_in_traffic.text  in the $.data.subdata

    hex color: dragged the color:blue icon to this field.

    Left prefix and suffix  blank

8) Then I selected Generate

8) Unike Ryan all I get is a badge with a grey "custom badge" on the left and a green "inaccessible" on the right.

Can anyone see where I might be going wrong here?

Much appreciated!



When I done it the way you did, it was missing departure_time=now , do you have that in the html code? I would take Rob's code and put your addresses  in it.  

Also, you don't need to do the replacements before Shields.io, it will replace all the characters for you.

I was able to remove the Custom Badge.  If anyone is curious, 


Nice solution. I'm tempted to code a mini map solution with the travel time in the corner. Maybe use chrome headless or something.


Thank you Ryan...I got it working using Rob's code. I think I changed something in the conversion of the address getting rid of the spaces and commas with % signs.

Hi to all,

For some reason, I get a JSON answer :

         "elements" : [
               "distance" : {
                  "text" : "29.5 km",
                  "value" : 29533
               "duration" : {
                  "text" : "35 mins",
                  "value" : 2106
               "duration_in_traffic" : {
                  "text" : "33 mins",
                  "value" : 1950
               "status" : "OK"
   "status" : "OK"

But I can only get "duration" to work "duration_in_traffic" is blank ... any ideas ?

Make sure you don't have an extra underscore in departure_time.  I had the same problem and removing that second underscore solved it


I saw this and on a lark was able to make it work. I have one for each of the drive times to my two favorite boat ramps. I opened Rob's link in a separate window, edited for colors and address, then added my own API key and it worked. Awesome job. Thanks for the heavy lifting Rob. 

Hi all, been reading up on this and I'm able to generate a link for specific addresses and I know how to get a link to show traffic distance and time, but I have absolutely no idea how to get this to show up in AT or why I'd need an API:


Can someone please help me out with a walkthrough? I'd appreciate it

I managed to get this to work once, then it failed every time... I think they have changed the quota system for the API and it wont work without setting up a billing account... Can anyone confirm this to be correct please?

Yes, I think you're right. There is still a free tier, though, so as long as you're not generating a ton of traffic, you should be OK.

Yes, Google now requires a billing account to use these APIs.  They then give you the first $200/month of use for free--if I remember the math right, that is about 20,000 API calls per month.  My concern was the that my number of API calls was going to exceed the free time.  I was doing 5 minute traffic updates for three locations on two devices (51,840 calls in a 30 day month).  I just moved the traffic times to a different panel that I call from my main panel so that the traffic times API only gets called a few times a day.


This is an interesting observation, and idea. Does anyone know of a way to generate dynamic traffic map images, like weather radar images, but for traffic. You could create a panel with a traffic map and multiple common destination travel times. Hmmmm

I use Kevin1's ideal below to show a Bing traffic map.  I can't get a Google traffic map to show up as a media tile, but the Bing one will.  You will need a Bing API and to be careful on your refresh rate--they don't require a billing account but will cut you off when you exceed your limit.

The Bing solution above will let you get the zoom settings you want.  This Google solution will work for general traffic (from another traffic post):

1. Google "San Francisco Traffic" (or your city)

2. Right click on the image in the Google search and "copy image location"

3. Make media location, "this media is image or gif" and set the update rate to 60 (or whatever)


I saw this thread and thought it was a great idea but like Adam, mine worked once and then I looked at my daily quota and my 1 of 1 requests was used.  So I added this to my ActionPiXX program and now I get drive time tiles once again.  
I really like Todd's idea of the maps, but the way Google does things is insane, so the map feature may take some work.
I hope to have a beta release of ActionPiXX posted in the near future to get some feedback.  http://jayhobo.com/actionpixx
The Drive Time Tiles only update every 15 minutes.
Google being Google the "Drive Time Tiles" are "experimental" since Google changes things almost daily and they could break again at anytime.



if you go to google.com and search for "chicago traffic" it will show an image that you can right click, open in a new tab.  You can use this URL as an ActionTiles media tile.  There doesn't seem to be a way to adjust the position and zoom of the map.  It just shows the whole city or state that you searched for.  

There is also a Bing map that needs an API KEYbut I haven't been using it, don't know if the data is good any more...




You can use Waze also.

1) go to https://www.waze.com/livemap

2) Enter where you are going

3) Enter your origin address

4) This will display a map with all the driving times for all the different road possibilities.

5) Click the "Share Routes" button and copy that URL



The link will display traffic accidents, road construction, etc.

I'm not sure if you can get it to *not* show waze users on the map.


I love this Waze livemap...but how do I incorporate it into ActionTiles?

Straight URL does not work for me. Experimented by putting into urlencoder.org without success.


I like this solution. I wish we had a little more control over the formatting and size, but its still pretty cool. Here are 2 badges I made for the next rocket launch since I am in that business and this is useful to me. 



thanks for the tip!

If you struggle encoding your url properly : https://www.urlencoder.org/

This service makes it easy to integrate almost anything with an API... 

Mine broke, and I am not sure how to fix it.    invalid query parameter: url

Yeah, mine broke too. I removed "&prefix=&suffix=" and it works again.