+11
Answered: Discussion Open

Help me to add a "valid url" in order to see Google Traffic as an Refresh still image?

Joshua 7 years ago in Media Tiles / Weather & Traffic updated by Hala A 5 years ago 15

So this is the URL i want to add so that it posts STILLS of the traffic nearby every X amount of seconds.  

https://www.google.com.ec/maps/@-2.1674177,-79.8821124,5140m/data=!3m1!1e3!5m1!1e1?hl=es

Answers

+1
Answer

Well, this is a bit hacky, but gets the job done for now in the way I need.


I use a local batch file to generate a screenshot of the desired google maps page using phantomjs

 http://phantomjs.org/screen-capture.html


phantomjs traffic.js


Here is an example of a traffic.js file used by phantomjs:


var page = require('webpage').create();
//viewportSize being the actual size of the headless browser
page.viewportSize = { width: 1024, height: 1024 };
//the clipRect is the portion of the page you are taking a screenshot of
page.clipRect = { top: 200, left: 200, width: 800, height: 800 };
//the rest of the code is the same as the previous example
page.open('https://www.google.com/maps/@33.0062365,-96.8176253,11.31z/data=!5m1!1e1', function() {
  page.render('traffic_raw.png');
  phantom.exit();
});


Using ImageMagick tools, my batch file creates a watermark for the current time to apply to the traffic image, so I know when the map data was captured:


convert -size 300x50 xc:grey30 -font Arial -pointsize 20 -gravity center -draw "fill grey70  text 0,0  '%time%'" stamp_fgnd.png
convert -size 300x50 xc:black -font Arial -pointsize 20 -gravity center -draw "fill white  text  1,1  '%time%'  text  0,0  '%time%' fill black  text -1,-1 '%time%'" +matte stamp_mask.png
composite -compose CopyOpacity  stamp_mask.png  stamp_fgnd.png  stamp.png
mogrify -trim +repage stamp.png
composite -gravity north -geometry +0+10 stamp.png  traffic_raw.png traffic.png



Then I have this file uploaded to a website (I just grabbed a free site at 000webhost.com) using curl.

curl -T c:\data\traffic.png ftp://username:password@files.000webhost.com/public_html/


I'll have the batch file run the above every 30 min.


and tell the tile to refresh every 15 min since the timing of the AT sync might not match with the timing of the batch file.


Here's the full screen version of the traffic tile (my AT is 3x3 and is a decent thumbnail of the full image):


...





PINNED
Answered: Discussion Open

Amazing and innovative solution, Mike!


Gives us some optimism we can offer this as a Feature someday.


Thanks for sharing,

...Terry.

+2
PINNED

How about something as simple as this:

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

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

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


Seems to work for me...


You can even be more specific to Google "traffic 1001 Potrero Ave, San Francisco, CA 94110" if you worked there...

I'd be interested in this as well. Surely there is some google api that allow this?

+1
Answer

Well, this is a bit hacky, but gets the job done for now in the way I need.


I use a local batch file to generate a screenshot of the desired google maps page using phantomjs

 http://phantomjs.org/screen-capture.html


phantomjs traffic.js


Here is an example of a traffic.js file used by phantomjs:


var page = require('webpage').create();
//viewportSize being the actual size of the headless browser
page.viewportSize = { width: 1024, height: 1024 };
//the clipRect is the portion of the page you are taking a screenshot of
page.clipRect = { top: 200, left: 200, width: 800, height: 800 };
//the rest of the code is the same as the previous example
page.open('https://www.google.com/maps/@33.0062365,-96.8176253,11.31z/data=!5m1!1e1', function() {
  page.render('traffic_raw.png');
  phantom.exit();
});


Using ImageMagick tools, my batch file creates a watermark for the current time to apply to the traffic image, so I know when the map data was captured:


convert -size 300x50 xc:grey30 -font Arial -pointsize 20 -gravity center -draw "fill grey70  text 0,0  '%time%'" stamp_fgnd.png
convert -size 300x50 xc:black -font Arial -pointsize 20 -gravity center -draw "fill white  text  1,1  '%time%'  text  0,0  '%time%' fill black  text -1,-1 '%time%'" +matte stamp_mask.png
composite -compose CopyOpacity  stamp_mask.png  stamp_fgnd.png  stamp.png
mogrify -trim +repage stamp.png
composite -gravity north -geometry +0+10 stamp.png  traffic_raw.png traffic.png



Then I have this file uploaded to a website (I just grabbed a free site at 000webhost.com) using curl.

curl -T c:\data\traffic.png ftp://username:password@files.000webhost.com/public_html/


I'll have the batch file run the above every 30 min.


and tell the tile to refresh every 15 min since the timing of the AT sync might not match with the timing of the batch file.


Here's the full screen version of the traffic tile (my AT is 3x3 and is a decent thumbnail of the full image):


...





PINNED
Answered: Discussion Open

Amazing and innovative solution, Mike!


Gives us some optimism we can offer this as a Feature someday.


Thanks for sharing,

...Terry.

+2
PINNED

How about something as simple as this:

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

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

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


Seems to work for me...


You can even be more specific to Google "traffic 1001 Potrero Ave, San Francisco, CA 94110" if you worked there...

For some reason, this doesn't work for me. I've tried it in Chrome as well as Firefox. Any thoughts?

What city and state are you in?

+1

I figured it out. If I copy the image location, not the webpage URL, it works like a charm. Thanks!

I'm glad it worked! Does USAFA refer to the academy? GO AIR FORCE!

Yup, it sure does. That was my callsign when I soloed. Makes for a good username!

Thank you for your service! I have family in the Class of 98.

This worked for me when copying the 'Image Address' as opposed to the link address.

The only downside is that i want a bit more control over the level of zoom, as when i search for my town it's zoomed a bit too far in and doesn't quite show all of the routes out of the town.

Does this still work? I've tried copying the image address and adding it as a media tile, set to refresh every 10 minutes. It shows the correct image, but it never refreshes :(

What is the exact URL you're using, please? 

What browser?

+1

Tried using @moblsu's suggestion on Chrome.

1. Googled the location

2. Right clicked on the map and copied image address

3. Added Media URL set to refresh every 6000 seconds:

https://www.google.com/maps/vt/data=tveVf8pd5kFXpYLL3qv-586wYROwEgFbs11C4flerlBIS5imPf_qLY7aD6qnS-Qe6st2JBZyy2CVa6gAYGV6MfIv5fxIGLOrzsS4IfR7A0zmiQWxozhPbp0phFtKhJl3PIWsG0v9qgHmMATNpqNvWQqJgUTvLSIqCxcgddHxSw1LoxWlmXXKmwrPQtWOafgZrUkVCNX8kI_uF3aWEl5UKj1KPg,PTUHCoBfR2ykfzgNFhzTyaUTdMrX7-ezqydLHpkMqelLOM7ZVbvGG6NbyrVPydlVkU-vF824EKW_qlxvUUg8gpAsA5Ska9B4S3LX...

4. It adds fine but doesn't refresh after that. Would like to see traffic along route when I open this panel in the morning.


Help would be appreciated!