How to create a time-lapse traffic with Browserless

August 3, 2022

contents

Have you ever wondered what the traffic in your city looks like throughout the day? Maybe you're looking for the most jammed streets or less utilized streets, and that's a feature already built-in with google maps as explained here.

However, that shows typical trends of traffic... what happens if you want to see how bad traffic got on a particular day, such as a football game, a concert, or a holiday - you can use browserless for that!

Here's the result you'll get from running this puppeteer code with browserless remote chrome sessions, pointing at San Francisco for 24 hours.

Here's the code you can copy and paste to your NodeJS project and make it work instantly. Remember to append your API key to the browserWDEndpoint!

To get your Browserless API key, you need to create a Browserless account here.


//require libraries
const puppeteer = require('puppeteer-core');
const fs = require('fs');

//define latitude, longitude and zoom of your location
var lat=37.7649518;
var lon=-122.4464677;
var zoom=13.13;

//create folder if it doesn't exist
var dir = './traffic';
if (!fs.existsSync(dir)){
    fs.mkdirSync(dir);
}

//how many screenshots we want
const numberOfScreenshots=100;

//how often we want the screenshot to be taken in milliseconds
const frequencyInMs=10000;

//loop where screenshots are taken
for (var i=0;i {
    //connect to browserless cloud browsers
    const browser = await puppeteer.connect({ 
        browserWSEndpoint: 'wss://chrome.browserless.io?token='+process.env['TOKEN']
    });
    //create new tab and set the viewport
    const page = await browser.newPage();
    await page.setViewport({ width: 1920, height: 1080 });
    
    //navigate to google maps      
  await page.goto(`https://www.google.com/maps/@${lat},${lon},${zoom}z/data=!5m1!1e1`, { waitUntil: 'networkidle0'});    

  //delete unwanted icons in the UI and set the date in the footer for tracking easily.
  await page.evaluate(()=>{
    const date = new Date;
    var node=document.querySelector('#LFaNsb').innerHTML= date;
    var node=document.querySelector('.J43RCf');
    node.parentNode.removeChild(node);
    var node1=document.querySelector('.LfygZc');
    node1.parentNode.removeChild(node1);
    var node2=document.querySelector('.F63Kk');
    node2.parentNode.removeChild(node2);
    var node3=document.querySelector('#omnibox');
    node3.parentNode.removeChild(node3);
    var node3=document.querySelector('.app-vertical-widget-holder');
    node3.parentNode.removeChild(node3);
    var node4=document.querySelector('#gb')
    node4.parentNode.removeChild(node4);
    var node5=document.querySelector('#runway-expand-button');
    node5.parentNode.removeChild(node5);
    var node6=document.querySelector('#assistive-chips');
    node6.parentNode.removeChild(node6);
  });
  //take the screenshot and save it with the date concatenated
  await page.screenshot({ path: './traffic/traffic_'+new Date+'.png' });

  //close the browser
  await browser.close();
  })().catch((err) => {
    //of any errors occur, print them.
    console.log(`ERROR: ${err.message}`);
  }); }, i*frequencyInMs); //
}

You can run this code 100% on the cloud if you don't want to have it running 24/7 on your computer, by using a browser-based IDE such as Replit. You can fork this traffic timelapse demo from replit. If you don't know how to get started with Replit, contact Browserless.

After you have all the image sequences, just join them all with any video editor and you've got yourself a timelapse of traffic on google maps.

P.S. If you like this “how to create a timelapse traffic” tutorial, you can check out how our clients use Browserless for different use cases:

Share this article

How to create a time-lapse traffic with Browserless

Ready to try the benefits of Browserless?