Chris' Better Jam Cams

No one likes to get stuck in a traffic jam.  Much less one that could be avoided.  Even more annoying is the 'jam out of the blue' on what is usually a clear piece of road...

Short of pulling an 'Italian Job 1969' (original and best!!) and driving through shopping arcades, up on roofs, across weirs etc what can you do to avoid such jams?

Luckily we can spot traffic issues for ourselves from the comfort of our own homes using the excellent UK Highways Agency / BBC Jam Cameras site.

That said however, there is just one slight annoyance with this site; namely you can only view one camera at a time.

This is where Chris' Jam Cams page comes in!  OH YES!


An all in one dashboard showing all the Jam Cams you are interested in, plus a frame detailing traffic conditions in your area.  Whats more, you too can follow what I've done here and create your very own Jam Cams page.  Dead easy.

So how is it done? It is really quite easy.  What follows looks a minefield but it isn't all that complex.  I promise.

The golden rule here is SIMPLICITY: I want to be able to do all of this using just one html file.  Whilst I am positive that there are cleverer ways of achieving the same results,  I'm purely after something dead simple to write, understand and maintain as and when required (in other words, please don't laugh at my html code!!)

Grab Your Copy
First step, grab a copy of Chris' Jam Cams from Github:

Chris' Jam Cams - Original.  Should work in any browser on any platform 
Chris' Jam Cams Mobile - Includes a couple of layout tweaks to make it easier for mobile viewing

Cut and paste a copy into a text editor of your choice.  (Notepad on Windows is just fine).

Traffic Images
First step is to define your images. Dead simple, just make sure each image has a unique id.  For example, I've used the motorway and junction number.  You need one img statement per traffic image.

img border="0" height="261" width="320" src="#" id="M20J7" alt="M20 J7"

Now for the picture handling.  Load up the BBC Travel News page and select the area you are interested in.

Next, click on the "Traffic Jam Cameras" button, just above the map.

Lastly find a motorway junction camera that you are interested in right-click the link and choose "Copy Link Location" (firefox) or "Copy Shortcut" (IE).  Open a text editor (eg notepad) and paste the text in.

You should have a piece of text that looks something like this:

http://www.bbc.co.uk/travelnews/kent/trafficcameras/highwaysagency
/16588?epoch=1234567890&enabled=1&asset=16588.jpg

From this you are only interested in two pieces of information:

1. The region (kent in the example above)
2. The camera asset number (16588 in the example above)

Enter the region and camera asset number into the 'document.getElementById' statement towards the bottom of the Jam Cams html page (I suggest copying, pasting and editing the example given in the github file):

script type="text/javascript"
var d1 = new Date(); 
var eptime = parseInt(d1.getTime()/1000);

document.getElementById('M20J7').src="http://www.bbc.co.uk/travelnews
/kent/trafficcameras/highwaysagency/16588/image?epoch="+eptime+
"&enabled=1&cachebuster="+eptime;

document.write("Page Last Refreshed: "+d1);
/script

Lastly update the img id to match the id you chose earlier ('M20J7' in the example above).
Save your Jam Cams page and test.

Traffic News
The travel news is pulled from BBC mobile site using a simple iframe:

iframe height=750 width=600 align=right src="http://www.bbc.co.uk
/mobile/travelnews/search/process/page/1/filter/road/q/kent"

Replace 'Kent' in the src tag as required.  (Suggest using the Traffic Images region found above)

Jam Cams Mobile
As mentioned above, this file is a slightly tweaked version of Chris Jam Cams.htm that hopefully renders slightly better on smaller screens.  Update with your own Jam Cams in the same as the non-mobile version:


Job done.  I usually save the htm file on my desktop.

Jam Cam images copyright? OK:

Highways Agency Traffic Cameras Standard Terms and Conditions
Reproduction for Private Use
The traffic images are Crown Copyright protected and may be reproduced free of charge in any format or medium as long as it is for non-commercial research, private study - subject to the material being reproduced accurately and not used in a misleading context.

No problems there then.

As I say, The golden rule here is SIMPLICITY: all done using just one html file.

Enjoy.

- Chris