Plotting World Wide WebCams on Google Maps

18:26.06 - Tuesday 29th April 2008   (Link to This Entry)

Google Maps provides a rather wonderful API that allows you to add details to a Google Maps window of your own design. There have been all kinds of things implemented using the MashUp approach, and since I was home all day I decided to look at doing something I have wanted to do for white a while - a world map of webcams using the familiar Google Maps interface.

Initially I set up a simple full-screen Google Map DIV. My first problem was to get around the lack of "height:100%;" functionality in FireFox (and possibly IE - I didn't check) so I knocked together some Window Size Detection code and resized the DIV using onLoad and onResize. Throw in the relevent Google code to produce a map, and you're off.

For my example cams, I chose a couple of simple refreshing images in Scotland, a WMV stream from London and an mJPEG cam from some Sushi restaurant in Tokyo. Each presented their own problems: JPEG cams need to be refreshed using JavaScript; WMV streams use and EMBED command; mJPEG has to be actively stopped to avoid run-on and so on. My first approach was to simply produce working code for each of these types.

With these working I took a break from technical stuff to add some header and footer bars. I initially decided I would have the centre map in an IFRAME or something similar, but changed my mind because, well, IFRAMEs. Yuck. I added a 50-high DIV to the top and a 30-high one to the bottom and just resized my map to WindowHeight-80 - nice and simple.

Lastly - for today at least - I moved the whole thing over to a database to allow me to add and delete WebCams more easily. I've gone for a two table approach for this:

• camlist
  This table contains the list of cameras and everything specific to them: Title; Url; Width; Height; Lattitude; Longtitude and so on. Everything that is unique to a camera goes in this table, and it provides the basic listing of available WebCams.
• camtype
  This uses a lookup from the camlist table to provide standard information on how to handle this particular type of webcam. If it's an mJPEG stream for example, there's no function to start the updates, but there's one to stop it once the window is closed. These use a template approach with [VAR] fields to mark the position of data which is inserted when required.

Lastly I use a cross-table SQL query to produce a list of all active WebCams in the database with tailored usage information tagged on the end. Everything I need, from the title of the webcam to the HTML containing the unique URLs and JavaScript, comes out in one big fat array, making it easier - with a few conditions - to produce a list of Google Maps API calls that will draw my camera markers.

Today's effort can be seen at:

http://webcam.bl0g.co.uk/

It's the front page only for the time being, but I will allow people to suggest webcams for including on the map at some point.

Wednesday 1st May, 11:41pm
I've added new WebCam types for Flash and Quicktime, plus added a few new cameras (mostly places where there's a bit of daylight, heh)